title: OidcClient.readSigninResponseState: No matching state found in storage - oidc-client-js (Angular)
body: <p>I am using <a href="https://www.npmjs.com/package/oidc-client" rel="noreferrer">oidc-client library</a> for integrating with Azure AD in my Angular(9) application. <code>signinRedirect()</code> &amp; <code>signinSilent()</code> functions are working as expected. But for <code>signinPopup()</code>, <strong>it is getting the access token successfully in the browser url fragment but it throws error mentioned below</strong>:</p>
  
  <blockquote>
    <p><strong>app.component.ts:83 Error: No matching state found in storage
        at oidc-client.min.js:1</strong></p>
  </blockquote>
  
  <p>Surprisingly, in signin-callback.html, when I pass the response_type as query <code>var userManager = new Oidc.UserManager({response_mode: "query"});</code>, sign in pop up works successfully But sign in redirect fails complaining that </p>
  
  <blockquote>
    <p>Error: No state in response</p>
  </blockquote>
  
  <p>I have followed this <a href="https://www.taithienbo.com/using-oidc-client-js-to-obtain-tokens-from-azure-ad-v1-0-or-microsoft-identity-platform-v2-0/" rel="noreferrer">article</a> initially.</p>
  
  <p>Here is my <strong>service code:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { UserManager, UserManagerSettings, User } from 'oidc-client';
  
  import { environment } from 'src/environments/environment';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
    private userManager: UserManager;
  
    constructor() {
      this.instantiate();
    }
  
    private instantiate() {
     this.userManager = new UserManager(this.getOidcSettings());
    }
  
    public async signinRedirect(): Promise&lt;any&gt; {
      return this.userManager.signinRedirect();
    }
  
    public async signinSilent(): Promise&lt;User&gt; {
      return this.userManager.signinSilent();
    }
  
    public async signinPopup(): Promise&lt;User&gt; {
      return this.userManager.signinPopup();
    }
  
    public async signoutRedirect(): Promise&lt;any&gt; {
      this.userManager.signoutRedirect();
      this.userManager.clearStaleState();
    }
  </code></pre>
  
  <p><strong>OIDC Settings:</strong></p>
  
  <pre><code>const userManagerSettings: UserManagerSettings = {
        client_id: 'my clientid',
        authority: 'my authority',
  
        redirect_uri: 'http://localhost:4200/assets/oidc/signin-callback.html',
        silent_redirect_uri: 'http://localhost:4200/assets/oidc/silent-refresh-callback.html',
        post_logout_redirect_uri: 'https://localhost:4200/',
  
        response_type: 'token',
        response_mode: 'fragment',
        scope: 'my api scope',
  
        loadUserInfo:false
      };
  </code></pre>
  
  <p><strong>signin-callback.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.10.1/oidc-client.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var userManager = new Oidc.UserManager();
  
        userManager.signinRedirectCallback().then(
          (user) =&gt; {
            alert('signin redirect successful.');
            window.history.replaceState(
              {},
              window.document.title,
              window.location.origin
            );
            window.location = '/';
          },
          (err) =&gt; {
            alert('Error caught in signinRedirectCallback()');
            console.log('Error caught in signinRedirectCallback().');
            console.error(err);
          }
        );
  
        userManager.signinPopupCallback().then(
          (user) =&gt; {
            alert('signin pop up successful.');
            window.history.replaceState(
              {},
              window.document.title,
              window.location.origin
            );
            window.location = '/';
          },
          (err) =&gt; {
            alert('Error caught in signinPopupCallback()');
            console.log('Error caught in signinPopupCallback().');
            console.error(err);
          }
        );
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>silent-refresh-callback.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.10.1/oidc-client.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var userManager = new Oidc.UserManager();
        userManager.signinSilentCallback().catch((err) =&gt; {
          console.log('Error caught in signinSilentCallback().');
          console.error(err);
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>