feat: Add support for Auth.js passkey provider

packages/dev/package.json

@@ -18,6 +18,8 @@
     "@payloadcms/next": "3.54.0",
     "@payloadcms/translations": "3.54.0",
     "@payloadcms/ui": "3.54.0",
+    "@simplewebauthn/browser": "^9.0.1",
+    "@simplewebauthn/server": "^9.0.3",
     "@tailwindcss/postcss": "^4.1.12",
     "clsx": "^2.1.1",
     "graphql": "^16.11.0",

packages/dev/src/app/(app)/_components/auth/SignInOrOutButtons.tsx

@@ -1,6 +1,8 @@
 import { getPayloadSession } from "payload-authjs";
+import { AuthjsRegisterPasskeyButtonClient } from "./authjs/AuthjsRegisterPasskeyButtonClient";
 import { AuthjsSignInButtonClient } from "./authjs/AuthjsSignInButtonClient";
 import { AuthjsSignInButtonServerAction } from "./authjs/AuthjsSignInButtonServerAction";
+import { AuthjsSignInPasskeyButtonClient } from "./authjs/AuthjsSignInPasskeyButtonClient";
 import { AuthjsSignOutButtonClient } from "./authjs/AuthjsSignOutButtonClient";
 import { AuthjsSignOutButtonServerAction } from "./authjs/AuthjsSignOutButtonServerAction";
 import { PayloadSignInButtonClient } from "./payload/PayloadSignInButtonClient";
@@ -18,11 +20,13 @@ export const SignInOrOutButtons = async () => {
           <PayloadSignOutButtonClient />
           <AuthjsSignOutButtonServerAction />
           <AuthjsSignOutButtonClient />
+          <AuthjsRegisterPasskeyButtonClient />
         </>
       ) : (
         <>
           <AuthjsSignInButtonServerAction />
           <AuthjsSignInButtonClient />
+          <AuthjsSignInPasskeyButtonClient />
           <PayloadSignInButtonClient />
         </>
       )}

packages/dev/src/app/(app)/_components/auth/authjs/AuthjsRegisterPasskeyButtonClient.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Button } from "@/components/general/Button";
+import { AuthjsLogo } from "@/components/img/AuthjsLogo";
+import { signIn } from "next-auth/webauthn";
+
+/**
+ * Register a new passkey using Auth.js on the client
+ *
+ * @see https://authjs.dev/getting-started/authentication/webauthn
+ */
+export function AuthjsRegisterPasskeyButtonClient() {
+  return (
+    <Button onClick={() => signIn("passkey", { action: "register" })}>
+      <AuthjsLogo />
+      Register a Passkey (client)
+    </Button>
+  );
+}

packages/dev/src/app/(app)/_components/auth/authjs/AuthjsSignInPasskeyButtonClient.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Button } from "@/components/general/Button";
+import { AuthjsLogo } from "@/components/img/AuthjsLogo";
+import { signIn } from "next-auth/webauthn";
+
+/**
+ * Sign in with a passkey using Auth.js on the client
+ *
+ * @see https://authjs.dev/getting-started/authentication/webauthn
+ */
+export function AuthjsSignInPasskeyButtonClient() {
+  return (
+    <Button onClick={() => signIn("passkey")}>
+      <AuthjsLogo />
+      Sign In with Passkey (client)
+    </Button>
+  );
+}

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

@@ -1,9 +1,11 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { AddAuthenticatorButton as AddAuthenticatorButton_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#AddAuthenticatorButton": AddAuthenticatorButton_06d0cb594d8f6ba2ac35015f930c882e,
   "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e,
   "/Greeting#default": default_2c1e1c35da30a80d88551f9fcc61be66
 }

packages/dev/src/auth/base.config.ts

@@ -189,4 +189,7 @@ export const authConfig: NextAuthConfig = {
       return true;
     },
   },
+  experimental: {
+    enableWebAuthn: true,
+  },
 };

packages/dev/src/auth/node.config.ts

@@ -4,8 +4,15 @@ import { discordProvider } from "./providers/discord";
 import { githubProvider } from "./providers/github";
 import { keycloakProvider } from "./providers/keycloak";
 import { nodemailerProvider } from "./providers/nodemailer";
+import { passkeysProvider } from "./providers/passkeys";
 
 export const nodeAuthConfig: NextAuthConfig = {
   ...authConfig,
-  providers: [githubProvider, keycloakProvider, discordProvider, nodemailerProvider],
+  providers: [
+    githubProvider,
+    keycloakProvider,
+    discordProvider,
+    nodemailerProvider,
+    passkeysProvider,
+  ],
 };

packages/dev/src/auth/providers/passkeys.ts

@@ -0,0 +1,3 @@
+import passkey from "next-auth/providers/passkey";
+
+export const passkeysProvider = passkey({});

packages/dev/src/payload-types.ts

@@ -164,6 +164,17 @@ export interface User {
         id?: string | null;
       }[]
     | null;
+  authenticators?:
+    | {
+        credentialID: string;
+        credentialPublicKey: string;
+        credentialBackedUp: boolean;
+        counter: number;
+        transports?: string | null;
+        credentialDeviceType: string;
+        id?: string | null;
+      }[]
+    | null;
   updatedAt: string;
   createdAt: string;
   enableAPIKey?: boolean | null;
@@ -288,6 +299,17 @@ export interface UsersSelect<T extends boolean = true> {
         createdAt?: T;
         id?: T;
       };
+  authenticators?:
+    | T
+    | {
+        credentialID?: T;
+        credentialPublicKey?: T;
+        credentialBackedUp?: T;
+        counter?: T;
+        transports?: T;
+        credentialDeviceType?: T;
+        id?: T;
+      };
   updatedAt?: T;
   createdAt?: T;
   enableAPIKey?: T;

packages/dev/src/payload/collections/users.ts

@@ -116,6 +116,7 @@ const Users: CollectionConfig<"users"> = {
           name: "additionalAccountDatabaseField",
           type: "text",
           required: true,
+          defaultValue: () => `Default value at ${new Date().toISOString()}`,
         },
         createdAtField,
       ],