fix(middleware): Middleware implementation

- Fix middleware import outside the project
-  Add the ability to use as a wrapper for custom middleware or next-auth middleware
- fix nodemailer / exclude from config to be edge compatible

Author: CrawlerCode

README.md

@@ -54,8 +54,32 @@ export const { handlers, signIn, signOut, auth } = NextAuth(
 
 > ⚠ Make sure you define your `authConfig` in a separate file than where you use the `withPayload` function to avoid circular dependencies.
 
+Create a new `middleware` or wrap your existing middleware, e.g. the [Auth.js middleware](https://authjs.dev/getting-started/session-management/protecting):
+
+##### Create a new middleware
+
+```ts
+// middleware.ts
+export { default } from "payload-authjs/middleware";
+```
+
+##### Wrap your existing middleware
+
+```ts
+// middleware.ts
+import NextAuth from "next-auth";
+import middleware from "payload-authjs/middleware";
+import { authConfig } from "./auth.config";
+
+const { auth } = NextAuth(authConfig);
+
+export default middleware(auth);
+```
+
 **And that's it! Now you can sign-in via Auth.js and you are automatically authenticated in Payload CMS. Nice 🎉**
 
+---
+
 ## Customizing
 
 You don't need to create a collection for users. This plugin automatically creates a collection with the slug `users`.

dev/src/auth.config.ts

@@ -3,7 +3,6 @@ import { NextAuthConfig, Profile } from "next-auth";
 import { JWT } from "next-auth/jwt";
 import github from "next-auth/providers/github";
 import keycloak from "next-auth/providers/keycloak";
-import nodemailer from "next-auth/providers/nodemailer";
 
 declare module "next-auth/jwt" {
   interface JWT extends Pick<Profile, "roles"> {
@@ -53,10 +52,6 @@ export const authConfig: NextAuthConfig = {
         };
       },
     }),
-    nodemailer({
-      server: process.env.EMAIL_SERVER,
-      from: process.env.EMAIL_FROM,
-    }),
   ],
   /* session: {
     strategy: "jwt",

dev/src/auth.ts

@@ -1,11 +1,29 @@
 import payloadConfig from "@payload-config";
 import NextAuth from "next-auth";
+import nodemailer from "next-auth/providers/nodemailer";
 import { withPayload } from "../../src";
 import { authConfig } from "./auth.config";
 
 export const { handlers, signIn, signOut, auth } = NextAuth(
-  withPayload(authConfig, {
-    payloadConfig,
-    updateUserOnSignIn: true,
-  }),
+  withPayload(
+    {
+      ...authConfig,
+      providers: [
+        ...authConfig.providers,
+        /**
+         * Add nodemailer provider
+         * ! Exclude this provider in the auth.config.ts file to be edge compatible
+         * @see https://authjs.dev/guides/edge-compatibility
+         */
+        nodemailer({
+          server: process.env.EMAIL_SERVER,
+          from: process.env.EMAIL_FROM,
+        }),
+      ],
+    },
+    {
+      payloadConfig,
+      updateUserOnSignIn: true,
+    },
+  ),
 );

dev/src/middleware.ts

@@ -1,5 +1,25 @@
+import NextAuth from "next-auth";
+import middleware from "./../../src/middleware";
+import { authConfig } from "./auth.config";
+
 export const config = {
   matcher: ["/((?!api|admin/login|_next/static|_next/image|favicon.ico).*)"],
 };
 
-export { logoutMiddleware as default } from "../../src/logoutMiddleware";
+/* export default middleware; */
+
+const { auth } = NextAuth(authConfig);
+
+export default middleware(auth);
+
+/* export default middleware(
+  auth(req => {
+    // My custom logic
+  }),
+);
+ */
+
+/* export default middleware((req: NextRequest) => {
+  // My custom logic
+  return NextResponse.next();
+}); */

package.json

@@ -6,6 +6,18 @@
   "description": "A Payload CMS 3 plugin for Auth.js 5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./middleware": {
+      "types": "./dist/middleware.d.ts",
+      "import": "./dist/middleware.js",
+      "default": "./dist/middleware.js"
+    }
+  },
   "files": [
     "dist"
   ],

src/index.ts

@@ -1,5 +1,4 @@
 export { getPayloadUser } from "./getPayloadUser";
-export { logoutMiddleware } from "./logoutMiddleware";
 export { PayloadAdapter } from "./PayloadAdapter";
 export { authjsPlugin } from "./plugin";
 export type { AuthjsPluginConfig } from "./types";

src/logoutMiddleware.ts

@@ -0,0 +1,74 @@
+import type { NextAuthResult } from "next-auth";
+import { NextRequest, NextResponse } from "next/server";
+
+type Middleware = (req: NextRequest) => NextResponse;
+type AuthjsMiddleware = NextAuthResult["auth"] | ReturnType<NextAuthResult["auth"]>;
+
+/**
+ * Middleware of payload-authjs
+ *
+ * Inline middleware
+ * @example
+ * // middleware.ts
+ * export { default } from "payload-authjs/middleware";
+ *
+ * Middleware wrapper
+ * @example
+ * // middleware.ts
+ * const { auth } = NextAuth(authConfig);
+ * export default middleware(auth);
+ *
+ * Middleware wrapper with custom logic
+ * @example
+ * // middleware.ts
+ * const { auth } = NextAuth(authConfig);
+ *
+ * export default middleware(
+ *   auth((req) => {
+ *     // My custom logic
+ *   }),
+ * );
+ */
+export default function middleware(
+  arg: NextRequest | Middleware | AuthjsMiddleware | any,
+): Middleware | NextResponse {
+  // Inline middleware
+  if (arg instanceof NextRequest) {
+    return logoutMiddleware(arg) ?? NextResponse.next();
+  }
+
+  // Middleware wrapper
+  if (typeof arg === "function") {
+    return (req: NextRequest) => {
+      const response = logoutMiddleware(req);
+      if (response) return response;
+
+      return (arg(req) as NextResponse | undefined) ?? NextResponse.next();
+    };
+  }
+
+  throw new Error("Invalid argument for middleware");
+}
+
+/**
+ * Middleware to log out the user if they log out in the admin ui
+ */
+const logoutMiddleware = (req: NextRequest): NextResponse | undefined => {
+  if (req.nextUrl.pathname !== "/admin/logout") return undefined;
+
+  const response = NextResponse.redirect(new URL("/", req.url));
+  response.cookies.set("__Secure-authjs.session-token", "", {
+    path: "/",
+    expires: new Date(0),
+    httpOnly: true,
+    secure: true,
+  });
+  response.cookies.set("authjs.session-token", "", {
+    path: "/",
+    expires: new Date(0),
+    httpOnly: true,
+    secure: false,
+  });
+
+  return response;
+};