Unhandled Rejection (Error): Invalid State

[yirenlu92]

I am calling auth0 using the methods provided in react-auth0-wrapper.js. Sporadically I am receiving the following error when I try to login:

Documentation online says that it's possibly a caching problem, but the documentation is wordpress-plugin-specific. Anyone know what's going on here?
Thanks!

[luisrudge]

This happens a lot in test scenarios, when you go to the Universal Login page (after calling loginWithRedirect and then click the browser back button to go back to your app to test it again. If you do that a lot, it will cause this issue where you fill up the available cookie space with transactions that never get finished.

Also, might happen if you're calling loginWithRedirect more than once when you have a bug in your code, like allowing users to double click a ‘login’ button for example.

In any case, clearing cookies and trying again will most likely fix this issue during development time. In production, it's highly unlikely that users will hit this issue.

[techieshark]

I also see this issue, and it occurs for me using the email login (magic link login) when you start the login in one browser and finish it in another.

For example, this happens when using iOS and the login process starts with a preferred browser like Chrome or Firefox but the login process finishes with the one iOS opens the link from, which will be the default (but not preferred) app, Safari.

[stevehobbsdev]

@techieshark This is a concern and I can understand why it's happening in your case. Since the state is cached in a cookie, the cookie won't be available when you start login using one browser but return to handle it in a different browser.

[dearamerican]

Hey there,
I also had this problem with a basic react app. I had no problems with a custom signup form, but when I decided I'd prefer to use the Auth0 Lock form, it took me ages to make it work.

Clearing cookies had no effect on the problem. I was never clicking the browser back button. What seemed to trigger this issue was adding the following to the options parameter passed to Auth0Lock:

    auth: {
       redirectUrl: redirect
    }

It may be worth noting that the redirect above is a localhost url.

I solved the issue by taking that redirectUrl option out. Instead, I set a 'loggedIn' variable on state, and when true redirect normally, e.g. <Redirect to="/private-route"/>.

Hope that's helpful for someone.