B2B Saas Authentication

/

Frontend SDKs

/

Headless

/

RBAC

/

Permissions

Permissions

The allPermissions method 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.

In React, the @stytch/react library provides the withStytchPermissions HOC (higher-order component). Wrapping your component with withStytchPermissions fetches and provides all the permissions associated with the logged-in Member. It returns a response in the form of Record<RoleId, Record<Action, boolean>>. Each boolean value in this structure signifies whether the Member has permission (true) or not (false) to perform the specified action.

import { withStytchPermissions } from '@stytch/react/b2b';

const MyComponent = (props) => {
  const canEditDocuments = props.stytchPermissions['document']['edit'];
  const canEditOrgName = props.stytchPermissions['stytch.organization']['update.info.name'];

  const editDocument = () => {
    /* ... */
  };

  const updateOrgName = () => {
    /* ... */
  };

  return (
    <>
      <button disabled={!canEditDocuments} onClick={editDocument}>
        Edit Document
      </button>
      ;
      <button disabled={!canEditOrgName} onClick={updateOrgName}>
        Update Organization Name
      </button>
      ;
    </>
  );
};

export default withStytchPermissions(MyComponent);

RESPONSE

200
{
    "status_code": 200,
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
    "stytch_permissions": {
      "documents": {
        "edit": false,
        "read": true,
      },
      "images": {
        "create": false,
        "view": true,
      },
    },
}