React Authentication By Example: React Router 6

Developer Hub
, ,
6

Hey all,

I’m currently working through the React Authentication By Example: Using React Router 6 guide for my self-hosted site, which is running React v18.2.0, React Router v6.3.0, & React Scripts v5.0.1.

I’m at the “Add Route Guards to React” section & created src/pages/profile-page.js per docs to test things out with the <AuthenticationGuard/> element, prior to rolling out for my production pages. My example.com/profile page redirects to my Auth0 login as expected, for auth.example.com, however after signing in this returns a blank screen & the following error in my browser console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ProfilePage />. Did you accidentally export a JSX literal instead of a component?

Anyone have any idea what’s going on here?

I have a pastebin for my index.js, App.js, auth0-provider-with-navigate.js, authentication-guard.js, profile-page.js & callback-page.js, yet will share what I have for App.js below.

https://pastebin.com/dwyKjNP4

App.js:

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Auth0ProviderWithNavigate } from "./auth0-provider-with-navigate";
import { AuthenticationGuard } from "./components/authentication-guard";
import { ProfilePage } from "./pages/profile-page";
import { CallbackPage } from "./pages/callback-page";

function App() {
  return (
  <BrowserRouter>
    <Auth0ProviderWithNavigate>
      <Routes>
        <Route path='/profile' element={<AuthenticationGuard component={<ProfilePage/>} />} />
        <Route path="/callback" element={<CallbackPage />} />
      </Routes>
    </Auth0ProviderWithNavigate>
  </BrowserRouter>
  );
}
export default App;

Thanks,
Nick

1 Like