Auth0 isAuthenticated is always false

Question

I'm using React and I've been following this tutorial on setting up Auth0 for user authentication.

I've managed to setup a login and logout button, and have been able to connect my web app to the Auth0 universal login page. So far I have signed-up using a gmail and company-based email account, and both have been stored and registered on my Auth0 dashboard. But for some reason, whenever I log in, I'm never actually authenticated and isAuthenticated is always false.

This is the code I've added from the tutorial:

My index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import Auth0ProviderWithHistory from './components/Authentication/Auth0ProviderWithHistory';

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

ReactDOM.render(
    <Router>
    <Auth0ProviderWithHistory>
        <App />
    </Auth0ProviderWithHistory>
    </Router>, document.getElementById('root'));

serviceWorker.unregister();

Auth0ProviderWithHistory component:

import React from "react";
import { useHistory } 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 = useHistory();

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

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

And my App.js:

import React, { useState } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Home from "./views/Home/Home";
import Authenticate from "./views/Authenticate/Authenticate";

const App = () => {
  return (
    <div>
      <Switch>
        <Route exact path="/Home" render={() => {
          return (
            <Home />
          );}}
        />
        <Route exact path="/Authenticate" render={() => {
          return (
            <Authenticate />
          );}}
        />
      </Switch>
    </div>
  );
};

export default App;

I'd appreciate any help!

Gareth Whitley Gareth Whitley · Accepted Answer · 2021-01-02T20:18:58

I had something similar happen to me. By chance I went into the Auth0 settings and switched to the newer login form interface (Universal?) and then suddenly everything worked.

Auth0 isAuthenticated is always false

1 Answers