title: Auto-Login with PKCE Code Flow using angular-auth-oidc-client
body: <p>I am implementing the auto-login concept with the PKCE Code Flow using <a href="https://github.com/damienbod/angular-auth-oidc-client" rel="noreferrer">this npm package</a>. I tried following the documentation and example as best as I could. In my app.component.ts constructor I have the following:</p>
  
  <pre><code>if (this._oidcSecurityService.moduleSetup) {
          this.doCallbackLogicIfRequired();
      } else {
          this._oidcSecurityService.onModuleSetup.subscribe(() =&gt; {
              this.doCallbackLogicIfRequired();
          });
      }
  </code></pre>
  
  <p>In my ngOnInit I have the following:</p>
  
  <pre><code>ngOnInit(): void {
      this._oidcSecurityService.getIsAuthorized().subscribe(auth =&gt; {
          this.isAuthenticated = auth;
          if (!this.isAuthenticated)
              this._router.navigate(['/autologin']);
      });
    }
  </code></pre>
  
  <p>and in the method <code>doCallbackLogicIfRequired()</code> I have:</p>
  
  <pre><code>private doCallbackLogicIfRequired(): void {
        this._oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
    }
  </code></pre>
  
  <p>And since the login page (and button) are located on the identity server (STS server), I have an auto-login component in my angular application which looks like this:</p>
  
  <pre><code>constructor(private _oidcSecurityService: OidcSecurityService) {
      this.isAuthorizedSubscription = this._oidcSecurityService.onModuleSetup.subscribe(() =&gt; { this.onModuleSetup(); });
    }
  
    ngOnInit() {
      if (this._oidcSecurityService.moduleSetup) {
        this.onModuleSetup();
      }
    }
  
    ngOnDestroy(): void {
      this.isAuthorizedSubscription.unsubscribe();
    }
  
    private onModuleSetup() {
      this._oidcSecurityService.authorize();
    }
  </code></pre>
  
  <p>So my understanding and based on debugging the flow happens as follows:</p>
  
  <ol>
  <li>The user logs in from the STS server and gets redirected to the angular app and comes immediately
  to the app component</li>
  <li>The first thing it does in the app component is call the <code>doCallbackLogicIfRequiredMethod()</code> and in
  turn, that calls the <code>authorizedCallbackWithCode()</code> method.</li>
  <li>Then it moves on to the ngOnInit (of the app component), 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 <code>oidcSecurityService.authorize()</code> method.</li>
  </ol>
  
  <p>So, now this is where I am having some issues and am not sure what is happening.</p>
  
  <ol start="4">
  <li>So immediately after calling the <code>oidcSecurityService.authorize()</code>
  method (int the auto-login.component) it goes right into the
  body of the subscribe of the <code>getIsAuthorized()</code> method located in the app component ngOnInit. Why is it
  doing this? What is causing it to hit the <code>getIsAuthorized()</code> again?</li>
  </ol>
  
  <p>Here are the issues:</p>
  
  <ol>
  <li>The <code>getIsAuthorized()</code> method is getting hit multiple times, and for some reason, it is always false,
  even after calling the <code>authorize()</code> method from the auto-login component.</li>
  <li>When I have the silent renew turned on, it seems to make things even worse and calls the
  <code>getIsAuthorized()</code> even more times.</li>
  </ol>
  
  <p>I am getting all strange issues/errors with identity server after this is happening and I assume it is because of this <code>getIsAuthorized()</code> method and maybe my understanding of where and when to actually use it.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>For implementing this flow with an auto-login, am I taking the correct approach based on my example
  code?</li>
  <li>Can someone explain when the <code>getIsAuthorized()</code> 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?</li>
  <li>I seem to be getting intermittent errors - <em>invalid nonce</em> and <em>invalid state</em>, why would this be
  occuring (I read that this could happen when the <code>authorize()</code> method is called more than once, but I only have one call to it in the auto-login.component)?</li>
  <li>Just for my sanity and so I can understand the flow a little better, what is the purpose of the
  <code>authorizedCallbackWithCode()</code> method where does it go, does it return to anywhere (is there an event handler for it i should be subscribing to)?</li>
  <li>Also is the silent-renew logic supposed to call the <code>authorize()</code> method? It seems to be doing that somewhere behind the scenes - 
  I noticed that before i call the <code>authorize()</code> method (from the auto-login component), the
  <code>authorizationResultComplete</code> event handler is triggered without me ever calling <code>authorize()</code>. Is this the
  expected behavior for the silent-renew, should it disrupt my application by doing this, I thought it should do everything behind the scenes (silently)?</li>
  </ol>
  
  <p>I have been really struggling with this issue, if anyone has successfully implemented this flow using angular 2+ with this library, any help would be appreciated.</p>
  
  <p>Thank You!</p>