react-authorization-handler

react-authorization

This Library provides hooks and HOCs to easily handle authorizations in yout react application. Since it just dependes on reacts context and hooks its very lightweight.

Install

npm install react-auhtorization

Getting startet

Wrap your root component in AuthorizationProvider to pass the context and set the default-/initialRole. If you are using Typescript you can pass a Permission Type to the Role. To check Authorization, use the AuthorizationChecker Component.

type Permissions = "askForTest" | "doThis" | "doThat";
const defaultRole: Role<TestPermissions> = {
  name: "Guest",
  permissions: ["askForTest"]
};
function App(){
  return(
    <AuthorizationProvider initialRole={defaultRole}>
        <AuthorizationChecker<Permissions> requiredPermission="doThis">
          <div>
            <h1>This won't be shown</h1>
          </div>
        </AuthorizationChecker>
    </AuthorizationProvider>)}

type Permissions = "askForTest" | "doThis" | "doThat";
const defaultRole: Role<TestPermissions> = {
  name: "Guest",
  permissions: ["askForTest"]
};
function App(){
  return(
    <AuthorizationProvider initialRole={defaultRole}>
        <AuthorizationChecker<Permissions> requiredPermission="doThis" fallback={ <div><h1>Fallback</h1></div>}>
          <div>
            <h1>The Fallback will be shown</h1>
          </div>
        </AuthorizationChecker>
    </AuthorizationProvider>)}

type Permissions = "askForTest" | "doThis" | "doThat";
const defaultRole: Role<TestPermissions> = {
  name: "Guest",
  permissions: ["askForTest"]
};
function App(){
  return(
    <AuthorizationProvider initialRole={defaultRole}>
        <AuthorizationChecker<Permissions> requiredRole="Guest">
          <div>
            <h1>This would be shown</h1>
          </div>
        </AuthorizationChecker>
    </AuthorizationProvider>)}

type Permissions = "askForTest" | "doThis" | "doThat";
const defaultRole: Role<TestPermissions> = {
  name: "Guest",
  permissions: ["askForTest"]
};
function App(){
  return(
    <AuthorizationProvider initialRole={defaultRole}>
        <AuthorizationChecker<Permissions> allowedRoles={["Admin","User"]}>
          <div>
            <h1>This won't be shown</h1>
          </div>
        </AuthorizationChecker>
    </AuthorizationProvider>)}

function YourComponent() {
  const {authentificate,executeIfGranted,hasPermission,isAllowedRole,isRequiredRole } = useAuthority<Permissions>();
  const onLogin=()=>{
    ...
    userRole:Role<Permssions>={name:"Admin",permssions:["doThis","doThat"]}
    authentificate(userRole)
  }
  return ...
}
 

References

Types

Role

(P is a Permission type)

Property	type	description
name	string	name of the role
permissions	P[]	list of permissions which are granted for the role

Components

AuthorizationProvider

Property	type	default	description
initialRole	Role	{name:Guest}	the default role which is used before authentificate is called

AuthorizationChecker

Property	type	description
allowedRoles	string[]	a list of roles whoch are allowed to see the wrapped component
fallback	ReacNode	a react component which should be rendered instead the wrapped one if denied
requiredPermission	P extends string	the permission which is required to see the wrapped component
requiredRole	string	a role which is required to see the wrapped component

Hooks

ExecuteIfGrantedOptions{                 |
      allowedRoles?: string[];
      onDenied?: () => void;
      requiredPermission?: P;
      requiredRole?: string;
    }

useAuthorization

()

returns:

Property	type	description
authentificate	(role:Role ):void	function to authentificate with a new role
executeIfGranted	(()=>any,options:ExecuteIfGrantedOptions ):void	function to run functionif it is granted
hasPermission	(permission:P extends string):boolean	function to check if role has permission
isAllowedRole	( allowedRoles:string[] ):boolean	function to check if current roleis allowed role
isRequiredRole	(requiredRole:string):boolean	function to check if current role is reuired role