Role-Based Access Control (RBAC) for tRPC + React Apps

Implement secure role-based access control in full-stack TypeScript applications using tRPC procedures and React components.

When to Use This Skill

• Adding admin-only or manager-only features to existing applications
• Restricting specific tRPC endpoints to authorized users
• Implementing multi-tier permission systems (admin, manager, user)
• Hiding UI elements based on user roles
• Building dashboards or tools that require different access levels

Prerequisites

• tRPC backend with protectedProcedure already implemented
• User authentication system in place (OAuth, JWT, or similar)
• User table with role field in database schema
• React frontend with auth context or hook (e.g., useAuth())