Authentication, Tanstack Query, React Router

[pearl panther]

As part of an application I'm building we're looking at using tanstack query in combination with a few other libraries to handle authentication and our API layer.

The problem is that if an authentication error is thrown in a query because a refresh token couldn't be refreshed or something similar, there's no way to catch that without making all queries throwOnError and handling the auth error from the router.

Any ideas or answers would be very much appreciated.

[sacred rune]

Easiest is probably just handling that separately from react query.

I use axios, with axios-auth-refresh to intercept 401s and perform refresh before retrying them. My axios-auth-refresh refresh method just clears the user session from the browser if it itself gets an error response. Router picks that up and navigates accordingly

React query can then call axios get/post either directly or through wrappers and any 401 is handled by axios-auth-refresh before any response even reaches react query.

[pearl panther]

What happens when there's an error refreshing the token or if the refresh token is expired?

[sacred rune]

Catch it in the refresh handler. Then do whatever it is you have to do to log your user out. Then the query errors but it doesn't matter because you probably navigated to the login screen and cleared the queryclient cache already

[pearl panther]

Awesome, I'll give it a go today. Though I'll probably use oauth4webapi and my own fetch client instead of axios

[sacred rune]

I think the key thing is having your 401s caught and refresh performed before the queryFn returns a result. If you're depending on a "refresh" query on a timer or something it will probably be difficult

[viral lagoon]

I can say I did something similar. Using ky not axios with a afterResponse hook

[pearl panther]

Awesome, I ended up including an async getToken() function that handles getting a refresh token if the currently cached token isn't fresh.

[river arch]

a guide or snapshot of how you accomplished this?

[pearl panther]

I'll upload the file that I created to make this work