react-authorization-handler v0.0.1

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)

Components

AuthorizationProvider

AuthorizationChecker

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 |