A robust Role-Based Access Control (RBAC) dashboard built with the T3 Stack, featuring dynamic permission management, OAuth authentication, and optimized performance.
- Create custom permissions with flexible source and action combinations
- Sources include USER, LOGS, ROLES, PERMISSIONS, etc.
- Actions include READ, WRITE, UPDATE, DELETE
- Define custom permission names and combinations
- Create roles by combining different permissions
- Dynamic role assignment and management
- Flexible role hierarchy support
- Comprehensive activity tracking system
- Logs user actions
- Records timestamp, user, action type, and affected resources
- Audit trail for security and compliance
- Searchable and filterable log history
- OAuth authentication integration
- Permission guard implementation for secure access control
- Protected routes and components
- Session management with Prisma acceleration
- OAuth-based user authentication
- User activity status management (active/inactive)
- Secure user data handling
- Framework: Next.js 15
- Database ORM: Prisma
- API: tRPC
- Authentication: Auth.js
- UI Components: shadcn/ui
- Table Management: React Table
- Form Handling: React Hook Form
- Schema Validation: Zod
- Stack: T3 Stack
- Database : Suppabase
Node.js >= 16.x
pnpm >= 8.x
PostgreSQL >= 14.x
- Clone the repository
git clone https://github.com/yourusername/rbac-dashboard.git
cd rbac-dashboard
- Install dependencies
yarn
- Set up environment variables
cp .env.example .env
Configure the following variables in .env
:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/rbac_db"
DIRECT_URL="transaction_pool_connection_url"
# NextAuth
NEXTAUTH_URL="http://localhost:3000"
AUTH_SECRET="your-secret-key"
# OAuth Providers (Configure as needed)
AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"
- Set up the database
# Generate Prisma Client
yarn prisma generate
# Run migrations
yarn prisma migrate dev
- Start the development server
yarn dev
The application will be available at http://localhost:3000
# Build the application
yarn build
# Start production server
yarn start
- USER: User management related permissions
- LOGS: System logs access
- ROLES: Role management
- PERMISSIONS: Permission management
- READ: View access
- WRITE: Creation access
- UPDATE: Modification access
- DELETE: Deletion access
{
name: "View Users",
source: "USER",
action: "READ"
}
{
name: "Manage Roles",
source: "ROLES",
action: ["READ", "WRITE", "UPDATE", "DELETE"]
}
The application implements permission checking through a custom React hook that provides flexible access control:
- Type-safe permission checking
- Loading state handling
The application includes a comprehensive activity logging system that tracks all important actions:
- User authentication events (login, logout)
- Permission changes
- Role modifications
- User status changes
The application implements caching at multiple levels:
- Session Caching: NextAuth session data cached with Prisma acceleration
- API Response Caching: Implemented for frequently accessed data
- Database Query Caching: Prisma query caching for optimized performance