A professional task management dashboard demonstrating the full capabilities of react-auth-gate.

🔗 Library Documentation

This demo showcases:

• ✅ Role-Based Access Control (RBAC) - Admin, Manager, and Member roles
• ✅ Resource-Based Permissions - Users can only edit/delete their own tasks
• ✅ Permission Gates - Conditional rendering based on permissions
• ✅ Dev Tools Panel - Real-time permission debugging and overrides
• ✅ Full CRUD Operations - Create, read, update, delete tasks
• ✅ Statistics Dashboard - Role-restricted analytics

• Full access to all features
• Can view statistics dashboard
• Can edit and delete any task
• Can reassign tasks to anyone

• Can view statistics dashboard
• Can edit and delete any task
• Can reassign tasks to team members
• Can create tasks

• Can create tasks
• Can only edit tasks assigned to them
• Cannot delete other users' tasks
• Cannot view statistics dashboard

# Install dependencies
npm install

# Start dev server
npm run dev

The app will run on http://localhost:3011 (or next available port).

const rules: PermissionRulesMap<User, Task> = {
  'admin.access': ({ roles }) => roles.includes('admin'),
  
  'task.create': ({ roles }) => 
    ['admin', 'manager', 'member'].some(r => roles.includes(r)),
  
  'task.edit': ({ user, resource, roles }) => {
    if (roles.includes('admin')) return true;
    if (roles.includes('manager')) return true;
    return resource?.assigneeId === user.id;
  },
  
  'task.delete': ({ user, resource, roles }) => {
    if (roles.includes('admin')) return true;
    return resource?.createdBy === user.id;
  },
  
  'stats.view': ({ roles }) => 
    roles.includes('admin') || roles.includes('manager'),
};

<PermissionsRoot
  user={currentUser}
  roles={userRoles}
  rules={rules}
>
  <App />
</PermissionsRoot>

<PermissionsGate allow="task.edit" resource={task}>
  <button>Edit Task</button>
</PermissionsGate>

const { allowed, loading } = usePermission('task.edit', task);

<button disabled={!allowed}>Edit</button>

• react-auth-gate - Authorization framework
• React 18 - UI library
• Vite - Build tool
• TypeScript - Type safety

MIT

Built to demonstrate react-auth-gate by Klejdi 2K