feat: Add sign in with auth.js button to admin login page

Author: CrawlerCode

dev/src/app/(payload)/admin/importMap.js

@@ -1,5 +1,5 @@
-
+import { SignInWithAuthjsButton as SignInWithAuthjsButton_0 } from 'payload-authjs/components'
 
 export const importMap = {
-
+  "payload-authjs/components#SignInWithAuthjsButton": SignInWithAuthjsButton_0
 }

package.json

@@ -16,6 +16,11 @@
       "types": "./dist/middleware.d.ts",
       "import": "./dist/middleware.js",
       "default": "./dist/middleware.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
     }
   },
   "files": [
@@ -86,6 +91,8 @@
     "typescript": "^5.6.2"
   },
   "nx": {},
-  "dependencies": {},
+  "dependencies": {
+    "@auth/core": "^0.34.2"
+  },
   "packageManager": "pnpm@9.9.0"
 }

pnpm-lock.yaml

@@ -0,0 +1,46 @@
+import { createActionURL } from "@auth/core";
+import { Button } from "@payloadcms/ui";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import React from "react";
+
+/**
+ * A button that redirects the user to the Auth.js sign in page
+ */
+export const SignInWithAuthjsButton = ({
+  authjsBasePath,
+  adminURL,
+}: {
+  authjsBasePath: string;
+  adminURL: string;
+}) => {
+  return (
+    <form
+      style={{ display: "flex", justifyContent: "center" }}
+      action={async () => {
+        "use server";
+
+        const signInURL = createActionURL(
+          "signin",
+          "https",
+          headers(),
+          process.env,
+          authjsBasePath,
+        );
+        signInURL.searchParams.append("callbackUrl", adminURL);
+
+        redirect(signInURL.toString());
+      }}
+    >
+      <Button
+        type="submit"
+        size="large"
+        buttonStyle="secondary"
+        icon={<img src="https://authjs.dev/img/logo-sm.png" alt="Auth.js Logo" />}
+        iconPosition="left"
+      >
+        Sign in with Auth.js
+      </Button>
+    </form>
+  );
+};

src/components/SignInWithAuthjsButton.tsx

@@ -0,0 +1 @@
+export { SignInWithAuthjsButton } from "./SignInWithAuthjsButton";

src/components/index.ts

@@ -14,5 +14,28 @@ export const authjsPlugin =
     config.collections = config.collections ?? [];
     generateUsersCollection(config.collections, pluginOptions);
 
+    // Add custom components to admin
+    config.admin = {
+      ...config.admin,
+      components: {
+        ...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")
+            ? [
+                {
+                  path: "payload-authjs/components#SignInWithAuthjsButton",
+                  serverProps: {
+                    authjsBasePath: pluginOptions.authjsConfig.basePath ?? "/api/auth",
+                    adminURL: config.routes?.admin ?? "/admin",
+                  },
+                },
+              ]
+            : []),
+        ],
+      },
+    };
+
     return config;
   };