As I am working on implementing a proper auth flow into a react web app, I am presented with different patterns of how to use access and refresh tokens.

I am considering the following two patterns:

1. Creating some sort of middleware to the fetch API:
   • This middleware runs before every request to the backend and checks whether the access token is still valid or not.
   • If it is invalid, it first calls the auth server to fetch a new access (and refresh) token.
2. Creating an interval which is independent from all other logic to keep the access token alive.
   • Say if the access token is valid for 5 minutes, the interval will run every 5 minutes to fetch a new access token
     • I would also make sure it only runs every five minutes, if the user is still active , so that the application left open without any user interaction for a long time will automatically log out
   • Any API call simply uses the currently active access token and does not need to worry about checking the token first or anything

The second approach seems much much easier and cleaner to implement for me, since it does not add any complexity to fetching data and is completely independent/seperate to the app otherwise.

I've been having a hard time to research this question though tbh. I'm not sure if there is some security issue I'm missing with that approach.

So my questions are:

• Is there any security issue with fetching a new access token in an interval from the clients side?
• Is there a common practise on how SPA apps (like the react app I mentioned) handle access tokens?
  • If yes, what is that common practise?
• If there is no security issue, are there other cons of the second approach that I am missing out on?

Thank you for your answers in advance!

CodePudding user response：

I think the answer depends, if you always do it every X minutes, and you have many active clients, it might create more load on the backend, compared do doing it on a need basis. Perhaps all clients are not so active all the time?

One thing to look out for is to make sure you don't trigger multiple requests at the same time to request new refresh tokens. If you get a race condition here, then you might be logged out (if you use one-time refresh tokens)

Also it is worth considering to use the BFF pattern, do watch this video

Using the BFF pattern to secure SPA and Blazor Applications - Dominick Baier - NDC Oslo 2021