feat: Receive the auth.js instance from the payload using getAuthjsInstance

Author: CrawlerCode

eslint.config.js

@@ -30,6 +30,7 @@ export default [
       "perfectionist/sort-object-types": "off",
       "perfectionist/sort-imports": "off",
       "perfectionist/sort-jsx-props": "off",
+      "perfectionist/sort-named-exports": "off",
     },
   },
   {

examples/basic/src/auth.ts

@@ -1,10 +1,6 @@
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import { withPayload } from "payload-authjs";
-import { authConfig } from "./auth.config";
+import { getPayload } from "payload";
+import { getAuthjsInstance } from "payload-authjs";
 
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(authConfig, {
-    payloadConfig,
-  }),
-);
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload);

examples/multiple-auth-collections/src/auth.admins.ts

@@ -1,11 +1,6 @@
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import { withPayload } from "payload-authjs";
-import { adminsAuthConfig } from "./auth.admins.config";
+import { getPayload } from "payload";
+import { getAuthjsInstance } from "payload-authjs";
 
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(adminsAuthConfig, {
-    userCollectionSlug: "admins",
-    payloadConfig,
-  }),
-);
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload, "admins");

examples/multiple-auth-collections/src/auth.customers.ts

@@ -1,11 +1,6 @@
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import { withPayload } from "payload-authjs";
-import { customersAuthConfig } from "./auth.customers.config";
+import { getPayload } from "payload";
+import { getAuthjsInstance } from "payload-authjs";
 
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(customersAuthConfig, {
-    userCollectionSlug: "customers",
-    payloadConfig,
-  }),
-);
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload, "customers");

examples/with-payload-local-strategy/src/auth.ts

@@ -1,10 +1,6 @@
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import { withPayload } from "payload-authjs";
-import { authConfig } from "./auth.config";
+import { getPayload } from "payload";
+import { getAuthjsInstance } from "payload-authjs";
 
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(authConfig, {
-    payloadConfig,
-  }),
-);
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload);

packages/dev/src/app/(app)/_components/ExampleList.tsx

@@ -2,9 +2,8 @@ import config from "@payload-config";
 import { getPayload } from "payload";
 import { getPayloadSession } from "payload-authjs";
 
-const payload = await getPayload({ config });
-
 const ExampleList = async () => {
+  const payload = await getPayload({ config });
   const session = await getPayloadSession();
 
   if (!session) {

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

@@ -1,10 +1,13 @@
 import jwt from "jsonwebtoken";
 import type { NextAuthConfig, Session } from "next-auth";
+import type { DiscordProfile } from "next-auth/providers/discord";
+import type { GitHubProfile } from "next-auth/providers/github";
+import type { EnrichedAuthConfig } from "payload-authjs";
 
 export const SESSION_STRATEGY: NonNullable<NonNullable<NextAuthConfig["session"]>["strategy"]> =
   "jwt";
 
-export const authConfig: NextAuthConfig = {
+export const authConfig: EnrichedAuthConfig<NextAuthConfig> = {
   theme: { logo: "https://authjs.dev/img/logo-sm.png" },
   providers: [],
   session: {
@@ -164,6 +167,33 @@ export const authConfig: NextAuthConfig = {
       return true;
     },
   },
+  events: {
+    signIn: async ({ adapter, user, account, profile }) => {
+      if (!user.id || !profile) {
+        return;
+      }
+      await adapter?.updateUser?.({
+        id: user.id,
+        ...(account?.provider === "github" && {
+          name:
+            (profile as unknown as GitHubProfile).name ??
+            (profile as unknown as GitHubProfile).login,
+          email: profile.email ?? undefined,
+          image: (profile as unknown as GitHubProfile).avatar_url,
+        }),
+        ...(account?.provider === "keycloak" && {
+          name: profile.name,
+          email: profile.email ?? undefined,
+        }),
+        ...(account?.provider === "discord" && {
+          name: (profile as unknown as DiscordProfile).global_name,
+          email: profile.email ?? undefined,
+          image: (profile as unknown as DiscordProfile).image_url,
+        }),
+        additionalUserDatabaseField: `Create by signIn event at ${new Date().toISOString()}`,
+      } as any);
+    },
+  },
   experimental: {
     enableWebAuthn: true,
   },

packages/dev/src/auth/index.ts

@@ -1,43 +1,15 @@
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import type { DiscordProfile } from "next-auth/providers/discord";
-import type { GitHubProfile } from "next-auth/providers/github";
 import { getPayload } from "payload";
-import { withPayload } from "payload-authjs";
-import { nodeAuthConfig } from "./node.config";
+import { getAuthjsInstance } from "payload-authjs";
 
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(nodeAuthConfig, {
-    payload: getPayload({ config: payloadConfig }),
-    events: {
-      /**
-       * Update user on every sign in
-       */
-      signIn: async ({ adapter, user, account, profile }) => {
-        if (!user.id || !profile) {
-          return;
-        }
-        await adapter.updateUser!({
-          id: user.id,
-          ...(account?.provider === "github" && {
-            name:
-              (profile as unknown as GitHubProfile).name ??
-              (profile as unknown as GitHubProfile).login,
-            email: profile.email ?? undefined,
-            image: (profile as unknown as GitHubProfile).avatar_url,
-          }),
-          ...(account?.provider === "keycloak" && {
-            name: profile.name,
-            email: profile.email ?? undefined,
-          }),
-          ...(account?.provider === "discord" && {
-            name: (profile as unknown as DiscordProfile).global_name,
-            email: profile.email ?? undefined,
-            image: (profile as unknown as DiscordProfile).image_url,
-          }),
-          additionalUserDatabaseField: `Create by signIn event at ${new Date().toISOString()}`,
-        });
-      },
-    },
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload);
+
+/* // Lazy initialization of the Auth.js instance (@see https://github.com/CrawlerCode/payload-authjs/issues/35)
+export const { handlers, signIn, signOut, auth } = NextAuth(async () =>
+  withPayloadAuthjs({
+    payload: await getPayload({ config: payloadConfig }),
+    config: nodeAuthConfig,
+    collectionSlug: "users",
   }),
-);
+); */

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

@@ -1,12 +1,13 @@
 import type { NextAuthConfig } from "next-auth";
+import type { EnrichedAuthConfig } from "payload-authjs";
 import { authConfig } from "./base.config";
 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 = {
+export const nodeAuthConfig: EnrichedAuthConfig<NextAuthConfig> = {
   ...authConfig,
   providers: [
     githubProvider,

packages/payload-authjs/README.md

@@ -29,7 +29,7 @@ pnpm i payload-authjs
 
 ### 1. Setup Auth.js
 
-First of all, this plugin only integrates Auth.js into Payload CMS by getting the user session from Auth.js. It doesn't handle the Auth.js stuff. You need to setup Auth.js before you can use this plugin.
+This plugin integrates Auth.js into Payload CMS by getting the user session from Auth.js. You need to setup Auth.js before you can use this plugin.
 
 #### 1.1. Create your Auth.js configuration
 
@@ -49,23 +49,19 @@ export const authConfig: NextAuthConfig = {
 
 #### 1.2. Create your Auth.js instance
 
-Next, create your Auth.js instance in a file (e.g. `auth.ts`). But before creating the Auth.js instance, you need to wrap your Auth.js configuration with the `withPayload` function:
+Next, create your Auth.js instance in a file (e.g. `auth.ts`).
+
+> ⚠ But unlike what you would normally do in Auth.js, you need to create the Payload instance first and using the `getAuthjsInstance` function to retrieve the Auth.js instance.
 
 ```ts
 // auth.ts
 import payloadConfig from "@payload-config";
-import NextAuth from "next-auth";
-import { withPayload } from "payload-authjs";
-import { authConfig } from "./auth.config"; // ⚠ Import the config from a separate file
-
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(authConfig, {
-    payloadConfig,
-  }),
-);
-```
+import { getPayload } from "payload";
+import { getAuthjsInstance } from "payload-authjs";
 
-> ⚠ Make sure you define your config in a separate file than where you create the NextAuth instance to avoid circular dependencies.
+const payload = await getPayload({ config: payloadConfig });
+export const { handlers, signIn, signOut, auth } = getAuthjsInstance(payload);
+```
 
 #### 1.3. Add Auth.js route handler
 
@@ -82,7 +78,7 @@ export const { GET, POST } = handlers;
 
 Add optional `middleware.ts` to keep the session alive, this will update the session expiry each time it's called.
 
-> ⚠ Unlike what you would normally do in Auth.js, you cannot use the `middleware` of `@/auth` directly. You have to create a new Auth.js instance without the `withPayload` wrapper to be [edge-compatible](https://authjs.dev/guides/edge-compatibility).
+> ⚠ Unlike what you would normally do in Auth.js, you cannot use the `middleware` of `@/auth` directly. You have to create a new Auth.js instance to be [edge-compatible](https://authjs.dev/guides/edge-compatibility).
 
 ```ts
 // middleware.ts
@@ -460,48 +456,38 @@ _More information about typescript can be found in the [Auth.js documentation](h
 
 ## 🎉 Events
 
-Auth.js emits some [events](https://authjs.dev/reference/nextjs#events) that you can listen to. This plugin extends the events with additional parameters such as the `adapter` and `payload` instance.
+Auth.js emits some [events](https://authjs.dev/reference/nextjs#events) that you can listen to. This plugin extends the events with additional parameters such as the database `adapter` and the `payload` instance.
 
 _More information about the events can be found in the [Auth.js documentation](https://authjs.dev/reference/nextjs#events)._
 
-The following events are available:
-
-- signIn
-- signOut
-- createUser
-- updateUser
-- linkAccount
-- session
-
-### `signIn` Event
+### Example: `signIn` Event
 
 The `signIn` event is fired when a user successfully signs in. For example, you could use this event to update the user's name on every sign-in:
 
 ```ts
-// auth.ts
-export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(authConfig, {
-    payloadConfig,
-    events: {
-      /**
-       * Update user 'name' on every sign in
-       */
-      signIn: async ({ adapter, user, profile }) => {
-        if (!user.id || !profile) {
-          return;
-        }
-        await adapter.updateUser!({
-          id: user.id,
-          name:
-            (profile as unknown as GitHubProfile).name ??
-            (profile as unknown as GitHubProfile).login,
-          email: profile.email ?? undefined,
-          image: (profile as unknown as GitHubProfile).avatar_url,
-        });
-      },
+// auth.config.ts
+import { EnrichedAuthConfig } from "payload-authjs";
+
+export const authConfig: EnrichedAuthConfig = {
+  providers: [github],
+  events: {
+    /**
+     * Update user 'name', 'email' and 'image' on every sign in
+     */
+    signIn: async ({ adapter, user, profile }) => {
+      if (!user.id || !profile) {
+        return;
+      }
+      await adapter?.updateUser?.({
+        id: user.id,
+        name:
+          (profile as unknown as GitHubProfile).name ?? (profile as unknown as GitHubProfile).login,
+        email: profile.email ?? undefined,
+        image: (profile as unknown as GitHubProfile).avatar_url,
+      });
     },
-  }),
-);
+  },
+};
 ```
 
 # 📓 Examples