TokenId invalid error when using serviceworker, keycloak in an nx react app

[Sneham14]

Issue and Steps to Reproduce

I am integrating react-oidc lib with an nx monorepo react app. Because of the complex folder structure it's not able to locate the public folder directly. Hence I copied the OidcServiceWorker.js and OidcTrustedDomains.js from example repo and it looks to be setup correctly. The service worker is able to fetch the token with keycloak but the issue is with the nounce mismatch which gives token id invalid error. The isTokenOidcValid method recieves separate nonce - formattedTokens has NONCE_SECURED_BY_SERVICE_WORKER while nonceData.once has nonce from sessionStorage value.

Steps to reproduce:-

1. Setup an integrated nx react app
2. Setup keycloak using docker
3. Integrate lib with

   configuration:export const configuration = {
    client_id: 'test',
    redirect_uri: 'http://localhost:4200/*',
    silent_redirect_uri: 'http://localhost:4200/home',
    scope: 'openid profile email api offline_access',
    authority: 'http://localhost:8080/realms/test-app'
    service_worker_relative_url: '/OidcServiceWorker.js',
    service_worker_only: false,
};

Versions

react-oidc: 6.24.1

Expected

To have NONCE_SECURED_BY_SERVICE_WORKER instead of undefined 'default' in sendMessageAsync in login.ts on a getNonce event. This flows down and in the verification fails as it defaults to sessionStore nounce value

Am I missing anything in serviceWorker configuration?

[guillaume-chervet]

Hi @Sneham14 , thank you very much for your issue. Did you upgrade react oodc version recently ? If yes ServiceWorker.js is not up to date that may do this error occur.

[Sneham14]

Thank you for the swift response on a Sunday. Yes, this is my first time working with react-oidc so using the latest. Should I use another version or update my OidcServiceWorker code somewhere? To note, even if the login fails, when I reload the app next time ServiceWorker calls seems to be working well along with the warn in console nonce not found in service worker, using session store instead. I can also see userinfo using service worker in network tab. The issue occurs only on first login where the workflow is:- Authenticating msg -> Keycloak IDP login -> Authentication success screen msg -> Authentication failed immediately(nonce issue) with the payload in the url.

Update: Works perfectly when I bumped down one level 6.23.0 works beautifully!

[guillaume-chervet]

Hi @Sneham14 , thank you for your answer. Does it work if you disable service worker mode (comment serviceworker file from configuration and unistall service worker from dev tool)? Which browser are you using? I will publish tomorrow a version with more detailled logs about nonce check.

[Sneham14]

Yes it works without serviceworker using session storage. I tried on Google Chrome and Microsoft Edge. Thanks

[guillaume-chervet]

hi @Sneham14 , i need to wait for a big PullRequest to be done before adding more logs.

Can you wait a litle bit before doing the tests with more log ?

[guillaume-chervet]

Hi @Sneham14 ,

version 7.2.2 add a lot of more log detail to try to understand your problem.

[guillaume-chervet]

Hi @Sneham14 , do you have any news about the logs?

[guillaume-chervet]

Hi @Sneham14 , do you have any news?