How to handle user logout when using useUser hook with useSWR?

[mimoid-prog]

const useUser = () => {
  const { data: user, mutate, error } = useSWR("/api/auth");

  const loading = !user && !error ? true : false;

  return {
    loading,
    user,
    mutate,
  };
};

I use cookies and sessions for user authentication. When the cookie expires and user makes a request for some data it returns error because user is no longer logged in.
What is the practice for handling this scenario with the pattern of useUser hook combined with useSWR?
Where should I handle this error and where should I use mutate() to update the user info and where should I do a navigate to the home page when it happens?
I know this is not fully SWR related question but I really have no idea how to deal with it.
I would really appreciate some tips for using useUser hook and useSWR.

[clemclx]

Hey !

I'm facing the same issue while handling authentication with SWR, did you find any solutions ?
Furthermore, i'm unable to clear SWR state when logging out a user, how are we supposed tu reset it ?

Have a good day

Edit : after reflection, i'm thinking that maybe for authentication part it's not the best idea to use SWR..

[ErnestBrandi]

Hi, using SWR for authentication is fine. To logout your user just call mutate('api/co-user', null).

[shuding]

After logging out, you can either use a mutation to set user to null or just trigger a revalidation, so the API will be refetched and return the logged out state.

[javascripter]

After logging out, you can either use a mutation to set user to null or just trigger a revalidation, so the API will be refetched and return the logged out state.

I noticed if we set mutate(null) on logout, it causes loading flag to become true until we actually get 401/403 from api, thus causing ui jank. Is there any way we can prevent loading to become true after mutate(null)?
https://swr.vercel.app/examples/auth

const { data: user, mutate, error } =  useSWR('/user')
const loading = user === undefined && error === undefined
const logout = () => {
  mutate(null)
}
// loading becomes true after logout() for a moment

[clemclx]

thanks for your replies, i was mutating on logout, but with undefined. And we can't remutate to undefined since the first argument of mutate() is optional (and so mutate with undefined does nothing). It's working fine when mutating to null

After logging out, you can either use a mutation to set user to null or just trigger a revalidation, so the API will be refetched and return the logged out state.

I noticed if we set mutate(null) on logout, it causes loading flag to become true until we actually get 401/403 from api, thus causing ui jank. Is there any way we can prevent loading to become true after mutate(null)?
https://swr.vercel.app/examples/auth

const { data: user, mutate, error } =  useSWR('/user')
const loading = user === undefined && error === undefined
const logout = () => {
  mutate(null)
}
// loading becomes true after logout() for a moment

I think that your problem is due to the way you call mutate, you should pass false as second argument to avoid revalidation

[ErnestBrandi]

You don't set stuff to undefined (except for variable declaration) as this is more an absence of value.

[ErnestBrandi]

Hi, there are multiple solutions to your problem. For instance you could use a custom fetcher for handling your server response :

const fetcher = async url => {
  const res = await fetch(url)
  // here you explicitly return a custom http code from your server / api
  // (401 means Unauthorized as "non authenticated")
  if (res.status === 401) { 
    return null
  }
  return res.json()
} 

that way your user var is set to null. Then you can either redirect the user to another page or display a warning message.

[codinginflow]

Thank you for posting that. What do you think about this setup? The API returns 401 if the session cookie is missing. I rethrow all other errors to move them into uswSWR's error property.

export function useAuthenticatedUser() {
    const { data, error, isLoading, mutate } = useSWR("user",
        async () => {
            try {
                return await UserApi.getAuthenticatedUser();
            } catch (error) {
                if (error instanceof UnauthorizedError) { // 401
                    return null;
                } else {
                    throw error;
                }
            }
        }
    );

    return {
        user: data,
        userLoading: isLoading,
        userLoadingError: error,
        mutateUser: mutate,
    }
}

[abiranjan]

When user logs out, you can use the followng method to clear the cache from the SWR Map, instead of mutating every endpoint. Since it's not just login, but also there will be other endpoints which might be user specific and we need to clear those cache as well.

  import { useSWRConfig } from 'swr'

  const { cache } = useSWRConfig()
  
  const logout = (): void => {
    clearSwrCache()
  }
  
  const clearSwrCache = () => {
    let cacheKeys = cache.keys().next()
    while (!cacheKeys.done) {
      cache.delete(cacheKeys.value)
      cacheKeys = cache.keys().next()
    }
  }

[Smajery]

Thank you so much, it works for me!