fix(SignInButton): Mount authjs SessionProvider to the admin panel to provide custom base path (#44)

Author: CrawlerCode

examples/multiple-auth-collections/src/app/(app)/_components/SignInButtonClient.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { SessionProvider, signIn } from "next-auth/react";
+
+export function SignInButtonClient() {
+  return (
+    <SessionProvider basePath="/api/auth/customers">
+      <button onClick={() => signIn()}>Sign In (Customer)</button>
+    </SessionProvider>
+  );
+}

examples/multiple-auth-collections/src/app/(app)/_components/SignInButton.tsx renamed to examples/multiple-auth-collections/src/app/(app)/_components/SignInButtonServer.tsx

@@ -1,6 +1,6 @@
 import { auth } from "@/auth.customers";
 import { getPayloadSession } from "payload-authjs";
-import { SignInButton } from "./_components/SignInButton";
+import { SignInButtonClient } from "./_components/SignInButtonClient";
 import { SignOutButton } from "./_components/SignOutButton";
 
 const Page = async () => {
@@ -9,7 +9,7 @@ const Page = async () => {
 
   return (
     <main>
-      {payloadSession ? <SignOutButton /> : <SignInButton />}
+      {payloadSession ? <SignOutButton /> : <SignInButtonClient />}
       <br />
       <h3>Auth.js Session (Customer)</h3>
       <pre>{JSON.stringify(authjsSession, null, 2)}</pre>

examples/multiple-auth-collections/src/app/(app)/page.tsx

@@ -1,7 +1,9 @@
 import { AccountRowLabel as AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
 import { SignInButton as SignInButton_06d0cb594d8f6ba2ac35015f930c882e } from 'payload-authjs/components'
+import { SessionProvider as SessionProvider_eb65d9ad4ff5e9757fd28d232b1c2581 } from 'next-auth/react'
 
 export const importMap = {
   "payload-authjs/components#AccountRowLabel": AccountRowLabel_06d0cb594d8f6ba2ac35015f930c882e,
-  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e
+  "payload-authjs/components#SignInButton": SignInButton_06d0cb594d8f6ba2ac35015f930c882e,
+  "next-auth/react#SessionProvider": SessionProvider_eb65d9ad4ff5e9757fd28d232b1c2581
 }

examples/multiple-auth-collections/src/app/(payload)/admin/importMap.js

@@ -1,5 +1,5 @@
 import type { NextAuthConfig } from "next-auth";
-import type { CollectionSlug, Plugin } from "payload";
+import type { CollectionSlug, CustomComponent, Plugin } from "payload";
 import { getProviderMetadata } from "../authjs/utils/config";
 import type { SignInButtonOptions, SignInButtonProps } from "../components/SignInButton";
 import { generateUsersCollection } from "./collection";
@@ -63,43 +63,56 @@ 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 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
+    // 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") &&
+      pluginOptions.components?.SignInButton !== false
+    ) {
+      const signInButtonOptions = pluginOptions.components?.SignInButton;
+      config.admin = {
+        ...config.admin,
+        components: {
+          ...config.admin?.components,
+          providers: [
+            ...(config.admin?.components?.providers ?? []),
+            // Add the Auth.js SessionProvider to set the custom basePath
+            ...(pluginOptions.authjsConfig.basePath
+              ? [
+                  {
+                    path: "next-auth/react#SessionProvider",
+                    clientProps: {
+                      basePath: pluginOptions.authjsConfig.basePath,
+                    },
+                  },
+                ]
+              : []),
+          ],
+          afterLogin: [
+            ...(config.admin?.components?.afterLogin ?? []),
+            ...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,
-              }));
-          })(),
-        ],
-      },
-    };
+              .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,
+                  }) satisfies CustomComponent,
+              ),
+          ],
+        },
+      };
+    }
 
     return config;
   };