supabaseClient.auth functions don't seem to work after reload

[chriswzou]

Hi! Thanks so much for putting Supabase together—it's been a joy to be able to get an app running so quickly.

I've wrapped an AuthContext around my app because I want to be able to show certain sections of the app even when users aren't logged in. The AuthContext looks like this:

export const AuthProvider = ({ children, supabaseClient }) => {
  const [session, setSession] = useState(null);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const updateSessionState = async () => {
      let session = null;
      const response = await supabaseClient.auth.getSession()
      session = response.data.session
      setSession(session);
      if (session) {
        let user = null;
        const response = await supabaseClient.auth.getUser();
        user = response.data.user;
        setUser(user);
      } else {
        setUser(null);
      }
    };
    updateSessionState();
    const {
      data: { subscription },
    } = supabaseClient.auth.onAuthStateChange(async (_event, session) => {
      setSession(session);
      if (session) {
        let user = null;
        const response = await supabaseClient.auth.getUser();
        user = response.data.user;
        setUser(user);
      } else {
        setUser(null);
      }
    });

    return () => {
      if (subscription) {
        subscription.unsubscribe();
      }
    };
  }, [supabaseClient]);

  const logout = async () => {
    await supabaseClient.auth.signOut();
    setSession(null);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ session, user, logout, setSession }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

This works well when users first log in or sign out. However, after the page is reloaded when users are logged in, we run into a couple of issues:

• The supabaseClient.auth.getSession() function seems to fail to call in the updateSessionState call. There are no outgoing API requests, nor are there any errors. We are never able to reach the block inside the if(session) statement inside updateSessionState.
• Weirdly enough, when the auth state change listener is activated, setSession(session) does work and the session is set to what we would expect—with the correct access token from local storage
• However, in the auth state change listener call we see the same issue with supabaseClient.auth.getUser() as with supabaseClient.auth.getSession() in updateSessionState—no outgoing API calls, no errors, just stalled.

My housemate and I guess that there's probably something we're not understanding about how the code works, or how it might interact with the browser upon reload—any pointers would be so appreciated!