auth0-react: isLoading & isAuthenticated are false & user is undefined after login

Describe the problem

Provide a clear and concise description of the issue

isLoading & isAuthenticated are false & user is undefined after login in useAut0 hook, so loginWithRedirect enter. in a loop with this kind of effect on. routing

const { isAuthenticated, loginWithRedirect, isLoading } = useAuth();

  useEffect(() => {
    if (isAuthenticated || isLoading) return;

    loginWithRedirect({
      appState: { targetUrl: url },
    });
  }, [isAuthenticated, loginWithRedirect, url, isLoading]);

What was the expected behavior?

expect that isAuthenticated return true (user setted) synchronous after loading state in order to avoid this tricky state.

Reproduction

Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent. Note: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report.

using this implementation https://auth0.com/blog/complete-guide-to-react-user-authentication/ with custom private route that check authenticated state before redirect

Can the behavior be reproduced using the React SDK Playground?

If so, provide steps:

App is wrapped with

const Auth0ProviderWithHistory = ({ children }) => {
  const history = useHistory();

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={AUTH0_DOMAIN}
      clientId={AUTH0_CLIENT_ID}
      audience={AUTH0_AUDIENCE}
      login_hint={AUTH0_DB_CONNECTION}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

AuthRoute is like

const AuthRoute = (props) => {
  const { url } = useRouteMatch();
  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth();

  useEffect(() => {
    if (isAuthenticated || isLoading) return;

    loginWithRedirect({
      appState: { targetUrl: url },
    });
  }, [isAuthenticated, loginWithRedirect, url, isLoading]);

  switch (true) {
    case isLoading:
      return <Loader isCover />;
    case isAuthenticated:
      return <Route {...props} />;
    default:
      console.info('You need to log in to access this part');
      // TODO: return specific page ?
      return <div>Redirecting you to the login...</div>;
  }
};

Environment

Please provide the following:

• Version of auth0-react used: “@auth0/auth0-react”: “^1.1.0”,
• Which browsers have you tested in? all
• Which framework are you using, if applicable (Angular, React, etc): react
• Other modules/plugins/libraries that might be involved: none