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

About this issue

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

Most upvoted comments

For anyone else coming here, to fix these issues in my react & react-router-dom app I had to

Follow most of the instructions above including using a redirectUri that was not the root of my app like /callback

add this to `<Auth0Provider:

useRefreshToken={true}
cacheLocation={'localstorage'}

Use this as my onRedirectCallback:

onRedirectCallback={appState => {        
      history.replace(appState?.returnTo || window.location.pathname);
      history.go(0);
}}

Manually set the returnTo on login:

 loginWithRedirect({
      appState: {
        returnTo: window.location.pathname,
      },
    });

In the Auth0 dashboard the callbackUrl and allowedWebOrigins had to match the root of my react app.

we had a rule set on the Auth0 console that changed our scopes to a custom scope

Great, glad you got it working @EddieGr - good catch @frederikprijck!

Gotit, BrowserRouter was under AuthProvider so history.push wasn’t defined and redirection was not fired

@EddieGr Doesnt sound related to this issue. But please make sure that openid is sent as scope to the /authorize endpoint.