fix(client): break /admin unauthorized loop for non-admin users (#345)

* fix(client): break /admin unauthorized loop for non-admin users

When a Users-collection session was active, Payload's admin panel ran
the Users authjs strategy on /admin requests and rendered the
Unauthorized view; the "Log out" link looped back to the same page
because Payload's native logout never cleared the NextAuth cookie.

Gate the Users + AnonymousUsers authjs strategies by request path:
return no user when x-current-path starts with /admin. Middleware now
propagates the pathname on /admin and /v1 too. Admin panel shows the
login form instead of the unauthorized view, removing the loop. Drops
the obsolete Admins beforeOperation workaround.

* style: apply prettier to middleware matcher

* fix(quality): resolve duplicated authjs strategy in Users + AnonymousUsers

Extracts the NextAuth-backed Payload strategy and the /logout endpoint
into a shared module so both collections call the same implementation.
Brings new-code duplicated lines density back under the 3% quality gate
threshold without changing runtime behavior.

Author: mbarrenechea

client/src/cms/auth/authjs-strategy.ts

@@ -0,0 +1,45 @@
+import type { AuthStrategy, AuthStrategyResult, CollectionSlug, Endpoint } from "payload";
+
+import { auth, signOut } from "@/lib/auth";
+
+type AuthjsCollection = Extract<CollectionSlug, "users" | "anonymous-users">;
+
+const isAdminRequest = (headers: Headers): boolean => {
+  const currentPath = headers.get("x-current-path") ?? "";
+  return currentPath === "/admin" || currentPath.startsWith("/admin/");
+};
+
+// Builds the NextAuth-backed Payload strategy used by Users and AnonymousUsers.
+// Skipping admin-context requests prevents non-admin sessions from being surfaced
+// inside Payload's admin panel (which would trigger the Unauthorized loop).
+export const createAuthjsStrategy = <C extends AuthjsCollection>(collection: C): AuthStrategy => ({
+  name: "authjs",
+  authenticate: async ({ headers, payload }) => {
+    if (isAdminRequest(headers)) {
+      return { user: null };
+    }
+
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      return { user: null };
+    }
+
+    const user = await payload.findByID({
+      collection,
+      id: session.user.id,
+      disableErrors: true,
+    });
+
+    return { user: user ? { ...user, collection } : null } as AuthStrategyResult;
+  },
+});
+
+export const logoutEndpoint: Endpoint = {
+  path: "/logout",
+  method: "post",
+  handler: async () => {
+    await signOut({ redirect: false });
+    return Response.json({ message: "You have been logged out successfully." });
+  },
+};

client/src/cms/collections/Admins.ts

@@ -1,33 +1,11 @@
-import { CollectionConfig, getPayload } from "payload";
-
-import config from "@payload-config";
-
-import { logout } from "@payloadcms/next/auth";
+import { CollectionConfig } from "payload";
 
 export const Admins: CollectionConfig = {
   slug: "admins",
   admin: {
     useAsTitle: "email",
   },
   auth: true,
-  hooks: {
-    // When the user is logged in with a non-admin user (users collection), they are asked to log
-    // out by Payload by clicking on a “Log out” button. Unfortunately, this button does not work
-    // and simply brings the user back to the same page.
-    // To work around this, the hook below automatically logs out the user when performing any
-    // admins-related operation. The user will still be presented a page that tells them to log out
-    // first, but if they reload or click the button, they are at least shown the login form.
-    beforeOperation: [
-      async ({ req }) => {
-        const payload = await getPayload({ config });
-        const { user } = await payload.auth({ headers: req.headers });
-
-        if (user?.collection === "users") {
-          await logout({ config });
-        }
-      },
-    ],
-  },
   fields: [
     // Email added by default
     // Add more fields as needed

client/src/cms/collections/AnonymousUsers.ts

@@ -1,36 +1,16 @@
 import type { CollectionConfig } from "payload";
 
-import { auth, signOut } from "@/lib/auth";
-
 import { adminAccess } from "@/cms/access/admin";
 import { appAccess } from "@/cms/access/app";
+import { createAuthjsStrategy, logoutEndpoint } from "@/cms/auth/authjs-strategy";
 import { beforeDeleteAnonymousUser } from "@/cms/hooks/user";
 
 export const AnonymousUsers: CollectionConfig = {
   slug: "anonymous-users",
   auth: {
     disableLocalStrategy: true,
     tokenExpiration: 60 * 60 * 24 * 30, // 30 days
-    strategies: [
-      {
-        name: "authjs",
-        authenticate: async ({ payload }) => {
-          const session = await auth();
-
-          if (!session || !session?.user?.id) {
-            return { user: null };
-          }
-
-          const user = await payload.findByID({
-            collection: "anonymous-users",
-            id: session.user.id,
-            disableErrors: true,
-          });
-
-          return { user: user ? { ...user, collection: "anonymous-users" } : null };
-        },
-      },
-    ],
+    strategies: [createAuthjsStrategy("anonymous-users")],
   },
   access: {
     create: appAccess,
@@ -39,20 +19,7 @@ export const AnonymousUsers: CollectionConfig = {
     delete: adminAccess,
   },
   fields: [],
-  endpoints: [
-    {
-      path: "/logout",
-      method: "post",
-      handler: async () => {
-        await signOut({
-          redirect: false,
-        });
-        return Response.json({
-          message: "You have been logged out successfully.",
-        });
-      },
-    },
-  ],
+  endpoints: [logoutEndpoint],
   hooks: {
     beforeDelete: [beforeDeleteAnonymousUser],
   },

client/src/cms/collections/Users.ts

@@ -2,11 +2,10 @@ import type { CollectionConfig } from "payload";
 
 import { env } from "@/env.mjs";
 
-import { auth, signOut } from "@/lib/auth";
-
 import { adminAccess } from "@/cms/access/admin";
 import { anyoneAccess } from "@/cms/access/anyone";
 import { userAccess } from "@/cms/access/user";
+import { createAuthjsStrategy, logoutEndpoint } from "@/cms/auth/authjs-strategy";
 import { buildVerifyEmailHTML, VERIFY_EMAIL_SUBJECT } from "@/cms/emails/verify-email";
 import { resendVerificationHandler } from "@/cms/endpoints/resend-verification";
 import { beforeDeleteUser } from "@/cms/hooks/user";
@@ -60,26 +59,7 @@ export const Users: CollectionConfig = {
         `;
       },
     },
-    strategies: [
-      {
-        name: "authjs",
-        authenticate: async ({ payload }) => {
-          const session = await auth();
-
-          if (!session || !session?.user?.id) {
-            return { user: null };
-          }
-
-          const user = await payload.findByID({
-            collection: "users",
-            id: session.user.id,
-            disableErrors: true,
-          });
-
-          return { user: user ? { ...user, collection: "users" } : null };
-        },
-      },
-    ],
+    strategies: [createAuthjsStrategy("users")],
   },
   access: {
     create: anyoneAccess,
@@ -105,18 +85,7 @@ export const Users: CollectionConfig = {
     },
   ],
   endpoints: [
-    {
-      path: "/logout",
-      method: "post",
-      handler: async () => {
-        await signOut({
-          redirect: false,
-        });
-        return Response.json({
-          message: "You have been logged out successfully.",
-        });
-      },
-    },
+    logoutEndpoint,
     {
       path: "/resend-verification",
       method: "post",

client/src/middleware.ts

@@ -8,37 +8,44 @@ import { env } from "@/env.mjs";
 
 import { routing } from "@/i18n/routing";
 
-// Initialize the i18n middleware
 const intlMiddleware = createMiddleware(routing);
 
-// Main middleware handler
+const PAYLOAD_PATH_PREFIXES = ["/admin", "/v1"];
+
+const isPayloadPath = (pathname: string) =>
+  PAYLOAD_PATH_PREFIXES.some((prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`));
+
 export default async function middleware(req: NextRequest) {
-  // Step 1: Ignore requests for static files like images, icons, etc.
   const PUBLIC_FILE = /\.(.*)$/;
   if (PUBLIC_FILE.test(req.nextUrl.pathname)) {
     return NextResponse.next();
   }
 
-  // Step 2: Apply HTTP Basic Auth if enabled in the environment
   if (!isAuthenticated(req)) {
     return new NextResponse("Authentication required", {
       status: 401,
       headers: { "WWW-Authenticate": "Basic" },
     });
   }
 
-  // Step 3: Apply locale-based routing using next-intl
-  const response = intlMiddleware(req);
+  const pathname = req.nextUrl.pathname;
 
-  // Step 4: Pass along the modified headers
-  response.headers.set("x-current-path", req.nextUrl.pathname);
+  // Forward the pathname so downstream auth strategies can detect admin-context
+  // requests (Payload admin + REST). Without this, the Users authjs strategy would
+  // authenticate non-admin users on /admin and trigger Payload's Unauthorized loop.
+  const requestHeaders = new Headers(req.headers);
+  requestHeaders.set("x-current-path", pathname);
 
+  if (isPayloadPath(pathname)) {
+    return NextResponse.next({ request: { headers: requestHeaders } });
+  }
+
+  const response = intlMiddleware(req);
+  response.headers.set("x-current-path", pathname);
   return response;
 }
 
-// HTTP Basic Auth logic
 function isAuthenticated(req: NextRequest) {
-  // Skip auth if disabled via environment config
   if (!env.BASIC_AUTH_ENABLED) return true;
 
   const authHeader = req.headers.get("authorization") || req.headers.get("Authorization");
@@ -49,15 +56,6 @@ function isAuthenticated(req: NextRequest) {
   return user === env.BASIC_AUTH_USER && pass === env.BASIC_AUTH_PASSWORD;
 }
 
-// Middleware matcher: apply to all routes except static assets and Next.js internals
 export const config = {
-  matcher: [
-    // This pattern skips:
-    // - /local-api
-    // - /api
-    // - /admin
-    // - /_next
-    // - all static files like .png, .ico, etc.
-    "/((?!local-api|api|admin|v1|_next|.*\\..*).*)",
-  ],
+  matcher: ["/((?!local-api|api|_next|.*\\..*).*)"],
 };