https://github.com/Permify/react-role
Lightweight role based access management solution for React applications
https://github.com/Permify/react-role
acl authorization hooks open-source permissions rbac react reactjs
Last synced: 6 months ago
JSON representation
Lightweight role based access management solution for React applications
- Host: GitHub
- URL: https://github.com/Permify/react-role
- Owner: Permify
- License: apache-2.0
- Created: 2022-04-18T12:23:40.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-31T17:11:29.000Z (about 1 year ago)
- Last Synced: 2024-11-25T00:23:18.347Z (7 months ago)
- Topics: acl, authorization, hooks, open-source, permissions, rbac, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 67.4 KB
- Stars: 187
- Watchers: 4
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Role
[](https://www.npmjs.com/package/@permify/react-role)
[](https://twitter.com/GetPermify)
[](https://discord.gg/MJbUjwskdH)
React 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.
# Installation
Use npm to install:
```shell
npm install @permify/react-role
```
Use yarn to install:
```shell
yarn add @permify/react-role
```
# How to use
## `PermifyProvider`
Wrap 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.
```javascript
import React from "react";
import { PermifyProvider } from "@permify/react-role";
const App = () => {
return (
{/* Application layer, Routes, ThemeProviders etc. */}
;
)
};
export default App;
```
### User Identification
In 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.
Set the user using the ```usePermify``` hook:
```javascript
import { usePermify } from '@permify/react-role';
...
const { setUser } = usePermify();
const login = async (e) => {
const response = await login(email, password);
setUser({
id: "2",
roles: ["admin", "manager"],
permissions: ["post-create", "user-delete", "content-show"]
})
//
// Continue authentication flow
//
};
```
Or using ```PermifyContext```:
```javascript
import React from "react";
import { PermifyContext } from "@permify/react-role";
const AuthComponent = () => {
const login = (setUser) => {
return async (event) => {
const response = await login(email, password);
setUser({
id: "2",
roles: ["admin", "manager"],
permissions: ["post-create", "user-delete", "content-show"]
})
//
// Continue authentication flow
//
};
};
return (
{({ setUser }) => (
{/* form layer */}
)}
;
)
};
export default AuthComponent;
```
## `HasAccess`
HasAccess is a wrapper component that you can wrap around components or UI Layers that should only be accessible to users have authorization.
You can check roles and permissions of the user with giving them as props.
```javascript
import React from "react";
import { HasAccess } from "@permify/react-role";
const AnyComponent = () => {
return (
..
..
You are not authorized to access!}
isLoading={}
>
Delete
..
..
)
};
export default App;
```
## `isAuthorized(roleNames, permissionNames)`
isAuthorized 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.
You should call it inside a conditional logic structure; for ex. if check for fetching protected information.
Using isAuthorized through the usePermify hook:
```javascript
import React, {useState, useEffect} from "react";
import { usePermify } from "@permify/react-role";
const AnyComponent = () => {
const { isAuthorized, isLoading } = usePermify();
useEffect(() => {
const fetchData = async () => {
// Pass roles and permissions accordingly
// You can send empty array or null for first param to check permissions only
if (await isAuthorized(["admin", "manager"], "user-delete")) {
// request protected info from serverß
}
};
fetchData();
},[]);
return (
<>
{isLoading && Loading...}
{dataFetched &&
//render protected component, UI Layers etc.
}
>;
)
};
export default AnyComponent;
```
Stargazers
-----------
[](https://github.com/Permify/react-role/stargazers)
:heart: Let's get connected:
# License
Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0