In this tutorial, we will explore a straightforward method for implementing protected routes in a React application. The aim is to ensure that users can only access certain pages, such as home and profile, after passing an authentication check. If a user is not authenticated, they will be redirected to the login page.
React protected routes
To accomplish this, we will create a component called ProtectedRoutes that wraps around any routes that need protection. This setup allows us to run an authentication check before rendering these pages. Here are the steps.
Creating the component
First, create a new file named ProtectedRoutes.jsx. In this file, you will import Outlet and Navigate from React Router Dom. Outlet allows for rendering nested routes, while Navigate will be used to redirect our users if they are not authenticated.
Below is a basic structure for the ProtectedRoutes component:
import { Outlet, navigate } from 'react-router-dom';
const ProtectedRoutes = () => {
const user = null; // Simulate an unauthenticated user
return user ? <Outlet /> : <Navigate to="/login"/> // Redirect to login if not authenticated
export default ProtectedRoutes;
Integrating the component into your app
With the ProtectedRoutes component created, the next step is to wrap the routes we want to protect. We can nest all child routes by using the standard <Route> component and by passing in <ProtectedRoutes/> as the element into the parent route.
//App.jsx
...
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoutes from './utils/ProtectedRoutes';
function App()｛
return
<BrowserRouter>
<Routes>
<Route element=｛<Login/>｝ path="/login"'/>
{/* 👇 Wrap your protected routes */}
<Route element={<ProtectedRoutes/>}>
＜Route element=｛<Home/>｝ path="/"/＞
＜Route element= ｛<Profile/>｝ path="/profile"/>
</Route>
</Routes>
</BrowserRouter>
}
Understanding the flow
When a user attempts to access /home or /profile, the ProtectedRoutes component checks if a user is authenticated. If the user exists, the corresponding component uses Outlet to allow routing to continue down to the nested routes. If not, the user is redirected to the login page.
Testing your setup
After completing the setup, it’s important to test the application. Try navigating to the protected routes. If authentication has not been established, you should be redirected to the login page.
Conclusion
In summary, you have implemented protected routes in your React application. By creating a dedicated component to manage authentication checks, you can ensure that only authorized users gain access to specific pages. This method provides a clear and efficient way to handle route protection in your application. Check out some more React resources below:
