How to Set Up Protected Routes in Your React Application

Require authentication for users to access your page

Ferenc Almasi
Feb 10 · 4 min read
Photo by Ferenc Almasi on Unsplash

Often times, when you’re building a web application, there’s some kind of routing involved with authentication. You want to restrict user access to certain pages or you have your whole application behind a login screen.

React router is a great way to go by routing, but you don’t really have the option to protect routes from being accessed by anyone. Luckily the solution to this is really simple and straightforward.

In this tutorial, I would like to show you what was my solution to the problem and how I got around it. I’ll start from scratch using create-react-app and only include the absolute necessary things so you can follow along. Without further ado, let’s jump into coding.


Setting Everything Up


Modifying the index file

The purpose of the component will be very simple: If the user has been authenticated, render the passed component. Otherwise, redirect them to the login page.

As you can see, I’ve imported Route, BrowserRoute and Switch from react-router-dom. I also created some components so we can test out routing.

The ProtectedRoute will work the following way:

  • It expects a component prop, the one it should render
  • It also expects a path so it knows what component to render on which URL

Here I defined the Dashboard component two times. This is because we want to land on the Dashboard if no path has been defined. This is what line:15 handles. We also want to load in the Dashboard if the user types in an invalid URL. By omitting the path attribute on line:17, we tell React Router to fallback to the provided component.

So let’s see how the ProtectedRoute component works on the inside.


Creating private routes

We get the component from the props and return it if the user has been authenticated. I’ve also made use of Redirect from react-router-dom. If isAuthenticated turns out to be false, we redirect the user to the login page.

So how do we actually decide if the user is authenticated or not? What should we assign to isAuthenticated?


Authenticating users

To prevent forgery, this information may be the presence or absence of a token that you also verify on you server side. This way, you make sure that users cannot log in based on only the presence of the token key. It ensures that it is its value that actually matters.

As you see from the gif above, if I refresh the page, it takes me to the login screen. If I try to access any other route that has restrictions, I get redirected back to the login page. If I set a token — no matter the value for now — I can access those pages. Also note that if I try to access a route that doesn’t exist while I’m logged in, I land on the Dashboard. As soon as I clear the storage, I lose my access.


Summary

Thank you for taking the time to read through, let me know your thoughts on this approach in the comments below. What would be your security solution? 🔒

JavaScript in Plain English

Learn the web's most important programming language.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

More from JavaScript in Plain English

More from JavaScript in Plain English

Why you should learn React instead of Vue

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade