isAuthenticated remains false and user is undefined after successful login callback

[vivipolli]

Checklist

• The issue can be reproduced in the auth0-react sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Description
I am experiencing an issue where the isAuthenticated property from the @auth0/auth0-react library remains false, even though the login process seems to succeed, and I am redirected back to the callback URL with a valid code parameter. Additionally, the user property is undefined, and no token is being saved to localStorage.

I expected the isAuthenticated property to be true, the user property to contain user information, and a token to be retrievable via getAccessTokenSilently(). However, none of these expectations are being met, and my application is stuck in a loop trying to handle authentication.

Steps Taken:

1. Verified that the Auth0Provider is configured correctly:

   • domain, clientId, redirect_uri, and audience are set using environment variables.
   • The onRedirectCallback function is defined but not being called.

2. Ensured the following configurations are correct in the Auth0 dashboard:

   • Allowed Callback URLs: http://localhost:5173/auth/callback
   • Allowed Web Origins: http://localhost:5173

3. Confirmed that the URL includes the code and state parameters after login:

   • Example: http://localhost:5173/auth/callback?code=...&state=....

4. Added detailed logs in onRedirectCallback and inside the getAccessTokenSilently() method:

   • onRedirectCallback is not being triggered.
   • getAccessTokenSilently() is not returning a token, and no errors are logged in the catch block.

5. Tested with loginWithRedirect to force login, but isAuthenticated remains false.

6. Checked that the Auth0 application uses the Authorization Code Flow with PKCE.

Despite these efforts, the issue persists. Any guidance or insights into resolving this would be appreciated.

Reproduction

Reproduction
This issue can be consistently reproduced by following these steps:

1. Set up an Auth0 application with the following configuration:

   • Allowed Callback URLs: http://localhost:5173/auth/callback
   • Allowed Web Origins: http://localhost:5173
   • Use the Authorization Code Flow with PKCE.

2. Use the @auth0/auth0-react library in a React project with the following setup:

   • Wrap the application with Auth0Provider:

        //redirectUri="http://localhost:5173/auth/callback"
     
        const onRedirectCallback = (appState: any) => {
          navigate(appState?.returnTo || redirectUri);
        };
      
        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{
              redirect_uri: redirectUri,
              audience: audience,
              scope: "openid profile email",
            }}
            onRedirectCallback={onRedirectCallback}
          >
            {children}
          </Auth0Provider>
        );

   • Ensure the redirect_uri points to /auth/callback.

3. Implement the callback handling with the useAuth0 hook:

      const { isAuthenticated, isLoading, getAccessTokenSilently, user } =
        useAuth0();
      const navigate = useNavigate();
    
      useEffect(() => {
        if (!isLoading) {
          getToken();
        }
      }, [isLoading, isAuthenticated, user]);
    
      async function getToken() {
        try {
          if (isAuthenticated && user) {
            const token = await getAccessTokenSilently();
            localStorage.setItem("token", token);
            navigate("/");
          }
        } catch (error) {
          console.error("Erro ao obter token:", error);
        }
      }
    
      if (isLoading) {
        return <div>Carregando...</div>;
      }
    
      console.log("isAuthenticated:", isAuthenticated);
      console.log("user:", user);
    
      return <div>Redirecionando...</div>;

4. Run the application locally on http://localhost:5173.

5. Log in via the Auth0-hosted login page:

   • After login, the application is redirected to http://localhost:5173/auth/callback with a valid code and state.

Observed Behavior:

• isAuthenticated remains false.
• The user object is undefined.
• The getAccessTokenSilently method does not return a token or throw an error.
• No token is saved in localStorage.

Expected Behavior:

• isAuthenticated should be true.
• The user object should contain user information.
• A token should be retrieved and saved in localStorage.

Additional context

No response

auth0-react version

2.2.4

React version

18.2.0

Which browsers have you tested in?

Chrome, Firefox

[nandan-bhat]

Hello @vivipolli,

Just to confirm, are you able to reproduce this issue using the auth0-react sample app ?

Additionally, are you observing isAuthenticated as false and user as undefined immediately after login is completed, or does this happen after a page refresh?