From 73ad12a952d15629cb529cdfaa6dd4feb141cbba Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Sun, 10 May 2026 03:10:08 +0000
Subject: [PATCH] auth-debug: also render client-side supabase readout for
 parity comparison

---
 src/app/auth-debug/ClientReadout.tsx | 62 ++++++++++++++++++++++++++++
 src/app/auth-debug/page.tsx          |  6 ++-
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/app/auth-debug/ClientReadout.tsx

diff --git a/src/app/auth-debug/ClientReadout.tsx b/src/app/auth-debug/ClientReadout.tsx
new file mode 100644
index 0000000..e1b2626
--- /dev/null
+++ b/src/app/auth-debug/ClientReadout.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+
+export default function ClientReadout() {
+  const [out, setOut] = useState<any>({ status: "loading…" });
+
+  useEffect(() => {
+    (async () => {
+      const documentCookie = typeof document !== "undefined" ? document.cookie : "(no document)";
+      const sbCookieNames = (documentCookie || "")
+        .split(";")
+        .map((c) => c.trim().split("=")[0])
+        .filter((n) => n.startsWith("sb-"));
+
+      let sessionState: any = null;
+      let userState: any = null;
+      let getSessionErr: string | null = null;
+      let getUserErr: string | null = null;
+
+      try {
+        const supabase = createClient();
+        const sess = await supabase.auth.getSession();
+        sessionState = sess.data?.session
+          ? {
+              access_token_len: sess.data.session.access_token?.length,
+              user_id: sess.data.session.user?.id,
+              user_email: sess.data.session.user?.email,
+            }
+          : null;
+        if (sess.error) getSessionErr = sess.error.message;
+
+        const userRes = await supabase.auth.getUser();
+        userState = userRes.data?.user
+          ? { id: userRes.data.user.id, email: userRes.data.user.email }
+          : null;
+        if (userRes.error) getUserErr = userRes.error.message;
+      } catch (e: any) {
+        getSessionErr = e?.message || String(e);
+      }
+
+      setOut({
+        note: "Client-side view (after hydration) on the same request.",
+        document_cookie_length: documentCookie.length,
+        document_cookie_sample: documentCookie.slice(0, 120),
+        sb_cookie_names_visible_to_js: sbCookieNames,
+        client_getSession_error: getSessionErr,
+        client_getUser_error: getUserErr,
+        client_has_session: !!sessionState,
+        client_session: sessionState,
+        client_user: userState,
+      });
+    })();
+  }, []);
+
+  return (
+    <pre style={{ padding: 20, fontFamily: "monospace", whiteSpace: "pre-wrap", background: "#1a1a1a", color: "#bbb", borderTop: "1px solid #333" }}>
+      {JSON.stringify(out, null, 2)}
+    </pre>
+  );
+}
diff --git a/src/app/auth-debug/page.tsx b/src/app/auth-debug/page.tsx
index 7bf624b..aa88caa 100644
--- a/src/app/auth-debug/page.tsx
+++ b/src/app/auth-debug/page.tsx
@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import { createClient } from "@/lib/supabase/server";
+import ClientReadout from "./ClientReadout";
 
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
@@ -27,7 +28,8 @@ export default async function AuthDebugPage() {
   }
 
   return (
-    <pre style={{ padding: 20, fontFamily: "monospace", whiteSpace: "pre-wrap", background: "#111", color: "#ddd", minHeight: "100vh" }}>
+    <>
+    <pre style={{ padding: 20, fontFamily: "monospace", whiteSpace: "pre-wrap", background: "#111", color: "#ddd" }}>
 {JSON.stringify(
   {
     note: "Server-side view of auth state for the request that loaded this page.",
@@ -61,5 +63,7 @@ export default async function AuthDebugPage() {
   2,
 )}
     </pre>
+    <ClientReadout />
+    </>
   );
 }