title: Angular SPA with identity server and oidc-client-js: is there a pattern to trigger login when the application starts (without using a login button)?
body: <p>I'm working with an angular 8 SPA, and I'm trying to use the <a href="https://github.com/IdentityModel/oidc-client-js" rel="nofollow noreferrer">oidc-client-js</a> library to handle the user authentication. The identity provider is implemented by using identity server 4.</p>
  <p>Our desired user experience is the following: when the SPA is loaded in the browser, without requiring any kind of user interaction, the login flow is started. Put in other words, we would like to trigger the login flow automatically and to avoid the need for an explicit login button in the first view of the application.</p>
  <p>The <code>AppComponent</code> is the first component loaded in our application and it has the following init method:</p>
  <pre><code>ngOnInit() {
      this.authService.login();
    }
  </code></pre>
  <p>The auth service login is doing the following:</p>
  <pre><code>login() {
          return this.userManager.signinRedirect();
      }
  </code></pre>
  <p>By doing so we are able to successfully redirect the user to the identity server login form. After the login form is submitted identity server redirects the user back to the SPA application on the configured redirect uri (<code>/signin-callback</code>).</p>
  <p><strong>At that point we would like to load a component able to complete the login flow</strong>. This component should call the following method of the auth service inside of its <code>ngOnInit</code> method:</p>
  <pre><code>completeLogin() {
          return this.userManager.signinRedirectCallback().then(user =&gt; {
            console.log(&quot;Login has been completed.&quot;, user);
            return user;
          });
      }
  </code></pre>
  <p>Unfortunately this approach does <strong>not</strong> work, because when identity server redirects back to the SPA application (after the login form is submitted), the <code>AppComponent</code> is loaded in the browser and the login flow is <strong>started once again</strong> and an infinite redirect loop begins, until the browser finally blows up.</p>
  <p>Is there a way for us to make this work ?</p>
  <p>Additional notes:</p>
  <ul>
  <li>all the examples i have found make use of an explicit login button, so I'm asking myself if our desired behaviou makes sense at all</li>
  <li>the core issue is that we always call <code>this.userManager.signinRedirect()</code> when the application bootstraps in the browser; we should find a way to avoid the call if the login flow <strong>has already been started and the application is being loaded due to the redirect after the user logs in at the identity server level</strong>. Is there a robust way to do so ?</li>
  </ul>
  <p><strong>Update 15th September 2020</strong></p>
  <p>The simplest way that I've found to manage this issue is doing the sigin redirect callback inside of a <strong>static HTML page</strong>, which is <strong>not</strong> part of the angular application. You can find an example <a href="https://github.com/IdentityModel/oidc-client-js/tree/dev/samples/Angular" rel="nofollow noreferrer">in the sample folder of the oidc client js repository</a></p>