Best practice handling auth state

[mightym]

Sorry guys to bother you again :-/ I enrolled in React Query - Essentials. Was really a great help to get familiar with react-query. I'm currently trying to move all of my redux stuff I used in the past over to react-query. So far so good. I basically got rid of 99% of redux. Really awesome. Thanks a lot for that great library. I just have one best practice question on how to handle auth states. What I did in the past is after a user logged in successfully is stored in my user redux state eg isAuthenticated. Or I checked when my app is loaded if there is a token in my local storage, used that token to call an api endpoint -> on success I set isAuthenticated. And based on that I was eg doing my routing like this:

const ProtectedRoute = (props) => {
  if (!props.allowed) {
    return <Redirect to="/login" />;
  }
  return (
    <Route {...props} />
  );
};

const mapStateToProps = (state, ownProps) => ({
  allowed: state.auth. isAuthenticated,
});

I wonder if eg for that example I should just use something like const userQuery = useQuery('users', getUser);
And based on if that query is a success or if it returned me a user object, do my redirects? Or am I thinking in the wrong direction here?

Thanks in advance!

[sergiodxa]

I usually have an API endpoint returning the current logged in user (based on a cookie or header), then I create a query to fetch that endpoint and get the user, if there is no user I redirect to login, if there is user I continue.

Another option, is that you can keep your auth outside RQ and use context to store the logged in user, then read from that place.

[mightym]

Ah great, thanks @sergiodxa . So thats what I'm currently doing by using useQuery('users', getUser); and then check if there is a user. I just wonder if its a good idea to use this in multiple places. Or shall I just use it one time initially and everywhere else use queryClient.getQueryData to check if there is already a user? So I would prevent have to much api calls on my user endpoint, correct?

[TkDodo]

useQuery is still the recommended approach because it creates a subscription. If you want to avoid calls to the backend, set staleTime accordingly.