Installation

1. Install the package

The plugin is available on NPM. Use the following command to install it in your Payload CMS project:

npm

            npm install payload-auth-plugin

yarn

            yarn add payload-auth-plugin

pnpm

            pnpm add payload-auth-plugin

bun

            bun add payload-auth-plugin

2. Environment Variables

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

.env

txt

            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.

3. Usage

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:

src/payload.config.ts

            import { buildConfig } from "payload/config";
// --- rest of the imports
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. Adding an OAuth provider:

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

src/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({
      providers: [
        GoogleAuthProvider({
          client_id: process.env.GOOGLE_PROVIDER_CLIENT_ID as string,
          client_secret: process.env.GOOGLE_PROVIDER_CLIENT_SECRET as string,
        }),
      ],
    }),
  ],
});

3.3. Adding sign-in component:

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

src/components/Auth/index.tsx

tsx

            import { Button } from "@payloadcms/ui";
import { signin } from "payload-auth-plugin/client";
export const AuthComponent = () => {
  return (
    <Button onClick={() => signin("google")} type="button">
      Sign in with Google
    </Button>
  );
};

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

src/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.