Architecture/design problem rotating JWT tokens with browser router.

[mr-moon]

The docs ref: https://reactrouter.com/en/main/route/loader

Specifically: '..next matching branch of routes will be called in parallel'.

Having that said I have problem designing a system, that is capable of automatically rotating JWT tokens upon/prior getting the 401 from the server.

Let's assume I have a application structure similar to this:

/  
/customer   //<- uses GET /api/customer/info
/customer/company //<- uses GET /api/customer/company/info

When user directly lands to /customer/company the React router executes both of the GET requests in parallel. Which is where I'd like to get some control over the request parallelism.

Problem
JWT access token expires over time, thus it needs a rotation, which itself is an async effect.

Consider this code:

createBrowserRouter([
  {
    path: '/',
    loader: async () => {
      return (await isAuthenticated()) ? {} : redirect('/auth');
    },
    children: [
      {
        path: 'customer',
        loader: async () => ({ customer: await getCustomerData() }),
        children: [
          {
            path: 'company',
            loader: async () => ({ company: await getCompanyData() }),
          },
        ],
      },
    ],
  },
]);

All 3 loaders isAuthenticated(), getCustomerData(), getCompanyData() fire in parallel. The get..() methods will return 401 if JWT is expired, but ky's beforeRetry hook allows me to rotate the JWT token and pretend that initial get...() method just returned 200 (while it did 401 and then after retry with rotated access token it returned 200). So in normal conditions, even when GET requests are fired, token rotation is handled under the hood.

However the problem exists during the cold boot. When user returns with expired JWT token which indicates we need to rotate the JWT before we should execute any of real GET reqeusts.

Couple of options that I have in my mind:

1. Make a dedicated /rotate-jwt route, so that I can make isAuthenticated() method synchronous and that route will revalidate on every navigation.
2. Or somehow make the root loader blocking the child loaders, which I did not find a way how to do.
3. Or completely get rid of loader functions.

Option 1) is possible, but nothing close to what I'd like to design.

So the real question is it possible to go for option 2)? If not, how do you guys rotate JWT tokens unnoticeably for the user?

Thanks