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>
  );
 }