This is a repository reproducing the Automatic login of opened tabs (#1055) issue with react-oidc.
Update the .env
file to match your OIDC server configuration.
VITE_IDP_URL=http://localhost:9000/realms/main
VITE_IDP_CLIENT=repro-vite-react-oidc-issue
Start the Vite development server with npm run dev
.
Access the application on local port 3000.
- Open a browser tab and navigate to
localhost:3000
(will call this tab the « main » tab) - Open a second browser tab and navigate to
localhost:3000
(will call this tab the « other » tab) - From the main tab, click on the sign in button and perform the authentication process until success
- The main tab will be redirected to the auth success callback route, which will notify of a login through localStorage
- The other tab will receive the notification and perform a silent login
- The user initials will not be available as
oidcUser
is falsy
Uncomment lines 18 to 22 of the auth-menu component and perform the exact same reproducing steps from the previous issue.
Notice that in the other tab, there seems to be a race condition between Vite service worker and Oidc service worker:
VM510 client:324 [vite] connected.
VM520 client:324 [vite] connected.
VM550 @axa-fr_react-oidc.js:380 TypeError: Failed to fetch
at ue (VM563 @axa-fr_react-oidc.js:379:32)
at Object.c [as startKeepAliveServiceWorker] (VM563 @axa-fr_react-oidc.js:441:37)
at VM563 @axa-fr_react-oidc.js:826:129
VM563 @axa-fr_react-oidc.js:380 TypeError: Failed to fetch
at ue (VM563 @axa-fr_react-oidc.js:379:32)
at Object.c [as startKeepAliveServiceWorker] (VM563 @axa-fr_react-oidc.js:441:37)
at VM563 @axa-fr_react-oidc.js:826:129
VM598 client:229 [vite] connecting...
VM600 client:229 [vite] connecting...
VM598 client:324 [vite] connected.
VM600 client:324 [vite] connected.
VM630 @axa-fr_react-oidc.js:888 Error: state not valid (expected: SE2nDbn2sgzv7E7W, received: 6Hqml2BxtSn6pQF8)
at VM630 @axa-fr_react-oidc.js:859:13
at async t (VM643 @axa-fr_react-oidc.js:1109:17)
(anonymous) @ VM630 @axa-fr_react-oidc.js:888
await in (anonymous) (async)
t @ VM630 @axa-fr_react-oidc.js:1109
loginCallbackAsync @ VM630 @axa-fr_react-oidc.js:1112
silentLoginCallbackAsync @ VM630 @axa-fr_react-oidc.js:1023
silentLoginCallbackAsync @ VM630 @axa-fr_react-oidc.js:1276
(anonymous) @ VM630 @axa-fr_react-oidc.js:1971
(anonymous) @ VM630 @axa-fr_react-oidc.js:1972
commitHookEffectListMount @ VM614 react-dom_client.js:16904
commitPassiveMountOnFiber @ VM614 react-dom_client.js:18152
commitPassiveMountEffects_complete @ VM614 react-dom_client.js:18125
commitPassiveMountEffects_begin @ VM614 react-dom_client.js:18115
commitPassiveMountEffects @ VM614 react-dom_client.js:18105
flushPassiveEffectsImpl @ VM614 react-dom_client.js:19486
flushPassiveEffects @ VM614 react-dom_client.js:19443
(anonymous) @ VM614 react-dom_client.js:19324
workLoop @ VM614 react-dom_client.js:197
flushWork @ VM614 react-dom_client.js:176
performWorkUntilDeadline @ VM614 react-dom_client.js:384
Show 18 more frames
Show less
VM630 @axa-fr_react-oidc.js:1025 Error: state not valid (expected: SE2nDbn2sgzv7E7W, received: 6Hqml2BxtSn6pQF8)
at VM630 @axa-fr_react-oidc.js:859:13
at async t (VM643 @axa-fr_react-oidc.js:1109:17)
silentLoginCallbackAsync @ VM630 @axa-fr_react-oidc.js:1025
await in silentLoginCallbackAsync (async)
silentLoginCallbackAsync @ VM630 @axa-fr_react-oidc.js:1276
(anonymous) @ VM630 @axa-fr_react-oidc.js:1971
(anonymous) @ VM630 @axa-fr_react-oidc.js:1972
commitHookEffectListMount @ VM614 react-dom_client.js:16904
invokePassiveEffectMountInDEV @ VM614 react-dom_client.js:18320
invokeEffectsInDev @ VM614 react-dom_client.js:19697
commitDoubleInvokeEffectsInDEV @ VM614 react-dom_client.js:19682
flushPassiveEffectsImpl @ VM614 react-dom_client.js:19499
flushPassiveEffects @ VM614 react-dom_client.js:19443
(anonymous) @ VM614 react-dom_client.js:19324
workLoop @ VM614 react-dom_client.js:197
flushWork @ VM614 react-dom_client.js:176
performWorkUntilDeadline @ VM614 react-dom_client.js:384
Show 14 more frames
Show less
VM630 @axa-fr_react-oidc.js:1025 Error: state not valid (expected: SE2nDbn2sgzv7E7W, received: 6Hqml2BxtSn6pQF8)
at VM630 @axa-fr_react-oidc.js:859:13
at async t (VM643 @axa-fr_react-oidc.js:1109:17)