React ACL

Features

• Show component if has an role;
• Edit style of component if has or not an role;
• Enable if else components for show or not components based in authorities;
• Provide one way for set inital roles;
• Edit roles in runtime.

Usage

Around your main component put ReactACLProvider like that.

import React from 'react';
import { ReactACLProvider } from "react-access-level"

function App() {
  return (
    <ReactACLProvider>
      <div>
        my App
      </div>
    </ReactACLProvider>
  );
}

export default App;

The component ReactACLProvider can receive 3 properties:

• extractInitialRoles: () => string[].

This function extract the initials roles of application, default is [].

• extractInitialUser: () => object | boolean | string | null.

This function extract the initial user state, default is true.

• defaultUnauthorizedComponent: React.ReactElement.

This is the default component for show if user not have access.

An user can have roles even not is logged.

import React from 'react';
import { ReactACLProvider } from "react-access-level"
import Home from './Home';

function App() {
  function getInitialUser() {
    return true
  }

  function getInitialRoles() {
    console.log('here')
    return ["user:create", "user:read", "user:update"]
  }

  return (
    <ReactACLProvider
      extractInitialUser={getInitialUser}
      extractInitialRoles={getInitialRoles}
      defaultUnauthorizedComponent={
      <span 
        style={{
          background: 'red',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: 400,
          height: 200
        }}>
        DENIED ACCESS 
      </span>}
    >
      <Home />
    </ReactACLProvider>
  );
}

export default App;

Manager Rules

The help component for manager access level was:

• Logged: Show an component if user is logged;
• NotLogged: Show an component if user is not logged;
• Can: Show an component if user have the access.

import {
  Logged,
  NotLogged,
  Can
} from "react-access-level"

Simple example.

export default function Home() {
  return (
    <div>
      <Logged>
        <p>user logged</p>
      </Logged>
      <NotLogged>
        <p>user not logged</p>
      </NotLogged>
    </div>
  )
}

Can component.

<Can>
  <p>no effect</p>
</Can>

<Can resource="user" authority="create">
  <button>Create user</button>
</Can>

With render props

<Can resource="user" authority="destroy">
  {accept => <button disabled={!accept}>delete user</button>}
</Can>

Custom rule.

import { and, or } from "react-access-level"

<Can match={and("user:create", or("user:delete", "user:update"))}>
  <p>it's ok!!</p>
</Can>

Custom unauthorized component

<Logged showAnauthorizedComponent>
  <p>user logged</p>
</Logged>

<Logged otherwiseComponent={<span>DENIED</span>}>
  <p>user logged</p>
</Logged>

<Can resource="user" authority="destroy" showAnauthorizedComponent>
  <button>delete user</button>
</Can>

<Can 
  resource="user"
  authority="destroy"
  otherwiseComponent={<b>CAN'T DELETE USER</b>}
>
  <button>delete user</button>
</Can>

Use hooks.

import React from "react"
import { 
  useLogged, 
  useRules, 
  useLogin, 
  useLogout,
  useManagerRoles
} from "react-access-level"

export default function Hook() {
  const logged = useLogged()
  const roles = useRoles()
  const login = useLogin()
  const logout = useLogout()

  const { addRole, updateRole, deleteRole } = useManagerRoles()

  return (
    <div id="app">
      <h1>{logged ? 'logged' : 'not logged'}</h1>
      <ul id="roles-list">
        {roles.map(role => <li key={role}>{role}</li>)}
      </ul>

      <button
        id="btn-login"
        onClick={() => login(true)}
      >
        Login
      </button>
      <button
        id="btn-logout"
        onClick={() => logout()}
      >
        Logout
      </button>

      <button
        id="btn-addrole"
        onClick={() => addRole('user:read')}
      >
        Add role
      </button>

      <button
        id="btn-updaterole"
        onClick={() => updateRole('user:create', 'user:add')}
      >
        Update role
      </button>
      <button
        id="btn-deleterole"
        onClick={() => deleteRole('user:create')}
      >
        Update role
      </button>
    </div>
  )
}

The component that uses Components or custom hooks must be have an children of ReactACLProvider.