Role-Based Access Control (RBAC): Implementing User Roles in Your Next.js App

Introduction

Role-Based Access Control (RBAC) is a security model that restricts access based on user roles. In a Next.js application, implementing RBAC ensures that users only access the features they are authorized for.

1. Understanding RBAC
- Example User Roles:
2. Setting Up Authentication in Next.js
3. Defining Roles and Permissions
- Checking User Roles in Components
4. Implementing Role-Based Protected Routes
- Create a middleware.ts file:
5. Restricting API Routes with RBAC
Conclusion
- Key Takeaways:
Support
License

1. Understanding RBAC

RBAC assigns roles to users and controls what each role can access.

Example User Roles:

Admin → Full access (manage users, settings, and content).
Editor → Can create and edit content but not manage users.
Viewer → Can only view content.

2. Setting Up Authentication in Next.js

First, install NextAuth.js for authentication:

npm install next-auth

Configure NextAuth.js in pages/api/auth/[...nextauth].ts:

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        const user = await authenticateUser(credentials.email, credentials.password);
        if (user) return user;
        throw new Error('Invalid credentials');
      }
    })
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.role = token.role;
      return session;
    },
    async jwt({ token, user }) {
      if (user) token.role = user.role;
      return token;
    }
  }
});

🔹 Benefit: Secure authentication with role-based session management.

3. Defining Roles and Permissions

Define a roles config to manage access control:

const roles = {
  admin: ['dashboard', 'manage-users', 'edit-content'],
  editor: ['dashboard', 'edit-content'],
  viewer: ['dashboard']
};

Checking User Roles in Components

Use the session to restrict access:

import { useSession } from 'next-auth/react';

export default function Dashboard() {
  const { data: session } = useSession();
  
  if (!session || !roles[session.user.role]?.includes('dashboard')) {
    return <p>Access Denied</p>;
  }
  
  return <h1>Welcome to the Dashboard</h1>;
}

🔹 Benefit: Users without proper roles cannot access restricted pages.

4. Implementing Role-Based Protected Routes

Use Next.js middleware to restrict access dynamically:

Create a `middleware.ts` file:

import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

export async function middleware(req) {
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
  
  if (!token) return NextResponse.redirect('/login');
  
  const role = token.role;
  const url = req.nextUrl.pathname;

  if (url.startsWith('/admin') && role !== 'admin') {
    return NextResponse.redirect('/403');
  }
  
  return NextResponse.next();
}

🔹 Benefit: Secure API routes and pages dynamically.

5. Restricting API Routes with RBAC

Secure API endpoints based on user roles:

import { getSession } from 'next-auth/react';

export default async function handler(req, res) {
  const session = await getSession({ req });
  
  if (!session || session.user.role !== 'admin') {
    return res.status(403).json({ error: 'Access denied' });
  }
  
  res.status(200).json({ message: 'Welcome, Admin!' });
}

🔹 Benefit: Prevent unauthorized API access.

Conclusion

Implementing RBAC in Next.js enhances security by restricting access based on user roles. Using NextAuth.js, middleware, and API protection, you can enforce access control across your application.

Key Takeaways:

✅ Secure authentication using NextAuth.js.
✅ Implement middleware to protect routes dynamically.
✅ Restrict API access based on user roles.

Support

If you found this guide helpful, consider sharing it with your network!

License

MIT