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 npx shadcn@latest add https://rigidui.com/r/access-manager.json
Usage Basic Setup
Multiple Roles
Conditional Styling
Hook Usage
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 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 > ) }
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 > ) }
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 > ) }
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 Array of user permissions
Whether the user account is active
Unique session identifier
AccessManagerProvider user
UserSession | null
required
Current user session data
rolePermissionMap
RolePermissionMap
default: "{}"
Mapping of roles to their permissions
Global callback for unauthorized access attempts
AccessGate Required roles for access
Required permissions for access
Whether all roles are required (AND vs OR)
Whether all permissions are required
Whether a valid session is required
mode
'hide' | 'disable' | 'show-fallback'
default: "'hide'"
How to handle unauthorized access
Content to show when access is denied
Callback when access is denied
Additional CSS classes for the container
CSS classes to apply when disabled
SessionGuard Content to show when session is invalid
URL to redirect to when session expires
Callback when session expires
ConditionalWrapper Required permissions to check
Whether all roles are required
Whether all permissions are required
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 })
Required permissions to check
Whether all roles are required
Whether all permissions are required
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.