B2B Saas Authentication

/

Frontend SDKs

/

Headless

/

RBAC

/

Permissions

Permissions

The SDK provides the allPermissions method, which returns the complete list of permissions assigned to the currently logged-in Member.

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.

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.

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,
      },
    },
  }