fix: Replace middleware by overwriting payload logout endpoint to destroy authjs session

Author: CrawlerCode

README.md

@@ -54,28 +54,6 @@ 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 🎉**
 
 ---

dev/src/app/(app)/_components/AuthOverview.tsx

@@ -2,22 +2,23 @@ import { auth } from "@/auth";
 import { DataFromCollectionSlug } from "payload";
 import { getPayloadUser } from "../../../../../src";
 import { SignInButton } from "./SignInButton";
-import { SignOutButton } from "./SignOutButton";
+import { SignOutButtonAuthjs } from "./SignOutButtonAuthjs";
+import { SignOutButtonPayload } from "./SignOutButtonPayload";
 
 const AuthOverview = async () => {
   const session = await auth();
   const payloadUser = await getPayloadUser<DataFromCollectionSlug<"users">>();
 
   return (
     <div>
-      <p>{session?.user ? <SignOutButton /> : <SignInButton />}</p>
-      <br />
       <h3>Auth.js</h3>
+      <p>{session?.user ? <SignOutButtonAuthjs /> : <SignInButton />}</p>
       <div style={{ background: "gray", padding: "5px", borderRadius: "10px" }}>
         {JSON.stringify(session?.user, null, 2)}
       </div>
       <br />
       <h3>Payload CMS</h3>
+      <p>{payloadUser && <SignOutButtonPayload />}</p>
       <div style={{ background: "gray", padding: "5px", borderRadius: "10px" }}>
         {JSON.stringify(payloadUser, null, 2)}
       </div>

dev/src/app/(app)/_components/SignOutButton.tsx renamed to dev/src/app/(app)/_components/SignOutButtonAuthjs.tsx

@@ -1,14 +1,14 @@
 import { signOut } from "@/auth";
 
-export function SignOutButton() {
+export function SignOutButtonAuthjs() {
   return (
     <form
       action={async () => {
         "use server";
         await signOut();
       }}
     >
-      <button type="submit">Sign Out</button>
+      <button type="submit">Sign Out (auth.js)</button>
     </form>
   );
 }

dev/src/app/(app)/_components/SignOutButtonPayload.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+export function SignOutButtonPayload({
+  userCollectionSlug = "users",
+}: {
+  userCollectionSlug?: string;
+}) {
+  return (
+    <button
+      onClick={() => {
+        fetch(`/api/${userCollectionSlug}/logout`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }).then(() => {
+          window.location.reload();
+        });
+      }}
+    >
+      Sign Out (payload)
+    </button>
+  );
+}

dev/src/middleware.ts

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

src/payload/generateUsersCollection.ts

@@ -1,4 +1,7 @@
+import NextAuth from "next-auth";
+import { NextResponse } from "next/server";
 import type { CollectionConfig, Field } from "payload";
+import { withPayload } from "../authjs/withPayload";
 import { AuthjsAuthStrategy } from "./AuthjsAuthStrategy";
 import type { AuthjsPluginConfig } from "./plugin";
 
@@ -113,6 +116,40 @@ export const generateUsersCollection = (
     disableLocalStrategy: true,
     strategies: [AuthjsAuthStrategy(userCollectionSlug, pluginOptions)],
   };
+
+  // Add custom endpoints to users collection
+  collection.endpoints = [
+    ...(collection.endpoints || []),
+    {
+      /**
+       * Override the default logout endpoint to destroy the authjs session
+       *
+       * @see https://payloadcms.com/docs/beta/authentication/operations#logout
+       * @see https://github.com/payloadcms/payload/blob/beta/packages/next/src/routes/rest/auth/logout.ts
+       */
+      method: "post",
+      path: "/logout",
+      handler: async req => {
+        // Sign out and get cookies from authjs
+        const { signOut } = NextAuth(
+          withPayload(pluginOptions.authjsConfig, {
+            payload: req.payload,
+            userCollectionSlug,
+          }),
+        );
+        const { cookies } = await signOut({ redirect: false });
+
+        // Create response with cookies
+        const response = NextResponse.json({
+          message: req.t("authentication:logoutSuccessful"),
+        });
+        for (const cookie of cookies) {
+          response.cookies.set(cookie.name, cookie.value, cookie.options);
+        }
+        return response;
+      },
+    },
+  ];
 };
 
 function createOrPatchField(fields: Field[], field: Field): void {

src/payload/middleware.ts

@@ -7,68 +7,22 @@ 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
- *   }),
- * );
+ * @deprecated This middleware is no longer needed and will be removed in the future
  */
 export default function middleware(
   arg: NextRequest | Middleware | AuthjsMiddleware | any,
 ): Middleware | NextResponse {
   // Inline middleware
   if (arg instanceof NextRequest) {
-    return logoutMiddleware(arg) ?? NextResponse.next();
+    return 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;
-};