title: Angular application Signin Redirect fails with "invalid_grant" error when running on different machine than the IDP
body: <p>I am using oidc-client with Angular to log in to my identity server. When running both applications on the same machine everything works perfectly.</p>
  <p>However when I run my Identity Server on a Web Apps server and my Angular Application on a Static Web App I get an error &quot;invalid_grant&quot;.</p>
  <p><strong>PROBLEM DESCRIPTION</strong></p>
  <ol>
  <li><p>User clicks on Login button and gets redirected to the login screen of Identity Server</p>
  </li>
  <li><p>User enters Password and Username and clicks Log In</p>
  </li>
  <li><p>Identity Server redirects to the &quot;signin-callback&quot; link and I get the blank signin-callback page because signin callback is only a .ts script</p>
  <p>This URL appears in the header: <a href="https://white-wave-0ca3e8803.azurestaticapps.net/signin-callback?code=l5-p3B5IGifAZ3ijIUgKmLl7aL2g45Fh5JLmluOj3NA&amp;scope=openid%20profile&amp;state=6503e1f5f176411a890ac50a4d0ecb84&amp;session_state=aPnjQ5ZUiMCDKkAztm0O0K4quSkfSlWRZd--YuK73Oc.NVxBA5K6RH5_ptpDobxmxA" rel="nofollow noreferrer">https://white-wave-0ca3e8803.azurestaticapps.net/signin-callback?code=l5-p3B5IGifAZ3ijIUgKmLl7aL2g45Fh5JLmluOj3NA&amp;scope=openid%20profile&amp;state=6503e1f5f176411a890ac50a4d0ecb84&amp;session_state=aPnjQ5ZUiMCDKkAztm0O0K4quSkfSlWRZd--YuK73Oc.NVxBA5K6RH5_ptpDobxmxA</a></p>
  <p>Under network we have a red &quot;Token&quot; error.
  Containing <strong>Response Header</strong><br />
  HTTP/1.1 400 Bad Request<br />
  Cache-Control: no-store, no-cache, max-age=0<br />
  Pragma: no-cache<br />
  Content-Length: 25<br />
  Content-Type: application/json; charset=UTF-8<br />
  Server: Microsoft-IIS/10.0<br />
  Strict-Transport-Security: max-age=2592000<br />
  Access-Control-Allow-Origin: <a href="https://white-wave-0ca3e8803.azurestaticapps.net/dashboard" rel="nofollow noreferrer">https://white-wave-0ca3e8803.azurestaticapps.net/dashboard</a>
  X-Powered-By: ASP.NET<br />
  Set-Cookie: ARRAffinity=1fa22e5e18dd42b9d22d6c2c620b562f117da68736f4d32b741538a2d054d95c;Path=/;HttpOnly;Secure;Domain=hansecoreidp-staging.azurewebsites.net<br />
  Set-Cookie: ARRAffinitySameSite=1fa22e5e18dd42b9d22d6c2c620b562f117da68736f4d32b741538a2d054d95c;Path=/;HttpOnly;SameSite=None;Secure;Domain=hansecoreidp-staging.azurewebsites.net<br />
  Date: Thu, 18 Mar 2021 08:34:39 GMT</p>
  <p><strong>Error Message</strong><br />
  {&quot;error&quot;:&quot;invalid_grant&quot;}</p>
  </li>
  <li><p>When I refresh I get the error <em>Error: Uncaught (in promise): Error: No matching state found in storage</em> the local storage, session storage and cookies are empty.</p>
  </li>
  <li><p>When I delete the everything after my base URL <a href="https://white-wave-0ca3e8803.azurestaticapps.net" rel="nofollow noreferrer">https://white-wave-0ca3e8803.azurestaticapps.net</a>, navigate to the base url and click login again, <strong>the login works</strong> and in the storage I all of a sudden have
  <strong>Cookie Storage</strong> A cookie containing AAR Affinity, etc from Identity server
  <strong>Session Storage</strong> I have the <em>access_token, id_token, profile, scope, etc.</em>
  <strong>Local Storage</strong> <em>Authority, client_id, etc.</em></p>
  </li>
  </ol>
  <p><strong>ASSUMPTION</strong><br />
  I think the Angular application is having trouble storing the information from the signin-callback in the <em>application storage</em>.</p>
  <p><strong>IDENTITY SERVER CONFIGURATION CODE</strong></p>
  <pre><code>public static IEnumerable&lt;Client&gt; StagingClients (IConfiguration configuration) =&gt;
          new Client[]
          {
              new Client
              {
                  ClientName = &quot;HAnsecore.Web&quot;,
                  ClientId = &quot;clientid&quot;,
                  AllowedGrantTypes = GrantTypes.Code,
                  AccessTokenType = AccessTokenType.Jwt,
                  RedirectUris = new List&lt;string&gt;{ &quot;https://white-wave-0ca3e8803.azurestaticapps.net/signin-callback&quot; },
                  RequirePkce = true,
                  AllowAccessTokensViaBrowser = true,
                  AllowedScopes =
                  {
                      IdentityServerConstants.StandardScopes.OpenId,
                      IdentityServerConstants.StandardScopes.Profile,
                      &quot;hansecoreCQRSApi&quot;,
                      IdentityServerConstants.StandardScopes.OfflineAccess
                  },
                  AllowedCorsOrigins = { &quot;https://white-wave-0ca3e8803.azurestaticapps.net&quot; },
                  AllowOfflineAccess = true,
                  RequireClientSecret = false,
                  PostLogoutRedirectUris = new List&lt;string&gt; { &quot;https://white-wave-0ca3e8803.azurestaticapps.net/signout-callback&quot; },
                  RequireConsent = false,
                  AccessTokenLifetime = 600
              }
          };
  </code></pre>
  <p><strong>ANGULAR OIDC-CLIENT AUTH CONFIG CODE</strong></p>
  <pre><code>private get idpSettings() : UserManagerSettings {
  return {
    authority: environment.idpAuthority,
    client_id: environment.clientId,
    redirect_uri: `${environment.clientRoot}/signin-callback`,
    scope: &quot;openid profile hansecoreCQRSApi offline_access&quot;,
    response_type: &quot;code&quot;,
  
    post_logout_redirect_uri: `${environment.clientRoot}/signout-callback`
  }
  </code></pre>
  <p>}</p>
  <p><strong>SIGNIN REDIRECT CALLBACK CODE</strong>
  User Manager is an inherited class from <em>oidc-client</em>. When debugging the code does not enter the .then and I can't debug any further than here. But I think whatever happens after this is where the code fails.</p>
  <pre><code>public finishLogin = (): Promise&lt;User&gt; =&gt; {
  return this._userManager.signinRedirectCallback()
  .then(user =&gt; {
    this._loginChangedSubject.next(this.checkUser(user));
    return user;
  })
  </code></pre>
  <p>}</p>
  <p><strong>SIGNIN CALLBACK CODE</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { AuthService } from '../../../core/services/auth.service';
  
  @Component({
    selector: 'app-signin-redirect-callback',
    template: `&lt;div&gt;&lt;/div&gt;`
  })
  export class SigninRedirectCallbackComponent implements OnInit {
  
    constructor(private _authService: AuthService, private _router: Router) { }
    ngOnInit(): void {
      this._authService.finishLogin()
      .then(_ =&gt; {
        this._router.navigate(['/'], { replaceUrl: true });
      })
    }
  
  }
  </code></pre>
  <p><strong>NETWORK PICTURE</strong>
  <a href="https://i.stack.imgur.com/TtVT0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TtVT0.png" alt="Network traffic on fail" /></a></p>
  <p>If theres anything missing in my question at all please let me know.</p>
  <p><strong>EVNIRONMENT FILE</strong></p>
  <pre><code>export const environment = {
    environmentName: 'STAGE',
    production: false,
    apiRoot: 'https://hansecoreapi-staging.azurewebsites.net/api/',
    clientRoot: 'https://white-wave-0ca3e8803.azurestaticapps.net',
    idpAuthority: 'https://hansecoreidp-staging.azurewebsites.net',
    clientId: '54212148-15C1-40F9-BA07-E3CE748A7C7F'
  };
  </code></pre>