Angular-auth-oidc-client: Auto-Login with PKCE Code Flow Issues

[bsheriff]

Hi, I am implementing the auto-login concept with the PKCE Code Flow. In my app.component.ts constructor I have the following:

if (this._oidcSecurityService.moduleSetup) {
        this.doCallbackLogicIfRequired();
    } else {
        this._oidcSecurityService.onModuleSetup.subscribe(() => {
            this.doCallbackLogicIfRequired();
        });
    }

In my ngOnInit I have the following:

ngOnInit(): void {
    this._oidcSecurityService.getIsAuthorized().subscribe(auth => {
        this.isAuthenticated = auth;
        if (!this.isAuthenticated)
            this._router.navigate(['/autologin']);
    });
  }

and in the method "doCallbackLogicIfRequired" i have:

private doCallbackLogicIfRequired(): void {

      this._oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
  }

and in my auto-login.component.ts i have:

constructor(private _oidcSecurityService: OidcSecurityService) {
    this.isAuthorizedSubscription = this._oidcSecurityService.onModuleSetup.subscribe(() => { this.onModuleSetup(); });
  }

  ngOnInit() {
    if (this._oidcSecurityService.moduleSetup) {
      this.onModuleSetup();
    }
  }

  ngOnDestroy(): void {
    this.isAuthorizedSubscription.unsubscribe();
  }

  private onModuleSetup() {
    this._oidcSecurityService.authorize();
  }

So my understanding and based on debugging the flow happens as follows:

1. The user logs in from the STS server and gets redirected to the angular app and comes immediately
   to the app component
2. The first thing it does in the app component is call the _doCallbackLogicIfRequiredMethod_ and in
   turn, that calls the _authorizedCallbackWithCode_ method.
3. Then it moves on to the ngOnInit which checks if the user is authorized and since we are logging
   in for the first time, he/she is not, so it routes over to the _auto-login_ component which calls
   the _oidcSecurityService.authorize()_ method.

So, now this is where I am having some issues and am not sure what is happening.

1. So immediately after calling the _oidcSecurityService.authorize()_method it goes right into the
   subscribe of the _getIsAuthorized_ method located in the app component ngOnInit. Why is it
   doing this? What is causing it to hit the _getIsAuthorized_ again?

Here are the issues:

1. the _getIsAuthorized_ method is getting hit multiple times, and for some reason, it is always false,
   even after calling the _authorize_ method.
2. When I have the _silent renew_ turned on, it seems to make things even worse and calls the
   _getIsAuthorized_ even more times.

I am getting all strange issues with identity server after this is happening and I assume it is because of this _getIsAuthorized_ method.

Questions:

1. For implementing this flow with an auto-login, am I taking the correct approach based on my example
   code?
2. Can someone explain when the getIsAuthorized() subscription is supposed to be called? Do other
   methods in the library maybe call it behind the scenes and that is why it is getting called multiple
   times for me?
3. I seem to be getting intermittent errors - _invalid nonce_ and _invalid state_, why would this be
   occuring?
4. Just for my sanity and so I can understand the flow a little better, what is the purpose of the
   'authorizedCallbackWithCode()' method where does it go, does it return to anywhere?
5. Also is the silent-renew logic supposed to call the 'authorize()' method? It seems to be doing that
   since i noticed that before i call the 'authorize()' method in the auto-login component, the
   _authorizationResultComplete_ event is triggered without me ever calling authorize. Is this the
   expected behavior?

Any help would be appreciated, I am really struggling with this issue.

Thanks!

[djkiwe]

I suggest you follow the steps in the following article:

https://damienbod.com/2017/09/26/auto-redirect-to-an-sts-server-in-an-angular-app-using-oidc-implicit-flow/

I had some issues with the auto-login flow too and these helped me find the problem.

[PMP1]

It would be great to see an example of how this is supposed to work, especially as PKCE Code Flow is the recommended way to authenticate an angular app

[bonaparte89]

@djkiwe it would be super awesome if you could share your solution. followed the steps above but... we want to switch from implicit(where this auto-login-flow is working) to pkce.. until now its just a--pain.

[antiformatiker]

@bonaparte89 the solution for me was to change the "response_type" to "id_token token" and "trigger_authorization_result_event" to true

[damienbod]

@bonaparte89 thanks. I will create an example when I get time, this has been due a long time... hope before the summer.

Sorry about this greetings Damien

[damienbod]

This has been refactored and changed in verison 11 which we plan to release in the next few days after testing. Are Auto login example has been created and added to the samples

Greetings Damien

[Yajmir]

@damienbod I have some problem with auto login. The auto login works for the first time and the user is redirected to login page and back after login. But when the user logs out, getAuthorized is emitted and the user is sent back to auto login page and gets authorized. So, the log out doesn't work.

[Taranbirbajwa]

@damienbod facing the same issue . he auto login works for the first time and the user is redirected to login page and back after login. But when the user logs out, getAuthorized is emitted and the user is sent back to auto login page and gets authorized. So, the log out doesn't work.

[damienbod]

The URL used for the redirect after the logout needs to be excluded from the auto login.

[Taranbirbajwa]

Can u explain little bit more because postLogoutRedirectUri: window.location.origin is the property that i am using .
I have two components namely header and naviagtion.
Inside header i have drop down where i have username and sign out anchor tag .
Inside naviagtion bar i have couple of links.
this is how app.component looks like.
header/header
navigation-bar
section class="container-fluid"
router-outle>/router-outlet

section
I have all these things in core module and core-routing module.
Now everytime i clicking signout , appcomponent is getting load and authentication mechanism is triggered.How can i prevent this.