Unhandled Rejection (Error): Invalid state

daviseford commented 5 years ago

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

Click "Log In"
"Continue with Google"
Upon return to the application, the error occurs in the console.
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

luisrudge commented 5 years ago

Based on your comment here, you're using Auth0's development keys. Does it work if you use your own keys?

daviseford commented 5 years ago

Okay, I have switched to using my own keys, and the problem persists:

auth0-spa-js.production.js:1712 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)

If I close the tab, load the page again, and click "Log In", it works fine - there's no redirect, it just logs me into my account. This only occurs when using "Continue with Google"

P.S. thanks for making me switch to my own keys. Got rid of that warning about development keys which I was meaning to do anyways 😋

If you want to see this in error action, pull down https://github.com/daviseford/aos-reminders , yarn && yarn start, and click Log In

Or click Log In on aosreminders.com, Continue with Google, and open your console

I also tried the Firefox fix suggested in the FAQ for the hell of it - no dice :)

luisrudge commented 5 years ago

Thanks for your patience with this! I have just a few more questions:

Does it happen if you use other social connection (like Twitter or Facebook)?
Would you mind sending a HAR file to luis.rudge at auth0.com (please be aware of potential secrets/passwords)? I'll investigate what's going on.

daviseford commented 5 years ago

Sent you an email.

Twitter worked fine (no errors or issues). I don't use Facebook so I can't test that out.

I also tested Github and it works great! You guys have a really nice, clean way of doing things :)

CueToDo commented 5 years ago

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?

danielres commented 5 years ago

I am experiencing the exact same issue in my app which is using parcel.

When I run the official example: all works fine on my machine.

I ported the official example with minimal changes to parcel, the problem appears.

I published my modified example here: https://github.com/danielres/auth0-parcel-problem-example

First thing that comes in mind is that maybe @auth0/auth0-spa-js is using some modern JS feature which is supported by create-react-app out of the box, but not by parcel. WDYT?

danielres commented 5 years ago

notes:

I'm not using Auth0 development keys, but my own keys.
Same problem in Chrome and Firefox
I haven't tried other types of login (twitter, ...). Only Google.
I've tried only in local dev environment

Hope the example repo will help to find the issue.

Update: I tried with basic user/password login and all works fine.

saibayadon commented 5 years ago

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?

luisrudge commented 5 years ago

@danielres does it work when you use this SDK in development mode (before parcel minifies the bundle)?

danielres commented 5 years ago

@luisrudge I'm not 100% sure what you mean by "use this SDK in development mode". I'm new to parcel, so I'm not sure if there are some options I missed.

So far, I've only tried locally, on my laptop, with NODE_ENV=development. This means parcel was working in development mode. I don't think parcel minifies anything in this case, but I might be wrong.

AntoLepejian commented 5 years ago

I too always get invalid state i've opened an issue here because even the sample application causes the same problem

AntoLepejian commented 5 years ago

I too always get invalid state i've opened an issue here because even the sample application causes the same problem

I just tried github and it worked perfectly, google and facebook login however always cause an invalid state error exception to be raised

stevehobbsdev commented 5 years ago

@AntoLepejian Are you able to confirm if your scenario works with a previous version of the SDK < 1.3.0 (1.2.3, for example)?

AntoLepejian commented 5 years ago

@stevehobbsdev hey, I only just added auth0 to my app a few days ago so I cannot confirm that. I simply followed the quickstart instructions and i kept getting invalid state error with google and facebook. After seeing this issue I tried github and also custom signup with email and both work fine. It's just facebook and google that are failing (so far). Note that I am using my own app id key for facaebook but the auth0 dev one for google.

stevehobbsdev commented 5 years ago

@AntoLepejian Thanks - as a quick test can you revert the version of the SDK that you're pulling into your app to 1.2.4 and see if that resolves the issue for you? Just as a temporary measure to diagnose your issue.

Junkern commented 5 years ago

Just to comment: I also had the same issue (but with github) and using 1.2.4 fixed it for me.

SenneDirkx commented 5 years ago

I also have the React SPA quickstart running. Github and Twitter works great. Google & Facebook I get this same error.

SenneDirkx commented 5 years ago

Just wanted to add: changing to @auth0/auth0-spa-js@1.2.4 fixed it.

stevehobbsdev commented 5 years ago

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

SenneDirkx commented 5 years ago

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

daviseford commented 5 years ago

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

FreeVote commented 5 years ago

Confirmed here too - Facebook login works as expected.

Many thanks.

AntoLepejian commented 5 years ago

Can also confirm issue has been fixed

danielres commented 5 years ago

I can also confirm 1.3.2 fixes the problem. :+1:

stevehobbsdev commented 5 years ago

Thanks for the feedback everyone, and for your help and patience while the issue was being resolved 🎉

ionathanr commented 5 years ago

Hi, i am using the Vue quickstart guide and i am still getting this error. Invalid state. Could anyone using Vue give some hints on how to overcome this?

agersea commented 2 years ago

I'm hitting this as well. Authenticate using google, refresh the page, and the error logs.

I'm running Vue2, TS, auth0-spa-js 1.20.0.

Thank you!

stevehobbsdev commented 2 years ago

@agersea could you raise a new issue please so that this doesn't get lost, and provide clear repro steps, as I'm not able to reproduce what you're seeing but I might be missing something in your setup.

As you're using Vue, we now have a dedicated Vue SDK in beta, which could be worth migrating to in order to see if that solves your issue: https://github.com/auth0/auth0-vue

agersea commented 2 years ago

Thank you @stevehobbsdev, I believe the root cause is that I didn't remove the QSP from the redirect URL. I'm working on this project today and will let you know as soon as I confirm the fix.

agersea commented 2 years ago

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
      );
    },
  },
);

auth0 / auth0-spa-js