How to Add Role-Based Access Control to Next.js 16 with Auth.js v5

Most SaaS apps start simple: one user type, one set of features. Then a customer asks for a team plan, an admin dashboard, or a read-only guest mode — and suddenly you need roles. Role-Based Access Control (RBAC) is how you handle this cleanly. In this guide we'll add it to a Next.js 16 app using Auth.js v5, Prisma, and TypeScript — with real code you can drop in today. What We're Building Three roles: USER, ADMIN, VIEWER. We'll: Store roles in the database Inject them into the Auth.js session Protect pages via middleware Protect API routes with a helper Conditionally render UI based on role Step 1: Add the Role to Your Prisma Schema // prisma/schema.prisma enum UserRole { USER ADMIN VIEWER } model User { id String @id @default(cuid()) email String @unique name String? role UserRole @default(USER) emailVerified DateTime? image String? accounts Account[] sessions Session[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } Run the migration: npx prisma migrate dev --name