IsAuthenticated always false and never recieving auth token?

Help
,
1

Hey guys! I am new to Auth0 and i am trying to create a simple login. I am currently using React.js and my current goal is to be able to hide some components if not authenticated. For some reason, I am never receiving the auth token and isAuthenticated is always false so none of my routes and components render in. I have seen solutions that are similar but i have not gotten much luck out of it. Any help would be good help :slight_smile:

// App.js
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './components/Home';
import ProjectLookup from './components/ProjectLookup';
import CreateGeneralInfoSheet from './components/CreateGeneralInfoSheet';
import ModifyDeliverable from './components/ModifyDeliverable';
import EditableTable from './components/EditableTable';
import LoginPage from './components/LoginPage';
import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';

const App = () => {
  const { user, isAuthenticated } = useAuth0();

  // Check localStorage for the authentication token
  useEffect(() => {
    const authToken = localStorage.getItem('auth0:id_token');
    console.log('Authentication Token:', authToken);
  }, [isAuthenticated]);

  
  return (
    <Auth0Provider
      domain={'domain'}
      clientId={'clientid'}
      redirectUri={window.location.origin}
    >
      <Router>
        <Navbar />
        <Routes>
          <Route path='/' element={<LoginPage />} />
          {isAuthenticated && (
            <>
              <Route path="/home" element={<Home />} />
              <Route path="/project-lookup" element={<ProjectLookup />} />
              <Route path="/create-general-info-sheet" element={<CreateGeneralInfoSheet />} />
              <Route path="/modify-deliverable/:id" element={<ModifyDeliverable />} />
              <Route path="/editable-table" element={<EditableTable />} />
            </>
          )}
        </Routes>
      </Router>
    </Auth0Provider>
  );
};

export default App;
3

Hi @kshankar,

Welcome to the Auth0 Community!

Is the Auth0 client still loading?

I would suggest starting with our quickstart and using a similar design pattern.

Here’s how we suggest setting up the App.js: