{"id":18623588,"url":"https://github.com/codica2/react-authorized-routes-sample","last_synced_at":"2026-04-28T17:35:14.823Z","repository":{"id":98303516,"uuid":"232591102","full_name":"codica2/react-authorized-routes-sample","owner":"codica2","description":"⚛️ React authorized routes with HOC sample","archived":false,"fork":false,"pushed_at":"2020-01-08T15:13:26.000Z","size":2,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-16T01:26:12.378Z","etag":null,"topics":["hoc","react","react-router","routes"],"latest_commit_sha":null,"homepage":"","language":null,"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/codica2.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-08T15:12:05.000Z","updated_at":"2021-09-02T08:43:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"c1dad389-38ca-4dbb-a2b2-81208a94730d","html_url":"https://github.com/codica2/react-authorized-routes-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codica2/react-authorized-routes-sample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Freact-authorized-routes-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Freact-authorized-routes-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Freact-authorized-routes-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Freact-authorized-routes-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codica2","download_url":"https://codeload.github.com/codica2/react-authorized-routes-sample/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Freact-authorized-routes-sample/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32392300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T14:34:11.604Z","status":"ssl_error","status_checked_at":"2026-04-28T14:32:37.009Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["hoc","react","react-router","routes"],"created_at":"2024-11-07T04:25:11.350Z","updated_at":"2026-04-28T17:35:14.803Z","avatar_url":"https://github.com/codica2.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact authorized routes with HOC sample\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://reactjs.org/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/React-v16.8.3-%238DD6F9.svg?logo=React\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/codica2\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/licence-MIT-green.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Description\n\nThis is an example of the `HOC` for managing autorized, unauthorized, common etc. routes in you react application.\n\nFirstly, we create and export a few constants, we are going to use them to define the type of a route.\n\n```js\nexport const SHARED = \"SHARED\";\nexport const LOGGED = \"LOGGED\";\nexport const UNLOGGED = \"UNLOGGED\";\n```\n\n`SHARED` - means that both autorized and unauthorized users can get access to the current route \u003cbr /\u003e\n`LOGGED` - only autorized users \u003cbr /\u003e\n`UNLOGGED` - only unauthorized users \u003cbr /\u003e\n\nAlso we should define a current user state, in our example has been used React Context API, particularly `useContext` hook but of course, you may use anything you want instead (Redux, MobX, etc.).\n\n```js\nconst { user } = useContext(AuthContext);\n\nconst logged = user ? LOGGED : UNLOGGED;\n```\n\nThen we set a case when a user must be redirected to the login page otherwise we just do nothing and return the actual component that has been passed as an argument.\n\n```js\nif (auth !== SHARED \u0026\u0026 auth !== logged) {\n  return \u003cRedirect to=\"/login\" /\u003e;\n}\n\nreturn \u003cComponent {...rest} /\u003e;\n```\n\nHere is a full example:\n\n```js\nexport const SHARED = 'SHARED';\nexport const LOGGED = 'LOGGED';\nexport const UNLOGGED = 'UNLOGGED';\n\nexport default auth =\u003e Component =\u003e props =\u003e {\n  const { user } = useContext(AuthContext);\n\n  const logged = user ? LOGGED : UNLOGGED;\n\n  if (auth !== SHARED \u0026\u0026 auth !== logged) {\n    return \u003cRedirect to=\"/login\" /\u003e\n  }\n\n  return \u003cComponent {...rest} /\u003e\n\n```\n\n## Usage\n\nIn order to use it at first invocation, we pass the `auth` constant and then we must pass the actual component.\n\n```js\nimport Homepage from '../pages/home';\nimport Login from '../pages/login';\nimport Register from '../pages/register';\nimport Profile from '../pages/profile';\n\nconst shared = auth(SHARED);\nconst logged = auth(LOGGED);\nconst unlogged = auth(UNLOGGED);\n\nconst Auth = {\n  Homepage: shared(Homepage),\n  Login: unlogged(Login),\n  Register: unlogged(Register),\n  Profile: logged(Profile),\n};\n\nconst App = () =\u003e (\n  \u003cSwitch\u003e\n    \u003cRoute exact path=\"/\" component={Auth.Homepage} /\u003e\n    \u003cRoute exact path=\"/login\" component={Auth.Login} /\u003e\n    \u003cRoute exact path=\"/register\" component={Auth.Register} /\u003e\n    \u003cRoute exact path=\"/profile\" component={Auth.Profile} /\u003e\n  \u003c/Switch\u003e\n);\n\n```\n\nOr if you prefer declatative object-based approach with `react-router`:\n\n```jsx\n\n// ...\n\nconst routes = [\n  {\n    path: '/homepage',\n    auth: shared,\n    component: Homepage,\n  },\n  {\n    path: '/login',\n    auth: unlogged,\n    component: Login,\n  },\n\n  // ...\n];\n\n```\n\n## About Codica\n\n[![Codica logo](https://www.codica.com/assets/images/logo/logo.svg)](https://www.codica.com)\n\nWe love open source software! See [our other projects](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Freact-authorized-routes-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodica2%2Freact-authorized-routes-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Freact-authorized-routes-sample/lists"}