Fix guides / App freezes or goes blank after login (Supabase onAuthStateChange)

Your app freezes or shows a blank screen right after login

Login succeeds, then the app hangs on a loading spinner, shows a blank screen, or every later Supabase request seems to wait forever. Refreshing sometimes helps, sometimes not. A very common cause in AI-generated code is how the auth listener is written.

The usual cause: async work inside the auth listener

AI builders often write something like this:

supabase.auth.onAuthStateChange(async (event, session) => {
  const { data } = await supabase.from('profiles').select('*').eq('id', session.user.id).single();
  setProfile(data);
});

Supabase's documentation warns against awaiting other Supabase calls inside this callback. The callback runs while the client holds an internal lock, and the inner call waits for that same lock, so it can deadlock and every following request hangs.

The fix

Keep the callback synchronous and fast. Store the session, and do the extra work outside it:

supabase.auth.onAuthStateChange((event, session) => {
  setSession(session);
  if (session) {
    // run Supabase calls after the callback returns
    setTimeout(() => { loadProfile(session.user.id); }, 0);
  }
});

Or keep the listener minimal and load the profile in a useEffect that depends on the session.

Other causes of a post-login blank screen

• More than one Supabase client. Creating a client inside a component makes a new one on every render. Create it once in a shared file (for example src/lib/supabase.ts) and import it everywhere.
• A route guard that runs too early. If your guard sends users to /login whenever user is null, it fires before the session finishes loading on a page refresh, causing loops. Track a loading state and only redirect once loading is false.
• The listener is never cleaned up. In React, unsubscribe on unmount: const { data } = supabase.auth.onAuthStateChange(...); return () => data.subscription.unsubscribe();
• A crash while rendering profile data. Check the console for errors like Cannot read properties of null, for example when the profile row does not exist yet.

Last updated 2026-10-19.