AuthGuards in React

January 12, 2019

What is an AuthGuard?

An AuthGuard in Angular is there to make sure that certain conditions are met for your route to render, and if not, you'd redirect to another route such as /login.

React-Router v4 deprecated the onEnter prop!

Previously using the onEnter prop, it was fairly easy to implement any sort of guard for your routes. But the team has decided that it is an expensive feature to have.

Now they also published a doc that demonstrates how you'd implement an AuthGuard with the new API.

I've added a Redux version to their proposed approach, enjoy!

1. Non-Redux Version

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    // Change to a variable you'd imeplement
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

And for the actual routes:

<Switch>
    <Route path="/" component={HomeComponent} exact={true} />

    <PrivateRoute path="/protected-page1" component={ProtectedPage1} exact={true} />
    <PrivateRoute path="/protected-page2" component={ProtectedPage2} exact={true} />
    <PrivateRoute path="/protected-page3" component={ProtectedPage3} exact={true} />
</Switch>

2. Using Redux

class PrivateRouteComponent extends React.Component {
    render() {
        return (
            <Route render={props => (
                this.props.isAuthenticated ? (
                    <this.props.component {...props}/>
                    ) : (
                    <Redirect to={{
                        pathname: '/login',
                        state: { from: props.location }
                    }}/>
                )
            )}/>
        )
    }
}

PrivateRouteComponent.propTypes = {
    isAuthenticated: PropTypes.bool
};

const PrivateRoute =
    connect(
        (state) => ({
            isAuthenticated: state.isAuthenticated,
        })
    )(PrivateRouteComponent)

And for the Routes:

<Switch>
    <Route path="/" component={HomeComponent} exact={true} />

    <PrivateRoute path="/protected-page1" component={ProtectedPage1} exact={true} />
    <PrivateRoute path="/protected-page2" component={ProtectedPage2} exact={true} />
    <PrivateRoute path="/protected-page3" component={ProtectedPage3} exact={true} />
</Switch>