In this tutorial, you are going to learn how you create protected routes in a React application.
Note that you will be using React Router v6, which is a bit different from previous versions.
Getting Started
To get started, use create-react-app to bootstrap a simple React application.
Navigate to the folder that was just created and start your application.
Open your application folder with your preferred text editor and clean it up. Your app.js should look like this.
You are now ready to set up the routes.
Setting Up the React Router
You will use React Router to set up the navigation for your application.
Install react-router-dom.
For this application, you will have three main pages:
Home page(the landing page). Profile page (protected, so only logged-in users have access). About page (public so anyone can access it).
In Navbar.js, use the Link component from react-router-dom to create the navigation links to various paths.
In app.js create the routes matching the links in the navigation menu.
Now you need to create the components you have referenced in App.js.
In Home.js:
In Profile.js
In About.js
Creating Protected Routes in React
Next up is creating protected routes. The home and about routes are public meaning anyone can access them, but the profile route requires users to be authenticated first. Therefore, you need to create a way to log in users.
Setting Up Fake Authentication
Since this is not an authentication tutorial, you will use React useState hook to simulate a login system.
In App.js, add the following.
Here, you are tracking the login status of the user using state. You have two buttons, the login, and the logout button. These buttons are rendered in turn depending on whether a user is logged in or not.
If the user is logged out, the login button is displayed. Clicking on it will trigger the login function which will update the isLoggedIn state to true and in turn the display from login to the logout button.
Protecting Private Components
To protect routes, the private components must also have access to the isLoggedIn value. You can do this by creating a new component that accepts the isLoggedIn state as a prop and the private component as a child.
For instance, if your new component is named “Protected”, you would render a private component like this.
The Protected component will check whether isLoggedIn is true or false. If it’s true, it will go ahead and return the Private component. If it’s false, it will redirect the user to a page where they can log in.
Learn more about other ways you can use to render a component depending on conditions from this article on conditional rendering in React.
In your application, create Protected.js.
In this component, the if statement is used to check whether the user is authenticated. If they are not, Navigate from react-router-dom redirects them to the home page. However, if the user is authenticated, the child component is rendered.
Use Protected.js in App.js modify the Profile page route.
App.js should look like this.
That’s it on creating protected routes. You can now access the Profile page only if you are logged in. If you try to navigate to the Profile page without logging in you will be redirected to the home page.
Role-Based Access Control
This tutorial showed you how you can restrict unauthenticated users from accessing a page in a React application. In some cases, you might need to go even further and restrict users based on their roles. For instance, you can have a page say an analytics page that only grants access to admins. Here, you will need to add logic in the Protected component that checks whether a user meets the required conditions.
