Enforcing permissions

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.

React SDK

Next.js SDK

Vanilla JS SDK

React Native

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>
  );
};

import { useEffect, useState } from 'react';
import { useStytch } from '@stytch/nextjs';

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>
  );
};

import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('PUBLIC_TOKEN');

const canReadDocument = await stytch.rbac.isAuthorized('documents', 'read');
const canWriteDocument = await stytch.rbac.isAuthorized('documents', 'write');

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.

Session Tokens
Session JWTs

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

You can also authorize using Session JWTs. The same endpoint accepts a session_jwt and returns a refreshed JWT if needed.

resp = stytch_client.sessions.authenticate(
  session_jwt='eyJ...',
  authorization_check={
    'resource_id': 'documents',
    'action': 'edit',
  }
)

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

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

​Frontend authorization checks

React SDK

Next.js SDK

Vanilla JS SDK

React Native

​Conditionally render UI based on permissions

​Check permissions before making API requests

​Backend authorization checks

​What’s next

Frontend authorization checks

Conditionally render UI based on permissions

Check permissions before making API requests

Backend authorization checks

What’s next