Payload OAuth2 Plugin

Features

• ✅ Compatible with Payload v3
• 🔐 Configures OAuth2 with any providers
• ✨ Zero dependencies
• ⚙ Highly customizable

Installation

npm install payload-oauth2
yarn install payload-oauth2

Example Usage

Integrating Google OAuth2 to users collection.

export default buildConfig({
  // ...
  admin: {
    importMap: { baseDir: path.resolve(dirname) },
    components: {
      // A simple button with <a> tag that links to your authorization path
      // which defaults to /api/users/oauth/authorize
      afterLogin: ["app/components/OAuthLoginButton#OAuthLoginButton"],
    },
    user: "users", // assuming you already have a users collection with auth enabled
  },
  // ...
  plugins: [
    OAuth2Plugin({
      enabled: true,
      serverURL: process.env.NEXT_PUBLIC_URL || "http://localhost:3000",
      authCollection: "users", // assuming you already have a users collection with auth enabled
      clientId: process.env.CLIENT_ID || "",
      clientSecret: process.env.CLIENT_SECRET || "",
      tokenEndpoint: "https://oauth2.googleapis.com/token",
      scopes: [
        "https://www.googleapis.com/auth/userinfo.email",
        "https://www.googleapis.com/auth/userinfo.profile",
        "openid",
      ],
      providerAuthorizationUrl: "https://accounts.google.com/o/oauth2/v2/auth",
      getUserInfo: async (accessToken: string) => {
        const response = await fetch(
          "https://www.googleapis.com/oauth2/v3/userinfo",
          { headers: { Authorization: `Bearer ${accessToken}` } },
        );
        const user = await response.json();
        return { email: user.email, sub: user.sub };
      },
      successRedirect: () => "/admin",
      failureRedirect: () => "/login",
    }),
  ],
  // ...
});

Contributing

Contributions and feedback are very welcome.

To get it running:

1. Clone the project.
2. pnpm install
3. pnpm dev

License

The MIT License (MIT). Please see License File for more information.

Credits

This package was inspired by Payload Plugin OAuth