{"id":19510003,"url":"https://github.com/permify/react-role","last_synced_at":"2025-04-05T08:06:20.633Z","repository":{"id":41814066,"uuid":"482837082","full_name":"Permify/react-role","owner":"Permify","description":"Lightweight role based access management solution for React applications","archived":false,"fork":false,"pushed_at":"2024-05-31T17:11:29.000Z","size":69,"stargazers_count":193,"open_issues_count":4,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T07:06:01.232Z","etag":null,"topics":["acl","authorization","hooks","open-source","permissions","rbac","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Permify.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-04-18T12:23:40.000Z","updated_at":"2025-03-28T15:55:17.000Z","dependencies_parsed_at":"2024-08-09T13:21:41.896Z","dependency_job_id":null,"html_url":"https://github.com/Permify/react-role","commit_stats":{"total_commits":13,"total_committers":4,"mean_commits":3.25,"dds":0.3076923076923077,"last_synced_commit":"bd595376650fab602cabc5564828160fa877d0c7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Permify%2Freact-role","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Permify%2Freact-role/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Permify%2Freact-role/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Permify%2Freact-role/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Permify","download_url":"https://codeload.github.com/Permify/react-role/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"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":["acl","authorization","hooks","open-source","permissions","rbac","react","reactjs"],"created_at":"2024-11-10T23:14:09.101Z","updated_at":"2025-04-05T08:06:20.614Z","avatar_url":"https://github.com/Permify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Role\n[![npm](https://img.shields.io/npm/v/@permify/react-role?style=flat-square)](https://www.npmjs.com/package/@permify/react-role)\n[![Twitter Follow](https://img.shields.io/twitter/follow/GetPermify?style=social)](https://twitter.com/GetPermify)\n[![Discord](https://img.shields.io/discord/950799928047833088.svg?label=\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=6A7EC2)](https://discord.gg/MJbUjwskdH)\n\nReact Role is lightweight role based access management solution which provides components, hooks, and helper methods for controlling access checks and user permissions throughout your entire React application.\n\n# Installation\nUse npm to install: \n\n```shell\nnpm install @permify/react-role\n```\nUse yarn to install:\n\n```shell\nyarn add @permify/react-role\n```\n\n# How to use\n\n## `PermifyProvider`\n\nWrap the part of your application where you want to perform access checks with PermifyProvider. You should pass some props to PermifyProvider in order to utilize from Permify components, hooks and helper methods.\n\n```javascript\nimport React from \"react\";\nimport { PermifyProvider } from \"@permify/react-role\";\n\nconst App = () =\u003e {\n    return (\n        \u003cPermifyProvider\u003e\n            {/* Application layer, Routes, ThemeProviders etc. */}\n        \u003c/PermifyProvider\u003e;\n    )\n};\n\nexport default App;\n```\n### User Identification\n\nIn order to check user roles or permissions, you should set logged in user with ```setUser``` function. Our advice is call this method in your login functions promise. \n\nSet the user using the ```usePermify``` hook:\n\n```javascript\n\nimport { usePermify } from '@permify/react-role';\n\n...\n\nconst { setUser } = usePermify();\n\nconst login = async (e) =\u003e {\n    const response = await login(email, password);\n\n    setUser({\n       id: \"2\",\n       roles: [\"admin\", \"manager\"],\n       permissions: [\"post-create\", \"user-delete\", \"content-show\"]\n    })\n\n    //\n    // Continue authentication flow\n    //         \n};\n```\n\nOr using ```PermifyContext```:\n\n```javascript\nimport React from \"react\";\nimport { PermifyContext } from \"@permify/react-role\";\n\nconst AuthComponent = () =\u003e {\n    const login = (setUser) =\u003e {\n        return async (event) =\u003e {\n            const response = await login(email, password);\n\n            setUser({\n                id: \"2\",\n                roles: [\"admin\", \"manager\"], \n                permissions: [\"post-create\", \"user-delete\", \"content-show\"]\n            })\n\n            //\n            // Continue authentication flow\n            // \n        };\n    };\n\n    return (\n        \u003cPermifyContext.Consumer\u003e\n            {({ setUser }) =\u003e (\n                \u003cform onSubmit={login(setUser)}\u003e\n                    {/* form layer */}\n                \u003c/form\u003e\n            )}\n        \u003c/PermifyContext.Consumer\u003e; \n    )\n};\n\nexport default AuthComponent;\n```\n\n## `HasAccess` \n\nHasAccess is a wrapper component that you can wrap around components or UI Layers that should only be accessible to users have authorization. \n\nYou can check roles and permissions of the user with giving them as props.\n\n```javascript\nimport React from \"react\";\nimport { HasAccess } from \"@permify/react-role\";\n\nconst AnyComponent = () =\u003e {\n    return (\n        ..\n        ..\n\n        \u003cHasAccess\n            roles={[\"admin\", \"manager\"]} \n            permissions=\"user-delete\" \n            renderAuthFailed={\u003cp\u003eYou are not authorized to access!\u003c/p\u003e}\n            isLoading={\u003cSpinner/\u003e}\n        \u003e\n            \u003cbutton type=\"button\"\u003e Delete \u003c/button\u003e\n        \u003c/HasAccess\u003e\n\n        ..\n        ..\n    )\n};\n\nexport default App;\n```\n\n## `isAuthorized(roleNames, permissionNames)`\n\nisAuthorized is a helper function that returns a Promise which resolves with true if the user is authorized for action with the given parameters, if not it resolves with false. \n\nYou should call it inside a conditional logic structure; for ex. if check for fetching protected information.\n\nUsing isAuthorized through the usePermify hook:\n\n```javascript\nimport React, {useState, useEffect} from \"react\";\nimport { usePermify } from \"@permify/react-role\";\n\nconst AnyComponent = () =\u003e {\n    const { isAuthorized, isLoading } = usePermify();\n\n    useEffect(() =\u003e {\n        const fetchData = async () =\u003e {\n            // Pass roles and permissions accordingly\n            // You can send empty array or null for first param to check permissions only\n            if (await isAuthorized([\"admin\", \"manager\"], \"user-delete\")) {\n                // request protected info from serverß\n            }\n        };\n\n        fetchData();\n    },[]);\n\n    return (\n        \u003c\u003e  \n            {isLoading \u0026\u0026 \u003cspan\u003eLoading...\u003c/span\u003e}\n            {dataFetched \u0026\u0026\n                //render protected component, UI Layers etc.\n            }\n        \u003c/\u003e;\n    )\n};\n\nexport default AnyComponent;\n```\n\nStargazers\n-----------\n\n[![Stargazers repo roster for @Permify/react-role](https://reporoster.com/stars/Permify/react-role)](https://github.com/Permify/react-role/stargazers)\n\n\u003ch2 align=\"left\"\u003e:heart: Let's get connected:\u003c/h2\u003e\n\n\u003cp align=\"left\"\u003e\n\u003ca href=\"https://twitter.com/GetPermify\"\u003e\n  \u003cimg alt=\"guilyx | Twitter\" width=\"50px\" src=\"https://user-images.githubusercontent.com/43545812/144034996-602b144a-16e1-41cc-99e7-c6040b20dcaf.png\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/company/permifyco\"\u003e\n  \u003cimg alt=\"guilyx's LinkdeIN\" width=\"50px\" src=\"https://user-images.githubusercontent.com/43545812/144035037-0f415fc7-9f96-4517-a370-ccc6e78a714b.png\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n# License\nLicensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermify%2Freact-role","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpermify%2Freact-role","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermify%2Freact-role/lists"}