Handle logout

[maxfahl]

I'm trying to implement authentication with urql and React, but I can't seem to grasp on what the flow would look like.

As per the documentation:

const getAuth = async ({ authState }) => {
  if (!authState) {
    const token = localStorage.getItem('token');
    const refreshToken = localStorage.getItem('refreshToken');
    if (token && refreshToken) {
      return { token, refreshToken };
    }
    return null;
  }
  logout();
  return null;
}

When logout is called, I will remove the token from localStorage, but how will I notify the app that this has happened, and handle a redirect to the login page once again?

[JoviDeCroock]

Hey,

In my opinion there a re a few ways to handle this, one being to rely on your internal redirecting. This means clearing your token from your storage and calling window.location.reload() another option is to use your router/created history to route the user back to / or your own equivalent of that (this could be hard when your router isn't a global).

const getAuth = async ({ authState }) => {
  if (!authState) {
    const token = localStorage.getItem('token');
    const refreshToken = localStorage.getItem('refreshToken');
    if (token && refreshToken) {
      return { token, refreshToken };
    }
    return null;
  }
  logout();
  Router.push('/');
  return null;
}

[maxfahl]

Dude, thanks for our fast reply!

Looks like a good solution. Allthough, it seems a bit much to include react router for this to work though, since my app doesn't depend on it otherwise.

[JoviDeCroock]

How are you routing then? Since you're talking about redirects? You can reuse that solution as well. window.location.reload() should also be sufficient

[maxfahl]

I was just hoping to use a tenary from a local state, showing one component or the other. I think I will figure it out. Thanks for your help and your time!