fix: Change the behavior of the SignIn button for login with provider (#24)

CrawlerCode · CrawlerCode · commit b3d274da2048 · 2025-04-14T23:01:56.000+02:00
diff --git a/examples/basic/src/app/(payload)/admin/importMap.js b/examples/basic/src/app/(payload)/admin/importMap.js
@@ -1,7 +1,7 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
-import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 
 export const importMap = {
   "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
-  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e
+  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e
 }
diff --git a/examples/multiple-auth-collections/src/app/(payload)/admin/importMap.js b/examples/multiple-auth-collections/src/app/(payload)/admin/importMap.js
@@ -1,7 +1,7 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
-import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 
 export const importMap = {
   "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
-  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e
+  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e
 }
diff --git a/examples/with-payload-local-strategy/src/app/(payload)/admin/importMap.js b/examples/with-payload-local-strategy/src/app/(payload)/admin/importMap.js
@@ -1,7 +1,7 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
-import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 
 export const importMap = {
   "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
-  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e
+  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e
 }
diff --git a/packages/dev/src/app/(payload)/admin/importMap.js b/packages/dev/src/app/(payload)/admin/importMap.js
@@ -1,9 +1,9 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
-import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 import { default as default_2c1e1c35da30a80d88551f9fcc61be66 } from '../../../payload/components/Greeting'
 
 export const importMap = {
   "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
-  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e,
+  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e,
   "/Greeting#default": default_2c1e1c35da30a80d88551f9fcc61be66
 }
diff --git a/packages/payload-authjs/.swcrc b/packages/payload-authjs/.swcrc
@@ -3,7 +3,8 @@
   "jsc": {
     "target": "esnext",
     "parser": {
-      "syntax": "typescript"
+      "syntax": "typescript",
+      "tsx": true
     },
     "transform": {
       "react": {
diff --git a/packages/payload-authjs/project.json b/packages/payload-authjs/project.json
@@ -6,11 +6,18 @@
     "build": {
       "executor": "@nx/js:swc",
       "options": {
-        "main": "packages/payload-authjs/src/index.ts",
-        "tsConfig": "packages/payload-authjs/tsconfig.lib.json",
-        "outputPath": "packages/payload-authjs/dist",
         "rootDir": "packages/payload-authjs/src",
-        "stripLeadingPaths": true
+        "outputPath": "packages/payload-authjs/dist",
+        "tsConfig": "packages/payload-authjs/tsconfig.lib.json",
+        "stripLeadingPaths": true,
+        "main": "packages/payload-authjs/src/index.ts",
+        "assets": [
+          {
+            "input": "packages/payload-authjs/src",
+            "glob": "**/*.css",
+            "output": "."
+          }
+        ]
       },
       "cache": true
     },
diff --git a/packages/payload-authjs/src/authjs/utils/config.ts b/packages/payload-authjs/src/authjs/utils/config.ts
@@ -1,4 +1,19 @@
 import type { NextAuthConfig } from "next-auth";
+import type { Provider } from "next-auth/providers";
+
+/**
+ * Get provider metadata
+ */
+export const getProviderMetadata = (provider: Provider) => {
+  const providerOptions = typeof provider === "function" ? provider() : provider;
+
+  return {
+    type: providerOptions.type,
+    id: (providerOptions.options?.id as string | undefined) ?? providerOptions.id,
+    name: (providerOptions.options?.name as string | undefined) ?? providerOptions.name,
+    icon: `https://authjs.dev/img/providers/${providerOptions.id}.svg`,
+  };
+};
 
 /**
  * Check if an email provider is available in the authjs config
diff --git a/packages/payload-authjs/src/components/SignInButton/index.css b/packages/payload-authjs/src/components/SignInButton/index.css
@@ -0,0 +1,4 @@
+.payload-authjs-sign-in-button {
+  width: 100%;
+  margin-block: 8px;
+}
diff --git a/packages/payload-authjs/src/components/SignInButton/index.tsx b/packages/payload-authjs/src/components/SignInButton/index.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { Button } from "@payloadcms/ui";
+import { signIn } from "next-auth/react";
+import type { ReactNode } from "react";
+import type { getProviderMetadata } from "../../authjs/utils/config";
+import "./index.css";
+
+export type SignInButtonOptions = {
+  /**
+   * Icon to display on the button
+   *
+   * @default
+   * ```tsx
+   * <img src={provider.iconUrl} alt={`Provider ${provider.name}`} />
+   * ```
+   */
+  icon?: ReactNode | ((provider: ReturnType<typeof getProviderMetadata>) => ReactNode);
+  /**
+   * Text to display on the button
+   *
+   * @default
+   * ```tsx
+   * <>Sign in with <strong>{provider.name}</strong></>
+   * ```
+   */
+  text?: ReactNode | ((provider: ReturnType<typeof getProviderMetadata>) => ReactNode);
+};
+
+export type SignInButtonProps = {
+  provider: ReturnType<typeof getProviderMetadata>;
+  icon?: ReactNode;
+  text?: ReactNode;
+};
+
+/**
+ * A button to sign in with a Auth.js provider
+ */
+export const SignInButton = ({
+  provider,
+  icon = <img src={provider.icon} alt={`Provider ${provider.name}`} />,
+  text = (
+    <>
+      Sign in with <strong>{provider.name}</strong>
+    </>
+  ),
+}: SignInButtonProps) => {
+  return (
+    <Button
+      className="payload-authjs-sign-in-button"
+      size="large"
+      buttonStyle="pill"
+      icon={icon}
+      iconPosition="left"
+      onClick={() => signIn(provider.id)}
+    >
+      {text}
+    </Button>
+  );
+};
diff --git a/packages/payload-authjs/src/components/SignInWithAuthjsButton.tsx b/packages/payload-authjs/src/components/SignInWithAuthjsButton.tsx
diff --git a/packages/payload-authjs/src/components/index.ts b/packages/payload-authjs/src/components/index.ts
@@ -1,2 +1,2 @@
 export { AccountRowLabel } from "./AccountRowLabel";
-export { SignInWithAuthjsButton } from "./SignInWithAuthjsButton";
+export { SignInButton, SignInButton as SignInWithAuthjsButton } from "./SignInButton";
diff --git a/packages/payload-authjs/src/payload/plugin.ts b/packages/payload-authjs/src/payload/plugin.ts
@@ -1,6 +1,7 @@
 import type { NextAuthConfig } from "next-auth";
 import type { CollectionSlug, Plugin } from "payload";
-import type { SignInWithAuthjsButtonProps } from "../components/SignInWithAuthjsButton";
+import { getProviderMetadata } from "../authjs/utils/config";
+import type { SignInButtonOptions, SignInButtonProps } from "../components/SignInButton";
 import { generateUsersCollection } from "./collection";
 
 export interface AuthjsPluginConfig {
@@ -44,7 +45,7 @@ export interface AuthjsPluginConfig {
      * Customize the SignInButton component
      * Or set to `false` to disable the SignInButton component
      */
-    SignInButton?: Omit<SignInWithAuthjsButtonProps, "authjsBasePath"> | false;
+    SignInButton?: SignInButtonOptions | false;
   };
 }
 
@@ -69,19 +70,33 @@ export const authjsPlugin =
         ...config.admin?.components,
         afterLogin: [
           ...(config.admin?.components?.afterLogin ?? []),
-          // Add the SignInWithAuthjsButton component to the admin login page (only if the user collection is the admin user collection)
-          ...(incomingConfig.admin?.user === (pluginOptions.userCollectionSlug ?? "users") &&
-          pluginOptions.components?.SignInButton !== false
-            ? [
-                {
-                  path: "payload-authjs/components#SignInWithAuthjsButton",
-                  serverProps: {
-                    ...pluginOptions.components?.SignInButton,
-                    authjsBasePath: pluginOptions.authjsConfig.basePath,
-                  },
-                },
-              ]
-            : []),
+          // Add the SignInButton component to the admin login page (only if the user collection is the admin user collection)
+          ...(() => {
+            if (incomingConfig.admin?.user !== (pluginOptions.userCollectionSlug ?? "users")) {
+              return [];
+            }
+            if (pluginOptions.components?.SignInButton === false) {
+              return [];
+            }
+            const signInButtonOptions = pluginOptions.components?.SignInButton;
+            return pluginOptions.authjsConfig.providers
+              .map(provider => getProviderMetadata(provider))
+              .filter(provider => ["oauth", "oidc"].includes(provider.type))
+              .map(provider => ({
+                path: "payload-authjs/components#SignInButton",
+                clientProps: {
+                  icon:
+                    typeof signInButtonOptions?.icon === "function"
+                      ? signInButtonOptions.icon(provider)
+                      : signInButtonOptions?.icon,
+                  text:
+                    typeof signInButtonOptions?.text === "function"
+                      ? signInButtonOptions.text(provider)
+                      : signInButtonOptions?.text,
+                  provider,
+                } satisfies SignInButtonProps,
+              }));
+          })(),
         ],
       },
     };
diff --git a/packages/payload-authjs/tsconfig.json b/packages/payload-authjs/tsconfig.json
@@ -3,8 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "moduleResolution": "bundler",
-    "jsx": "preserve",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"]
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "jsx": "preserve"
   },
   "files": [],
   "include": [],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'`
`2`		`-import { SignInWithAuthjsButton as SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'`
	`2`	`+import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'`
`3`	`3`
`4`	`4`	`export const importMap = {`
`5`	`5`	`"payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,`
`6`		`- "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_06d0cb594d8f6ba2ac35015f930c882e`
	`6`	`+ "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e`
`7`	`7`	`}`