Auth0-react user = undefined and isAuthenticated = false

Hi there, I have a problem with integrating auth0 into my React application.

Everything is done like in the official demo example, but:

  • The authentification is successful but when I am trying to get {user} or {isAuthenticated} values from the useAuth0() it returns me “undefined” and “false” as well.

Code below:

**My LoginButton.tsx file: **

import { FC } from 'react'
import { Button } from 'antd'
import { useAuth0 } from '@auth0/auth0-react'

const LoginButton: FC = () => {
    const { loginWithRedirect, user, isAuthenticated } = useAuth0()

    console.log(user) // undefined
    console.log(isAuthenticated) // false

    return (
        <Button type="primary" onClick={() => loginWithRedirect()}>
            Login
        </Button>
    )
}

export default LoginButton

** My index.tsx file **

import ReactDOM from 'react-dom/client'
import App from './App'
import { Auth0Provider } from '@auth0/auth0-react'

/** External styles */
import 'antd/dist/antd.css'
import 'normalize.css'
import React from 'react'

const providerConfig = {
    domain: '',
    clientId: '',
    redirectUri: 'http://localhost:8888/api/callback',
}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <Auth0Provider {...providerConfig} cacheLocation="localstorage">
            <App />
        </Auth0Provider>
    </React.StrictMode>
)

Thanks for each reply.

@alina1 From the Auth0 React Quickstart docs, I found the following

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

@auth0/auth0-react has sample code to show isLoading + isAuthenticated to determine to show the Login button or Logout button

// 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>;
  }

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

export default App;

I hope this helps resolve your issue!

Hi, thank you for your answer! Suddenly, the same happens even with this code.