diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 278017b..f4c10c0 100644 --- 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({
{children}
+ {process.env.NODE_ENV === "development" ? ( diff --git a/src/components/dev/global-auth-debug-overlay.tsx b/src/components/dev/global-auth-debug-overlay.tsx new file mode 100644 index 0000000..0ec716d --- /dev/null +++ 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 ( +
+
+
auth: {overlayState.isAuthenticated ? "logged-in" : "logged-out"}
+
+ {TEST_SESSION_KEY}: {overlayState.hasKey ? "exists" : "missing"} +
+
+
+ ); +}