{"id":16124114,"url":"https://github.com/itaditya/react-rbac-auth0-article-code","last_synced_at":"2025-03-18T12:31:35.185Z","repository":{"id":99907691,"uuid":"143352418","full_name":"itaditya/react-rbac-auth0-article-code","owner":"itaditya","description":"Code for auth0 article on RBAC in React","archived":false,"fork":false,"pushed_at":"2018-10-09T01:09:16.000Z","size":120,"stargazers_count":5,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T09:20:59.362Z","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/itaditya.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":"2018-08-02T22:56:09.000Z","updated_at":"2021-02-03T19:11:27.000Z","dependencies_parsed_at":"2023-06-19T20:45:32.598Z","dependency_job_id":null,"html_url":"https://github.com/itaditya/react-rbac-auth0-article-code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Freact-rbac-auth0-article-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Freact-rbac-auth0-article-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Freact-rbac-auth0-article-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itaditya%2Freact-rbac-auth0-article-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itaditya","download_url":"https://codeload.github.com/itaditya/react-rbac-auth0-article-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"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-10-09T21:19:48.404Z","updated_at":"2025-03-18T12:31:35.179Z","avatar_url":"https://github.com/itaditya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React RBAC tutorial\n\nFull tutorial originally appeared and is available on Auth0's blog: [How to Add Role-Based Access Control (RBAC) to React Apps](https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/)\n\n## Requirements\n* Node + npm\n* [Auth0 account](https://auth0.com/) with [application](https://manage.auth0.com/#/applications)\n\n## Install\n\nClone this repository, then run:\n\n```\n$ npm install\n```\n\n## Setup\n\n### Sign Up for Auth0\n\nYou'll need an [Auth0](https://auth0.com) account to manage authentication. You can [sign up for a free Auth0 account here](https://auth0.com/signup).\n\nNext, set up an Auth0 Application so Auth0 can interface with the React app.\n\n### Set Up an Auth0 Application\n\n1. Go to your [**Auth0 Dashboard**](https://manage.auth0.com/#/) and click the \"[Create a New Application](https://manage.auth0.com/#/applications/create)\" button.\n2. Name your new app (something like `React RBAC`) and select \"Single Page Web Applications\".\n3. In the **Settings** for your new Auth0 application app, add `http://localhost:3000/callback` to the **Allowed Callback URLs**.\n5. At the bottom of the **Settings** section, click \"Show Advanced Settings\". Choose the **OAuth** tab and verify that the **JsonWebToken Signature Algorithm** is set to \"RS256\".\n\n### Provide Credentials to React App\n\n1. Rename `auth0-variables.js.example` inside `src/constants/` to `auth0-variables.js`.\n1. Paste the auth0 credentials in `auth0-variables.js`.\n\n## Development server\n\n```\n$ npm start\n```\n\n## Auth0 Rule to Set Roles to a User\n\n```js\nfunction (user, context, callback) {\n  user.app_metadata = user.app_metadata || {};\n\n  if (user.email === 'bruno.krebs@auth0.com') {\n    user.app_metadata.role = 'admin';\n  } else {\n    user.app_metadata.role = 'writer';\n  }\n\n  auth0.users.updateAppMetadata(user.user_id, user.app_metadata)\n    .then(() =\u003e {\n      context.idToken['https://itaditya/role'] = user.app_metadata.role;\n      callback(null, user, context);\n    })\n    .catch((err) =\u003e {\n      callback(err);\n    });\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Freact-rbac-auth0-article-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitaditya%2Freact-rbac-auth0-article-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitaditya%2Freact-rbac-auth0-article-code/lists"}