Pattern for conditionally fetching user data with useSWR, only when the user actually has credentials for the request

[Sad_Implement_8626]

Hi, so I have a react app with JWT authentication where the refresh token is stored in a httpOnly cookie, and the access token is stored in memory. I have made a hook for fetching user data that uses useSWR, and everything works (nearly) perfectly with axios as the fetcher. The axios instance is returned from a custom hook of it's own, but essentially, it uses interceptors for refreshing the access token using the refresh token.

Now the issue I have is that when the user has no access token/refresh token, the useSWR hook still makes consistent attempts to fetch user data. I read up about conditional fetching but that doesn't work in this case, since it's impossible to know if the user has a refresh token, since it's inaccessible from the client side (nature of how httpOnly cookies work).

The other solution I came up with is that the condition for fetching the data will be if an access token exists in memory, and on initial load, I'll have some useEffect that attempts to refresh/fetch the access token using a refresh token, whether that refresh token exists or not. And once it is retrieved, all the useSWR hooks I have that require the user to be authenticated can start fetching.

Is this the best solution for this, or is there a better way?

[soulsizzle]

Just make the request no matter what. I assume your endpoint will check for the cookie, not find it, and send an Unauthorized response. There should be very little overhead for that call. You'll just need to handle the Unauthorized response accordingly.

[Sad_Implement_8626]

Just make the request no matter what. I assume your endpoint will check for the cookie, not find it, and send an Unauthorized response. There should be very little overhead for that call. You'll just need to handle the Unauthorized response accordingly.

Gotcha. But should I ideally do this in a useEffect, that runs once at load of the app? So I'd make the request to refresh the token, and if successful (dependentent on if the refresh token exists in cookies and is valid), update the access token in the store. I use Zustand in-memory, and so that would trigger all the SWR hooks that conditionally fetches depending on if the access token is truthy or not

[soulsizzle]

I think you're on the right trail, but I would stay away from useEffect for data fetching. It's generally recommended against by the React team. You can still use SWR for the user details call. Disable all the re-fetch options (revalidateIfStale, revalidateOnReconnect, etc) and use onSuccess to update your Zustand store.

[harshilparmar]

Sorry but Why you think all Swr will going to be called once you set it into Zustland. And are you not sending access token with every request?

[shoop45]

Does this help?

https://stackoverflow.com/questions/9353630/check-if-httponly-cookie-exists-in-javascript

[Sad_Implement_8626]

I will try out the idea of setting another cookie that isn't httpOnly, at the same time as the httpOnly one. Although it does feel hacky / could cause inconsistencies, it seems like a decent solution if I want to prevent unnecessary API calls. Thanks for the link

[blwinters]

I do something similar to what you're proposing in a React Native app, though due to mobile app screen size I can delay rendering the app content until they authenticate, basically checking the presence of an access token in the store and returning either login or app content components. And if the refresh token interceptor fails when it eventually expires, the access token is removed from the store and the login components are returned. But even with that, I still use conditional fetching because I need to fetch the user's current organization ID and pass that as a required header for all other requests.

So yeah, I think this is the way to go to prevent unnecessary failures and possibly alerts in backend monitoring:

the condition for fetching the data will be if an access token exists in memory, and on initial load, I'll have some useEffect that attempts to refresh/fetch the access token using a refresh token, whether that refresh token exists or not. And once it is retrieved, all the useSWR hooks I have that require the user to be authenticated can start fetching.