createClient doesn't fully initialize in local testing

[smaldd14]

Bug report

• [ x] I confirm this is a bug with Supabase, not with my own application.
• [ x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

When running supabase locally with docker containers, the client seems to not fully initialize, leading to "hanging" of the application where no calls to supabase.auth supabase.from('users').select('count').limit(1); return at all.

I initialize the client like this:

import { createClient, SupabaseClient } from '@supabase/supabase-js'
import config from './config'

// Create a single supabase client for interacting with your database
const supabase: SupabaseClient = createClient(config.supabase.url, config.supabase.apiKey);

export default supabase;

then use it in other components, for example, like this:

function Landing() {
   useEffect(() => {
      try {

            const { data, error } = await supabase
                .from('users')
                .select('*')
                .eq('id', supabaseUser.id)
                .single();
          console.log('back from supabase call'); // THIS NEVER GETS HIT
            if (error) throw error;
        
            const extendedUser: ExtendedUser = {
                ...supabaseUser,
                ...data,
            };
}, []);

  return (
    <div>
      Landing page
    </div>
  )
}

However, calls to supabase.auth.onAuthStateChange... DOES work. For example, I have this in one of my components:

const { data: { subscription } } = auth.onAuthStateChange(async (event, session) => {
      console.log('event:', event); // THIS DOES GET HIT
...
});

As a workaround, I put this line immediately after I create the supabase client:

import { createClient, SupabaseClient } from '@supabase/supabase-js'
import config from './config'

// Create a single supabase client for interacting with your database
const supabase: SupabaseClient = createClient(config.supabase.url, config.supabase.apiKey);
await supabase.from('users').select('count').limit(1);
export default supabase;

Then, all of the calls seems to work UNTIL the web page goes stale.

Has anyone seen this before? It seems to be something with the client lazy initialization?

It does not look like it is happening in my production environment, only running with the docker containers locally

To Reproduce

take minimal supabase project, docker containers and set up auth and query the db

Expected behavior

Should not need to make initial supabase db call for calls to work.

System information

• OS: macOS
• Browser any
• Version of supabase-js: 2.45.0
• Version of Node.js: 21.2.0

[smaldd14]

Ah I figured out the issue, and I'm leaving this here for any other supabase noobs.

After reading further into Listen for auth events you cannot use await nore call other supabase functions within auth.onAuthStateChange.

This is exactly what I was doing as I wanted to fetch some additional user data from the users table when auth state changes.

I am using their workaround? by putting the calls to other supabase functions in a setTimeout like this:

setTimeout(async () => {
        setIsLoading(true);
        try {
          if (session?.user) {
            await fetchUserData(session.user);
            if (window.location.pathname === '/login') {
              navigate('/');
            }
          } else {
            setUser(null);
            if (!['/login', '/subscribe'].includes(window.location.pathname)) {
              navigate('/login');
            }
          }
        } catch (error) {
          console.error('Error in auth state change:', error);
        } finally {
          setIsLoading(false);
        }
      }, 0)