Introduction Let’s start with implementing Nextjs 14 roles and permissions. This step-by-step guide will help you set up a strong system to manage who can access what in your app. Shorter Overview If you don’t want details this long article, you can check out our short article about this here. Prerequisites Before diving into the implementation of Next.js 14 roles and permissions, ensure you have the following prerequisites in place: 1. Basic Knowledge of Next.js: Familiarity with Next.js and its core concepts. 2. Node.js and npm/pnpm Installed: Ensure you have Node.js and npm or pnpm installed on your system. 3. A PostgreSQL Database: Set up PostgreSQL for managing your application’s data. 4. Drizzle ORM: Install and configure Drizzle ORM for database interactions. 5. Auth.js (NextAuth): Set up NextAuth for authentication and session management. 6. Shadcn UI: Install Shadcn UI for user interface components. 7. Tailwind CSS: Set up Tailwind CSS for styling your application. Database Structure To manage roles and permissions in Next.js 14, you’ll need the following tables in your database: 1. Users Table: Each user can have one role. 2. Roles Table: Defines different roles that can be assigned to users. 3. Permissions Table: Lists all permissions that can be assigned to roles. 4. Role Permissions Table: A pivot table that links roles to permissions. Step 1 : Setup Nextjs application - Start by creating a new Next.js project using create-next-app: npx create-next-app@latest my-app --typescript --tailwind --eslint npx shadcn-ui@latest init Use Shadcn UI installation guide for the latest script. - Install all necessary libraries: pnpm add dotenv bcryptjs react-toastify zod zsa zsa-react tsx pnpm add -D @types/bcryptjs Step 2 : Setup Drizzle ORM - Follow the guide here to set up Drizzle ORM with node-postgres. pnpm add drizzle-orm pg pnpm add -D drizzle-kit @types/pg - Create a folder named server and place all server-side code there. import dotenv from 'dotenv'; dotenv.config(); import { drizzle } from "drizzle-orm/node-postgres"; import { Pool } from "pg"; import { pgTable, text, integer, serial } from 'drizzle-orm/pg-core'; import { relations } from 'drizzle-orm'; const pool = new Pool({ host: process.env.POSTGRES HOST, port: Number(process.env.POSTGRES PORT), user: process.env.POSTGRES USER, password: process.env.POSTGRES PASSWORD, database: process.env.POSTGRES DB, }); export const rolesTable = pgTable('roles', { id: serial('id').primaryKey(), name: text('name').notNull(), }); export const permissionsTable = pgTable('permissions', { id: serial('id').primaryKey(), name: text('name').notNull(), }); export const usersTable = pgTable('users', { id: serial('id').primaryKey(), name: text('name').notNull(), email: text('email').notNull().unique(), password: text('password').notNull(), role id: integer('role id').references(() => rolesTable.id).notNull(), }); export const rolePermissionsTable = pgTable('role permissions', { role id: integer('role id').references(() => rolesTable.id).notNull(), permission id: integer('permission id').references(() => permissionsTable.id).notNull(), }); export const userRelations = relations(usersTable, ({ one }) => ({ role: one(rolesTable, { fields: [usersTable.role id], references: [rolesTable.id] }) })); export const roleRelations = relations(rolesTable, ({ many }) => ({ users: many(usersTable), permissions: many(permissionsTable) })); export const permissionRelations = relations(permissionsTable, ({ many }) => ({ roles: many(rolePermissionsTable) })) export const db = drizzle(pool, { schema: { rolesTable, permissionsTable, usersTable, userRelations, roleRelations, permissionRelations } }); export type IUser = typeof usersTable.$inferSelect; export type IRole = typeof rolesTable.$inferSelect; - Create a .env file with the following content: POSTGRES HOST="127.0.0.1" POSTGRES PORT=5432 POSTGRES USER=postgres POSTGRES PASSWORD=postgres POSTGRES DB=databasename - Add drizzle.config.ts in root of you application import { defineConfig } from 'drizzle-kit' import dotenv from 'dotenv'; dotenv.config(); if ( !process.env.POSTGRES HOST || !process.env.POSTGRES PORT || !process.env.POSTGRES USER || !process.env.POSTGRES PASSWORD || !process.env.POSTGRES DB ) { throw Error("Please add POSTGRES INFO"); } const connectionString = postgresql://${process.env.POSTGRES USER}:${process.env.POSTGRES PASSWORD}@${process.env.POSTGRES HOST}:${process.env.POSTGRES PORT}/${process.env.POSTGRES DB}; / @type { import("drizzle-kit").Config } / export default defineConfig({ schema: './server/database/index.ts', out: './drizzle', dialect: "postgresql", dbCredentials: { url: connectionString, }, verbose: true, strict: true, }) - Update package.json scripts: { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "db:generate": "drizzle-kit generate", "db:migrate": "drizzle-kit migrate", "db:drop": "drizzle-kit drop", "db:studio": "drizzle-kit studio" }, "dependencies": { "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "dotenv": "^16.4.5", "drizzle-orm": "^0.32.2", "lucide-react": "^0.424.0", "next": "14.2.5", "pg": "^8.12.0", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/pg": "^8.11.6", "@types/react": "^18", "@types/react-dom": "^18", "drizzle-kit": "^0.23.2", "eslint": "^8", "eslint-config-next": "14.2.5", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } } - Run the following commands to generate and apply migrations: pnpm run db:generate pnpm run db:migrate Step 3: Setup Auth.js (NextAuth) - Install NextAuth: pnpm add next-auth@beta npx auth secret - Copy the content from .env.local to .env and delete .env.local. POSTGRES HOST="127.0.0.1" POSTGRES PORT=5432 POSTGRES USER=postgres POSTGRES PASSWORD=postgres POSTGRES DB=test AUTH SECRET="CbAnQXI39PoYI8M+7RVARQTLSlcblW/ck0VNMcQupVU=" # Added by npx auth. Read more: https://cli.authjs.dev - Create app/api/auth/[…nextauth]/page.ts: import { handlers } from "@/auth" export const { GET, POST } = handlers - Create auth.ts in the root of your project: import NextAuth, { DefaultSession } from "next-auth" import Credentials from "next-auth/providers/credentials" import { comparePassword } from "@/utils/password" import { getUserByEmailAndPassword } from "./server/queries/user" import { User } from "next-auth"; export const { handlers, signIn, signOut, auth } = NextAuth({ providers: [ Credentials({ credentials: { email: {}, password: {}, }, authorize: async (credentials) => { const email = credentials.email as string; const password = credentials.password as string; const user = await getUserByEmailAndPassword(email); if (!user) { throw new Error("User not found."); } const isPasswordValid = await comparePassword({ plainPassword: password, hashPassword: user.password }); if (!isPasswordValid) { throw new Error("Invalid password."); } return { id: user.id.toString(), name: user.name, email: user.email, role id: user.role id, } as User; }, }), ], callbacks: { async jwt({ token, user }) { if (user?.role id) { token.role id = user.role id } return token; }, session({ session, token }) { return { ...session, user: { ...session.user, role id: token.role id as string, }, }; }, }, }); - now create utils folder on root of application and create this 3 files we will need this later: export const permissionList = { POST SHOW: 'post-list', POST CREATE: 'post-create', POST EDIT: 'post-edit', POST DELETE: 'post-delete' } "use server" import { getMyPermissions } from "@/server/queries/user"; import { cache } from "react"; export const hasPermission = cache(async (permissions: string[]) => { const myPermissions = await getMyPermissions(); return permissions.every(permission => myPermissions.some(x => x.permissionName === permission) ); }); import bcrypt from 'bcryptjs'; export async function makePassword(plainPassword: string): Promise { try { const salt = await bcrypt.genSalt(10); const hash = await bcrypt.hash(plainPassword, salt); return hash; } catch (err) { throw new Error('Error hashing password'); } } export async function comparePassword({ plainPassword, hashPassword }: { plainPassword: string, hashPassword: string }): Promise { try { return await bcrypt.compare(plainPassword, hashPassword); } catch (err) { console.log(err); throw new Error('Error comparing password'); } } now you will get this error Property ‘role id’ does not exist on type ‘User | AdapterUser’. - To fix this create types.d.ts in root of application: declare module "next-auth" { / The shape of the user object returned in the OAuth providers' profile callback, or the second parameter of the session callback, when using a database. / interface User { id: number name:string email:string password:string role id:number } interface Session { user: { role id: number; } & DefaultSession["user"]; } } // The JWT interface can be found in the next-auth/jwt submodule import { JWT } from "next-auth/jwt" declare module "next-auth/jwt" { / Returned by the jwt callback and auth, when using JWT sessions / interface JWT { / OpenID ID Token / idToken?: string } } - now let’s add queries create dir queries on server folder and create file import { eq } from "drizzle-orm" import { db, permissionsTable, rolePermissionsTable, rolesTable, usersTable } from "../database" import { auth } from "@/auth"; import { cache } from "react"; export const getRoles = cache(async () => { const result = await db.query.rolesTable.findMany(); if (!result) throw Error('No Roles found.'); return result; }) export const getCurrentUser = cache(async () => { const session = await auth(); const result = await db.query.usersTable.findFirst({ where: eq(usersTable.email, session?.user.email), with: { role: true } }) if (!result) { throw Error('No Users found.') }; console.log({ result }); return result; }) export const getUserByEmailAndPassword = async (email: string) => { const result = await db.query.usersTable.findFirst({ where: eq(usersTable.email, email) }); if (!result) throw Error('No Users found.'); return result; } export const getMyPermissions = cache(async () => { const session = await auth(); if (!session?.user?.role id) { throw new Error("Role id not found in session."); } const permissions = await db .select({ permissionName: permissionsTable.name }) .from(rolePermissionsTable) .innerJoin(permissionsTable, eq(rolePermissionsTable.permission id, permissionsTable.id)) .where(eq(rolePermissionsTable.role id, session.user.role id)); return permissions; }); Step 4 : Setup Ui for Role-Based Access Control (RBAC) - Create a wrapper component to use the client-side library. "use client" import 'react-toastify/dist/ReactToastify.css'; import { ToastContainer } from 'react-toastify'; import { PropsWithChildren, ReactPropTypes } from 'react'; export default function Wrapper({ children }:PropsWithChildren){ return ( <> {children} ) } - Now, let’s create the login and register pages. import Link from 'next/link'; import LoginForm from './form'; import { auth } from '@/auth'; import { redirect } from 'next/navigation'; export default async function SignInPage() { const session = await auth(); if (session) { redirect('/') } return (

Login

{"Don't have an account?"} {''} register

); } "use client"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { loginAction } from "@/server/actions/user.action"; import { FormEvent } from "react"; import { useServerAction } from "zsa-react"; export default function LoginForm() { const { isPending, execute, error } = useServerAction(loginAction); const handleLogin = async (event: FormEvent) => { event.preventDefault() const form = event.currentTarget const formData = new FormData(form) const [data, error] = await execute(formData) console.log(data, error) } return ( ) } - Now, let’s add all ShadCN components: pnpm dlx shadcn-ui@latest add button pnpm dlx shadcn-ui@latest add input pnpm dlx shadcn-ui@latest add dropdown-menu pnpm dlx shadcn-ui@latest add sheet - Next, let’s add all actions: "use server" import bcrypt from 'bcryptjs'; import { createServerAction } from "zsa" import z from "zod" import { db, usersTable } from "../database"; import { eq } from "drizzle-orm"; import { comparePassword, makePassword } from "@/utils/password"; import { signIn, signOut } from "@/auth"; import { AuthError } from "next-auth"; function isRedirectError(error: Error & { digest?: string }) { return !!error.digest?.startsWith("NEXT REDIRECT") } export const loginAction = createServerAction() .input(z.object({ email: z.string().min(3).email(), password: z.string().min(3) }), { type: "formData", }) .handler(async ({ input }) => { const user = await db.query.usersTable.findFirst({ where: (eq(usersTable.email, input.email)) }) if (!user) { throw new Error('User not found.'); } if (!await bcrypt.compare(input.password, user.password)) { throw new Error('User not found.'); } try { await signIn("credentials", { email: input.email, password: input.password, redirectTo: "/" }); } catch (error: any) { if (isRedirectError(error)) throw error; //https://github.com/nextauthjs/next-auth/discussions/9389 if (error instanceof AuthError) { return { errors: undefined, message: error.cause?.err?.message } } } return { success: true, data: user }; }); export const registerAction = createServerAction() .input(z.object({ name: z.string().min(3), email: z.string().min(3).email(), password: z.string().min(3), role id: z.string().min(1) }), { type: "formData", }) .handler(async ({ input }) => { let user = await db.query.usersTable.findFirst({ where: (eq(usersTable.email, input.email)) }) if (user) { throw new Error('User Already exists.'); } const res = await db.insert(usersTable).values({ email: input.email, name: input.name, password: await makePassword(input.password), role id:parseInt(input.role id) }).returning(); if(res[0]){ user = res[0]; } return { success: true, data: user }; }); export const logout = async () => { await signOut(); } - At this point, you should get a login page like this: - Now, let’s build the seeder so we can log in. In package.json, add this line: "db:seed": "tsx ./server/database/seed/index.ts" - Create the seed file at server/database/seed/index.ts: import pg from "pg"; import dotenv from 'dotenv'; import { drizzle } from "drizzle-orm/node-postgres"; import as Schema from "../../database"; import { makePassword } from "@/utils/password"; import { sql } from "drizzle-orm"; dotenv.config(); export const client = new pg.Client({ host: process.env.POSTGRES HOST, port: Number(process.env.POSTGRES PORT), user: process.env.POSTGRES USER, password: process.env.POSTGRES PASSWORD, database: process.env.POSTGRES DB, }); async function main() { try { await client.connect(); const db = drizzle(client, { schema: Schema }); await db.execute(sqlTRUNCATE TABLE role permissions CASCADE); await db.execute(sqlTRUNCATE TABLE users CASCADE); await db.execute(sqlTRUNCATE TABLE roles CASCADE); await db.execute(sqlTRUNCATE TABLE permissions CASCADE); await db.execute(sqlALTER SEQUENCE roles id seq RESTART WITH 1); await db.execute(sqlALTER SEQUENCE permissions id seq RESTART WITH 1); await db.execute(sqlALTER SEQUENCE users id seq RESTART WITH 1); // Insert roles const roles = await db.insert(Schema.rolesTable).values([ { name: 'admin' }, { name: 'editor' }, { name: 'user' }, ]).returning(); // Insert permissions const permissions = await db.insert(Schema.permissionsTable).values([ { name: 'post-list' }, { name: 'post-create' }, { name: 'post-edit' }, { name: 'post-delete' } ]).returning(); const getRoleId = (roleName: string) => { const role = roles.find(role => role.name === roleName); if (!role) { throw new Error(Role ${roleName} not found); } return role.id; }; const getPermissionId = (permissionName: string) => { const permission = permissions.find(permission => permission.name === permissionName); if (!permission) { throw new Error(Permission ${permissionName} not found); } return permission.id; }; const rolePermissions = [ // Admin has all permissions { role id: getRoleId('admin'), permission id: getPermissionId('post-list') }, { role id: getRoleId('admin'), permission id: getPermissionId('post-create') }, { role id: getRoleId('admin'), permission id: getPermissionId('post-edit') }, { role id: getRoleId('admin'), permission id: getPermissionId('post-delete') }, // Editor has all permissions except delete { role id: getRoleId('editor'), permission id: getPermissionId('post-create') }, { role id: getRoleId('editor'), permission id: getPermissionId('post-edit') }, // User has only view permission { role id: getRoleId('user'), permission id: getPermissionId('post-list') } ]; await db.insert(Schema.rolePermissionsTable).values(rolePermissions); await db.insert(Schema.usersTable).values([ { name: 'Admin', email: 'admin@example.com', password: await makePassword('password'), role id: getRoleId('admin') }, { name: 'Editor', email: 'editor@example.com', password: await makePassword('password'), role id: getRoleId('editor') }, { name: 'User', email: 'user@example.com', password: await makePassword('password'), role id: getRoleId('user') } ]); console.log("Seeding completed successfully!"); } catch (error) { console.error("Error during seeding:", error); } finally { await client.end(); } } main(); - Now run: pnpm db:seed Next, let’s update the login functionality and home page. First, delete page.tsx and create a folder called (dashboard) for the protected group route. Add a layout for the look and feel of the admin panel and to protect pages and UI: import Link from "next/link" import { CircleUser, Coffee, Home, Menu, Users, } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { auth } from "@/auth" import { redirect } from "next/navigation" import Logout from "./logout" import Guard from "@/components/server/Guard" import { permissionList } from "@/utils/constants" const Nav = () => export default async function DashboardLayout( { children }: Readonly<{ children: React.ReactNode; }>) { const session = await auth(); if (!session) { redirect('/login') } return (

Coding Tricks

{session.user?.email}

{children}

) } - Create the logout component since it needs to be a client component: "use client" import { DropdownMenuItem } from "@/components/ui/dropdown-menu" import { logout } from "@/server/actions/user.action" export default function Logout() { return logout()} >Logout } - Create a Guard component to check permissions and show/hide UI elements accordingly: "use server"; import { getMyPermissions } from "@/server/queries/user"; import { ReactNode } from "react"; interface GuardProps { permissions: string[]; children: ReactNode; } export default async function Guard({ permissions, children }: GuardProps) { const myPermissions = await getMyPermissions(); const hasPermissions = permissions.every(permission => myPermissions.some(x => x.permissionName === permission) ); if (!hasPermissions) { return null; } return ( <> {children} ); } - Add a users page that connects to the users tab from the sidebar: import { permissionList } from '@/utils/constants' import { hasPermission } from '@/utils/guard' import { redirect } from 'next/navigation'; import React from 'react' export default async function UserPage() { const permission = await hasPermission([permissionList.POST SHOW]); if (!permission) { return redirect('/') } return (

You have User page access

) } When logged in as admin, you should see all permissions. This button UI is protected by the Guard.tsx component. - Now log in with editor credentials: email : editor@example.com passwod : password You will see that the show and delete permissions are not displayed, and the sidebar users tab is also removed. Check if the /users page is accessible. Since the editor doesn’t have the post-show permission, it should redirect to the home page: const permission = await hasPermission([permissionList.POST SHOW]); if (!permission) { return redirect('/') } You can add as many permissions as you want to allow. Conclusion You’ve successfully implemented a role-based access control (RBAC) system in your Next.js 14 application using Drizzle ORM and NextAuth. This setup allows you to manage user roles and permissions effectively, ensuring that only authorized users can access specific parts of your application. You can refer to this GitHub repository for the full code: Next.js Role and Permission.

Kamlesh Paul

Recent