handleRedirectCallback failing with "Invalid State" error & empty response

Help
1

I am using the @auth0/auth0-spa-js module in my reactjs application.

I am using loginWithRedirect and as per the doc, I have to call handleRedirectCallback after we are redirected from Auth0 back to SPA.

So, in App component, I have used an useEffect listening to the query params. If code query param is present in the URL, then I am calling handleRedirectCallback.

Code:

import createAuth0Client from "@auth0/auth0-spa-js";
import { useEffect, useState } from "react";
import { isEmpty } from "lodash";
import { BrowserRouter, useSearchParams } from "react-router-dom";

function LoginButton({ auth0, setUser }) {
  return (
    <>
      <button
        onClick={async () => {
          await auth0.loginWithRedirect({
            redirect_uri: "http://localhost:3000/",
          });
          // await auth0.loginWithPopup();
          const _user = await auth0.getUser();
          setUser(_user);
        }}
      >
        LOGIN
      </button>
    </>
  );
}

function App({ auth0, user, setUser }) {
  const [searchParams] = useSearchParams();

  useEffect(() => {
    (async () => {
      if (searchParams && searchParams.get("code")) {
        let code = searchParams.get("code");
        console.log("App -> code", code);
        let res = await auth0.handleRedirectCallback();
        console.log("App -> handleRedirectCallback -> res", res);
      }
    })();
  }, [auth0, searchParams]);

  return (
    <>
      <h1>APP</h1>
      <hr />
      {isEmpty(user) && <LoginButton auth0={auth0} setUser={setUser} />}
      {!isEmpty(user) && (
        <>
          <Profile auth0={auth0} user={user} />
        </>
      )}
      <LogoutButton auth0={auth0} setUser={setUser} />
    </>
  );
}

function AppWrapper() {
  const [auth0, setAuth0] = useState();
  const [user, setUser] = useState();

  useEffect(() => {
    (async () => {
      const _auth0 = await createAuth0Client({
        domain: "DOMAIN,
        client_id: "CLIENT-ID",
        cacheLocation: "localstorage",
        useRefreshTokens: true,
      });
      setAuth0(_auth0);
      const _user = await _auth0.getUser();
      console.log("AppWrapper -> _user", _user);
      setUser(_user);
    })();
  }, []);

  if (!auth0) {
    return (
      <>
        <p>Loading...</p>
      </>
    );
  }

  return (
    <>
      <BrowserRouter>
        <App auth0={auth0} user={user} setUser={setUser} />
      </BrowserRouter>
    </>
  );
}

export default AppWrapper;

I am getting the following error in the console along with an empty response in appState:

App → code xxxxxxxxxxxx

Auth0Client.ts:668 Uncaught (in promise) Error: Invalid state
at e. (Auth0Client.ts:668:1)
at tslib.es6.js:102:1
at Object.next (tslib.es6.js:83:1)
at tslib.es6.js:76:1
at new Promise ()
at o (tslib.es6.js:72:1)
at e.handleRedirectCallback (Auth0Client.ts:660:1)
at App.js:75:1
at App.js:78:1
at commitHookEffectListMount (react-dom.development.js:23150:1)

App → handleRedirectCallback → res {appState: undefined}

2

Did you ever resolve this? I am running into the same issue, but with NextJS.