CMS: Admins

Author: mbarrenechea

client/src/cms/access/admin.ts

@@ -3,15 +3,11 @@ import type { Access, FieldAccess } from "payload";
 export const adminAccess: Access = ({ req: { user } }) => {
   if (!user) return false;
 
-  if (user.role === "admin") return true;
-
-  return false;
+  return user.collection === "admins";
 };
 
 export const fieldAdminAccess: FieldAccess = ({ req: { user } }) => {
   if (!user) return false;
 
-  if (user.role === "admin") return true;
-
-  return false;
+  return user.collection === "admins";
 };

client/src/cms/access/user.ts

@@ -5,7 +5,7 @@ export const userAccess: Access = ({ req: { user } }) => {
     return false;
   }
 
-  if (user.role === "admin") {
+  if (user.collection === "admins") {
     return true;
   }
 

client/src/cms/collections/Admins.ts

@@ -0,0 +1,35 @@
+import { CollectionConfig, getPayload } from "payload";
+
+import config from "@payload-config";
+
+import { logout } from "@payloadcms/next/auth";
+
+export const Admins: CollectionConfig = {
+  slug: "admins",
+  admin: {
+    useAsTitle: "email",
+  },
+  auth: true,
+  hooks: {
+    // When the user is logged in with a non-admin user (users collection), they are asked to log
+    // out by Payload by clicking on a “Log out” button. Unfortunately, this button does not work
+    // and simply brings the user back to the same page.
+    // To work around this, the hook below automatically logs out the user when performing any
+    // admins-related operation. The user will still be presented a page that tells them to log out
+    // first, but if they reload or click the button, they are at least shown the login form.
+    beforeOperation: [
+      async ({ req }) => {
+        const payload = await getPayload({ config });
+        const { user } = await payload.auth({ headers: req.headers });
+
+        if (user?.collection === "users") {
+          await logout({ config });
+        }
+      },
+    ],
+  },
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+};

client/src/cms/collections/Users.ts

@@ -1,9 +1,8 @@
 import type { CollectionConfig } from "payload";
 
-import { adminAccess, fieldAdminAccess } from "@/cms/access/admin";
+import { adminAccess } from "@/cms/access/admin";
 import { anyoneAccess } from "@/cms/access/anyone";
 import { userAccess } from "@/cms/access/user";
-import { protectRole } from "@/cms/hooks/auth";
 
 export const Users: CollectionConfig = {
   slug: "users",
@@ -20,27 +19,5 @@ export const Users: CollectionConfig = {
   fields: [
     // Email added by default
     // Add more fields as needed
-    {
-      name: "role",
-      type: "select",
-      required: true,
-      defaultValue: "user",
-      options: [
-        {
-          label: "Admin",
-          value: "admin",
-        },
-        {
-          label: "User",
-          value: "user",
-        },
-      ],
-      access: {
-        update: fieldAdminAccess,
-      },
-      hooks: {
-        beforeChange: [protectRole],
-      },
-    },
   ],
 };

client/src/cms/hooks/auth.ts

@@ -44,7 +44,6 @@ export function SignupForm({ ...props }: React.ComponentProps<typeof Card>) {
             data: {
               email: value.email,
               password: value.password,
-              role: "user",
             },
           })
           .then(() => {

client/src/containers/auth/sign-up.tsx

@@ -63,10 +63,12 @@ export type SupportedTimezones =
 
 export interface Config {
   auth: {
+    admins: AdminAuthOperations;
     users: UserAuthOperations;
   };
   blocks: {};
   collections: {
+    admins: Admin;
     users: User;
     media: Media;
     reports: Report;
@@ -76,6 +78,7 @@ export interface Config {
   };
   collectionsJoins: {};
   collectionsSelect: {
+    admins: AdminsSelect<false> | AdminsSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     media: MediaSelect<false> | MediaSelect<true>;
     reports: ReportsSelect<false> | ReportsSelect<true>;
@@ -89,14 +92,36 @@ export interface Config {
   globals: {};
   globalsSelect: {};
   locale: null;
-  user: User & {
-    collection: 'users';
-  };
+  user:
+    | (Admin & {
+        collection: 'admins';
+      })
+    | (User & {
+        collection: 'users';
+      });
   jobs: {
     tasks: unknown;
     workflows: unknown;
   };
 }
+export interface AdminAuthOperations {
+  forgotPassword: {
+    email: string;
+    password: string;
+  };
+  login: {
+    email: string;
+    password: string;
+  };
+  registerFirstUser: {
+    email: string;
+    password: string;
+  };
+  unlock: {
+    email: string;
+    password: string;
+  };
+}
 export interface UserAuthOperations {
   forgotPassword: {
     email: string;
@@ -115,13 +140,36 @@ export interface UserAuthOperations {
     password: string;
   };
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "admins".
+ */
+export interface Admin {
+  id: number;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  sessions?:
+    | {
+        id: string;
+        createdAt?: string | null;
+        expiresAt: string;
+      }[]
+    | null;
+  password?: string | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
  */
 export interface User {
   id: number;
-  role: 'admin' | 'user';
   updatedAt: string;
   createdAt: string;
   email: string;
@@ -250,6 +298,10 @@ export interface Report {
 export interface PayloadLockedDocument {
   id: number;
   document?:
+    | ({
+        relationTo: 'admins';
+        value: number | Admin;
+      } | null)
     | ({
         relationTo: 'users';
         value: number | User;
@@ -263,10 +315,15 @@ export interface PayloadLockedDocument {
         value: number | Report;
       } | null);
   globalSlug?: string | null;
-  user: {
-    relationTo: 'users';
-    value: number | User;
-  };
+  user:
+    | {
+        relationTo: 'admins';
+        value: number | Admin;
+      }
+    | {
+        relationTo: 'users';
+        value: number | User;
+      };
   updatedAt: string;
   createdAt: string;
 }
@@ -276,10 +333,15 @@ export interface PayloadLockedDocument {
  */
 export interface PayloadPreference {
   id: number;
-  user: {
-    relationTo: 'users';
-    value: number | User;
-  };
+  user:
+    | {
+        relationTo: 'admins';
+        value: number | Admin;
+      }
+    | {
+        relationTo: 'users';
+        value: number | User;
+      };
   key?: string | null;
   value?:
     | {
@@ -304,12 +366,33 @@ export interface PayloadMigration {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "admins_select".
+ */
+export interface AdminsSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  email?: T;
+  resetPasswordToken?: T;
+  resetPasswordExpiration?: T;
+  salt?: T;
+  hash?: T;
+  loginAttempts?: T;
+  lockUntil?: T;
+  sessions?:
+    | T
+    | {
+        id?: T;
+        createdAt?: T;
+        expiresAt?: T;
+      };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".
  */
 export interface UsersSelect<T extends boolean = true> {
-  role?: T;
   updatedAt?: T;
   createdAt?: T;
   email?: T;

client/src/payload-types.ts

@@ -11,6 +11,7 @@ import sharp from "sharp";
 
 import { env } from "@/env.mjs";
 
+import { Admins } from "@/cms/collections/Admins";
 import { Media } from "@/cms/collections/Media";
 import { Reports } from "@/cms/collections/Reports";
 import { Users } from "@/cms/collections/Users";
@@ -20,12 +21,12 @@ const dirname = path.dirname(filename);
 
 export default buildConfig({
   admin: {
-    user: Users.slug,
+    user: Admins.slug,
     importMap: {
       baseDir: path.resolve(dirname),
     },
   },
-  collections: [Users, Media, Reports],
+  collections: [Admins, Users, Media, Reports],
   db: postgresAdapter({
     pool: {
       connectionString: process.env.DATABASE_URL || "",
@@ -40,6 +41,7 @@ export default buildConfig({
   typescript: {
     outputFile: path.resolve(dirname, "payload-types.ts"),
   },
+
   sharp,
   plugins: [
     // storage-adapter-placeholder