'user' is undefined and isAuthenticated returns false after login

[lm2000]

I am able to log in and redirect to my redirectURI path but I get an error “Cannot destructure property ‘name’ of ‘user’ as it is undefined.” and isAuthenticated returns false.
I have a file where I create the Auth0 provider and set the redirectURI:

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
    const domain = process.env.REACT_APP_AUTH0_DOMAIN;
    const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

    const history = useNavigate();

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

    return (
        <Auth0Provider
            domain={domain}
            clientId={clientId}
            redirectUri="http://localhost:3003/workspace"
            onRedirectCallback={onRedirectCallback}
        >
            {children}
        </Auth0Provider>
    );
};

export default Auth0ProviderWithHistory;

and this is my login file:

const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();
    return (
        <div className="App">
            <NavBar />

            <button
                className="btn btn-login"
                onClick={() => loginWithRedirect()}
            >
                Log In
            </button>
        </div>

    );
};


export default LoginButton;

I’ve included http://localhost:3003/workspace in my Allowed Callback URLs and Allowed Web Origins. Am I missing anything? Thank you!

[gparascandolo]

Hi @lm2000! I can’t tell from the code snippets you provided, but are you also ensuring that isLoading is false with the auth0-react SDK?

According to the Auth0 React Quickstart docs:

Ensure that the SDK has completed loading before accessing the isAuthenticated property, by checking that isLoading is false .

You can also find an example in the auth0-react SDK docs here: @auth0/auth0-react

[lm2000]

@gparascandolo Thanks for the response! I’ve added that check now so ‘user’ is no longer undefined, but isAuthenticated still returns false. The code for this is below. Would there be a reason for this?

    const { user, isLoading, isAuthenticated } = useAuth0();

    if (isLoading) {
        console.log("loading");
    }
    else if (!isAuthenticated) {
        console.log("authenticated: ", isAuthenticated);
    }
    else if (!isLoading && isAuthenticated) {
        const { name, picture, email } = user;
        return (
            ...
       )
  }


    

[gparascandolo]

Hi @lm2000 , just to confirm - you are saying that you are now seeing a user object defined after the update (meaning successful authentication took place), but isAuthenticated is still returning false after isLoading is false?

No errors coming from the Auth0 logs about invalid callback_urls in your tenant?

This post by an Auth0 Employee may help you as well if you want to take a look into that - isAuthenticated always returns false (React) - #2 by Ale