oidc-client-js inconsistent query parameters during token refresh

Question

I am facing an issue in handling query parameters during token refresh in my react application. We are using oidc-client-js version 1.11.5 to manage authentication. Specifically, when the user opens the application for the first time, the redirect_uri, passed to UserManager configuration, is correctly used to redirect the navigation to the appropriate path. However, we are encountering difficulties when we need to refresh the token using the signinRedirect method. This method seems to use the redirect_uri containing old query parameters, while in our system, the application query params change during user navigation.

We have attempted to address this issue by using the signinRedirectCallback(url) method, but unfortunately, we have not achieved a positive result. The problem persists, and the token refresh process still relies on the outdated query parameters.

Following, here's an example of the implementation with the oidc-client.

authService.js

import { UserManager } from 'oidc-client';

const authServiceConfig = {
....

redirect_uri: `${window.location.origin}/callback${window.location.search || ''}`,

....
}

const userManager = new UserManager(authServiceConfig);

auth-context-provider.jsx

 useEffect(() => {    
  .....

    const timeout = setTimeout(() => {
      console.debug('***  Token update');
      setIsLoggedIn(false);
      userManager.signinRedirect();
    }, timeoutDelay);

     ....
  }, [authPayload, search]);

Answer 1

Token refresh can occur in 2 ways:

• Running a code flow with prompt=none on a hidden iframe (the traditional SPA solution)

• Or using a refresh token if one is available (though the traditional solution avoided returning a refresh token to the browser)

To resolve your issue it would be useful to capture and post here the (sanitized) requests to the authorize and token endpoints. Also say which authorization server you are using.

CODE

One way to implement the lifecycle events is as shown in my code:

• Call signInSilent on the main window

• Call signInSilentCallback on the iframe

You can run that code sample locally by the way, or even configure it to point to your own authorization server, as something to compare against.

DOC

Here is a blog post of mine on the traditional SPA token renewal solution also. The big issue with it these days is a reliance on the authorization server's SSO cookie. This cookie is usually third party and hence dropped by most current browsers.