getSession fails with 401, but can't sign out?

I've got a hook which gets the user session, and then calls a db function to get their profile info like so

  useEffect(() => {
    async function getProfileData() {
      const res = await supabase.auth.getSession();
      const { data, error } = await supabase
        .from("profiles")
        .select("*")
        .eq("id", res.data.session.user.id);

      if (error) {
        await supabase.auth.signOut();
        return console.error(error);
      }

      setProfile({ ...data[0], ...res.data.session.user });
      setLoading(false);
    }

    getProfileData();
  }, []);


The problem I have here is that getSession is failing due to a 401, and erroring with {message: 'JWT expired'}

What I am then doing is trying to sign the user out so they are forced to sign back in, however I can't call the signOut method because it fails with a 401 due to the JWT being expired?

The above is in my ProfileFetcher component though, which is loaded after I do some auth logic in my WithAuth component

export function WithAuth({ children, className, ...rest }) {
  const [session, setSession] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loader() {
      try {
        const { data } = await supabase.auth.getSession();
        setSession(data.session);
        supabase.auth.onAuthStateChange((_event, session) => {
          setSession(session);
        });
        setLoading(false);
      } catch (e) {
        console.error("loader", e);
      }
    }
    loader();
  }, []);

  if (loading) return null;

  if (session) {
    return <ProfileFetcher>{children}</ProfileFetcher>;
  }

  if (!session) return <Login />;
}
Was this page helpful?