Headless Integration of RBAC

While it is important to always have server-side authentication and authorization checks, Stytch's frontend SDKs offer:

• Built-in RBAC protections for Stytch methods
• Client side RBAC policy evaluations to minimize unnecessary, unauthorized requests to the server
• Methods for viewing all permissions for the currently logged in user, to make it easy to conditionally render UI elements

Stytch's frontend SDKs offer built-in RBAC protections for Stytch member and organization management SDK methods, allowing you to make these requests directly from your public client instead of proxying through your server.

To enable this functionality, turn on "Member actions & permissions" in the FE SDKs section of the Stytch Dashboard.

You can then call methods like organization.update() or magicLinks.email.invite() directly from the client, and the frontend SDK will automatically include the logged in member's session in the request.

Stytch's backend will only authorize the request if the session is valid and the session Member has at least one Role that grants them permission to take that action.

While there should always be server-side authorization checks occuring (whether on Stytch's servers, when calling Stytch methods, or on your own servers for application specific actions) Stytch's SDKs provide a way to do a pre-emptive client-side authorization check to avoid any unnecessary API requests or ensure the user isn't about to enter a flow they cannot complete.

For example, in vanilla Javascript you would perform a check like this before allowing a user to edit a document:

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

<script>
    import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
    const stytch = new StytchB2BHeadlessClient('STYTCH_PUBLIC_TOKEN');
    const isAuthorized = stytch.rbac.isAuthorizedSync('documents', 'update');
    const editDocument = () => {
    //...
    };
</script>

See the SDK reference docs for more details on differences between frameworks.

In order to conditionally render parts of your UI based on the logged in Member's permissions (such as showing an edit button as enabled or disabled) you can use the allPermissions() method, or in React the HOC (higher-order component) of withStytchPermissions.

For example, using our React SDK you would do the following:

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

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

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

export default withStytchPermissions(MyComponent);