Single sign out with oidc-client-ts in angular app

Question

I am trying to implement oidc-client-ts in my angular app. I have 2 applications:

login app
other app with authorized access

Almost everything works fine:

login (code flow)
SSO
silent renew (iframe)

But I have problem with single sign out when app is open in more than one tab in browser. When I log out in one, other tab stays logged in.

Session monitor perform silent renew after auth cookies are removed, but user manager in app should invoke some callback so app can react to error in silent refresh:

http://localhost:8081/token/silent/?error=login_required&error_description=login%20required&state=XYZ

silent-renew.html:

<script src="oidc-client-ts.js"></script>
<script>
  var mgr = new oidc.UserManager({ response_mode: 'query' });
  mgr.signinSilentCallback().catch(error => {
    console.error(error);
  });
</script>

template contains session iframe

...
<iframe width="0" height="0" src="<auth server>" style="visibility: hidden; position: fixed; left: -1000px; top: 0px;"></iframe>

I expect that some event is raised when silent refresh fails, but there is none console log:

    this.userManager.events.addSilentRenewError(err => {
      console.log('SILENT RENEW ERROR');
    });

    this.userManager.events.addUserSessionChanged(() => {
      console.log('SESSION CHANGED');
    });

    this.userManager.events.addUserSignedOut(() => {
      console.log('SIGNED OUT');
    });

score 0 · Answer 1 · answered Feb 13 '23 at 19:23

The usual way to handle multi-tab logout in a browser based app these days, is to use the storage API. Update a boolean flag in local storage after login and logout. All tabs then register for storage events like this, and can perform a logout action:

window.onstorage = (e: StorageEvent) => {

  if (e.key === 'loggedout' && e.newValue === 'true') {
    location.href = '/loggedout';
  }
};

The session monitor technique of running an authorization server iframe in your app, which uses the SSO cookie to poll the logged in status is unreliable these days. Browsers will drop the cookie since it is third party.

Single sign out with oidc-client-ts in angular app

1 Answers1