RBAC

The SDK will automatically check that Members have the required permissions for Stytch-defined resources on relevant endpoints, such as Create Member.

Beyond these checks, you may want to conditionally enable certain buttons, UI flows, etc. based on the logged-in Member's permissions. We've introduced two new functions to make this easier: one to check whether a Member is authorized to perform a specific action on a specific Resource, and one and to see all permissions a given Member has.
As a best practice, authorization checks for sensitive actions should also occur on the backend.

Methods

To call these methods, Member actions & permissions must be enabled in the SDK Configuration page of the Stytch dashboard.

isAuthorized

The SDK provides two methods for getting an authorization verdict on a Resource-action pair (that is, whether the logged-in Member is authorized to perform the specified action on the specified Resource).

The isAuthorizedSync method will use locally-cached instances of the Member and the configured RBAC policy. If the RBAC policy has not been loaded, this method will always return false. The SWR caching strategy is detailed here.

To ensure the RBAC policy has been loaded, use the isAuthorized function. It will return a Promise that resolves after the RBAC policy has been loaded.

If the Member is not logged in, these methods will always return false. If the Resource or action provided are not valid for the configured RBAC policy, these methods will also return false.

As a best practice, authorization checks for sensitive actions should also occur on the backend.

In React, the @stytch/react library provides the useStytchIsAuthorized hook that implements these methods for you. It returns two boolean values.

  • isAuthorized indicates whether the Member is authorized. It could be false even if the Member is actually authorized if the result is from the cache and the underlying data has changed.
  • fromCache indicates whether the value was returned from the application cache. If true, a state refresh is in progress.

In Next.js, useStytchIsAuthorized also returns a third boolean value.

  • isInitialized indicates whether the cache is initialized.

import { useStytchIsAuthorized } from '@stytch/react-native/b2b';

export const EditDocuments = () => {
  const { isAuthorized } = useStytchIsAuthorized('documents', 'edit');

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

  return <button disabled={!isAuthorized} onClick={editDocument}>Edit</button>;
};

RESPONSE

200
{
    "status_code": 200,
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141"
    "is_authorized": true,
  }

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-native/b2b';

const MyComponent = (props) => {
  const canEditDocuments = props.stytchPermissions.document.edit;
  const canReadImages = props.stytchPermissions.image.read;

  return (
    <>
      <button disabled={!canEditDocuments} onClick={editDocument}>Edit</button>;
      <button disabled={!canReadImages} onClick={viewImages}>View Images</button>;
    </>
  )
}

return withStytchPermissions<Permissions>(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,
      },
    },
  }