JWT Refresh token and Multi-Page Application

Question

I am going to implement JWT authentication for several independent services. There will be auth.example.com and service1.example.com, service2.example.com etc.

My assumptions:

• JWT can be kept in cookie for ".example.com"
• JWT expire time should be small (like 15 mins) because there is no reliable way to logout user with JWT token (revoke token).
• Refresh tokens should be used to reissue JWT tokens
• Refresh token cookies should be accessible only by auth.example.com for security reasons and because https://www.rfc-editor.org/rfc/rfc6749#section-1.5 says "Unlike access tokens, refresh tokens are intended for use only with authorization servers and are never sent to resource servers."

Next, if I have a service - multi page application (i.e. not SPA), where some URLs are called "traditional" way, not via Ajax and render HTML based on some server side logic, which, of course, include checking of user authorization.

then, say, there will be an action service1.example.com/user/showpage

if (user.logged_in) {
  render_some_html(get_some_data(user.login))
}
else {
  render_anonimous_uses_page()
}

Problem is:

If site user close all site tabs and, then after hour or so, go directly to page /user/showpage (or maybe he suspend laptop and wake it up in an hour and go to that page).

What if by that time JWT token will expire. Then to refresh it by Refresh token we need to make Ajax call to auth.example.com (because Refresh token is stored only in auth.example.com cookie) and this is just unaccessible in server side rendering (that pseudocode that I posted above, it's server side, and it's just impossible to make client ajax call in the middle of execution of server code. it's just not applicable here). This way user will be considered logged out on this stage.

Redirect could be one solution.. but what if site should work for anonymous out users too, and anyway looking for something better.

This problem not exists for SPA application, because before every Ajax call to internal API, it can check JWT and make call to refresh JWT token.

And question is: is this true that JWT in general should not (cannot) be used in Multi-Page (traditional) applications because of this issue? or there is good way to workaround this? or this is not a problem at all (users don't close tabs too often, or they expect site to log them out or redirect etc)?

Brume

Struggling to find a way to use JWT with refresh token logic like you described too... You ever found solution? – Chandelle

No. We just decided then we'll always use SPA apps only. – Brume

you could server-render the logged-out (anonymous) state, then if the js in the browser detects that the user is actually logged in but has an outdated token, then you do a client-side redirect. – Patrimony

Answer 1

I've implemented Token-Based Authentication in a Multi-page project using ServiceWorkers.

With a ServiceWorker you will be able to create a fetch event handler that will be called for every request your frontend sends. In this handler you can redirect, send requests, add Authentication headers and store tokens. This fetch handler will execute at every request, after the ServiceWorker has been registered. Even on page load.

I have it configured like this.
At every request the handler will:

• Check if the access token is valid (checking expiration).
• If token is invalid: Call /auth/refresh.
• Add access token to Authentication header.
• Send the updated request to the backend.

I also have some extra checks for when I have to login and logout.
At login requests the handler will:

• Call the login URL, from the ServiceWorker.
• Get the access token from the login response.
• Return the login response to the frontend.

At logout requests the handler will:

• Remove the access token from browser storage.
• Send the updated request to the backend.

This is my ServiceWorker for a Astro project.

Musteline