Payload CMS custom login page

app/(frontend)/login/actions.ts

"use server";
import { getPayload, APIError, ValidationError } from "payload";
import { login } from "@payloadcms/next/auth";
import config from "@payload-config";

type Result = { ok: boolean; error?: string };

// Next.js hides thrown error messages in production builds,
// so return the message instead of throwing it.
function toResult(err: unknown): Result {
  if (err instanceof ValidationError) return { ok: false, error: err.data.errors[0]?.message ?? err.message };
  if (err instanceof APIError) return { ok: false, error: err.message };
  return { ok: false, error: "Something went wrong. Try again." };
}

export async function signInAction(email: string, password: string): Promise<Result> {
  try {
    await login({ collection: "customers", config, email, password }); // sets the payload-token cookie
    return { ok: true };
  } catch (err) {
    return toResult(err);
  }
}

export async function signUpAction(name: string, email: string, password: string): Promise<Result> {
  try {
    const payload = await getPayload({ config });
    // The Local API skips access control by default, so pass only the fields you allow.
    await payload.create({ collection: "customers", data: { name, email, password } });
  } catch (err) {
    return toResult(err);
  }
  return signInAction(email, password);
}

collections/Customers.ts

import type { CollectionConfig } from "payload";

// Your site's users, kept apart from the admins in "users".
// Only admin.user ("users") can open /admin, so a customer can't sign in there.
export const Customers: CollectionConfig = {
  slug: "customers",
  auth: {
    tokenExpiration: 60 * 60 * 24 * 7, // a week; the default is 7200 s
    // verify: true, // turn on to email a confirmation link first
  },
  fields: [{ name: "name", type: "text" }],
};

payload.config.ts

import { buildConfig } from "payload";
import { sqliteAdapter } from "@payloadcms/db-sqlite";
import { Customers } from "./collections/Customers";

export default buildConfig({
  admin: { user: "users" },
  collections: [
    { slug: "users", auth: true, fields: [] },
    Customers,
  ],
  db: sqliteAdapter({ client: { url: process.env.DATABASE_URL || "file:./payload.db" } }),
  secret: process.env.PAYLOAD_SECRET || "",
});