@payez/next-mvp 4.8.1 → 4.8.2

package/src/pages/test-env/RefreshTokenPage.tsx

@@ -1,178 +1,178 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import { authClient } from '../../client/better-auth-client';
-// PAY-1470 (BAPert 59022): never render characters of a token, whatever the ENABLE_TEST_ROUTES gate says.
-// idealresume production mounted this page on 4.1.14 (pre-gate) showing 40 chars of both tokens.
-import { redactCredentials } from './redact-credentials';
-
-/**
- * ⚠️ DEBUG PAGE THAT DRIVES A DESTRUCTIVE ENDPOINT — DO NOT MOUNT IN
- * PRODUCTION. ⚠️
- *
- * Refresh Token Test Page. Shows current session state, allows a manual
- * refresh trigger, and FORCE-EXPIRES the access token via a button that POSTs
- * `/api/test/force-expire`. That endpoint MUTATES SESSION STATE.
- *
- * ────────────────────────── WHY THIS WARNING EXISTS (QAPert 35000) ──────────────────────────
- * The force-expire HANDLER was fixed (244877: default-deny behind
- * ENABLE_TEST_ROUTES) and its docstring corrected to say so — but that fix
- * covered the ROUTE AND NOT THE PAGE THAT DRIVES IT. This page is a separate
- * public export carrying its own mount instructions, so a consumer can follow
- * these lines and never once read the handler's warning.
- *
- * THIS PAGE HAS NO ENV GATE OF ITS OWN. Mounting it is the gate. The two are
- * independent: mounting this page while ENABLE_TEST_ROUTES is unset gives you
- * a button that 404s — confusing, but safe. The unsafe configuration is
- * setting that flag anywhere this page is also reachable.
- *
- * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
- * ```typescript
- * // app/test-env/refresh-token/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
- * export { RefreshTokenPage as default } from '@payez/next-mvp/pages/test-env';
- * ```
- * Requires ENABLE_TEST_ROUTES=true IN THAT ENVIRONMENT ONLY for the button to
- * do anything. Never set it in production. If you do not need to exercise the
- * refresh flow, DO NOT MOUNT THIS AT ALL.
- */
-export function RefreshTokenPage() {
-  const { data: session } = authClient.useSession();
-  // TODO: Better Auth session refresh
-  const update = async () => { /* no-op: Better Auth handles session refresh internally */ };
-  const [result, setResult] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-  const [sessionDetails, setSessionDetails] = useState<any>(null);
-
-  // Fetch detailed session info on mount
-  useEffect(() => {
-    async function fetchSessionDetails() {
-      try {
-        const res = await fetch("/api/auth/session", { credentials: "include" });
-        const data = await res.json();
-        setSessionDetails(data);
-      } catch (e) {
-        console.error("Failed to fetch session details", e);
-      }
-    }
-    fetchSessionDetails();
-  }, [result]); // Refetch after refresh
-
-  async function handleRefresh() {
-    setLoading(true);
-    setResult(null);
-    try {
-      const res = await fetch("/api/auth/refresh", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-      });
-      const data = await res.json();
-      setResult({ status: res.status, ...data });
-      // Update NextAuth session
-      await update();
-    } catch (e: any) {
-      setResult({ error: e.message });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleForceExpire() {
-    setLoading(true);
-    setResult(null);
-    try {
-      const res = await fetch("/api/test/force-expire", {
-        method: "POST",
-        credentials: "include",
-      });
-      const data = await res.json();
-      setResult({ action: "force_expire", status: res.status, ...data });
-    } catch (e: any) {
-      setResult({ error: e.message });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const formatExpiry = (exp: number | string | undefined) => {
-    if (!exp) return "N/A";
-    const date = new Date(typeof exp === "string" ? exp : exp);
-    const now = new Date();
-    const diffMs = date.getTime() - now.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffSecs = Math.floor((diffMs % 60000) / 1000);
-    return `${date.toLocaleTimeString()} (${diffMins}m ${diffSecs}s remaining)`;
-  };
-
-  return (
-    <div className="p-8 max-w-2xl mx-auto bg-gray-900 min-h-screen text-white">
-      <h1 className="text-2xl font-bold mb-4">Refresh Token Test</h1>
-
-      {/* Session Info */}
-      <div className="mb-6 rounded border border-blue-500 bg-blue-900/30 p-4">
-        <h2 className="font-semibold mb-2 text-blue-300">Current Session</h2>
-        <div className="text-sm space-y-1 font-mono">
-          <div><span className="text-gray-400">User:</span> {session?.user?.email || "Not logged in"}</div>
-          <div><span className="text-gray-400">2FA Complete:</span> {String((session?.user as any)?.twoFactorSessionVerified ?? "unknown")}</div>
-          <div>
-            <span className="text-gray-400">Access Token:</span>{" "}
-            {/* PAY-1481: the session route returns presence only. */}
-            {sessionDetails ? (sessionDetails.hasAccessToken ? "present (server-side only)" : "absent") : "N/A"}
-          </div>
-          <div>
-            <span className="text-gray-400">Refresh Token:</span>{" "}
-            {sessionDetails ? (sessionDetails.hasRefreshToken ? "present (server-side only)" : "absent") : "N/A"}
-          </div>
-          <div>
-            <span className="text-gray-400">Access Expires:</span>{" "}
-            {formatExpiry(sessionDetails?.accessTokenExpires)}
-          </div>
-        </div>
-      </div>
-
-      {/* Actions */}
-      <div className="flex gap-2 mb-4">
-        <button
-          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50"
-          onClick={handleRefresh}
-          disabled={loading}
-        >
-          {loading ? "Refreshing..." : "Test Refresh Token"}
-        </button>
-        <button
-          className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded disabled:opacity-50"
-          onClick={handleForceExpire}
-          disabled={loading}
-        >
-          Force Expire Token
-        </button>
-        <button
-          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded"
-          onClick={() => window.location.reload()}
-        >
-          Reload Page
-        </button>
-      </div>
-
-      {/* Result */}
-      {result && (
-        <div className="rounded border border-gray-600 bg-gray-800 p-4">
-          <h3 className="font-semibold mb-2 text-gray-300">Result:</h3>
-          <pre className="text-xs overflow-x-auto whitespace-pre-wrap text-green-400">
-            {JSON.stringify(redactCredentials(result), null, 2)}
-          </pre>
-        </div>
-      )}
-
-      {/* Raw Session Details */}
-      <details className="mt-4">
-        <summary className="cursor-pointer text-gray-400 hover:text-white">Raw Session Details</summary>
-        <pre className="mt-2 text-xs bg-gray-800 p-2 rounded overflow-x-auto text-gray-300">
-          {/* PAY-1470: this dumped the access AND refresh token in full (Nextpert-Scout 59060). */}
-          {JSON.stringify(redactCredentials(sessionDetails), null, 2)}
-        </pre>
-      </details>
-    </div>
-  );
-}
-
-export default RefreshTokenPage;
+"use client";
+import React, { useState, useEffect } from "react";
+import { authClient } from '../../client/better-auth-client';
+// PAY-1470 (BAPert 59022): never render characters of a token, whatever the ENABLE_TEST_ROUTES gate says.
+// idealresume production mounted this page on 4.1.14 (pre-gate) showing 40 chars of both tokens.
+import { redactCredentials } from './redact-credentials';
+
+/**
+ * ⚠️ DEBUG PAGE THAT DRIVES A DESTRUCTIVE ENDPOINT — DO NOT MOUNT IN
+ * PRODUCTION. ⚠️
+ *
+ * Refresh Token Test Page. Shows current session state, allows a manual
+ * refresh trigger, and FORCE-EXPIRES the access token via a button that POSTs
+ * `/api/test/force-expire`. That endpoint MUTATES SESSION STATE.
+ *
+ * ────────────────────────── WHY THIS WARNING EXISTS (QAPert 35000) ──────────────────────────
+ * The force-expire HANDLER was fixed (244877: default-deny behind
+ * ENABLE_TEST_ROUTES) and its docstring corrected to say so — but that fix
+ * covered the ROUTE AND NOT THE PAGE THAT DRIVES IT. This page is a separate
+ * public export carrying its own mount instructions, so a consumer can follow
+ * these lines and never once read the handler's warning.
+ *
+ * THIS PAGE HAS NO ENV GATE OF ITS OWN. Mounting it is the gate. The two are
+ * independent: mounting this page while ENABLE_TEST_ROUTES is unset gives you
+ * a button that 404s — confusing, but safe. The unsafe configuration is
+ * setting that flag anywhere this page is also reachable.
+ *
+ * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
+ * ```typescript
+ * // app/test-env/refresh-token/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
+ * export { RefreshTokenPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ * Requires ENABLE_TEST_ROUTES=true IN THAT ENVIRONMENT ONLY for the button to
+ * do anything. Never set it in production. If you do not need to exercise the
+ * refresh flow, DO NOT MOUNT THIS AT ALL.
+ */
+export function RefreshTokenPage() {
+  const { data: session } = authClient.useSession();
+  // TODO: Better Auth session refresh
+  const update = async () => { /* no-op: Better Auth handles session refresh internally */ };
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [sessionDetails, setSessionDetails] = useState<any>(null);
+
+  // Fetch detailed session info on mount
+  useEffect(() => {
+    async function fetchSessionDetails() {
+      try {
+        const res = await fetch("/api/auth/session", { credentials: "include" });
+        const data = await res.json();
+        setSessionDetails(data);
+      } catch (e) {
+        console.error("Failed to fetch session details", e);
+      }
+    }
+    fetchSessionDetails();
+  }, [result]); // Refetch after refresh
+
+  async function handleRefresh() {
+    setLoading(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/auth/refresh", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+      });
+      const data = await res.json();
+      setResult({ status: res.status, ...data });
+      // Update NextAuth session
+      await update();
+    } catch (e: any) {
+      setResult({ error: e.message });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleForceExpire() {
+    setLoading(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/test/force-expire", {
+        method: "POST",
+        credentials: "include",
+      });
+      const data = await res.json();
+      setResult({ action: "force_expire", status: res.status, ...data });
+    } catch (e: any) {
+      setResult({ error: e.message });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const formatExpiry = (exp: number | string | undefined) => {
+    if (!exp) return "N/A";
+    const date = new Date(typeof exp === "string" ? exp : exp);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffSecs = Math.floor((diffMs % 60000) / 1000);
+    return `${date.toLocaleTimeString()} (${diffMins}m ${diffSecs}s remaining)`;
+  };
+
+  return (
+    <div className="p-8 max-w-2xl mx-auto bg-gray-900 min-h-screen text-white">
+      <h1 className="text-2xl font-bold mb-4">Refresh Token Test</h1>
+
+      {/* Session Info */}
+      <div className="mb-6 rounded border border-blue-500 bg-blue-900/30 p-4">
+        <h2 className="font-semibold mb-2 text-blue-300">Current Session</h2>
+        <div className="text-sm space-y-1 font-mono">
+          <div><span className="text-gray-400">User:</span> {session?.user?.email || "Not logged in"}</div>
+          <div><span className="text-gray-400">2FA Complete:</span> {String((session?.user as any)?.twoFactorSessionVerified ?? "unknown")}</div>
+          <div>
+            <span className="text-gray-400">Access Token:</span>{" "}
+            {/* PAY-1481: the session route returns presence only. */}
+            {sessionDetails ? (sessionDetails.hasAccessToken ? "present (server-side only)" : "absent") : "N/A"}
+          </div>
+          <div>
+            <span className="text-gray-400">Refresh Token:</span>{" "}
+            {sessionDetails ? (sessionDetails.hasRefreshToken ? "present (server-side only)" : "absent") : "N/A"}
+          </div>
+          <div>
+            <span className="text-gray-400">Access Expires:</span>{" "}
+            {formatExpiry(sessionDetails?.accessTokenExpires)}
+          </div>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-2 mb-4">
+        <button
+          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          onClick={handleRefresh}
+          disabled={loading}
+        >
+          {loading ? "Refreshing..." : "Test Refresh Token"}
+        </button>
+        <button
+          className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          onClick={handleForceExpire}
+          disabled={loading}
+        >
+          Force Expire Token
+        </button>
+        <button
+          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded"
+          onClick={() => window.location.reload()}
+        >
+          Reload Page
+        </button>
+      </div>
+
+      {/* Result */}
+      {result && (
+        <div className="rounded border border-gray-600 bg-gray-800 p-4">
+          <h3 className="font-semibold mb-2 text-gray-300">Result:</h3>
+          <pre className="text-xs overflow-x-auto whitespace-pre-wrap text-green-400">
+            {JSON.stringify(redactCredentials(result), null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {/* Raw Session Details */}
+      <details className="mt-4">
+        <summary className="cursor-pointer text-gray-400 hover:text-white">Raw Session Details</summary>
+        <pre className="mt-2 text-xs bg-gray-800 p-2 rounded overflow-x-auto text-gray-300">
+          {/* PAY-1470: this dumped the access AND refresh token in full (Nextpert-Scout 59060). */}
+          {JSON.stringify(redactCredentials(sessionDetails), null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+}
+
+export default RefreshTokenPage;

package/src/pages/test-env/TestEnvPage.tsx

@@ -1,130 +1,130 @@
-'use client';
-
-import { authClient } from '../../client/better-auth-client';
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-
-/**
- * ⚠️ DEBUG INDEX — DO NOT MOUNT IN PRODUCTION. ⚠️
- *
- * Test Environment Index Page. Shows session status and links to the other
- * debug pages.
- *
- * ────────────────────────── WHY THE INDEX IS ITS OWN FINDING (QAPert 35000 sweep) ──────────────────────────
- * This page is DISCOVERY. On its own it only reads session status, so in
- * isolation it looks like the harmless member of the set — but it
- * ADVERTISES the sibling routes to anyone who reaches it, including the JWT
- * inspector that puts a live session token on the clipboard. Mounting this
- * turns four URLs somebody would otherwise have to guess into one linked
- * index.
- *
- * If you mount the /test-env segment at all, gate the WHOLE SEGMENT in your
- * middleware, per environment — not page by page.
- *
- * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
- * ```typescript
- * // app/test-env/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
- * export { TestEnvPage as default } from '@payez/next-mvp/pages/test-env';
- * ```
- */
-export function TestEnvPage() {
-  const { data: sessionData, isPending } = authClient.useSession();
-  const session = sessionData;
-  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  useEffect(() => {
-    const checkDarkMode = () => {
-      const isDark = document.documentElement.classList.contains('dark') ||
-        window.matchMedia('(prefers-color-scheme: dark)').matches;
-      setIsDarkMode(isDark);
-    };
-    checkDarkMode();
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    mediaQuery.addEventListener('change', checkDarkMode);
-    return () => mediaQuery.removeEventListener('change', checkDarkMode);
-  }, []);
-
-  const testPages = [
-    {
-      name: 'JWT Inspector',
-      url: '/test-env/jwt-inspect',
-      description: 'Decode and inspect JWT tokens, view all claims',
-    },
-  ];
-
-  const extSession = session as any;
-
-  return (
-    <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-2xl font-bold mb-6">Test Environment</h1>
-
-        {/* Current Session Status */}
-        <div className={`mb-8 p-4 rounded-lg ${isDarkMode ? 'bg-slate-900' : 'bg-white border'}`}>
-          <h2 className="text-lg font-semibold mb-3">Current Session</h2>
-          {status === 'loading' ? (
-            <p className="text-sm text-gray-500">Loading...</p>
-          ) : status === 'unauthenticated' ? (
-            <p className="text-sm text-red-500">Not logged in</p>
-          ) : (
-            <div className="grid grid-cols-2 gap-2 text-sm">
-              <div><strong>Email:</strong></div>
-              <div>{session?.user?.email || 'N/A'}</div>
-              <div><strong>Has Access Token:</strong></div>
-              <div className={extSession?.accessToken ? 'text-green-500' : 'text-red-500'}>
-                {extSession?.accessToken ? 'Yes' : 'No'}
-              </div>
-              <div><strong>Has Refresh Token:</strong></div>
-              <div className={extSession?.refreshToken ? 'text-green-500' : 'text-red-500'}>
-                {extSession?.refreshToken ? 'Yes' : 'No'}
-              </div>
-              <div><strong>Token Expires:</strong></div>
-              <div>{extSession?.accessTokenExpires ? new Date(extSession.accessTokenExpires).toLocaleString() : 'N/A'}</div>
-              <div><strong>2FA Required:</strong></div>
-              <div>{extSession?.user?.requiresTwoFactor ? 'Yes' : 'No'}</div>
-              <div><strong>2FA Verified:</strong></div>
-              <div>{extSession?.user?.twoFactorSessionVerified ? 'Yes' : 'No'}</div>
-            </div>
-          )}
-        </div>
-
-        {/* Test Pages */}
-        <div className="mb-8">
-          <h2 className="text-lg font-semibold mb-4">Debug Tools</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {testPages.map((page) => (
-              <Link
-                key={page.url}
-                href={page.url}
-                className={`p-4 rounded-lg transition-colors ${
-                  isDarkMode
-                    ? 'bg-slate-900 hover:bg-slate-800 border border-slate-700'
-                    : 'bg-white hover:bg-gray-50 border'
-                }`}
-              >
-                <h3 className="font-semibold mb-2">{page.name}</h3>
-                <p className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
-                  {page.description}
-                </p>
-              </Link>
-            ))}
-          </div>
-        </div>
-
-        {/* Session Warning */}
-        {session && !extSession.refreshToken && (
-          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-amber-900/30 border border-amber-700' : 'bg-amber-50 border border-amber-200'}`}>
-            <h3 className={`font-semibold mb-2 ${isDarkMode ? 'text-amber-400' : 'text-amber-600'}`}>No Refresh Token</h3>
-            <p className={`text-sm ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-              This session does not have a refresh token. This typically means 2FA has not been completed.
-              Token refresh will fail when the access token expires.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default TestEnvPage;
+'use client';
+
+import { authClient } from '../../client/better-auth-client';
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * ⚠️ DEBUG INDEX — DO NOT MOUNT IN PRODUCTION. ⚠️
+ *
+ * Test Environment Index Page. Shows session status and links to the other
+ * debug pages.
+ *
+ * ────────────────────────── WHY THE INDEX IS ITS OWN FINDING (QAPert 35000 sweep) ──────────────────────────
+ * This page is DISCOVERY. On its own it only reads session status, so in
+ * isolation it looks like the harmless member of the set — but it
+ * ADVERTISES the sibling routes to anyone who reaches it, including the JWT
+ * inspector that puts a live session token on the clipboard. Mounting this
+ * turns four URLs somebody would otherwise have to guess into one linked
+ * index.
+ *
+ * If you mount the /test-env segment at all, gate the WHOLE SEGMENT in your
+ * middleware, per environment — not page by page.
+ *
+ * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
+ * ```typescript
+ * // app/test-env/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
+ * export { TestEnvPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+export function TestEnvPage() {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const checkDarkMode = () => {
+      const isDark = document.documentElement.classList.contains('dark') ||
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setIsDarkMode(isDark);
+    };
+    checkDarkMode();
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', checkDarkMode);
+    return () => mediaQuery.removeEventListener('change', checkDarkMode);
+  }, []);
+
+  const testPages = [
+    {
+      name: 'JWT Inspector',
+      url: '/test-env/jwt-inspect',
+      description: 'Decode and inspect JWT tokens, view all claims',
+    },
+  ];
+
+  const extSession = session as any;
+
+  return (
+    <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-2xl font-bold mb-6">Test Environment</h1>
+
+        {/* Current Session Status */}
+        <div className={`mb-8 p-4 rounded-lg ${isDarkMode ? 'bg-slate-900' : 'bg-white border'}`}>
+          <h2 className="text-lg font-semibold mb-3">Current Session</h2>
+          {status === 'loading' ? (
+            <p className="text-sm text-gray-500">Loading...</p>
+          ) : status === 'unauthenticated' ? (
+            <p className="text-sm text-red-500">Not logged in</p>
+          ) : (
+            <div className="grid grid-cols-2 gap-2 text-sm">
+              <div><strong>Email:</strong></div>
+              <div>{session?.user?.email || 'N/A'}</div>
+              <div><strong>Has Access Token:</strong></div>
+              <div className={extSession?.accessToken ? 'text-green-500' : 'text-red-500'}>
+                {extSession?.accessToken ? 'Yes' : 'No'}
+              </div>
+              <div><strong>Has Refresh Token:</strong></div>
+              <div className={extSession?.refreshToken ? 'text-green-500' : 'text-red-500'}>
+                {extSession?.refreshToken ? 'Yes' : 'No'}
+              </div>
+              <div><strong>Token Expires:</strong></div>
+              <div>{extSession?.accessTokenExpires ? new Date(extSession.accessTokenExpires).toLocaleString() : 'N/A'}</div>
+              <div><strong>2FA Required:</strong></div>
+              <div>{extSession?.user?.requiresTwoFactor ? 'Yes' : 'No'}</div>
+              <div><strong>2FA Verified:</strong></div>
+              <div>{extSession?.user?.twoFactorSessionVerified ? 'Yes' : 'No'}</div>
+            </div>
+          )}
+        </div>
+
+        {/* Test Pages */}
+        <div className="mb-8">
+          <h2 className="text-lg font-semibold mb-4">Debug Tools</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {testPages.map((page) => (
+              <Link
+                key={page.url}
+                href={page.url}
+                className={`p-4 rounded-lg transition-colors ${
+                  isDarkMode
+                    ? 'bg-slate-900 hover:bg-slate-800 border border-slate-700'
+                    : 'bg-white hover:bg-gray-50 border'
+                }`}
+              >
+                <h3 className="font-semibold mb-2">{page.name}</h3>
+                <p className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+                  {page.description}
+                </p>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Session Warning */}
+        {session && !extSession.refreshToken && (
+          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-amber-900/30 border border-amber-700' : 'bg-amber-50 border border-amber-200'}`}>
+            <h3 className={`font-semibold mb-2 ${isDarkMode ? 'text-amber-400' : 'text-amber-600'}`}>No Refresh Token</h3>
+            <p className={`text-sm ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+              This session does not have a refresh token. This typically means 2FA has not been completed.
+              Token refresh will fail when the access token expires.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default TestEnvPage;