fix(oidc): separate state, nonce and codeVerifier for each tab (release)

[krzempekk]

This resolves #1356. Idea of the solution is similar to #1379.
This is a work-in-progress PR. I created this to share general idea for the solution while still working on details/tests.

Before this PR

state, nonce and codeVerifier were just single values. If two login flows were initiated from different tabs, one value overwritten the other, resulting in errors.

After this PR

state, nonce and codeVerifier are maps with tab id as key. This means that each tab that initiates login has its value persisted in service worker and won't be overwritten.

Tab IDs are generated using crypto.randomUUID function and saved to sessionStorage. Each tab sends its own ID to service worker as part of init, setNonce, getNonce, setState, getState, setCodeVerifier and getCodeVerifier messages.

For values that are hidden by service worker (nonce and code verifier, state is not hidden), dummy values now contain tab id as well, for example: NONCE_SECURED_BY_OIDC_SERVICE_WORKER_default_tabid. This allows to properly replace them in handleFetch logic.

[guillaume-chervet]

thank you @krzempekk Awesome ! I test it tomorrow morning !

[guillaume-chervet]

Hi @krzempekk ,

Thank you very much for your PR it is very interresting.

It can offer a new mode with the same behavior than using session Storage only.
The initial problem with 2 logins pages at the same time does not seem to work with Dudende Server. It seems to be a Dudende server security.

I Think you may add a way to configure if it use add tabid or not at the end of NONCE_SECURED_BY_OIDC_SERVICE_WORKER_default_tabid (for exemple a new property in configuration service_worker_tab_mode)
The aim is too keep the default behavior, one login for all tab and to choose with the new behavior one login per tab.

[krzempekk]

Hi @guillaume-chervet!
Thank you very much for the review!
I have also noticed that two simultaneous login flows doesn't work with Dudende server, but as you have said, it seems to be server-side issue (400 error code is returned). However, for this server it is the same with or without this fix, so behavior is preserved.
I have tested this with Okta IDP and it seems to be working as expected with multiple logins. I would personally opt for not parametrizing it, since it only improves behavior or leaves it as-is (like with Dudende server). Please let me know whether you agree with that approach. If you have strong preference for applying this only if some parameter is set in configuration, I will update PR with relevant logic. In my opinion applying this only if parameter is set would overcomplicate the logic.

[guillaume-chervet]

hi @krzempekk I smooth switch via a configuration is necessary because it is a breacking change behavior. Default AXA behavior is one login for all pages. If you want we can try to merge your PR like that, I can publish this version as an alpha and add a a property to make it switchable in few days ?

I have some code check to to before.

[krzempekk]

Hi @guillaume-chervet!
I will work on adding option to configure it tomorrow and then we can merge this PR :D

[krzempekk]

Hi @guillaume-chervet!
I have added allowMultiTabLogin flag, which should be set in OidcTrustedDomains.js file. If set to true, behavior introduced in this PR will take effect - tab ID will be appended to tokens hidden by SW.
If set to false or not set, behavior will stay the same as previously (one login for all tabs).
I have added example of this config to react-oidc-demo and explanation to README file. Please let me know whether we need something else before merging this PR.

[guillaume-chervet]

Thank you so much @krzempekk . Sorry i did not have time to test it today.
I am will try to do it a quicker as i can.

[guillaume-chervet]

It may have a bug, demo default behaviors seems like allowMultiTabLogin=true

[krzempekk]

Not sure what do you mean 🤔. If trustedDomain is an array, then allowMultiTabLogin will be false. It will be true only if trustedDomain is an object with allowMultiTabLogin explicitly set to true. Analogically to showAccessToken.
I have checked and it looks like it actually defaults to false. Did you got other behavior?

[guillaume-chervet]

Hi @krzempekk , Thank you very much your code. I love this functionality !
the code it ok for me, but it seem the default behoavior not to work fine. Do you have possibility to fix it?
When I run the react demo in local. default front page look like in multitab with no configuration.

An update to oidc and react reamde.md would be awesome but I can do it in another PR.

[krzempekk]

Hi @guillaume-chervet! I have updated readme for oidc and react client with examples of new configuration.
Could you elaborate why default front page looks like the multitab? It seems to be working fine for me

[guillaume-chervet]

Sorry @krzempekk I was bad at testing :)

Thank you so much @krzempekk I merge your very nice PullRequest.