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?

[nandan-bhat]

Hey @vivipolli,
Just checking in—are you still experiencing this issue? Any updates?

[cestorer]

Same issue :(

[gyaneshgouraw-okta]

Hello @vivipolli & @cestorer 👋

I’ve reviewed the code snippet you shared. While it’s missing a few React best practices, I don’t see anything explicitly wrong that would cause isAuthenticated to remain false.

A few things to double-check:

1. Callback URL - Please ensure it’s correctly configured in your [Auth0 Dashboard](https://manage.auth0.com/). Even small mismatches (e.g., trailing slashes or http/https differences) can lead to this behavior.
2. Token Storage (optional) - Unrelated but if you’d like to persist the token in localStorage, you can set the cacheLocation option when initializing the SDK:
   Auth0 React SDK – cacheLocation docs
   If you’ve already confirmed the callback URL is correct, I suspect the issue might be related to how the application itself is configured.

To isolate the problem, could you please try replicating the issue using the basic example from our README? Here’s a working minimal snippet for reference:

// src/App.js
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } = useAuth0();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Oops... {error.message}</div>;

  return isAuthenticated ? (
    <div>
      Hello {user.name}{' '}
      <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
        Log out
      </button>
    </div>
  ) : (
    <button onClick={() => loginWithRedirect()}>Log in</button>
  );
}

export default App;

Let me know how that goes, that should help narrow down whether the issue is with the SDK setup or your app configuration.

[gyaneshgouraw-okta]

Closing this issue for now, but if the problem persists or the earlier comment didn’t resolve things, please feel free to open a new issue and reference this issue and we can dig deeper.