React TypeScript -> Auth Failing After Page Navigation

React app using Auth0 (of course) as ID provider

App currently only has two routes, home, and a test route to test integration with backend.

If I leave conditional rendering turned on, I can log into the app and only see the home page. Any attempt to navigate to anything else kicks me out and back to the login screen.

If I turn the check for isAuthenticated off, or just flip the bool, the app renders and loads the pages fine.

I presume I’m messing something in regards to TS, as this isn’t my first Auth0/React rodeo, and I’ve never had this issue before.

Code:

import React from "react";
import logo from "./logo.svg";
import "./App.scss";
import { SideBar } from "./components/sidebar/Sidebar";
import { Header } from "./components/header/Header";

import { Route, Switch } from "react-router-dom";

import { useAuth0 } from "@auth0/auth0-react";
import { Login } from "./components/login/Login";
import Home from "./components/home/Home";
import ListRaceCarParts from "./components/test-components/race-car-parts/ListRaceCarParts";
import PageNotFound from "./components/Error/PageNotFound";

function App(): any {
  const { isAuthenticated } = useAuth0();
  if (!isAuthenticated) {
return (
  <div className="grid-container">
    <div className="sidebar">
      <SideBar />
    </div>
    <div className="main-content">
      <div className="header">
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/racecarpartstest" component={ListRaceCarParts} />
          <Route component={PageNotFound} />
        </Switch>
      </div>
      <div className="content-body"></div>
    </div>
  </div>
);
  }
  if (!isAuthenticated) {
return <Login />;
  }
}

export default App;`Preformatted text`

Update to this issue:

I’ve created another, brand new TypeScript React app to test this out.

Findings:

  • unauthorized user gets redirected to the Login component, after login
    • After login, they are redirected to the home page
  • Any route change after that forces the user back to the Login component for just a moment as isAuthenticated is evaluated again.
  • They are then redirected to their requested route without needing to login again.

What in the world am I blowing up here?