Setting up protected routes in React

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:

• Protected routes in React video tutorial
• React quick start with Appwrite
• Set up Google auth in React
• Build a cross-platform application in React Native