Skip to main content
import { useState, useEffect } from 'react';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const PermissionsDisplay = () => {
  const stytch = useStytchB2BClient();
  const [permissions, setPermissions] = useState({});

  useEffect(() => {
    stytch.rbac.allPermissions().then((perms) => setPermissions(perms));
  }, [stytch]);

  return (
    <div>
      <h2>Your Permissions</h2>
      {Object.entries(permissions).map(([resource, actions]) => (
        <div key={resource}>
          <h3>{resource}</h3>
          <ul>
            {Object.entries(actions).map(([action, allowed]) => (
              <li key={action}>
                {action}: {allowed ? '✓' : '✗'}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};
rbac.allPermissions is an asynchronous method that returns the complete list of permissions assigned to the currently logged-in Member. If the Member is not logged in, all values will be false.
As a best practice, authorization checks for sensitive actions should also occur on the backend.

​
Response

​
permissions
Promise<Record<ResourceId, Record<Action, boolean>>>
required
A promise that resolves to a map of all permissions assigned to the currently logged-in Member.The key is the human-readable ID of the resource, and the value is a map of all actions for the given resource. The boolean value signifies whether the Member has permission (true) or not (false) to perform the specified action.