Logout only removes access_token but does not return to login page

[pablogarzon1969]

I am trying to use this.oauthService.logOut() but it does not return to the login page, it just removes the access_token and other information from it. The identity that I use on the WS02 Indentity server.

Example

oauth2.config.ts

import { AuthConfig } from 'angular-oauth2-oidc';
import { environment } from '../environments/environment';

export const authConfig: AuthConfig = {

  issuer: environment.sso.serverUrl.concat(environment.sso.issuer),
  redirectUri: environment.sso.redirectUri,
  clientId: environment.sso.clientId,
  scope: environment.sso.scope,
  loginUrl: environment.sso.serverUrl.concat(environment.sso.authorizationEndpoint),
  requireHttps: environment.sso.requireHttps,
  silentRefreshRedirectUri: environment.sso.silentRefreshRedirectUri,
  oidc: environment.sso.oidc
};

app.component.ts

import { OAuthService, AuthConfig } from 'angular-oauth2-oidc';
import { authConfig } from './oauth2.config';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oauthService: OAuthService) {
    this.configure();
  }

  private configure() {
    this.oauthService.configure(authConfig);
    this.oauthService.setStorage(sessionStorage);
    this.oauthService.tryLogin({});
  }
}

info.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { ScriptStore } from '../../script.store';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-axa',
  templateUrl: './axa.component.html',
  styleUrls: ['./axa.component.css']
})
export class AxaComponent implements OnInit {
 constructor(private oauthService: OAuthService) {
  }
// It doesn't work 
logout() {
    this.oauthService.logOut();
  }
}

Is this an issue or configuration problem?

[jeroenheijmans]

Hmm, interesting. I do the exact same thing in my sample app. You could try cloning it and configure it to work with your IDS?

The logOut(...) method does nothing too magical, basically it will:

1. Remove items from storage (the local logout)
2. Direct the user (agent) to the logoutUrl on the IDS

Your IDS will need to effectively end the session and redirect you back to the application. You could try to control the location with the postLogoutRedirectUri config value.

When you get back, the user should no longer be logged in. If there's an issue, it's likely either in the IDS, or in the way your app handles state? We'd need a full but minimal reproducible scenario (e.g. Stackblitz sample) to be able to reliably help.

[Istanful]

@jeroenheijmans I think I'm having the same problem. In my case I configure the library with this code.

const config = authConfig(this.configService.config);
this.oauthService.configure(config);
this.oauthService.logoutUrl = config.logoutUrl;
this.oauthService.setStorage(this.localStorage);
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
  if (!this.oauthService.hasValidAccessToken()) {
    this.oauthService.initCodeFlow();
  }
});

When I then logout, the logoutUrl seems to be cleared.

It seems like this is related to me changing the module configuration from a static object to providing the config as a dynamic value.

Previously it was configured like this:

OAuthModule.forRoot({
  resourceServer: {
    sendAccessToken: true,
  },
})

It was then configured like this:

imports: [
  OAuthModule.forRoot(),
],
providers: [
  {
    provide: OAuthModuleConfig,
    useFactory: (configService: ServerConfigService): OAuthModuleConfig => ({
    resourceServer: {
      allowedUrls: [configService.config.apiBaseUrl],
        sendAccessToken: true,
      },
    }),
    deps: [ServerConfigService],
  },
]

When I injected everything (OAuthModuleConfig, AuthConfig and OAuthStorage) with providers it started working again. Could it be that only one of the two configuration method is supported simultaneously?

[jeroenheijmans]

Yeah I never really use the setStorage and configure methods. I prefer to use the Angular DI system to inject configuration and storage. Not sure if that plays into this issue...

[Istanful]

@jeroenheijmans I don't really have a preference, however I think it would be worth to inspect if the two configuration methods are conflicting. I don't know if it plays into this issue either, but I figured it could be a clue since I had the same symptoms. :)

[pablogarzon1969]

@jeroenheijmans the project that has the mentioned problem is the following url https://github.com/pablogarzon1969/angular-ws02-IS and this uses the ws02 Identity Server

Also validate a project that had in angular 4 and with the version of the package angular-oauth2-oidc = 3.1.4 and if it works, but after this version it presents the problem with the ws02 Identity Server of not returning to the login page and does not delete WS02 IS session