Protected routes with React Router v5

React Router makes it extremely easy to define routing in your React application, but out of the box doesn’t concern itself with which routes should require authentication and which ones should now.

I’ve solved this problem in a past life, using React Router v4 and looking back at the code we had written, it left quite a bit to be desired. So much so that when I tried to copy pasta the code into a new project of mine, it didn’t work as expected.

Fast forward to after researching and reading a handful of other posts out there, some of which actually seemed to be plagiarized from each other, I realized that most of what I was reading was also in reference to React Router v4.

Between you and me, I don’t really know what the main differences are between v4 and v5 of React router. What I do know, is that I wasn’t totally satisfied with anything I had read so I had set out to solve the problem my way.

The big things I had found to be missing were in regard to handling routes that should only be available when a user is unauthenticated and nobody seems to have documented the process while using TypeScript or a proper style guide.

I’m a huge fan of TypeScript and I don’t write much code without the safety net of the Airbnb style guide, so most of the code I was slinging around needed massaged quite a bit to make it work for me.

That said, to handle juggling both routes that require authentication, and those that require the user to be unauthenticated, I added two new components that act as wrappers for React Router’s Route component.

The following code will assume that you have some sort of helper method to tell you if the user is properly authenticated. For me, that’s just an isAuthenticated method that checks to see if we have a JSON web token available.

Also, note the limited nature of which route properties I’m passing back to the Route component. I’m not sure if that will be enough long term, but for the sake of not triggering eslint, specifically the react/jsx-props-no-spreading rule, I’m limiting the scope of what I’m passing through.

AuthenticatedRoute.component.tsx

import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';

import { isAuthenticated } from '../helpers';

const RouteAuthenticated = ({ component: Component, path }: RouteProps) => {
  if (!isAuthenticated()) {
    return <Redirect to="/login" />;
  }

  return <Route component={Component} path={path} />;
};

export default RouteAuthenticated;

UnauthenticatedRoute.component.tsx

import React from 'react';
import { Redirect, Route, RouteProps } from 'react-router-dom';

import { isAuthenticated } from '../helpers';

const RouteUnauthenticated = ({ component: Component, path }: RouteProps) => {
  if (isAuthenticated()) {
    return <Redirect to="/dashboard" />;
  }

  return <Route component={Component} path={path} />;
};

export default RouteUnauthenticated;

App.component.tsx

import React from 'react';
import { Router, Redirect, Switch } from 'react-router-dom';

import { history, isAuthenticated } from '../helpers';

import Dashboard from './Dashboard.component';
import LoginForm from './LoginForm.component';
import RouteAuthenticated from './RouteAuthenticated.component';
import RouteUnauthenticated from './RouteUnauthenticated.component';
import SignupForm from './SignupForm.component';

const fallbackUri = `${isAuthenticated() ? '/dashboard' : '/login'}`;

const App = () => (
  <div className="container">
    <Router history={history}>
      <Switch>
        <RouteUnauthenticated path="/signup" component={SignupForm} />
        <RouteUnauthenticated path="/login" component={LoginForm} />

        <RouteAuthenticated path="/dashboard" component={Dashboard} />

        <Redirect to={fallbackUri} />
      </Switch>
    </Router>
  </div>
);

export default App;

With the addition of the two new components wrapping the Route component, I’m able to route accordingly, so folks that are already authenticated can’t get to the login or sign up forms.

You certainly could combine the RouteAuthenticated and RouteUnauthenticated components into a single component that accepts a new property to tell you if it should require authentication or not. If you’re using TypeScript this will probably result in needing to extend the ReactProps since your new property won’t exist on that type / interface.

What about routes that should be available to both authenticated users and users that have yet to authenticate? Just utilize the Route component from React Router and you should be good to go!