Auth0 Home Blog Docs

Invalid state on reload Auth0 callback url, using auth0-spa-js and Angular 8

Hi

We are using the auth0-spa-js in our Angular 8 project, the authentication procedure follows the start-up guide from Auth0 Quickstart. The login seems to work fine, but we receive an ‘Invalid state’ error from our users, if they for some reason refresh the application, while they are on the application Auth0 callback url. The callback url hold the query params “code” and “state” when the refresh page is initiated.

I’m not really sure if the error is desired and how to handle it or this is an effect of the design of the auth service provided in the Quickstart?

Any help is appreciated - thanks in advance

//Mads

Hey @mads1,

Welcome to the Community!

Are you using the quick start without customizing anything? If not, could you show us what you have changed in the auth service?

Can you provide me with the steps to reproduce the issue as well so I can troubleshoot?

Thanks,
Dan

Hi Dan

I made a few changes, compared to the quick start:

  1. Removed the handleAuthCallback() from the auth service constructor. The handleAuthCallback() is placed in the ngOnInit() on the Auth0 callback url, in our case /auth. see below
  constructor(private auth0Service: Auth0SpaService) { }

  ngOnInit() {
    this.auth0Service.handleAuthCallback();
  }
  1. In the handleAuthCallback() we use this.router.navigateByUrl(targetRoute), where navigateByUrl is different from the quick guide

In order to reproduce. The problem seems to occur when you refresh the browser, when you are on the Auth0 callback url from a successful login. It is easier to reproduce If you add a delay on the ngOnInit above, then you have time to press the refresh button before redirected.

At this moment, the error is only reported from Chrome 79.0.3945

Please let me know if any other info is needed.

Just added a screenshot of the stacktrace when the error occur on refresh browser

Thanks in advance

I had that issue before, check that you are calling handleAuthCallback() in one place only. I had it on the callback.component.ts and in my app.component.ts so the state from the app was different from the app one

Did @ElitaTnk’s solution help?

To confirm, this is only happening when your user refreshes during the brief callback, not when the request is completely resolved, correct?

I only call handleAuthCallback() one place in the app, so i can’t invoke the solution proposed by @ElitaTnk, but thanks for the input.

@dan.woda Yes, only when the user refresh on the callback url. A refresh on any other page will not result in an error.

Thanks

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.