How to Add RBAC Authorization in Next.js

Role-Based Access Control (RBAC) is a crucial feature in modern web applications, enabling administrators to manage user permissions based on their roles within the system. Implementing RBAC in a Next.js application involves a few key steps: defining roles and permissions, integrating these with authentication, and enforcing access control in your application. This guide will walk you through the process of adding RBAC authorization to a Next.js application.

1. Understanding RBAC

Role-Based Access Control (RBAC) is a method for restricting system access to authorized users based on their roles. Roles define a set of permissions, and users are assigned roles that grant them the associated permissions. For example, in an application, you might have roles such as admin, editor, and viewer, each with different levels of access.

2. Setting Up Your Next.js Project

If you haven't already, start by creating a Next.js project:

npx create-next-app@latest my-rbac-app
cd my-rbac-app

3. Adding Authentication

Before implementing RBAC, you need an authentication mechanism to identify users. Next.js doesn’t come with built-in authentication, so you can use libraries such as NextAuth.js or Firebase Authentication. Here’s a brief overview of setting up NextAuth.js:

1. Install NextAuth.js:

   npm install next-auth

1. Create API Route for Authentication:

In your pages/api directory, create a file named [...nextauth].js:

   // pages/api/auth/[...nextauth].js
   import NextAuth from 'next-auth';
   import CredentialsProvider from 'next-auth/providers/credentials';

   export default NextAuth({
     providers: [
       CredentialsProvider({
         async authorize(credentials) {
           // Here you should fetch and verify user credentials from your database
           const user = { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' };
           if (user) {
             return user;
           } else {
             return null;
           }
         }
       })
     ],
     pages: {
       signIn: '/auth/signin',
     },
     callbacks: {
       async session({ session, token }) {
         session.user.role = token.role;
         return session;
       },
       async jwt({ token, user }) {
         if (user) {
           token.role = user.role;
         }
         return token;
       }
     }
   });

1. Add Sign-In Page:

Create a simple sign-in page at pages/auth/signin.js:

   // pages/auth/signin.js
   import { signIn } from 'next-auth/react';

   export default function SignIn() {
     return (
       <div>
         <h1>Sign In</h1>
         <button onClick={() => signIn('credentials', { redirect: false })}>
           Sign In
         </button>
       </div>
     );
   }

4. Defining Roles and Permissions

Define roles and permissions in your application. You can do this in a central configuration file or directly within your code. Here’s a simple example of defining roles and permissions:

// lib/roles.js
export const ROLES = {
  ADMIN: 'admin',
  EDITOR: 'editor',
  VIEWER: 'viewer',
};

export const PERMISSIONS = {
  [ROLES.ADMIN]: ['view_dashboard', 'edit_content', 'delete_content'],
  [ROLES.EDITOR]: ['view_dashboard', 'edit_content'],
  [ROLES.VIEWER]: ['view_dashboard'],
};

5. Implementing RBAC

Integrate the RBAC logic into your Next.js pages and API routes. Here’s how to restrict access based on roles:

1. Protecting Pages:

Create a Higher-Order Component (HOC) to wrap your protected pages:

   // lib/withAuth.js
   import { useSession, signIn } from 'next-auth/react';
   import { ROLES } from './roles';

   export function withAuth(Component, allowedRoles) {
     return function ProtectedPage(props) {
       const { data: session, status } = useSession();

       if (status === 'loading') return <p>Loading...</p>;
       if (!session || !allowedRoles.includes(session.user.role)) {
         signIn();
         return null;
       }

       return <Component {...props} />;
     };
   }

Use this HOC in your pages:

   // pages/admin.js
   import { withAuth } from '../lib/withAuth';
   import { ROLES } from '../lib/roles';

   function AdminPage() {
     return <div>Welcome, Admin!</div>;
   }

   export default withAuth(AdminPage, [ROLES.ADMIN]);

1. Protecting API Routes:

You can also protect API routes by checking user roles:

   // pages/api/protected-route.js
   import { getSession } from 'next-auth/react';
   import { ROLES } from '../../lib/roles';

   export default async function handler(req, res) {
     const session = await getSession({ req });

     if (!session || !ROLES.ADMIN.includes(session.user.role)) {
       return res.status(403).json({ message: 'Forbidden' });
     }

     res.status(200).json({ message: 'Success' });
   }

6. Testing and Refining

Ensure you thoroughly test your RBAC implementation to verify that permissions and roles are enforced correctly. Test different roles to confirm that access restrictions are working as expected.

Conclusion

Integrating Role-Based Access Control (RBAC) into a Next.js application involves setting up authentication, defining roles and permissions, and enforcing these roles throughout your application. By following the steps outlined in this guide, you can effectively manage user access and ensure that your Next.js application is both secure and user-friendly.
4G SIM CART CAMERA

The above is the detailed content of How to Add RBAC Authorization in Next.js. For more information, please follow other related articles on the PHP Chinese website!