Persisting authentication with Access Token and Refresh token

Question

I'm trying to figure out how I should persist authentication.

Let's say that the user authenticates successfully with email and password. So then the server generates and returns two tokens:

• accesstoken (jwt expiration 15min) to be stored in browser storage
• refreshtoken (jwt expiration 7days) as secure cookie.

When storing accesstoken in local storage (or session storage), React app would simply check if it exists in the storage and proceed to render the private route. So that means if the user has an invalid/stolen accesstoken, React seems to still temporarily render the private page (albeit without private contents) until the token is checked and invalidated. Is this an odd behavior?

With this condition, should React app validate & refresh tokens each time user accesses a private route? along with anytime it fetches private data?

Currently, I have both access token and refresh token assigned to secure cookies, and the private routes in React always refreshes the tokens before rendering the private pages. This is causing a short flash of the login page before rendering any private pages as long as the user has valid cookies.

I'm trying to figure out what React is supposed to render while the token is being validated and if I should refresh the token each time it loads private routes & fetches private data.

Answer 1

First thing first: don't store your session in localstorage or sessionStorage always use a server-side cookie to store your jwt.

Secondly, on the server-side you'll probably need to use Redis if you scale to more than one node container, simply create an express middleware for this.

Thirdly, the refresh token is only supposed to be used when the access token expires, no need to spam the server to get a new access token.