Does onAuthStateChange trigger in all open tabs wh...
# help
s
Does onAuthStateChange trigger in all open tabs when the user logs in via a magic link in a different tab? It seems like https://github.com/supabase/supabase/issues/2739 fixed this but it doesn't seem to work for me? This is my code-
Copy code
useEffect(() => {
    supabaseClient.auth.onAuthStateChange((event, session) => {
      if (event === "SIGNED_IN") {
        supabaseClient.auth.api
          .getUser(session.access_token)
          .then(({ user, error }) => {
            if (user) {
              setUser(user);
            }
          });
      } else if (event === "SIGNED_OUT") {
        setUser(null);
      }
    });
}, []);
n
Hello ! This thread has been automatically created from your message in a ``few seconds ago``. Pinging @User so that they see this as well! Want to unsubscribe from this thread? Right-click the thread in Discord (or use the ... menu) and select Leave Thread to unsubscribe from future updates. Want to change the title? Use the
/title
command! We have solved your problem? Click the button below to archive it.
g
Just glancing, it appears the fix is only if local storage is used. If some other method like sessions is used, it does not do anything. I personally do not know if it works or not.
n
sbr (2022-04-03)
s
I'm using supabase-auth-helpers for nextjs. Do you know how to make auth changes propagate to different tabs with that?
g
Sorry, I'm doing SvelteKit static, so no server stuff. You might ask over in the auth-helpers github thread or on supabase discussions if no one responds here.
s
Got it. Thanks @User !
b
State isn’t between tabs either
But a quick Google search gave me this
s
s
Hey @User , thanks for your reply. What do you mean by "state isn't between tabs"?
I thought that the
useUser
hook would update when the user signs out in a different tab?
Since
auth-helpers
wraps the application component in a
<UserProvider...>
in _app.js
Hi @User , thanks for sharing the link. How would React Query update the user in all the tabs? Would I have to user React Query to periodically poll the
/api/auth/user
endpoint in all the pages to get the updated user object?
s
yes, you set auto fetching of the API, if you open the same in 2 different tabs one i shared, you can check the session is maintained you need to use usestate, use effect to run the dependency
b
what
you can just listen to localstorage events
s
But what would I be storing in localstorage @User? In the link you shared, the input value is being stored in localstorage
s
yes, my bad. i misread about the Auth Request. its using local storage only
s
@User can you please explain in a bit more detail?
b
supabase stores in localstorage to keep it clientside accessible
storage is an event when localstorage changes
useLocalStorage just makes your state store in localstorage and as state
a hook
that would make syncing possible
s
But the auth info (access & refresh token) is stored in a cookie for me and not in local storage
b
you can still use the onauthstatechange and link to a state
s
Yes, but onAuthStateChange isn't triggering in my app when it's in a different tab
For example-
If I have an
onAuthStateChange
listener in page "a" but signout in page "b" in a different tab, then
onAuthStateChange
isn't triggered in page "a"