{"id":26460005,"url":"https://github.com/nichitaa/auth-react-router","last_synced_at":"2025-03-19T02:47:59.875Z","repository":{"id":40364691,"uuid":"444461935","full_name":"nichitaa/auth-react-router","owner":"nichitaa","description":"A simple yet extensible approach for configuring and handling protected and role based routing for react applications using react-router-dom v6","archived":false,"fork":false,"pushed_at":"2024-01-14T19:29:42.000Z","size":421,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-03-14T20:21:54.274Z","etag":null,"topics":["auth-route","common-route","context-api","npm-package","react-router-dom-v6","routing"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@nichitaa/auth-react-router","language":"TypeScript","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/nichitaa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2022-01-04T15:04:46.000Z","updated_at":"2024-06-16T16:20:15.035Z","dependencies_parsed_at":"2024-01-13T17:23:25.884Z","dependency_job_id":"b2ea03af-ee81-492f-9ce2-16d4b11ac46a","html_url":"https://github.com/nichitaa/auth-react-router","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichitaa%2Fauth-react-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichitaa%2Fauth-react-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichitaa%2Fauth-react-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichitaa%2Fauth-react-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nichitaa","download_url":"https://codeload.github.com/nichitaa/auth-react-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244345095,"owners_count":20438241,"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":["auth-route","common-route","context-api","npm-package","react-router-dom-v6","routing"],"created_at":"2025-03-19T02:47:59.252Z","updated_at":"2025-03-19T02:47:59.861Z","avatar_url":"https://github.com/nichitaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**`@nichitaa/auth-react-router`** is a lightweight package that uses and extends basic `react-router-dom` v6\nfunctionality and allows you to define the routes based on user `authorized` and `roles` states. It provides a simple\nAPI for configuring `public`, `private` and `common` routes, and it has a simple and advance RBAC configuration.\n\n[Documentation (`typedoc`)](https://nichitaa.github.io/auth-react-router/)\n\nThis code and routing pattern is used on most of my personal projects and would probably meet most of the routing\nrequirement for any other react application, but beware and use it at your own risk.\n\n### Getting Started 🎉\n#### Peer Dependencies 🔨\n\n* `react`: `\u003e=16`,\n* `react-dom`: `\u003e=16`,\n* `react-router-dom`: `^6.x`\n\n#### Installation ✨\n```shell\nnpm install @nichitaa/auth-react-router\n```\n\n#### Example\n\nDefine your application routes *(easier to maintain if are in separate file)\n\n```JSX\n// src/routes.tsx\nimport { RoutesConfig } from '@nichitaa/auth-react-router';\nimport { Outlet } from 'react-router-dom';\nimport { lazy } from 'react';\n\n/**\n * using normal `imports` or `lazy`\n */\nimport PageA from '../pages/LoginPage.tsx';\n\nconst LazyPageB = lazy(() =\u003e import('../pages/PageB'));\nconst LazyPageC = lazy(() =\u003e import('../pages/PageC'));\nconst LazyPageD = lazy(() =\u003e import('../pages/PageD'));\n\n/**\n * optionally define roles (if you want to use RBAC functionality)\n */\nexport const roles = {\n  ADMIN: 'ADMIN',\n  OPERATION: 'OPERATION',\n  MANAGER: 'MANAGER',\n  REGULAR: 'REGULAR',\n} as const;\n\n\n/** routes definition */\nexport const routes: RoutesConfig = {\n  /**\n   * globally configured fallbacks (can be configured at route level too)\n   */\n  fallback: {\n    /**\n     * if user is on private route and has `authorized: false`, then he probably should be redirectied to a public route\n     * and vice-versa, if those route fallbacks are not provided, default one is first common route (common[0].path)\n     */\n    privateRoute: '/b', \n    publicRoute: '/c',\n    InvalidRoles: route =\u003e \u003cGlobalInvalidRoute {...route} /\u003e,\n    Suspense: \u003c\u003e...loading page...\u003c/\u003e,\n  },\n  /**\n   * common routes (accessible by all users)\n   */\n  common: [\n    {\n      path: '/',\n      element: \u003c\u003eRoute available for all users\u003c/\u003e,\n    },\n    {\n      path: '*',\n      element: \u003cp\u003ePAGE NOT FOUND 404\u003c/p\u003e,\n    },\n  ],\n  /**\n   * public paths (accessible only by users with `authorized: false`)\n   */\n  public: [\n    {\n      path: '/b',\n      // with \u003cOutlet/\u003e\n      element: \u003c\u003e\n        \u003cCustomLayout\u003e\n          \u003cOutlet /\u003e\n        \u003c/CustomLayout\u003e\n      \u003c/\u003e,\n      // nested routes\n      routes: [\n        {\n          index: true,\n          element: \u003cLazyPageB /\u003e,\n        },\n        {\n          path: ':id',\n          element: \u003cLazyPageC /\u003e,\n        },\n      ],\n    },\n  ],\n  /**\n   * private paths (accessible only by users with `authorized: true`)\n   */\n  private: [\n    {\n      path: '/c',\n      element: \u003c\u003ePrivate page protected by all roles\u003c/\u003e,\n      roles: [roles.ADMIN, roles.MANAGER],\n      allRolesRequired: true,\n    },\n    {\n      path: '/c',\n      element: \u003c\u003ePrivate page protected by at least one role\u003c/\u003e,\n      roles: [roles.OPERATION, roles.MANAGER],\n    },\n    {\n      path: '/d',\n      element: \u003cLazyPageD /\u003e,\n      roles: [roles.OPERATION, roles.MANAGER],\n      // Private route with its own fallbacks\n      fallback: {\n        Suspense: \u003c\u003e...loading page for private route /d...\u003c/\u003e,\n        InvalidRoles: (route) =\u003e \u003c\u003e:( could not access route /d\u003c/\u003e,\n        /**\n         *  fallback route if unauthroized user tryies to access `/d` route,\n         *  usually you'd want to redirect him to a public/common page (a page that he has access to)\n         */\n        route: '/b',\n      },\n    },\n  ],\n};\n```\n\nConfigure `AuthReactRouter` and render `RoutesRoot`\n\n```JSX\nimport { AuthReactRouter, RoutesRoot } from '@nichitaa/auth-react-router';\nimport { BrowserRouter } from 'react-router-dom';\nimport { routes, roles } from './routes';\n\nexport const App = () =\u003e {\n  const { isAuthorized, userRoles } = useAuthProvider();\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cAppRouter authorized={isAuthorized} routes={routes} roles={userRoles}\u003e\n        \u003cRoutesRoot /\u003e\n      \u003c/AppRouter\u003e\n    \u003c/BrowserRouter\u003e\n  );\n};\n```\n\nTo add a new route just add it to `public`, `private` or `common` array and it will work. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichitaa%2Fauth-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnichitaa%2Fauth-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichitaa%2Fauth-react-router/lists"}