{"id":31007736,"url":"https://github.com/permitio/fe-demo-react","last_synced_at":"2025-09-13T03:48:23.599Z","repository":{"id":182545467,"uuid":"513448272","full_name":"permitio/fe-demo-react","owner":"permitio","description":"A React demo for frontend permissions with Permit FE-SDK.","archived":false,"fork":false,"pushed_at":"2025-01-09T11:02:12.000Z","size":860,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-05T22:02:27.298Z","etag":null,"topics":["example"],"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/permitio.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":"2022-07-13T08:53:31.000Z","updated_at":"2025-06-14T13:30:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"bee4dae5-0c51-4a17-b7bb-77481011b9ab","html_url":"https://github.com/permitio/fe-demo-react","commit_stats":null,"previous_names":["permitio/fe-demo-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/permitio/fe-demo-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permitio%2Ffe-demo-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permitio%2Ffe-demo-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permitio%2Ffe-demo-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permitio%2Ffe-demo-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/permitio","download_url":"https://codeload.github.com/permitio/fe-demo-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permitio%2Ffe-demo-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274915617,"owners_count":25373194,"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","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["example"],"created_at":"2025-09-13T03:48:22.295Z","updated_at":"2025-09-13T03:48:23.568Z","avatar_url":"https://github.com/permitio.png","language":"TypeScript","readme":"This demo covers the use of the Permit FE-SDK - which can be used to adjust frontend experinces according to the authorization policy.\nThe SDK uses [CASL.js](https://casl.js.org/) to provide an interface for various frameworks including React.\nTHe inegration is applied via the caslAbility adapter interface.\n\nTake a look at the use of caslAbility in app.tsx:\n```js\n  useEffect(() =\u003e {\n  // It is good to load permission state as soon as possible in the app\n  getAbility().then((caslAbility: any) =\u003e {\n    setAbility(caslAbility as any);\n  });\n  }, []);\n  ```\n\nFrom CaslAbility.ts\nNote that you need to set the real loggedInUser, and the url of your backend permit check url\nand in the next line to add all action and resources you want to check\n```js\nexport const getAbility = async () =\u003e {\n    const permit = Permit({loggedInUser: \"odedbd@gmail.com\", backendUrl: \"http://localhost:4000/\"});\n    await permit.loadLocalState([{ action: \"create\", resource: \"file\" }, { action: \"update\", resource: \"file\" }, { action: \"delete\", resource: \"file\" }, { action: \"read\", resource: \"file\" }]);\n    const caslConfig = permitState.getCaslJson();\n    return caslConfig \u0026\u0026 caslConfig.length? new Ability(caslConfig) : undefined ;\n}\n```\n\nIn the child component you need also to load the ability and use it to check permissions\n```js\n  // in this use effect you can get your ability from state or from api\n  useEffect(() =\u003e {\n  getAbility().then((caslAbility: any) =\u003e {\n    setAbility(caslAbility as any);\n  });\n  }, []);\n```\n\nAfter this you are free to check permissions in your frontend\n```js\n        {/* you can check permissions with permit check to permission status */}\n        {permitState?.check(\"create\", \"file\") \u0026\u0026 \u003cp\u003epermit raw create file\u003c/p\u003e}\n        {permitState?.check(\"update\", \"file\") \u0026\u0026 \u003cp\u003epermit raw update file\u003c/p\u003e}\n        {/* you can check permissions with casl Can component */}\n        \u003cCan I=\"create\" a=\"file\" ability={ability}\u003e\n          Yes, you can create file!\n        \u003c/Can\u003e \n```\n\nThe last thing you need to do is to make sure you have a permit.check route in your backend (in this example app `backendUrl: \"http://localhost:4000/\"`)\nThis route provides user, resource and action as get params and returns a permitted object\n{permitted: boolean}\nHere is an example to such route:\n```js\n// add route that get user resource and action as get parameters and check if user is permitted\napp.get(\"/\", async (req, res) =\u003e {\n  const { user, resource, action } = req.query;\n  const permitted = await permit.check(user, action, resource); \n  res.send({permitted});\n});\n```\n\nA server example is included in this repository under the server folder\nyou can run it with\n`npm install`\n\n`npm -g install nodemon`\n\n`nodemon test.js`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermitio%2Ffe-demo-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpermitio%2Ffe-demo-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermitio%2Ffe-demo-react/lists"}