|
| 1 | +<h1 align="center">React-Router-Auth</h1> |
| 2 | + |
| 3 | +> A utility library for React Router v4 for managing authentication based routing |
| 4 | +
|
| 5 | +[![NPM Version][npm-badge]][npm] |
| 6 | +[![Build Status][build-badge]][build] |
| 7 | +[![Code Coverage][coverage-badge]][coverage] |
| 8 | + |
| 9 | +This library is based off of the code from the [React Router v4 Docs](https://reacttraining.com/react-router/web/example/auth-workflow). The purpose of this library is to make it easy to handle redirecting users for routes that require the user to either be authenticated or unauthenticated. |
| 10 | + |
| 11 | +## Install |
| 12 | + |
| 13 | +```bash |
| 14 | +npm install --save react-router-auth |
| 15 | + |
| 16 | +OR |
| 17 | + |
| 18 | +yarn add react-router-auth |
| 19 | +``` |
| 20 | + |
| 21 | +## Usage |
| 22 | + |
| 23 | +### AuthRoute |
| 24 | + |
| 25 | +Use this component if you have a route that requires the user to be authenticated for them to be able to access it. |
| 26 | + |
| 27 | +e.g. to access user profile page |
| 28 | + |
| 29 | +```jsx |
| 30 | +import React, { Component } from 'react' |
| 31 | +import { AuthRoute } from 'react-router-auth' |
| 32 | +import UserProfile from './UserProfile' |
| 33 | + |
| 34 | +class Example extends Component { |
| 35 | + render () { |
| 36 | + return ( |
| 37 | + <AuthRoute path="/profile" component={UserProfile} redirectTo="/login" authenticated={this.props.authenticated} /> |
| 38 | + ) |
| 39 | + } |
| 40 | +} |
| 41 | +``` |
| 42 | + |
| 43 | +In this example, if the user is authenticated while they try to access the `/profile` route, then the `UserProfile` component will be rendered. If the user is not authenticated then it will redirect them to the `/login` route. |
| 44 | + |
| 45 | +#### Props |
| 46 | + |
| 47 | +| Name | Type | Description | |
| 48 | +|---------------|-----------------|--------------------------------------------------------| |
| 49 | +| authenticated | boolean | Whether the user is authenticated or not | |
| 50 | +| redirectTo | string | The route to redirect the user to if not authenticated | |
| 51 | +| component | React Component | The component that requires authentication | |
| 52 | + |
| 53 | +### UnauthRoute |
| 54 | + |
| 55 | +Use this component if you have a route that a user should only be able to access if they aren't already authenticated. |
| 56 | + |
| 57 | +e.g. to access the login / signup pages |
| 58 | + |
| 59 | +```jsx |
| 60 | +import React, { Component } from 'react' |
| 61 | +import { UnauthRoute } from 'react-router-auth' |
| 62 | +import Login from './Login' |
| 63 | + |
| 64 | +class Example extends Component { |
| 65 | + render () { |
| 66 | + return ( |
| 67 | + <UnauthRoute path="/login" component={Login} redirectTo="/feed" authenticated={this.props.authenticated} /> |
| 68 | + ) |
| 69 | + } |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +In this example, if the user is authenticated while they try to access the `login` route, they will be redirected to the `/feed` route. If the user is not authenticated, then the `Login` component will be rendered. |
| 74 | + |
| 75 | +#### Props |
| 76 | + |
| 77 | +| Name | Type | Description | |
| 78 | +|---------------|-----------------|----------------------------------------------------| |
| 79 | +| authenticated | boolean | Whether the user is authenticated or not | |
| 80 | +| redirectTo | string | The route to redirect the user to if authenticated | |
| 81 | +| component | React Component | The component that requires authentication | |
| 82 | + |
| 83 | + |
| 84 | +## License |
| 85 | + |
| 86 | +MIT © [joelseq](https://twitter.com/joelseq03) |
| 87 | + |
| 88 | +[build-badge]: https://img.shields.io/circleci/project/github/joelseq/react-router-auth.svg?style=flat-square |
| 89 | +[build]: https://circleci.com/gh/joelseq/react-router-auth |
| 90 | +[npm-badge]: https://img.shields.io/npm/v/react-router-auth.svg?style=flat-square |
| 91 | +[npm]: https://www.npmjs.com/package/react-router-auth |
| 92 | +[coverage-badge]: https://img.shields.io/codecov/c/github/joelseq/react-router-auth.svg?style=flat-square |
| 93 | +[coverage]: https://codecov.io/github/joelseq/react-router-auth |
0 commit comments