Skip to main content
To enforce RBAC permissions in your application, it is critical to:
  • Gate UI and actions in the frontend
  • Confirm authentication and authorization on your backend before honoring requests

Frontend authorization checks

Use Stytch’s frontend SDKs to check permissions client-side.

Conditionally render UI based on permissions

Adapt UI based on permissions, even when your backend will enforce them.
import { useEffect, useState } from 'react';
import { useStytch } from '@stytch/react';

const DocumentActions = () => {
  const stytch = useStytch();
  const [canReadDocument, setCanReadDocument] = useState(false);
  const [canWriteDocument, setCanWriteDocument] = useState(false);

  useEffect(() => {
    const fetchPermissions = async () => {
      setCanReadDocument(await stytch.rbac.isAuthorized('documents', 'read'));
      setCanWriteDocument(await stytch.rbac.isAuthorized('documents', 'write'));
    };
    fetchPermissions();
  }, [stytch]);

  return (
    <div>
      <button disabled={!canReadDocument}>View Document</button>
      {canWriteDocument && <button>Edit Document</button>}
    </div>
  );
};

Check permissions before making API requests

Pre-emptive checks avoid unnecessary requests and prevent users from entering flows they cannot complete.
const canReadDocument = await stytch.rbac.isAuthorized('documents', 'read');
if (!canReadDocument) {
  throw new Error('You do not have permission to read documents');
}
loadDocument();

Backend authorization checks

Always perform server-side authorization checks by authenticating a valid Session Token or Session JWT.
If you use Session Tokens, call the Authenticate Session endpoint with an authorization check.
resp = stytch_client.sessions.authenticate(
  session_token='mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q',
  authorization_check={
    'resource_id': 'documents',
    'action': 'edit',
  }
)

if resp.status_code != 200:
    return 'not authenticated', 401

if not resp.authorized:
    return 'unauthorized', 403

What’s next