auth0-spa-js: Unhandled Rejection (Error): Invalid state

Description

I am having this problem currently:

When users “Continue with Google”, auth0 fails in the background with the following error

Uncaught (in promise) Error: Invalid state
    at t.<anonymous> (auth0-spa-js.production.js:1712)
    at auth0-spa-js.production.js:152
    at Object.next (auth0-spa-js.production.js:100)
    at auth0-spa-js.production.js:72
    at new Promise (<anonymous>)
    at i (auth0-spa-js.production.js:49)
    at t.handleRedirectCallback (auth0-spa-js.production.js:1698)
    at react-auth0-wrapper.js:27
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:264)

My app is set up using the React Quick Start instructions with no modifications to anything auth0-related. I am using "@auth0/auth0-spa-js": "1.3.1"

The error only occurs when using the “Continue with Google” option. I can verify that the URL contains a ?code=nCniVKWi7AeavwQQ&state=ZjFfWU5nLkVISFhtN2RQOWF0ZENnRjZUNm00UDZpa3RHN2hCX0c1Z1V4Yw%3D%3D# value

I read #68 and it wasn’t helpful, so I’ve created a new ticket.

Reproduction

  1. Click “Log In”
  2. “Continue with Google”
  3. Upon return to the application, the error occurs in the console.
  4. This happens in DEV environment (localhost) and production (a site with SSL enabled)

Environment

Please provide the following:

  • Version of this library used: "@auth0/auth0-spa-js": "1.3.1"
  • Version of the platform or framework used, if applicable: React Quick Start in a CreateReactApp app
  • Other relevant versions (language, server software, OS, browser): Chrome (desktop, iOS, Android)
  • Other modules/plugins/libraries that might be involved: n/a

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 30 (8 by maintainers)

Most upvoted comments

Hi all,

To try and alleviate this issue, we have now released 1.3.2. If you’re affected by this invalid state issue, could you please try this new patch version to see if the problem is now resolved?

Would appreciate it if you can report back here to let us know how you get on.

See #246

I’ve been looking at this issue on and off for a few days, checking Auth0 application setup, but can’t get around Invalid State error

core.js:6014 ERROR Error: Invalid state at t.<anonymous> (auth0-spa-js.production.js:1) at auth0-spa-js.production.js:1 at Object.next (auth0-spa-js.production.js:1) at auth0-spa-js.production.js:1 at new ZoneAwarePromise (zone-evergreen.js:876) at r (auth0-spa-js.production.js:1) at t.handleRedirectCallback (auth0-spa-js.production.js:1) at MergeMapSubscriber.project (auth.service.ts:33) at MergeMapSubscriber._tryNext (mergeMap.js:46) at MergeMapSubscriber._next (mergeMap.js:36)

I’ve used the Quick Start example unmodified and have also cloned from GitHub, plugging in my clientId and domain.

I’ve updated to 1.3.1 @auth0/auth0-spa-js": “^1.3.1”,

Application is Angular SPA (Angular: 8.2.10)

Error on Facebook only. Google and Twitter are OK

I created a new tenant and redirect on callback worked fine first time only.

On subsequent logins the redirect fails. App remains on callback page with spinner:

http://localhost:3000/callback?code=xxx&state=yyy

I am logged in - clicking the login button again displays profile pic and allows me to go to profile page. Just not getting to this.router.navigate([targetRoute]); in handleAuthCallback

I’ve cleared all cookies for localhost, then for all sites, but the problem persists.

Given that login worked first time on the new tenant suggests data is being cached somewhere so that redirect on subsequent login fails.

What is state being validated against?

Having a similar issue. No problems logging in with other connections but when using Facebook we get “Invalid State” back (but as stated above sometimes it will work once).

We’re bundling the code with webpack and it looks like when importing the library it’s pulling in the minified prod version, so maybe the double minification could be an issue?

Confirmed, reference

I added window.history.replaceState({}, document.title, window.location.pathname); to my onRedirectCallback function. Like so:

Vue.use(
  Auth0Plugin,
  {
    domain: process.env.VUE_APP_AUTH_DOMAIN,
    clientId: process.env.VUE_APP_AUTH_CLIENT_ID,
    onRedirectCallback: (appState: any) => {
      // Fix goes here
      window.history.replaceState({}, document.title, window.location.pathname);
      router.push(
        appState && appState.targetUrl
          ? appState.targetUrl
          : window.location.pathname
      );
    },
  },
);

I can also confirm 1.3.2 fixes the problem. 👍

Can also confirm issue has been fixed

Confirmed here too - Facebook login works as expected.

Many thanks.

Working perfectly for me. Thanks so much! I love your library, really pleased with your quick work on this 😃

@stevehobbsdev 1.3.2 seems to have fixed it! Thanks a bunch.