Implementing Role-Based Access Control (RBAC) in Payload CMS with Next.js

Role-Based Access Control (RBAC) in Payload CMS and use it in a Next.js frontend to restrict access.

Steps:

1. Define Roles in Payload CMS
2. Update users collection in payload.config.ts:

ts

Copy

Edit
import { CollectionConfig } from 'payload/types';

const Users: CollectionConfig = {
  slug: 'users',
  auth: true,
  access: {
    read: ({ req: { user } }) => !!user, // Allow logged-in users to read
  },
  fields: [
    {
      name: 'role',
      type: 'select',
      options: ['admin', 'editor', 'viewer'],
      defaultValue: 'viewer',
      required: true,
    },
  ],
};

export default Users;

1. Restrict Access in Next.js Frontend
2. Create a HOC (withAuth.tsx) to wrap protected pages:

tsx

Copy

Edit
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useUser } from '../hooks/useUser';

const withAuth = (WrappedComponent, requiredRole) => {
  return (props) => {
    const { user, loading } = useUser();
    const router = useRouter();

    useEffect(() => {
      if (!loading && (!user || user.role !== requiredRole)) {
        router.push('/login');
      }
    }, [user, loading, router]);

    return user ? <WrappedComponent {...props} /> : null;
  };
};

export default withAuth;

1. Apply it to a Page

tsx

Copy

Edit
import withAuth from '../utils/withAuth';

const AdminDashboard = () => <h1>Admin Panel</h1>;

export default withAuth(AdminDashboard, 'admin');