fix: Move webauthn components to dedicated export (#48)

CrawlerCode · CrawlerCode · commit 6215d9523ed5 · 2025-10-13T23:41:09.000+02:00
diff --git a/packages/dev/src/app/(payload)/admin/importMap.js b/packages/dev/src/app/(payload)/admin/importMap.js
@@ -1,11 +1,13 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
-import { AddAuthenticatorButton as AddAuthenticatorButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { AddAuthenticatorButton as AddAuthenticatorButton_39ad1cdbf6aa2f97589820b2ab72a1b1 } from 'payload-authjs/components/webauthn'
 import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SignInButtonWebauthn as SignInButtonWebauthn_39ad1cdbf6aa2f97589820b2ab72a1b1 } from 'payload-authjs/components/webauthn'
 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/webauthn#AddAuthenticatorButton": AddAuthenticatorButton_39ad1cdbf6aa2f97589820b2ab72a1b1,
   "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e,
+  "payload-authjs/components/webauthn#SignInButtonWebauthn": SignInButtonWebauthn_39ad1cdbf6aa2f97589820b2ab72a1b1,
   "/Greeting#default": default_2c1e1c35da30a80d88551f9fcc61be66
 }
diff --git a/packages/payload-authjs/package.json b/packages/payload-authjs/package.json
@@ -14,29 +14,34 @@
     "url": "https://github.com/CrawlerCode"
   },
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
+  "main": "dist/exports/server.js",
+  "types": "dist/exports/server.d.ts",
+  "module": "dist/exports/server.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/exports/server.d.ts",
+      "import": "./dist/exports/server.js",
+      "default": "./dist/exports/server.js"
     },
     "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./dist/client.js",
-      "default": "./dist/client.js"
+      "types": "./dist/exports/client.d.ts",
+      "import": "./dist/exports/client.js",
+      "default": "./dist/exports/client.js"
     },
     "./middleware": {
       "types": "./dist/payload/middleware.d.ts",
       "import": "./dist/payload/middleware.js",
       "default": "./dist/payload/middleware.js"
     },
     "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js",
-      "default": "./dist/components/index.js"
+      "types": "./dist/exports/components/index.d.ts",
+      "import": "./dist/exports/components/index.js",
+      "default": "./dist/exports/components/index.js"
+    },
+    "./components/webauthn": {
+      "types": "./dist/exports/components/webauthn.d.ts",
+      "import": "./dist/exports/components/webauthn.js",
+      "default": "./dist/exports/components/webauthn.js"
     }
   },
   "files": [
diff --git a/packages/payload-authjs/src/client.ts b/packages/payload-authjs/src/client.ts
diff --git a/packages/payload-authjs/src/components/index.ts b/packages/payload-authjs/src/components/index.ts
diff --git a/packages/payload-authjs/src/exports/client.ts b/packages/payload-authjs/src/exports/client.ts
@@ -0,0 +1,2 @@
+export { PayloadSessionProvider } from "../payload/session/PayloadSessionProvider";
+export { usePayloadSession } from "../payload/session/usePayloadSession";
diff --git a/packages/payload-authjs/src/exports/components/index.ts b/packages/payload-authjs/src/exports/components/index.ts
@@ -0,0 +1,2 @@
+export { AccountRowLabel } from "../../payload/components/AccountRowLabel";
+export { SignInButton } from "../../payload/components/SignInButton";
diff --git a/packages/payload-authjs/src/exports/components/webauthn.ts b/packages/payload-authjs/src/exports/components/webauthn.ts
@@ -0,0 +1,2 @@
+export { AddAuthenticatorButton } from "../../payload/components/AddAuthenticatorButton";
+export { SignInButtonWebauthn } from "../../payload/components/SignInButtonWebauthn";
diff --git a/packages/payload-authjs/src/exports/server.ts b/packages/payload-authjs/src/exports/server.ts
@@ -0,0 +1,8 @@
+export { getAuthjsInstance } from "../authjs/getAuthjsInstance";
+export { PayloadAdapter } from "../authjs/PayloadAdapter";
+export { type PayloadAuthjsUser } from "../authjs/types";
+export { withPayload } from "../authjs/withPayload";
+export { withPayloadAuthjs, type EnrichedAuthConfig } from "../authjs/withPayloadAuthjs";
+export { getPayloadUser } from "../payload/getPayloadUser";
+export { authjsPlugin, type AuthjsPluginConfig } from "../payload/plugin";
+export { getPayloadSession, type PayloadSession } from "../payload/session/getPayloadSession";
diff --git a/packages/payload-authjs/src/index.ts b/packages/payload-authjs/src/index.ts
diff --git a/packages/payload-authjs/src/payload/collection/fields/authenticators.ts b/packages/payload-authjs/src/payload/collection/fields/authenticators.ts
@@ -1,6 +1,6 @@
 import type { Field } from "payload";
 import { getProviderMetadata } from "../../../authjs/utils/config";
-import type { AddAuthenticatorButtonProps } from "../../../components/AddAuthenticatorButton";
+import type { AddAuthenticatorButtonProps } from "../../components/AddAuthenticatorButton";
 import type { AuthjsPluginConfig } from "../../plugin";
 
 /**
@@ -29,7 +29,7 @@ export const authenticatorsField = (pluginOptions: AuthjsPluginConfig): Field =>
       initCollapsed: true,
       components: {
         afterInput: providers.map(provider => ({
-          path: "payload-authjs/components#AddAuthenticatorButton",
+          path: "payload-authjs/components/webauthn#AddAuthenticatorButton",
           clientProps: {
             provider,
           } satisfies AddAuthenticatorButtonProps,
diff --git a/packages/payload-authjs/src/payload/components/AccountRowLabel.tsx b/packages/payload-authjs/src/payload/components/AccountRowLabel.tsx
@@ -2,7 +2,7 @@
 
 import { useRowLabel } from "@payloadcms/ui";
 import type { DataFromCollectionSlug } from "payload";
-import type { AuthCollectionSlug } from "../payload/plugin";
+import type { AuthCollectionSlug } from "../../payload/plugin";
 
 type Account = NonNullable<DataFromCollectionSlug<AuthCollectionSlug>["accounts"]>[0];
 
diff --git a/packages/payload-authjs/src/payload/components/AddAuthenticatorButton.tsx b/packages/payload-authjs/src/payload/components/AddAuthenticatorButton.tsx
@@ -3,8 +3,8 @@
 import { Button, useAuth, useDocumentInfo } from "@payloadcms/ui";
 import { signIn } from "next-auth/webauthn";
 import type { TypedUser } from "payload";
-import type { getProviderMetadata } from "../authjs/utils/config";
-import { AUTHJS_STRATEGY_NAME } from "../constants";
+import type { getProviderMetadata } from "../../authjs/utils/config";
+import { AUTHJS_STRATEGY_NAME } from "../../constants";
 
 export type AddAuthenticatorButtonProps = {
   provider: ReturnType<typeof getProviderMetadata>;
diff --git a/packages/payload-authjs/src/payload/components/SignInButton/index.css b/packages/payload-authjs/src/payload/components/SignInButton/index.css
diff --git a/packages/payload-authjs/src/payload/components/SignInButton/index.tsx b/packages/payload-authjs/src/payload/components/SignInButton/index.tsx
@@ -3,7 +3,7 @@
 import { Button } from "@payloadcms/ui";
 import { signIn } from "next-auth/react";
 import type { ReactNode } from "react";
-import type { getProviderMetadata } from "../../authjs/utils/config";
+import type { getProviderMetadata } from "../../../authjs/utils/config";
 import "./index.css";
 
 export type SignInButtonOptions = {
@@ -31,6 +31,7 @@ export type SignInButtonProps = {
   provider: ReturnType<typeof getProviderMetadata>;
   icon?: ReactNode;
   text?: ReactNode;
+  signInFn?: typeof signIn;
 };
 
 /**
@@ -44,6 +45,7 @@ export const SignInButton = ({
       Sign in with <strong>{provider.name}</strong>
     </>
   ),
+  signInFn = signIn,
 }: SignInButtonProps) => {
   return (
     <Button
@@ -53,12 +55,7 @@ export const SignInButton = ({
       icon={icon}
       iconPosition="left"
       onClick={async () => {
-        if (provider.type === "webauthn") {
-          const { signIn } = await import("next-auth/webauthn");
-          await signIn(provider.id);
-        } else {
-          await signIn(provider.id);
-        }
+        await signInFn(provider.id);
       }}
     >
       {text}
diff --git a/packages/payload-authjs/src/payload/components/SignInButtonWebauthn.tsx b/packages/payload-authjs/src/payload/components/SignInButtonWebauthn.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { signIn } from "next-auth/webauthn";
+import type { SignInButtonProps } from "./SignInButton";
+import { SignInButton } from "./SignInButton";
+
+/**
+ * Wrapper around the SignInButton component to use the webauthn signIn function
+ */
+export const SignInButtonWebauthn = (props: SignInButtonProps) => (
+  <SignInButton {...props} signInFn={signIn} />
+);
diff --git a/packages/payload-authjs/src/payload/plugin.ts b/packages/payload-authjs/src/payload/plugin.ts
@@ -4,8 +4,8 @@ import type { CustomComponent, GeneratedTypes, Plugin } from "payload";
 import { setAuthjsInstance } from "../authjs/getAuthjsInstance";
 import { getProviderMetadata } from "../authjs/utils/config";
 import { type EnrichedAuthConfig, withPayloadAuthjs } from "../authjs/withPayloadAuthjs";
-import type { SignInButtonOptions, SignInButtonProps } from "../components/SignInButton";
 import { generateUsersCollection } from "./collection";
+import type { SignInButtonOptions, SignInButtonProps } from "./components/SignInButton";
 
 export type AuthCollectionSlug<T = GeneratedTypes> = "auth" extends keyof T
   ? keyof T["auth"]
@@ -105,7 +105,10 @@ export const authjsPlugin =
               .map(
                 provider =>
                   ({
-                    path: "payload-authjs/components#SignInButton",
+                    path:
+                      provider.type === "webauthn"
+                        ? "payload-authjs/components/webauthn#SignInButtonWebauthn"
+                        : "payload-authjs/components#SignInButton",
                     clientProps: {
                       icon:
                         typeof signInButtonOptions?.icon === "function"
diff --git a/packages/payload-authjs/src/types/payload.config.ts b/packages/payload-authjs/src/types/payload.config.ts
@@ -1,7 +1,7 @@
 import path from "path";
 import { buildConfig } from "payload";
 import { fileURLToPath } from "url";
-import { authjsPlugin } from "..";
+import { authjsPlugin } from "../payload/plugin";
 import { authConfig } from "./auth.config";
 
 const filename = fileURLToPath(import.meta.url);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { PayloadSessionProvider } from "../payload/session/PayloadSessionProvider";`
	`2`	`+export { usePayloadSession } from "../payload/session/usePayloadSession";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { AccountRowLabel } from "../../payload/components/AccountRowLabel";`
	`2`	`+export { SignInButton } from "../../payload/components/SignInButton";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { AddAuthenticatorButton } from "../../payload/components/AddAuthenticatorButton";`
	`2`	`+export { SignInButtonWebauthn } from "../../payload/components/SignInButtonWebauthn";`