fix(oidc): add allowMultiTabLogin flag for configuring multi tab logi…

…n behaviour (release)
AxaFrance · Jul 12, 2024 · 6f99747 · 6f99747
1 parent 8245239
commit 6f99747
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 10 deletions.
diff --git a/examples/react-oidc-demo/README.md b/examples/react-oidc-demo/README.md
@@ -71,6 +71,9 @@ const trustedDomains = {
 // scenarios which require it. For example, to send it via websocket connection.
 trustedDomains.config_show_access_token = { domains : ["https://demo.duendesoftware.com"], showAccessToken: true };
 
+// Setting allowMultiTabLogin to true will enable storing login-specific parameters (state, nonce, code verifier)
+// separately for each tab. This will prevent errors when logins are initiated from multiple tabs.
+trustedDomains.config_multi_tab_login = { domains : ["https://demo.duendesoftware.com"], allowMultiTabLogin: true };
 ```
 
 ## Run The Demo

diff --git a/examples/react-oidc-demo/public/OidcTrustedDomains.js b/examples/react-oidc-demo/public/OidcTrustedDomains.js
diff --git a/examples/react-oidc-demo/src/MultiAuth.tsx b/examples/react-oidc-demo/src/MultiAuth.tsx
@@ -47,6 +47,7 @@ const MultiAuth = ({ configurationName, handleConfigurationChange }) => {;
                         <option value="config_show_access_token">config_show_access_token</option>
                         <option value="config_separate_oidc_access_token_domains">config_separate_oidc_access_token_domains</option>
                         <option value="config_with_dpop">config_with_dpop</option>
+                        <option value="config_multi_tab_login">config_multi_tab_login</option>
                     </select>
                     {!isAuthenticated && <button type="button" className="btn btn-primary" onClick={() => login()}>Login</button>}
                     {isAuthenticatedDefault && <button type="button" className="btn btn-primary" onClick={() => login(undefined, { 'test:token_request': 'test', youhou: 'youhou', grant_type: 'tenant', tenantId: '1234' }, true)}>Silent Login</button>}
@@ -140,7 +141,14 @@ export const MultiAuthContainer = () => {
                 digestAlgorithm: { name: "SHA-256" },
                 jwtHeaderAlgorithm: "RS256",
             },*/
-        }
+        },
+        config_multi_tab_login: {
+            ...configurationIdentityServer,
+            redirect_uri: callBack,
+            silent_redirect_uri,
+            scope: 'openid profile email api offline_access',
+            client_id: 'interactive.public.short',
+        },
     };
     const handleConfigurationChange = (event) => {
         const configurationName = event.target.value;

diff --git a/packages/oidc-client-service-worker/src/OidcServiceWorker.ts b/packages/oidc-client-service-worker/src/OidcServiceWorker.ts
@@ -335,6 +335,9 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 		const convertAllRequestsToCorsExceptNavigate = Array.isArray(trustedDomain)
 			? false
 			: trustedDomain.convertAllRequestsToCorsExceptNavigate;
+		const allowMultiTabLogin = Array.isArray(trustedDomain)
+			? false
+			: trustedDomain.allowMultiTabLogin;
 		database[configurationName] = {
 			tokens: null,
 			state: {},
@@ -353,13 +356,16 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 			demonstratingProofOfPossessionJwkJson: null,
 			demonstratingProofOfPossessionConfiguration: null,
 			demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent: false,
+			allowMultiTabLogin: allowMultiTabLogin ?? false
 		};
 		currentDatabase = database[configurationName];
 
 		if (!trustedDomains[configurationName]) {
 			trustedDomains[configurationName] = [];
 		}
 	}
+
+	const tabId = currentDatabase.allowMultiTabLogin ? data.tabId : 'default';
 
 	switch (data.type) {
 		case 'clear':
@@ -415,16 +421,16 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 					...currentDatabase.tokens,
 				};
 				if (currentDatabase.hideAccessToken) {
-					tokens.access_token = TOKEN.ACCESS_TOKEN + '_' + configurationName + '_' + data.tabId;
+					tokens.access_token = TOKEN.ACCESS_TOKEN + '_' + configurationName + '_' + tabId;
 				}
 				if (tokens.refresh_token) {
-					tokens.refresh_token = TOKEN.REFRESH_TOKEN + '_' + configurationName + '_' + data.tabId;
+					tokens.refresh_token = TOKEN.REFRESH_TOKEN + '_' + configurationName + '_' + tabId;
 				}
 				if (tokens?.idTokenPayload?.nonce &&
 					currentDatabase.nonce != null
 				) {
 					tokens.idTokenPayload.nonce =
-						TOKEN.NONCE_TOKEN + '_' + configurationName + '_' + data.tabId;
+						TOKEN.NONCE_TOKEN + '_' + configurationName + '_' + tabId;
 				}
 				port.postMessage({
 					tokens,
@@ -451,17 +457,17 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 			return;
 		}
 		case 'setState': {
-			currentDatabase.state[data.tabId] = data.data.state;
+			currentDatabase.state[tabId] = data.data.state;
 			port.postMessage({ configurationName });
 			return;
 		}
 		case 'getState': {
-			const state = currentDatabase.state[data.tabId];
+			const state = currentDatabase.state[tabId];
 			port.postMessage({ configurationName, state });
 			return;
 		}
 		case 'setCodeVerifier': {
-			currentDatabase.codeVerifier[data.tabId] = data.data.codeVerifier;
+			currentDatabase.codeVerifier[tabId] = data.data.codeVerifier;
 			port.postMessage({ configurationName });
 			return;
 		}
@@ -470,7 +476,7 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 				configurationName,
 				codeVerifier:
 					currentDatabase.codeVerifier != null
-						? TOKEN.CODE_VERIFIER + '_' + configurationName + '_' + data.tabId
+						? TOKEN.CODE_VERIFIER + '_' + configurationName + '_' + tabId
 						: null,
 			});
 			return;
@@ -488,13 +494,13 @@ const handleMessage = async (event: ExtendableMessageEvent) => {
 		case 'setNonce': {
 			const nonce = data.data.nonce;
 			if (nonce) {
-				currentDatabase.nonce[data.tabId] = nonce;
+				currentDatabase.nonce[tabId] = nonce;
 			}
 			port.postMessage({ configurationName });
 			return;
 		}
 		case 'getNonce': {
-			const keyNonce = TOKEN.NONCE_TOKEN + '_' + configurationName + '_' + data.tabId;
+			const keyNonce = TOKEN.NONCE_TOKEN + '_' + configurationName + '_' + tabId
 			const nonce = currentDatabase.nonce ? keyNonce : null;
 			port.postMessage({ configurationName, nonce });
 			return;

diff --git a/packages/oidc-client-service-worker/src/__tests__/oidcConfig.spec.ts b/packages/oidc-client-service-worker/src/__tests__/oidcConfig.spec.ts
@@ -16,6 +16,7 @@ const oidcConfigDefaults = {
   demonstratingProofOfPossessionNonce: null,
   demonstratingProofOfPossessionJwkJson: null,
   demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent: false,
+  allowMultiTabLogin: true
 }
 
 const oidcServerConfigDefault = {

diff --git a/packages/oidc-client-service-worker/src/types.ts b/packages/oidc-client-service-worker/src/types.ts
@@ -8,6 +8,7 @@ export type DomainDetails = {
     demonstratingProofOfPossession?:boolean;
     demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent?:boolean;
     demonstratingProofOfPossessionConfiguration?: DemonstratingProofOfPossessionConfiguration;
+    allowMultiTabLogin?: boolean;
 }
 
 export interface DemonstratingProofOfPossessionConfiguration {
@@ -87,6 +88,7 @@ export type OidcConfig = {
     demonstratingProofOfPossessionNonce: string | null;
     demonstratingProofOfPossessionJwkJson: string | null;
     demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent: boolean;
+    allowMultiTabLogin: boolean;
 }
 
 export type IdTokenPayload = {

diff --git a/packages/oidc-client-service-worker/src/utils/__tests__/domains.spec.ts b/packages/oidc-client-service-worker/src/utils/__tests__/domains.spec.ts
@@ -55,6 +55,7 @@ describe('domains', () => {
 					demonstratingProofOfPossessionJwkJson: null,
 					demonstratingProofOfPossessionConfiguration: null,
 					demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent: false,
+					allowMultiTabLogin: true
 				},
 			};
 		});

diff --git a/packages/oidc-client-service-worker/src/utils/__tests__/testHelper.ts b/packages/oidc-client-service-worker/src/utils/__tests__/testHelper.ts
@@ -130,6 +130,7 @@ class OidcConfigBuilder {
     demonstratingProofOfPossessionJwkJson: null,
     demonstratingProofOfPossessionConfiguration: null,
     demonstratingProofOfPossessionOnlyWhenDpopHeaderPresent: false,
+    allowMultiTabLogin: true
   };
 
   public withTestingDefault(): OidcConfigBuilder {