onAuthStateChange does not catch auth state changes across multiple windows

Bug report

Describe the bug

supabaseClient.auth.onAuthStateChange() does not work across multiple windows.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create an auth.onAuthStateChange() listener with Supabase in a react app.

const { data: authListener } = supabaseClient.auth.onAuthStateChange(
      async (event, session) => {
        console.log(`UserContext.onAuthStateChange event=${event}`);
      }
);

1. Open two separate browser windows (where you haven’t signed in yet in both windows)
2. Sign in from one of the two windows
3. The user will be signed in from that window. SIGNED_IN event will be fired in the window where you sign in, but the other browser window does not catch the SIGNED_IN event.

Expected behavior

If the auth state changes in any of the windows, the change should be broadcasted to all windows. Firebase Auth broadcasts auth state changes to all windows. The current onAuthStateChange() listener requires a developer to poll auth state if a user has multiple windows open.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows
• Browser (if applies) Chrome
• Version of supabase-js: 1.21.0

Additional context

The current onAuthStateChange() listener requires a developer to poll auth state if a user has multiple windows open. An example of this being an issue is if the user clicks on the magic link. This will sign in the user in a new window and leave the old window with a stale screen.

[i-pip]

Hi @subwaymatch, you can fix this using a window.onstorage event listener and listening for an event with key supabase.auth.token.

Here’s a code snippet:

const [session, setSession] = useState(null);

  useEffect(() => {
    setSession(supabase.auth.session());
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
    window.onstorage = (e) => {
      if (e.key === "supabase.auth.token") {
        const newSession = JSON.parse(e.newValue);
        setSession(newSession?.currentSession);
      }
    };
  }, []); 

This will work for all auth change events

@kiwicopple, I’m working on adding this into gotrue-js so that supabase.auth.onAuthStateChange takes care of this automagically

[kiwicopple]

this should now be working on the latest version of supabase-js 🎉

https://github.com/supabase/gotrue-js/pull/184