React, isAuthenticated always false

Help
,
1

I’m new to Auth0 and I’ve been following this tutorial on how to setup Auth0 for React. I’ve been able to create a login/logout button and connect my application to my dashboard, but whenever I login the isAuthenticated state is always false and the user object from useAuth0() is undefined. Yet I’m logged in, and I can’t log back in with another account until I logout.

I haven’t been able to figure out what’s causing this. I’m using React Router and an express backend, but I haven’t implemented any private routes. I don’t know if I’m missing something, but from most Auth0 tutorials with React that I’ve seen, what I have looks right and works for others.

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();

My Auth0ProviderWithHistory:

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;

My App.js:
Where Authenticate just contains a standard login/logout button.

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;

Any advice is appreciated.

1 Like
2

Hi, did u manage to fix this issue. I’m in the same boat with u.

3

Any luck here? Having this same issue, surprised to see it was never answered 1 year later