Access Manager

A comprehensive authentication and authorization system with session validation for controlling UI visibility and user permissions.

Usage

Access Guard Demo

Interactive role-based access control demonstration

Current User

admin

Active

Roles:

admin

user

Session:

Valid

Role-Based Visibility

Buttons shown based on user roles

Access Denied

access-manager-example.tsx

import {
  AccessManagerProvider,
  AccessGate,
  SessionGuard,
  UserSession
} from "@/components/access-manager"

const user: UserSession = {
  id: "1",
  email: "[email protected]",
  roles: ["admin", "user"],
  permissions: ["read", "write", "delete"],
  isActive: true,
  expiresAt: new Date(Date.now() + 86400000)
}

const rolePermissionMap = {
  admin: ["read", "write", "delete", "manage_users"],
  editor: ["read", "write"],
  viewer: ["read"]
}

export default function MyComponent() {
  return (
    <AccessManagerProvider user={user} rolePermissionMap={rolePermissionMap}>
      <AccessGate roles="admin">
        <button>Admin Only Button</button>
      </AccessGate>

      <AccessGate permissions="write" mode="disable">
        <button>Create Content</button>
      </AccessGate>

      <SessionGuard fallback={<p>Please log in</p>}>
        <p>Protected content</p>
      </SessionGuard>
    </AccessManagerProvider>
  )

}

Installation

Install the Access Manager component using your preferred package manager.

npx shadcn@latest add https://rigidui.com/r/access-manager.json

Features

The Access Manager component is packed with powerful features designed to provide comprehensive access control for your application.

Role-Based Control

Control UI elements based on user roles with support for single or multiple role requirements.

Permission Management

Fine-grained permission control with flexible role-to-permission mapping.

Session Validation

Automatic session validation with expiration checking and active status verification.

Multiple Display Modes

Choose between hiding, disabling, or showing fallback content for unauthorized access.

Conditional Wrappers

Apply different styling or layouts based on user access levels.

TypeScript Support

Full TypeScript support with comprehensive type definitions for better development experience.

Advanced Examples

Multiple Role Requirements

<AccessGate
  roles={["admin", "moderator"]}
  requireAllRoles={true}
  fallback={<p>Requires both admin and moderator roles</p>}
  mode="show-fallback"
>
  <SuperAdminPanel />
</AccessGate>

Permission-Based Styling

<ConditionalWrapper
  permissions="admin"
  wrapper={(children) => (
    <div className="admin-panel border-gold">
      <AdminBadge />
      {children}
    </div>
  )}
  fallbackWrapper={(children) => <div className="user-panel">{children}</div>}
>
  <UserProfile />
</ConditionalWrapper>

function Navigation() {
  return (
    <nav>
      <AccessGate roles="user">
        <NavItem href="/dashboard">Dashboard</NavItem>
      </AccessGate>

      <AccessGate roles="admin">
        <NavItem href="/admin">Admin Panel</NavItem>
      </AccessGate>

      <AccessGate permissions="manage_users">
        <NavItem href="/users">User Management</NavItem>
      </AccessGate>
    </nav>
  );
}

Feature Flags

import { usePermissionCheck } from "@/components/access-manager";

function FeatureSection() {
  const hasAccess = usePermissionCheck({
    permissions: "beta_features",
    requireValidSession: true,
  });

  return (
    <div>
      <h2>Features</h2>
      {hasAccess && <BetaFeature />}
    </div>
  );
}

Props

UserSession Interface

Prop	Type	Default
`id`	`string`	-
`email?`	`string`	-
`username?`	`string`	-
`name?`	`string`	-
`avatar?`	`string`	-
`roles`	`string[]`	-
`permissions`	`string[]`	-
`metadata?`	`Record<string, unknown>`	-
`isActive?`	`boolean`	-
`expiresAt?`	`Date \| string`	-
`lastActivity?`	`Date \| string`	-
`sessionId?`	`string`	-

AccessGate Props

Prop	Type	Default
`roles?`	`string \| string[]`	`undefined`
`permissions?`	`string \| string[]`	`undefined`
`requireAllRoles?`	`boolean`	`false`
`requireAllPermissions?`	`boolean`	`false`
`requireValidSession?`	`boolean`	`true`
`mode?`	`'hide' \| 'disable' \| 'show-fallback'`	`'hide'`
`fallback?`	`ReactNode`	`null`
`onUnauthorized?`	`() => void`	`undefined`
`className?`	`string`	`undefined`
`disabledClassName?`	`string`	`undefined`

SessionGuard Props

Prop	Type	Default
`fallback?`	`ReactNode`	`undefined`
`redirectTo?`	`string`	`undefined`
`onSessionExpired?`	`() => void`	`undefined`

AccessManagerProvider Props

Prop	Type	Default
`user`	`UserSession \| null`	-
`rolePermissionMap?`	`RolePermissionMap`	`{}`
`onUnauthorized?`	`() => void`	`undefined`

Hook: usePermissionCheck

Prop	Type	Default
`roles?`	`string \| string[]`	`undefined`
`permissions?`	`string \| string[]`	`undefined`
`requireAllRoles?`	`boolean`	`false`
`requireAllPermissions?`	`boolean`	`false`
`requireValidSession?`	`boolean`	`true`

⚠️ Important: This component provides UI-level access control only. Always implement proper server-side authorization for actual security. Client-side role checking should only be used to improve user experience, not as a security measure.