Use Auth0 component withAuthenticationRequired To Protect React Router 6 Routes
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>
);
};
Interviewer: [0:00] Inside the components folder, let's create an authentication guard file. First, I'm going to import the withAuthenticationRequired component from the Auth0 React SDK. Then import React from React.
[0:14] When you wrap your components and the withAuthenticationRequired higher-order component, any anonymous user who visits that component will be directed to the login page. Then return to that page after they've been authenticated.
[0:31] First, I'm going to create a component called authentication guard. Then I'm going to pass in component as a prop. Then I'm going to declare a new component, which will be the component that we want to be protected by withAuthenticationRequired.
[0:47] Then we'll return component. Now that we have the AuthenticationGuard component completed, we can use it to protect any React route. Let's head to app.JS, and let's import AuthenticationGuard.
[1:01] As you see here, we have the Auth0 sample application running alongside our code editor. If I click the menu and visit the profile route, I'm able to see the profile route. I'm also able to see public and I'm also able to see the protected route.
[1:19] We can use the AuthenticationGuard component to require a login to access these routes. Let's use the AuthenticationGuard component we created inside of the route component from React router.
[1:32] Inside of element, let's pass in the the AuthenticationGuard component with the component prop and set it to the profile page. Make sure that we hit save. Then now let's visit the profile page. As you see, I get redirected to the Auth0 universal login page.
[1:53] Now let's add the AuthenticationGuard component to the protected route as well as admin. Make sure that we hit save. Now we go to the application, we try to visit admin, we get redirected to the Auth0 login. If we try to go to protect it, we get redirected to the Auth0 login. If we try to visit profile, we get redirected to the Auth0 login.
[2:23] Just to recap, we created a AuthenticationGuard file in the components folder. In that file, we imported withAuthenticationRequired from the Auth0 SDK. Then we created an AuthenticationGuard component with a component prop.
[2:41] Then we created a new component which would be the component from the prop that gets parsed into the withAuthenticationRequired component. Then we return a new component.
[2:55] Then we headed over to AB.JS, we imported AuthenticationGuard. Then we parsed in the AuthenticationGuard component to the React router route component with a component prop and then passed in the route that we want to protect.