Sign-out no longer triggers consistently on all open tabs to end session

[martyngroberts]

It is observed that if a user has two authenticated sessions running on separate tabs for an app integrated with Angular SDK (3.2.0), logging out will not consistently end the session correctly on the other tab. On some occasions the other tab will not detect the logout and on other occasions the page reload happens quicker than the first tab completing logout and access token is actually renewed, keeping session alive in both tabs.

This has been verified using the following;

• sample app for SPA (using OIDC PKCE flow)
• Angular SDK 3.2.0
• "okta hosted login" flow to hosted signin widget
• "offline_access" and refresh token rotation in place

Steps to recreate

1. Open browser tab and sign into demo app (via redirect to hosted signin page and back)
2. Open second tab and sign into demo app (picks up existing session)
3. Click logout.

Repeat this process multiple times. One of three outcomes happens inconsistently, suggesting race condition;

1. Both apps are logged out and return to default public route
2. One app logs out however other app does not refresh (however interaction shows that app is signed out)
3. One app logs out however refresh on other tab happened sooner and actually refreshes the access token

Note that this behaviour has also been observed by another team who implemented the SDK, here is a video

[oleksandrpravosudko-okta]

Thanks for the repro steps and a demo @martyngroberts.

There is a chance this issue has a same root cause as #47 as cross-tab storage sync is enabled by token service which does not currently start during login redirect.

Internal Ref: OKTA-412078

[martyngroberts]

hi @oleksandrpravosudko-okta i can confirm the issue still exists in v3.2.1

I have recorded the behaviour in this video - https://www.loom.com/share/4e1f8e6e538b4503ad61343e90b318bc

The key thing to observe is that whilst a initiate logout on one tab, you will see the first tab carries out a refresh of the token and hence both tabs remain in authenticated state. This can be replicated with fresh session in incognito.

[tyfrth]

FWIW I cannot reproduce this behavior in 3.2.1 nor 3.2.2 using neither the okta-hosted-login nor custom-login samples: https://github.com/okta/samples-js-angular All tokens in local storage are cleared on logout across all tabs. Chrome on Mac.

[oleksandrpravosudko-okta]

I was able to reproduce this issue with 3.2.2 - thanks for catching this @martyngroberts!

A permanent fix for this issue will likely require a breaking change in our SDK(s) - we intend to put it into next major release.
For now it is recommended to use a custom onAuthRequired function as a workaround:

async function onAuthRequired(oktaAuth, _) {
  window.location.assign('/login');
}

UPD: snippet changed to navigate to custom login page instead of doing sign out