Access Manager

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

A powerful access control system that provides role-based and permission-based UI management with session validation capabilities. Perfect for building secure applications with fine-grained access control.

Installation

npm

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

Usage

Basic Setup

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

const user: UserSession = {
  id: "1",
  email: "[e-mail]",
  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 App() {
  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>
  )
}

Multiple Roles

import { AccessGate } from "@/components/access-manager"

function SuperAdminPanel() {
  return (
    <AccessGate
      roles={["admin", "moderator"]}
      requireAllRoles={true}
      fallback={<p>Requires both admin and moderator roles</p>}
      mode="show-fallback"
    >
      <div>Super Admin Features</div>
    </AccessGate>
  )
}

Conditional Styling

import { ConditionalWrapper } from "@/components/access-manager"

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

Hook Usage

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

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

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

Features

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.

API Reference

UserSession

id · string · required

Unique user identifier

email · string

User email address

username · string

Username

name · string

Display name of the user

avatar · string

URL to user avatar image

roles · string[] · required

Array of user roles

permissions · string[] · required

Array of user permissions

metadata · Record<string, unknown>

Additional user data

isActive · boolean

Whether the user account is active

expiresAt · Date | string

Session expiration time

lastActivity · Date | string

Last activity timestamp

sessionId · string

Unique session identifier

AccessManagerProvider

user · UserSession | null · required

Current user session data

rolePermissionMap · RolePermissionMap · default: "{}"

Mapping of roles to their permissions

onUnauthorized · () => void

Global callback for unauthorized access attempts

AccessGate

roles · string | string[]

Required roles for access

permissions · string | string[]

Required permissions for access

requireAllRoles · boolean · default: "false"

Whether all roles are required (AND vs OR)

requireAllPermissions · boolean · default: "false"

Whether all permissions are required

requireValidSession · boolean · default: "true"

Whether a valid session is required

mode · 'hide' | 'disable' | 'show-fallback' · default: "'hide'"

How to handle unauthorized access

fallback · ReactNode

Content to show when access is denied

onUnauthorized · () => void

Callback when access is denied

className · string

Additional CSS classes for the container

disabledClassName · string

CSS classes to apply when disabled

SessionGuard

fallback · ReactNode

Content to show when session is invalid

redirectTo · string

URL to redirect to when session expires

onSessionExpired · () => void

Callback when session expires

ConditionalWrapper

roles · string | string[]

Required roles to check

permissions · string | string[]

Required permissions to check

requireAllRoles · boolean · default: "false"

Whether all roles are required

requireAllPermissions · boolean · default: "false"

Whether all permissions are required

requireValidSession · boolean · default: "true"

Whether a valid session is required

wrapper · (children: ReactNode) => ReactNode · required

Wrapper component to apply when access is granted

fallbackWrapper · (children: ReactNode) => ReactNode

Wrapper component to apply when access is denied

usePermissionCheck

A hook that returns a boolean indicating whether the user has the required permissions.

const hasAccess = usePermissionCheck({
  roles: "admin",
  permissions: ["read", "write"],
  requireAllPermissions: true,
  requireValidSession: true
})

roles · string | string[]

Required roles to check

permissions · string | string[]

Required permissions to check

requireAllRoles · boolean · default: "false"

Whether all roles are required

requireAllPermissions · boolean · default: "false"

Whether all permissions are required

requireValidSession · boolean · default: "true"

Whether a valid session is required

Security Considerations

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.