Skip to main content
import { useState, useEffect } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';

export const PermissionsDisplay = () => {
  const stytch = useStytchB2BClient();
  const [permissions, setPermissions] = useState({});

  useEffect(() => {
    stytch.rbac.allPermissions().then((perms) => setPermissions(perms));
  }, [stytch]);

  return (
    <ScrollView>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Your Permissions</Text>
      {Object.entries(permissions).map(([resource, actions]) => (
        <View key={resource} style={{ marginVertical: 10 }}>
          <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{resource}</Text>
          {Object.entries(actions).map(([action, allowed]) => (
            <Text key={action}>
              {action}: {allowed ? '✓' : '✗'}
            </Text>
          ))}
        </View>
      ))}
    </ScrollView>
  );
};
rbac.allPermissions is an asynchronous method that returns the complete list of permissions assigned to the currently logged-in Member. 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.

​
Response

​
permissions
Promise<Record<ResourceId, Record<Action, boolean>>>
required
A promise that resolves to a map of all permissions assigned to the currently logged-in Member.The key is the human-readable ID of the resource, and the value is a map of all actions for the given resource. The boolean value signifies whether the Member has permission (true) or not (false) to perform the specified action.