In this lesson, we create an AuthenticationGuard file that uses the Auth0React SDK to protect React routes by requiring login.
You need to create the AuthenticationGuard component, pass in a component prop, and use it to protect any React route.
import { withAuthenticationRequired } from "@auth0/auth0-react";
import React from "react";
import { PageLoader } from "./page-loader";
export const AuthenticationGuard = ({ component }) => {
const Component = withAuthenticationRequired(component);
return <Component />;
};
Will also demonstrates how to use the AuthenticationGuard component to protect the profile, and admin routes in the application.
import { useAuth0 } from "@auth0/auth0-react";
import React from "react";
import { Route, Routes } from "react-router-dom";
import { PageLoader } from "./components/page-loader";
import { AuthenticationGuard } from "./components/authentication-guard";
import { AdminPage } from "./pages/admin-page";
import { CallbackPage } from "./pages/callback-page";
import { HomePage } from "./pages/home-page";
import { NotFoundPage } from "./pages/not-found-page";
import { ProfilePage } from "./pages/profile-page";
import { ProtectedPage } from "./pages/protected-page";
import { PublicPage } from "./pages/public-page";
export const App = () => {
return (
<Routes>
<Route path="/" element={<HomePage />} />
<Route
path="/profile"
element={<AuthenticationGuard component={ProfilePage} />}
/>
<Route path="/public" element={<PublicPage />} />
<Route
path="/protected"
element={<AuthenticationGuard component={ProtectedPage} />}
/>
<Route
path="/admin"
element={<AuthenticationGuard component={AdminPage} />}
/>
<Route path="/callback" element={<CallbackPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
);
};