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

While there should always be server-side authorization checks occurring (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 { StytchHeadlessClient } from '@stytch/vanilla-js/headless';
    const stytch = new StytchHeadlessClient('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 User'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';

const MyComponent = (props) => {
  const canEditDocuments = props.stytchPermissions['document']['edit'];

  return (
    <>
      <button disabled={!canEditDocuments} onClick={editDocument}>Edit Document</button>;
    </>
  )
}

export default withStytchPermissions(MyComponent);