isLoading gets true, user gets undefined and isAuthenticated gets false after refresh the page in React

Help
1

Please include the following information in your post:

  • Which SDK this is regarding: @auth0/auth0-react
  • SDK Version: 1.12.0
  • Platform Version: i m using react version 17
  • Code Snippets/Error Messages/Supporting Details/Screenshots: Failed to load resource: the server responded with a status of 403 ()

I have configured http://localhost:3000/candidates/authentication, http://localhost:3000/admins/authentication, http://localhost:3000/clients/authentication, in the Allowed Callback URLs of SPA in auth0 application, because i have 4 portals in 1 react codebase i.e Admins,Clients,Candidates and Vendors so i want to handle authentication for each differently. I have created 4 different pages(http://localhost:3000/admins, http://localhost:3000/candidates, http://localhost:3000/clients,http://localhost:3000/vendors) for each portal with a login button in each so for example if i m in a Candidates screen so i m showing a login button, upon clicking on login button i do call loginWithRedirect function like this.

function CandidateScreen(props) {
  const {
    match: { path },
  } = props;
  const { loginWithRedirect } = useAuth0();
  const redirectUri = `${window.location.origin}${path}/authentication`;
  return (
    <>
      <h1>Candidate screen</h1>
      <button
        onClick={() =>
          loginWithRedirect({
            redirectUri,
          })
        }
      >
        Login
      </button>
    </>
  );
}

it redirects the user successfully after success login to the following component:

function AfterCandidateAuthentication() {
  const { isLoading, user, logout, isAuthenticated } = useAuth0();
  console.log({
    isLoading,
    user,
    isAuthenticated,
  });
  if (isLoading) {
    return <h1>Loading...</h1>;
  }
  return (
    <>
      <h1>Candidate Authentication</h1>
      {user && JSON.stringify(user)}
      <br />
      <button
        onClick={() =>
          logout({ returnTo: `${window.location.origin}/candidates` })
        }
      >
        Logout
      </button>
    </>
  );
}

for the first time after redirection it works fine but once i refresh the page the isLoading gets to true, user to undefined and isAuthenticated to false. Can’t figure out what’s going wrong.
P.S: I am open to accept suggestions how to can i handle and manage such use-case( 4 portals ) in react application.