@accessify/react v0.0.16

Accessify RBAC React Package

Welcome to Accessify RBAC React Package! 🎉 Simplify RBAC implementation in your React applications with pre-built hooks and functions. This utility package follows a pessimistic approach, focusing on a bottom-up model for seamless integration.

Overview

• Entities:

  • Define three fundamental entities: Roles, Actions, and Resources.
  • Tailor these entities to suit your application's business needs and architecture.

• Permission Matrix:

  • Generate a JSON-based permission matrix to map actions to resources for each role.
  • Leverage the Accessify Permission Generator for easy matrix creation.

How to Use

1. Install the Package

npm install accessify-rbac-react

or

yarn add accessify-rbac-react

2. Wrap Your Application

In the root of your project, import PermissionProvider and wrap your application.

import { PermissionProvider } from 'accessify-react-rbac'

function App() {
  return (
    <PermissionProvider>
      <AppRoutes /> {/* Your application modules/routes */}
    </PermissionProvider>
  )
}

3. Set Role and Permissions

Set the user role in the global context when the user logs in.

import { usePermissions } from 'accessify-react-rbac'

const Login = () => {
  const { setUserRole } = usePermissions()

  const handleLogin = async () => {
    const data = await axios.post('/login', payload)
    setUserRole(data.role)
  }

  // Further component logic
}

4. Set Permissions Using JSON

Set permissions globally by providing the Permissions JSON in the following format:

{
  "ROLE_NAME": [
    {
      "resource": "RESOURCE_NAME",
      "action": ["ACTION_1", "ACTION_2"]
    }
    // Additional resource-action mappings for the role
  ]
  // Permissions for other roles
}

import { usePermissions } from 'accessify-react-rbac'

const Profile = () => {
  const { setPermissions } = usePermissions()

  const initializePermissions = async () => {
    const data = Constants.PERMISSIONS_JSON['ADMIN']
    // set role specific permissions
    setPermissions(data)
  }

  // Further component logic
}

5. Leverage RBAC Hooks and Components

useCanAccess Hook

Use this utility hook to conditionally render components based on resource and action.

import { useCanAccess } from 'accessify-react-rbac'

const Orders = () => {
  const { canAccess } = useCanAccess({ action: 'READ', resource: 'ORDERS' })

  return <>{canAccess ? <OrdersListing /> : <p>You don't have access to view orders</p>}</>
}

CanAccess Component

Use this component to conditionally render children based on resource and action.

import { CanAccess } from 'accessify-react-rbac'

const Products = () => {
  return (
    <>
      <Header>
        <CanAccess resource="PRODUCT" action="ADD">
          <Button>Add Product</Button>
        </CanAccess>
      </Header>
      <ProductsListing />
    </>
  )
}

Accessify Permission Generator

For creating Permission Matrix JSON, use the Accessify Permission Generator web application. It simplifies the process of defining roles, actions, and resources, and generates a matrix for each role.

Happy coding with Accessify RBAC React Package! 🚀