Create a Route That Redirects

Let’s first create a route that will check if the user is logged in before routing.

Add the following to src/components/AuthenticatedRoute.js.

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

export default ({ component: C, props: cProps, ...rest }) => (
  <Route {...rest} render={props => (
    cProps.userToken !== null
      ? <C {...props} {...cProps} />
      : <Redirect to={`/login?redirect=${props.location.pathname}${props.location.search}`} />
  )}/>
);

This component is similar to the AppliedRoute component that we created in the Add the user token to the state chapter. The main difference being that we look at the props that are passed in to check if there is a user token. If a user token is set, then we simply render the passed in component. And if the user token is not set, then we use the Redirect React Rotuer v4 component to redirect the user to the login page. We also pass in the current path to the login page (redirect in the querystring). We will use this later to redirect us back after the user logs in.

We’ll do something similar to ensure that the user is not authenticated.

Add the following to src/components/UnauthenticatedRoute.js.

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

export default ({ component: C, props: cProps, ...rest }) => (
  <Route {...rest} render={props => (
    cProps.userToken === null
      ? <C {...props} {...cProps} />
      : <Redirect to="/" />
  )}/>
);

Here we are checking to ensure that the user token is not set before we render the component that is passed in. And in the case where the user is logged in, we use the Redirect component to simply send the user to the homepage.

Next, let’s use these components in our app.