@source4society/react-authentication-route v1.0.0

react-authentication-route

Provides a container to wrap a react-router route and perform authentication checks with a prop based isAuthenticated flag and redirects to prop provided login component if not authenticated.

Inspired by reacttrainings react-router example auth workflow.

Can work hand in hand with react-authapp-container. By adding this route to your application's shell you will be able to easily redirect to the login page if the user has yet to authenticate.

Installation

npm install @source4society/react-authentication-route

or

yarn add @source4society/react-authentication-route

Example

Add the component similar to how you would a normal route, but pass in the additional props isAuthentication and loginPath. Here is an example using react-router's switch:

<Switch>
  <Route exact path="/login" component={LoginPage} />
  <PrivateRoute path="/" component={HomePage} loginPath="/login" isAuthenticated={props.isAuthenticated} />
  <Route component={NotFoundPage} />
</Switch>

This component will redirect the user to the /login route if isAuthenticated is false. It is recommended to wrap the container component in withRouter that holds the PrivateRoute for the redirect to work properly.