Automizely-RBAC-React

how to use

Wrap with RBACProvider

• Will detect the Business RABC or Employee RBAC automatically by Auth SDK

import { RBACProvider } from '@aftership/automizely-rbac-react';

function App() {
  return (
    <div>
      <RBACProvider>
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  )
}

By default, the SDK requests the Permission catalog and all product grants with with_catalog=true&with_all_products=true. This keeps granted accurate when the current product's Permission Tree contains permissions from other products.

Additional role-permission query parameters can be passed through requestOptions.query:

<RBACProvider
  requestOptions={{
    query: {
      with_resource_apis: true,
    },
  }}
>
  <ComponentA />
</RBACProvider>

Query values support strings, numbers, and booleans. The default RBAC query parameters can be overridden explicitly when a different response scope is required.

RBACProvider with SSR

import { RolePermissions, RBACProvider } from '@aftership/automizely-rbac-react';
import { getServerSideProps as rbacGetServerSideProps } from '@aftership/automizely-rbac-react/server';

function getServerSideProps(ctx) {
  const initialData = rbacGetServerSideProps({
    realm: 'business',
    accountId: session.user.id,
    organizationId: organization?.id,
    productCode,
    query: {
      with_resource_apis: true,
    },
  }).catch((error) => {
    console.error('Error fetching rbac data:', error);
    return { role: { id: '', name: '' }, permissions: [] };
  })

  return {
    props: {
      initialData
    }
  }
}

function App({initialData}) {
  return (
    <div>
      <RBACProvider initialData={initialData}>
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  )
}

The server helper accepts the same optional query object as RBACProvider.requestOptions.query, so client-side and SSR requests can use the same role-permission scope.

Legacy version 0.4.0

import { RBACProvider } from '@aftership/automizely-rbac-react';

function App() {
  const organizationId = '123456';

  return (
    <div>
      <RBACProvider
        orgId={organizationId}
        // for dev purpose
        // requestHeaders={{
        //   'am-account-id': user.account_id,
        //   'am-account-jwt-azp': 'aftership',
        // }}
      >
        <ComponentA />
        <ComponentB />
      </RBACProvider>
    </div>
  );
}

Protect your resource

import { Can, getPermissionTreePath, useRBACContext } from '@aftership/automizely-rbac-react';

function ComponentA() {
  const { ability, role } = useRBACContext();
  const hasPermission =
    ability.can('view', 'analytics/shipment') && ability.cannot('edit', 'notification');

  return hasPermission ? <div>role: {role.name}</div> : <div>some content that requires permissions</div>;
}

function ComponentB() {
  return (
    <div>
      <Can do="view" on="analytics/shipment">
        <div>some content that requires permissions</div>
      </Can>

      <Can not do="view" on="analytics/shipment">
        <div>some content that don't need requires permissions</div>
      </Can>

      <Can do="view" on="analytics/shipment" passThrough>
        {(allowed) => <button disabled={!allowed}>Save</button>}
      </Can>

      <Can do="edit" on="organization/domains" passThrough>
        {(allowed, ability, permission) => (
          <button disabled={!allowed} title={getPermissionTreePath(permission)}>
            Edit domains
          </button>
        )}
      </Can>
    </div>
  );
}

function ComponentC() {
  return (
    <div>
      <Can do="view" on="analytics/shipment" fallback={<div>fetching permission data...</div>}>
        <div>some content that requires permissions</div>
      </Can>
    </div>
  );
}