feat: add GlobalAuthDebugOverlay component for debugging authentication state

2 months ago · 59fc73621a
2 changed files with 73 additions and 0 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -4,6 +4,7 @@ import localFont from "next/font/local";
 import Providers from "./providers";
 import "./globals.css";
 import DevClickToComponent from "@/components/dev/dev-click-to-component";
+import GlobalAuthDebugOverlay from "@/components/dev/global-auth-debug-overlay";

 const faminela = localFont({
  src: "../../public/fonts/Faminela/Faminela.otf",
@ -147,6 +148,7 @@ export default function RootLayout({
      <body className={`${faminela.variable} ${amiri.variable}`}>
        <Providers>
          <div className="app-shell">{children}</div>
+          <GlobalAuthDebugOverlay />
        </Providers>
        {process.env.NODE_ENV === "development" ? (
          <DevClickToComponent />
--- a/src/components/dev/global-auth-debug-overlay.tsx
+++ b/src/components/dev/global-auth-debug-overlay.tsx
@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { authBridge } from "@/lib/auth-bridge";
+
+const TEST_SESSION_KEY = "TEST_DEBUG_NOT_LOGGED_IN";
+const TEST_SESSION_VALUE = "true";
+
+function ensureTestSessionKey(isAuthenticated: boolean) {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const existingValue = window.sessionStorage.getItem(TEST_SESSION_KEY);
+
+  // Test-only behavior: create the key once for logged-out users and then
+  // never overwrite or remove it, even after login.
+  if (existingValue === null && !isAuthenticated) {
+    window.sessionStorage.setItem(TEST_SESSION_KEY, TEST_SESSION_VALUE);
+    return true;
+  }
+
+  return existingValue !== null;
+}
+
+function readOverlayState() {
+  if (typeof window === "undefined") {
+    return {
+      hasKey: false,
+      isAuthenticated: false,
+    };
+  }
+
+  const isAuthenticated = authBridge.isAuthenticated();
+
+  return {
+    hasKey: ensureTestSessionKey(isAuthenticated),
+    isAuthenticated,
+  };
+}
+
+export default function GlobalAuthDebugOverlay() {
+  const [overlayState, setOverlayState] = useState(readOverlayState);
+
+  useEffect(() => {
+    const syncOverlayState = () => {
+      setOverlayState(readOverlayState());
+    };
+
+    syncOverlayState();
+
+    window.addEventListener("focus", syncOverlayState);
+    const intervalId = window.setInterval(syncOverlayState, 1000);
+
+    return () => {
+      window.removeEventListener("focus", syncOverlayState);
+      window.clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[9999] bg-black/50">
+      <div className="absolute left-4 top-4 rounded-md bg-black/80 px-3 py-2 font-mono text-xs text-white">
+        <div>auth: {overlayState.isAuthenticated ? "logged-in" : "logged-out"}</div>
+        <div>
+          {TEST_SESSION_KEY}: {overlayState.hasKey ? "exists" : "missing"}
+        </div>
+      </div>
+    </div>
+  );
+}