CODEWITHSUNDEEP
angularopenid-connectsingle-logout
Marek Dragula
Marek Dragula

Reputation: 3

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

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

Almost everything works fine:

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');
    });

Upvotes: 0

Views: 1474

Answers (2)

atlmag
atlmag

Reputation: 191

In oidc-client-ts you need to use monitorSession:true in the UserManager settings object.

Then the events will fire across browser tabs.

I found this in the comments of the source code

/**
 * Add callback: Raised when the user's sign-in status 
 * at the OP has changed --> (when `monitorSession` is set) <--
 * @see {@link UserManagerSettings.monitorSession}
 */
public addUserSignedOut(cb: UserSignedOutCallback): () => void {
    return this._userSignedOut.addHandler(cb);
}

Upvotes: 0

Gary Archer
Gary Archer

Reputation: 29291

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.

Upvotes: 0

Related Questions