Frontend permissions

The SPA reads the current user’s permission array and exposes usePermissions().has(...). Use it to omit navigation, actions, and queries the caller cannot use. Server authorization still happens independently on every endpoint.

Permission values mirror Allow.cs and use Area.Category.Action names. The three areas shipped by the template are User for self-service, Staff for assignable administration, and Admin for superadmin operations.

Gate a control

const { has } = usePermissions();

return has(Permission.UserApiKeysCreate) ? <CreateApiKeyDialog /> : null;

Disable a TanStack Query with its enabled option when its surrounding panel is hidden. This prevents a hidden component from issuing a request that is guaranteed to return 403.

Grouped permission picker

PermissionsPicker splits catalog names into area, category, and action. It supports all, none, read-only, filtering, partial selection, and locked entries. User and invitation editors lock grants the actor does not hold. Role editors show only the assignable tier.

Every catalog category needs an English and Dutch label under permissions.categories. A test reads the API catalog and catches missing labels.

Staff and superadmin navigation

The admin shell is capability-based. A staff user can see Users and Roles without seeing superadmin-only notification, audit, cache, or billing tools. Deep links must enforce the same requirement as the visible navigation.

Verify

cd frontend
pnpm test
pnpm typecheck
pnpm lint

Sign in with a limited staff account and confirm hidden sections do not send background requests.