>>

Admin Plugin Setup

1. Environment Variables

Create a .env file in the root of your project and add the following environment variables:


txt.env
            PAYLOAD_SECRET=

TIP: To generate a PAYLOAD_SECRET you can run openssl rand -base64 32 command in your terminal to generate unique random base64 string.



2. Collection

2.1. Accounts

To store the account meta information that a user has used to signin/signup into the admin, the plugin will need a Accounts collection with some mandatory fields.


Use the withAdminAccountCollection function exported by the plugin. This function takes the CollectionConfig and Users collection slug for the arguments, you can easily customize the collection configuration as you like and also keep the default setup required by the plugin intact.

tssrc/collections/Auth/Admin/Account.ts
            import { CollectionConfig } from "payload";
import { withAdminAccountCollection } from "payload-auth-plugin/collection";
import { Users } from "@/collections/Users";

export const AdminAccounts: CollectionConfig = withAdminAccountCollection(
  {
    slug: "adminAccounts",
  },
  Users.slug
);

NOTE: The slug is mandatory and should be unique. Remember that you will have to use this slug in the plugin configuration later.



3. Plugin Setup

3.1. Importing admin auth plugin:

In the Payload CMS config file, import the admin Payload auth plugin and add it to the plugins array:


tssrc/payload.config.ts
            import { buildConfig } from "payload/config";
import { adminAuthPlugin } from "payload-auth-plugin";

export default buildConfig({
  // --- rest of the config
  plugins: [
    // --- rest of the plugins
    adminAuthPlugin({
      // --- plugin config goes here
    }),
  ],
});

3.2. Integrating admin accounts collection:

Import the admin accounts collection you have created before to integrate it with the plugin:


tssrc/payload.config.ts
            import { buildConfig } from "payload/config";
import { AdminAccounts } from "@/collections/Auth/Admin/Account";
import { adminAuthPlugin } from "payload-auth-plugin";

export default buildConfig({
  // --- rest of the config
  plugins: [
    // --- rest of the plugins
    adminAuthPlugin({
      accountsCollectionSlug: AdminAccounts.slug,
    }),
  ],
});

3.3. Adding providers:

Import the required provider from the plugin and pass it to the providers array in the plugin configuration. For example, lets setup Google OAuth Provider.


tssrc/payload.config.ts
            import { buildConfig } from "payload/config";
import { adminAuthPlugin } from "payload-auth-plugin";
import { GoogleAuthProvider } from "payload-auth-plugin/providers";

export default buildConfig({
  // --- rest of the config
  plugins: [
    // --- rest of the plugins
    adminAuthPlugin({
      accountsCollectionSlug: AdminAccounts.slug,
      providers: [
        GoogleAuthProvider({
          client_id: process.env.GOOGLE_PROVIDER_CLIENT_ID as string,
          client_secret: process.env.GOOGLE_PROVIDER_CLIENT_SECRET as string,
        }),
      ],
    }),
  ],
});


4. Client Components

4.1. Create a sign-in component

Now, create a auth component for the sign-in page.


tsxsrc/components/Auth/index.tsx
            "use client";

import { Button } from "@payloadcms/ui";
import { adminClient } from "payload-auth-plugin/client";

const { signin } = adminClient();

export const AuthComponent = () => {
  const router = useRouter();

  const handleGoogleSignin = async () => {
    const { data, message, isSuccess, isError } = await signin().oauth(
      "google"
    );
    if (isError) {
      console.log(message);
    }
    if (isSuccess) {
      router.push("/admin");
    }
  };

  return (
    <Button onClick={handleGoogleSignin} type="button">
      Sign in with Google
    </Button>
  );
};

Finally, import the custom sign-in component in your Payload config.


tssrc/payload.config.ts
            export default buildConfig({
  // --- rest of the config
  admin: {
    // --- rest of the admin config
    components: {
      afterLogin: ["/components/auth#AuthComponent"],
    },
  },
});

This will append the custom auth component after Payload's default login component. Use beforeLogin to add the custom auth component above the default login component.






« Setup

App »