Course lesson
In this lesson, we create an AuthenticationGuard file that uses the Auth0React SDK to protect React routes by requiring login.
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>
);
};
Course lesson
In this lesson, we create an AuthenticationGuard file that uses the Auth0React SDK to protect React routes by requiring login.