{"id":22353216,"url":"https://github.com/joelseq/react-router-auth","last_synced_at":"2025-07-11T01:06:55.884Z","repository":{"id":57343735,"uuid":"127271819","full_name":"joelseq/react-router-auth","owner":"joelseq","description":"A utility library for React Router v4 for managing authentication based routing","archived":false,"fork":false,"pushed_at":"2018-03-30T23:33:43.000Z","size":171,"stargazers_count":39,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-30T08:52:17.456Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joelseq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T09:51:33.000Z","updated_at":"2023-03-31T02:14:18.000Z","dependencies_parsed_at":"2022-09-12T06:51:02.455Z","dependency_job_id":null,"html_url":"https://github.com/joelseq/react-router-auth","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelseq%2Freact-router-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelseq%2Freact-router-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelseq%2Freact-router-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelseq%2Freact-router-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joelseq","download_url":"https://codeload.github.com/joelseq/react-router-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228111334,"owners_count":17871338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T12:34:44.043Z","updated_at":"2024-12-04T12:34:47.000Z","avatar_url":"https://github.com/joelseq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact-Router-Auth\u003c/h1\u003e\n\n\u003e A utility library for React Router v4 for managing authentication based routing\n\n[![NPM Version][npm-badge]][npm]\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n\nThis 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.\n\n## Install\n\n```bash\nnpm install --save react-router-auth\n\nOR\n\nyarn add react-router-auth\n```\n\n## Usage\n\n### AuthRoute\n\nUse this component if you have a route that requires the user to be authenticated for them to be able to access it.\n\ne.g. to access user profile page\n\n```jsx\nimport React, { Component } from 'react'\nimport { AuthRoute } from 'react-router-auth'\nimport UserProfile from './UserProfile'\n\nclass Example extends Component {\n  render () {\n    return (\n      \u003cAuthRoute path=\"/profile\" component={UserProfile} redirectTo=\"/login\" authenticated={this.props.authenticated} /\u003e\n    )\n  }\n}\n```\n\nIn 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.\n\n#### Props\n\n| Name          | Type            | Description                                            |\n|---------------|-----------------|--------------------------------------------------------|\n| authenticated | boolean         | Whether the user is authenticated or not               |\n| redirectTo    | string          | The route to redirect the user to if not authenticated |\n| component     | React Component | The component that requires authentication             |\n\n### UnauthRoute\n\nUse this component if you have a route that a user should only be able to access if they aren't already authenticated.\n\ne.g. to access the login / signup pages\n\n```jsx\nimport React, { Component } from 'react'\nimport { UnauthRoute } from 'react-router-auth'\nimport Login from './Login'\n\nclass Example extends Component {\n  render () {\n    return (\n      \u003cUnauthRoute path=\"/login\" component={Login} redirectTo=\"/feed\" authenticated={this.props.authenticated} /\u003e\n    )\n  }\n}\n```\n\nIn 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.\n\n#### Props\n\n| Name          | Type            | Description                                        |\n|---------------|-----------------|----------------------------------------------------|\n| authenticated | boolean         | Whether the user is authenticated or not           |\n| redirectTo    | string          | The route to redirect the user to if authenticated |\n| component     | React Component | The component that requires authentication         |\n\n### Usage with Redux\n\nThe easiest way to use these components with Redux is by creating your own components to wrap the components from this library with Redux's `connect` HOC and passing in `authenticated` as a prop.\n\nExample:\n\n```jsx\n// ConnectedAuthRoute.js\nimport { connect } from 'react-redux'\nimport { AuthRoute } from 'react-router-auth'\n\nconst mapStateToProps = state =\u003e ({\n  // In this example the auth reducer has a key\n  // called authenticated which determines if the\n  // user is authenticated or not\n  authenticated: state.auth.authenticated, \n})\n\nexport default connect(mapStateToProps)(AuthRoute)\n```\n\nNow if you want to use this in any of your components, you don't need to pass in the authenticated prop as the component is already hooked up to determine the authenticated state from the Redux store.\n\n```jsx\nimport React, { Component } from 'react'\nimport UserProfile from './UserProfile'\n// Import our connected AuthRoute component\nimport ConnectedAuthRoute from './ConnectedAuthRoute'\n\nclass Example extends Component {\n  render () {\n    return (\n      {/* we don't need to pass in the authenticated prop anymore */}\n      \u003cConnectedAuthRoute path=\"/profile\" component={UserProfile} redirectTo=\"/login\" /\u003e\n    )\n  }\n}\n```\n\n## License\n\nMIT © [joelseq](https://twitter.com/joelseq03)\n\n[build-badge]: https://img.shields.io/circleci/project/github/joelseq/react-router-auth.svg?style=flat-square\n[build]: https://circleci.com/gh/joelseq/react-router-auth\n[npm-badge]: https://img.shields.io/npm/v/react-router-auth.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/react-router-auth\n[coverage-badge]: https://img.shields.io/codecov/c/github/joelseq/react-router-auth.svg?style=flat-square\n[coverage]: https://codecov.io/github/joelseq/react-router-auth\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelseq%2Freact-router-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoelseq%2Freact-router-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelseq%2Freact-router-auth/lists"}