PermissionCheck

Conditionally render content based on user permissions with fallback messaging.

Installation

typescript

import { PermissionCheck } from '@happyvertical/smrt-svelte';

Basic Usage

Admin access required

svelte

<PermissionCheck permission="users.edit" userPermissions={currentPermissions}>
  <button>Edit User</button>
</PermissionCheck>

<PermissionCheck permission="admin.access" userPermissions={currentPermissions}>
  {#snippet fallback()}Admin access required{/snippet}
  <a href="/admin">Admin Panel</a>
</PermissionCheck>

Integration with smrt-users

typescript

import { PermissionCheck } from '@happyvertical/smrt-svelte';
import { PermissionsService } from '@happyvertical/smrt-users';

// Check permissions programmatically
const canEdit = await PermissionsService.check({
  userId: currentUser.id,
  tenantId: currentTenant.id,
  permission: 'users.edit'
});

if (canEdit) {
  // Perform action
}

// Or use component for UI
<PermissionCheck permission="users.delete" userPermissions={currentPermissions}>
  <button onclick={deleteUser}>Delete</button>
</PermissionCheck>

Props

Prop	Type	Default	Description
`permission`	`string`	-	Single permission to check
`permissions`	`string[]`	-	Multiple permissions to check
`userPermissions` *	`string[]`	-	User's current permissions array
`mode`	`'all' \| 'any'`	`'all'`	Require 'all' or 'any' of the listed permissions
`children` *	`Snippet`	-	Content shown when permission check passes
`fallback`	`Snippet`	-	Content shown when permission denied

TypeScript

typescript

interface Props {
  permission?: string;
  permissions?: string[];
  userPermissions: string[];
  mode?: 'all' | 'any';
  children: Snippet;
  fallback?: Snippet;
}