React Role

!npm
!Twitter URL

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 without any backend connection.

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;
`


$3

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 = (setUserId) => {
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 (
..
..

roles={["admin", "manager"]}
permissions="user-delete"
renderAuthFailed={

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;
``

Need More, Check Out our API

Permify API is an authorization API which you can add complex rbac and abac solutions.

:heart: Let's get connected:

License

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0