Add support for multiple strategies

Author: thgh

README.md

@@ -64,12 +64,14 @@ export default buildConfig({
   plugins: [
     payloadCloud(),
     oAuthPlugin({
+      buttonLabel: 'Sign in with oAuth',
       databaseUri: process.env.DATABASE_URI,
       clientID: process.env.OAUTH_CLIENT_ID,
       clientSecret: process.env.OAUTH_CLIENT_SECRET,
       authorizationURL: process.env.OAUTH_AUTH_ENDPOINT,
       tokenURL: process.env.OAUTH_TOKEN_ENDPOINT,
-      callbackURL: process.env.OAUTH_CALLBACK_ENDPOINT,
+      authorizePath: '/oauth/authorize1',
+      callbackURL: process.env.ORIGIN + '/oauth/callback1',
       async userinfo(accessToken) {
         const { data: user } = await axios.get(
           process.env.OAUTH_USERINFO_ENDPOINT,
@@ -81,6 +83,15 @@ export default buildConfig({
         }
       },
     }),
+    // Another oAuth provider
+    oAuthPlugin({
+      buttonLabel: 'Sign in with Alternative',
+      // These paths must be unique per provider
+      authorizePath: '/oauth/authorize2',
+      callbackURL: process.env.ORIGIN + '/oauth/callback2',
+
+      ...rest,
+    }),
   ],
   db: mongooseAdapter({
     url: process.env.DATABASE_URI,

src/OAuthButton.tsx

@@ -1,16 +1,12 @@
 import Button from 'payload/dist/admin/components/elements/Button'
-import React, { useEffect } from 'react'
+import React from 'react'
+import { ButtonProps } from './types'
 
-export default function OAuthButton() {
-  useEffect(() => {
-    setTimeout(() => {
-      // window.location.href = '/a'
-    }, 2000)
-  }, [])
+export default function OAuthButton(props: ButtonProps) {
   return (
     <div style={{ marginBottom: 40 }}>
-      <Button el="anchor" url="/oauth2/authorize">
-        Sign in with oAuth
+      <Button el="anchor" url={props.authorizePath}>
+        {props.buttonLabel}
       </Button>
     </div>
   )

src/index.ts

@@ -18,6 +18,7 @@ import { TextField } from 'payload/types'
 
 import OAuthButton from './OAuthButton'
 import type { oAuthPluginOptions } from './types'
+import { createElement } from 'react'
 
 export { OAuthButton, oAuthPluginOptions }
 
@@ -94,20 +95,25 @@ function oAuthPluginClient(
   incoming: Config,
   options: oAuthPluginOptions
 ): Config {
-  const button: React.ComponentType<any> =
-    options.components?.Button || OAuthButton
-  return {
-    ...incoming,
-    admin: {
-      ...incoming.admin,
-      components: {
-        ...incoming.admin?.components,
-        beforeLogin: (incoming.admin?.components?.beforeLogin || []).concat(
-          button
-        ),
-      },
-    },
-  }
+  const button = options.components?.Button ?? OAuthButton
+  return button
+    ? {
+        ...incoming,
+        admin: {
+          ...incoming.admin,
+          components: {
+            ...incoming.admin?.components,
+            beforeLogin: (incoming.admin?.components?.beforeLogin || []).concat(
+              () =>
+                createElement(button, {
+                  authorizePath: options.authorizePath || '/oauth2/authorize',
+                  buttonLabel: options.buttonLabel || `Sign in with oAuth`,
+                })
+            ),
+          },
+        },
+      }
+    : incoming
 }
 
 function oAuthPluginServer(
@@ -123,7 +129,7 @@ function oAuthPluginServer(
   const collectionSlug = (options.userCollection?.slug as 'users') || 'users'
   const sub = options.subField?.name || 'sub'
   const oAuthStrategyCount = (incoming.custom?.oAuthStrategyCount || 0) + 1
-  const strategyName = `oauth2-${incoming.custom?.oAuthStrategyCount}`
+  const strategyName = `oauth2-${oAuthStrategyCount}`
 
   if (options.clientID) {
     // Validate paths, they must be unique

src/types.ts

@@ -46,8 +46,14 @@ export interface oAuthPluginOptions extends StrategyOptions {
   /** Which path to mount in express, defaults to the path in callbackURL */
   callbackPath?: string
 
+  /**
+   * Text on the sign in button
+   * @default "Sign in with oAuth"
+   */
+  buttonLabel?: string
+
   components?: {
-    Button?: ComponentType<any>
+    Button?: false | ((props: ButtonProps) => JSX.Element)
   }
   userCollection?: {
     /** @default "users" */
@@ -63,3 +69,10 @@ export interface oAuthPluginOptions extends StrategyOptions {
    */
   successRedirect?: string
 }
+
+export type ButtonProps = {
+  /** Path that initiates the oAuth flow */
+  authorizePath: string
+  /** Text on the sign in button */
+  buttonLabel: string
+}