auth0-react-samples: Auth0Client.ts:285 Uncaught (in promise) Error: Invalid state

I’m trying to add a login button to our lander page and after login I would like to redirect the user to our react application.

I added <script src="https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js"></script> to our lander page and added handler on login button click which looks like this:

function() {
        createAuth0Client({
            domain: 'our-domain',
            client_id: 'our-client_id'
        }).then(function(auth0) {
            auth0.loginWithRedirect({
                redirect_uri: 'our-redirect_uri',
            });
        });
    }

After I click a login button I’m redirected to auth0 login page I do log in and then I’m redirected to our react where we are using this react solution (https://github.com/auth0-samples/auth0-react-samples/tree/master/01-Login 1) and I’m getting this error:

Auth0Client.ts:285 Uncaught (in promise) Error: Invalid state
    at e.<anonymous> (Auth0Client.ts:285)
    at tslib.es6.js:99
    at Object.next (tslib.es6.js:81)
    at tslib.es6.js:73
    at new Promise (<anonymous>)
    at i (tslib.es6.js:69)
    at e.handleRedirectCallback (Auth0Client.ts:268)
    at react-auth0-spa.js:29
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:271)

Can please someone help me solve this issue. Tnx.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

👋 we still do not have concrete steps to reproduce this problem. Reading the conversation above, this is mostly likely a tenant configuration problem rather than a problem with the SDK.

For tenant configuration, the best place to raise this is in the Auth0 community forums. If some steps can be generated that reproduce an issue with the SDK itself, the best place to raise that is on the SDK issue tracker.

The React quickstart and this sample have since been updated to take advantage of the new React SDK. We’ll close this for now, but please raise another issue here if there are further problems specific to this sample.

stevehobbsdev on Jun 26, 2020

I am seeing an intermittent issue of “Invalid-State” with my Next’s Static Apps which uses auth0-react-sdk.

This is my setup

const onRedirectCallback = appState => {
  console.log('OnRedirectCallback() => ', {appState})
  Router.replace(appState?.returnTo || `${window.location.origin}${TESTINDEX}`)
}

function MyApp({Component, pageProps}) {
  return (
    <Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
      clientId={process.env.NEXT_PUBLIC_CLIENT_ID}
      audience={process.env.NEXT_PUBLIC_AUTH0_AUDIENCE}
      redirectUri={
        typeof window !== 'undefined' && `${window.location.origin}${TESTINDEX}`
      }
      onRedirectCallback={onRedirectCallback}
      useRefreshTokens
    >
      <Head>
        <meta name="viewport" content="width=device-width" />
        <meta charSet="utf-8" />
        <link rel="icon" type="image/png" href="/images/favicon.ico" />
      </Head>

      <Component {...pageProps} />
    </Auth0Provider>
  )
}

Please suggest what needs to be done to avoid this issue

ajmeraaxesh on Jul 1, 2021