SingOut/SignIn issue with multiple tabs when a page with SecureRoute is open

[atadhani]

We have SingOut/SignIn issue with Okta version "@okta/okta-auth-js": "^5.0.0",
"@okta/okta-react": "^6.0.0", when multiple tabs are open and out of them if there are more the one page is part of #SecureRoute

I am submitting a bug report for above okta version

#Current behavior
Attached video explains behavior (two issues been described here both seems related)
I have used sample app from this rep :https://github.com/okta/okta-react (I noticed the similar behavoir in our application as well)
Please review video before going through steps.
OktaMultiplaTabIssue.zip
Steps

1. Open four tabs (Two with home page path - regular Route, Two with http://localhost:3000/messages - secureroute)
2. Logout from one of the home page path.
3. Navigate to other three tabs (Logout doesn't happen when you try first time) (ISSUE NO 1)
4. Go back to one of the tab with home page path.
5. Again click logout.
6. This time logout happens and the other tab with Home page path shows Login button (which is fine)
7. There are two tabs with SecureRoute path (i.e. http://localhost:3000/messages) will have Indetity Login Dialog page (It is fine as well)
8. Hit login icon from one of the identity Login page dialong it logins to application fine.
9. Hit login from other tab indetity Login Page -> It gives 404 page (ISSUE NO 2)

#Expected behavior

1. ISSUE NO 1 - From Above steps at step 2 : Signout should happen when you click on login first time
2. ISSUE NO 2 - From another tab it should route to correct page as Login has already been done from another tab

Environment
Attached video is testing with sample app in this repo : https://github.com/okta/okta-react

[kellengreen]

I can reproduce this on a single tab.

Using this repo - https://github.com/kellengreen/okta

• Visit http://localhost:3000/.
• You will be redirected to an OKTA login page.
• Login using [email protected] as both the username and password.
• You will be redirected to http://localhost:3000/welcome.
• Click the Error link.
• Click Logout.
• Nothing happens and the promise doesn't return (see dev tools).

Bonus 🐛

• Visit http://localhost:3000/login?code=foobar directly.
• Click the Welcome link.
• <SecureRoute> returns a blank page.

[atadhani]

Thanks @kellengreen yeah both seems related.

[kellengreen]

Tested using @okta/okta-auth-js:5.2.3. The results are the same.

[denysoblohin-okta]

Thanks for submitting this issue. Internal ref: OKTA-414847

[shuowu]

Updates:

With some investigation, the cause is that the SecureRoute calls oktaAuth.signInWithRedirect by default when the authState.isAuthenticated is false, but there may be chance the auto signIn is called when Okta SSO session is not fully killed, which makes the app to login again when it should not.

We may need to release the fix in the next major version, since it most probably will involve some breaking changes.

For now, please provide onAuthRequired callback option to replace the default signInWithRedirect logic as the loop breaker. Like:

onAuthRequired: () => {
  history.push('/login');
};

[kellengreen]

I'm not seeing any changes using the onAuthRequired prop.

[sureshk-vh]

We are also facing this issue and the above solution didn't work for us. We are using the login page which provided by the OKTA and not CustomLoginComponent. So what should be the resolution here?

[atadhani]

Following work around worked for me with some known issue. It might not exact as is but you need to play around it little bit.

onAuthRequired: () => {
// When user is trying to get in first time
if (window.location.pathname === "/") {
oktaAuth.signInWithRedirect();
} else {
history.push(window.location.pathname);
}
};

[sureshk-vh]

The above solution is not working, can you please elaborate on onAuthRequired and how it works? The issue is happening when we open the application in multiple tabs after login and then we are trying logout from one tab but it is not logged out from other tabs, the application is still logged in after reload.

[atadhani]

You need to logout twice to logout completely. It is still known issue until we get fix.

[shuowu]

@sureshk-vh The cause of this issue is that the cross tabs sync mechanism triggers the default signIn behaivour (redirect to Okta and signIn) before the Okta SSO session is fully killed. Before a proper fix, which will happen in the next major version, we do suggest to use the onAuthRequired callback to prevent the default signIn behaivour from happening.

In the onAuthRequired callback, you can render a custom login page / modal to ask for user interaction to login again, so in that way the signIn process can only be triggered via user interaction (a real click).

[shuowu]

Update:

With okta-auth-js v5.6, you are able to provide granular control over onAuthRequired customization logic based on the previousAuthState from the oktaAuth instance.

Note: This is still a workaround, fix will come in the next major version release.

onAuthRequired: (oktaAuth) => {
  const prevAuthState = oktaAuth.authStateManager.getPreviousAuthState();
  
  // when the app is just initialized
  if (!prevAuthState) {
   // redirect to okta hosted login page or a custom login page
   // code here ...
   return;
  } else {
   // authState.isAuthenticated becomes false during token auto renew or logout
   // show a modal dialog to request user interaction or redirect to a custom login page, but it should NOT redirect to the okta hosted login page (where the issue is introduced) 
   // code here ....
   return;
  }
};

[aronsaylor]

@shuowu This work around is working well for logging out. How does one know if the isAuthenticated becomes false from a logout vs a token refresh? Also, has the real fix been implemented and if so what release version?