Auth0 Home Blog Docs

"webAuth.popup.authorize()" throwing "`state` does not match" error in callback - Angular SPA

angular
spa
authentication
popup
auth0-js

#1

Hello,

Auth0 team - thank you for a great tool for handling heavy auth duties.

Within our Angular5 app, we have regular webAuth.authorize() flow with in-tab redirection implemented, but want to implement it popup mode now, as it makes more sense in scope of feature being developed, so I went on and implemented webAuth.popup.authorize({}, callback), according to info from docs and some useful posts here.

I end up getting the following error in my callback from above (tried with both auth0-js 8.12.3 and 9.7.3):

{
  code: "invalid_token",
  description: "`state` does not match.",
  original:  {
    error: "invalid_token",
    errorDescription: "`state` does not match."
  }
}

Here is the flow I follow:

  1. On app load, in my shared Angular service AuthService, I initialize a new instance of Auth0:
  import * as auth0 from 'auth0-js';
  ---
  webAuth = new auth0.WebAuth({
    clientID: CONFIG.clientID,
    domain: CONFIG.domain,
    responseType: 'token id_token',
    audience: 'auth_api',
    redirectUri: `${CONFIG.clientEndpoint}/auth-callback`,
    scope: 'openid profile email',
    leeway: 10
  });
  1. From component class, upon user interaction I invoke the following public method in the same Angular service AuthService:
public popupLogin() {
  this.webAuth.popup.authorize(
    {
      redirectUri: `${CONFIG.clientEndpoint}/auth-callback`
    },
    (err, response) => {
      console.log({err}, {response});
  });
}
  1. In component which handles the redirectUri, a following logic is triggered:
const webAuth = new auth0js.WebAuth({
  clientID: CONFIG.clientID,
  domain: CONFIG.domain
});
webAuth.popup.callback();

note - the code above is according to this comment and this post - Auth0.js Popup Autoclose.

for more clarity - here’s the whole flow of the callback’s page component’s logic:

export class AuthCallbackComponent {

  constructor(private auth: AuthService) {
    auth.handleAuthentication()
      .subscribe(() => {
        const webAuth = new auth0js.WebAuth({
          clientID:CONFIG.clientID,
          domain: CONFIG.domain,
          redirectUri: `${CONFIG.clientEndpoint}/auth-callback`,
          popupOrigin: CONFIG.clientEndpoint
        });
        webAuth.popup.callback();
      }, e => {
        console.log(e);
      });
  }
}

here is handleAuthentication method from AuthService:

public handleAuthentication() {
    const parseHashAsObservable = Observable.bindNodeCallback(this.webAuth.parseHash.bind(this.webAuth));

    return parseHashAsObservable().pipe(
      switchMap((authResult: any) => {
        if (authResult && authResult.accessToken && authResult.idToken) {
          window.location.hash = '';
          this.setSession(authResult);
        } else {
          return _throw(new Error('Authentication failed'));
        }
      })
    );
  }

My assumption is that there is miscommunication between, essentially 2 spa’s - one that triggered popup to open, and another is the app, that loaded inside the new popup window when /auth-callback route was navigated to.

Will greatly appreciate any hints or thoughts - thanks in advance!


#2

:wave: @roman.h Would it be possible to provide a HAR file of the error being thrown? You can find instructions on how to create it here: https://auth0.com/docs/support/troubleshooting-with-har-files and please DM me the file


#3

Hey Kim!
Thanks for getting back to me.
Will do and will send it out to you shortly.


#4

Great, thank you very much! I am going to take a look at it now.