Short for Role Based Access Control, a type of authorization.

RBAC is a type of authorization of resources to user based on role of the user. Each role might have various attributes associated with them which allow or deny a certain resource on which they want to perform some action.

Resource is defined as the entity viz. a component (e.g. action.download or dashboard.project.list), a page (e.g. dashboard or user_management), etc. that the user want access to.

Action is defined as the type of operation (viz. VIEW, GET, UPDATE, DELETE) that the user want to perform on the given resource.

The permission rule is either allow or deny type.

Resource Type is optional meaning the type of resource (viz. component, page, api, data, etc.) that the user want to access. If provided, it will be considered while evaluating the permission rule.

You build a nice looking website with authentication for a user and role associated with the user. Now you want the user to be authorized to access various resources across the application. You no longer need to worry any longer trying out various conditional statements with user's roles and resources they can and cannot access.

With ImpelsysInc/react-rbac, you get more granular control of the resources with easy to use API. After the auth flow, send a JSON with the response in the format permission.schema.json to the frontend client code.

[
  {
    "resource": "cart",
    "action": "update.all"
  },
  {
    "type": "deny",
    "resource": "adminPanel",
    "action": [
      "get.all",
      "update"
    ]
  },
  {
    "resourceType": "component",
    "resource": "users.all",
    "action": [
      "get",
      "create"
    ]
  }
]

You may use https://json-schema-faker.js.org/ to generate sample data for the schema. In website options, select useExamplesValue and click on "Generate" multiple times to generate sample data.

You may use https://www.jsonschemavalidator.net/ to validate the schema.

npm install --save @impelsysinc/react-rbac

The API exposes a useRBAC hook which optionally takes default permissions. Or you can setPermissions from useRBACContext hook. See example Using useRBAC hook.

import { FunctionComponent, ReactNode, useEffect } from "react";
import {
  useRBAC,
  RBACProvider,
  useRBACContext,
  WithPermission
} from "@impelsysinc/react-rbac";

const PrivateComponent: FunctionComponent<{ children: ReactNode }> = ({
  children
}) => {
  const { canAccess } = useRBACContext();

  const canReadResource = canAccess({
    resource: "adminPanel",
    action: "get.all"
  });

  if (canReadResource) {
    return <div>{children}</div>;
  }

  return null;
};

const Layout: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
  const { setPermissions } = useRBACContext();

  useEffect(() => {
    const permissions = [
      /* FETCH PERMISSIONS */
      { resource: "cart", action: "update.all" },
      { resource: "adminPanel", action: ["get.all", "update"] },
      {
        resourceType: "component",
        resource: "users.all",
        action: ["get", "create"]
      }
    ];
    setPermissions(permissions);
  }, [setPermissions]);

  return <>{children}</>;
};

export function App() {
  const rbac = useRBAC();

  return (
    <RBACProvider rbac={rbac}>
      <Layout>
        <PrivateComponent>
          <h1>
            <code>PrivateComponent</code> will render if resource has read access.
          </h1>
        </PrivateComponent>

        <WithPermission resource="adminPanel" action="get.all">
          <h1>
            <code>WithPermission</code> will render if resource has read access.
          </h1>
        </WithPermission>
      </Layout>
    </RBACProvider>
  );
}

export default App;

import React, { ReactNode, FunctionComponent } from "react";
import { WithPermission, useRBAC, RBACProvider } from "@impelsysinc/react-rbac";

const App: FunctionComponent<{ children: ReactNode }> = () => {
  const rbac = useRBAC();

  return (
    <RBACProvider value={rbac}>
      <WithPermission resource="resource" action="read">
        <h1>Will render if resource has read access.</h1>
      </WithPermission>
    </RBACProvider>
  );
};

Get a rbac context to pass it to RBACProvider.

const rbac = useRBAC();

<RBACProvider value={rbac}>
  {children}
</RBACProvider>

Must be in one of the nested child component of RBACProvider.

// Example 1
const { canAccess } = useRBACContext();

// Example 2
const { setPermissions, clearPermissions, permissions } = useRBACContext();

A useful component to wrap any other component which need fine-grained permissions.

<WithPermission resource="product.description" action="read">
  {children}
</WithPermission>

• Support for multiple resources in permissions array.
• Support for DENY permissions.
• Support for resource wildcards.

See Contribute.md

Abhisek Pattnaik 🤔 💻 👀 🐛 🚧 ✅ 💬 📢

This project follows the all-contributors specification.
Contributions of any kind are welcome!
See contribute.md for more information.

MIT © Impelsys India Pvt. Ltd.