@payez/next-mvp 4.8.0 → 4.8.2

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

@@ -1,449 +1,449 @@
-'use client';
-
-import { authClient } from '../../client/better-auth-client';
-import { useState, useEffect } from 'react';
-import { maskToken, redactCredentials } from './redact-credentials';
-
-// Decode JWT header (contains kid, alg, typ)
-function decodeJwtHeader(token: string): any {
-  try {
-    const parts = token.split('.');
-    if (parts.length !== 3) return null;
-    const header = parts[0].replace(/-/g, '+').replace(/_/g, '/');
-    const decoded = atob(header);
-    return JSON.parse(decoded);
-  } catch {
-    return null;
-  }
-}
-
-// Decode JWT payload (contains claims)
-function decodeJwtPayload(token: string): any {
-  try {
-    const parts = token.split('.');
-    if (parts.length !== 3) return null;
-    const payload = parts[1].replace(/-/g, '+').replace(/_/g, '/');
-    const decoded = atob(payload);
-    return JSON.parse(decoded);
-  } catch {
-    return null;
-  }
-}
-
-/**
- * ⚠️ DEBUG PAGE THAT DISPLAYS AND COPIES LIVE CREDENTIALS — DO NOT MOUNT
- * IN PRODUCTION. ⚠️
- *
- * Session Inspector Page. Debug page for inspecting session data from Redis:
- * shows user info, roles, 2FA status, and TOKENS. It offers
- * COPY-TO-CLIPBOARD buttons for the live SESSION TOKEN and ACCESS TOKEN, and
- * reads them from the consuming app's `/api/internal/session-data` route.
- *
- * ────────────────────────── WHY THIS WARNING EXISTS (QAPert 35000 / 248991) ──────────────────────────
- * THIS PAGE HAS NO ENV GATE OF ITS OWN. Unlike the force-expire handler
- * (default-denied behind ENABLE_TEST_ROUTES) or the idp-token route (behind
- * ENABLE_TOKEN_INSPECTOR), a mounted page is reachable exactly as far as the
- * consuming app's own middleware allows. MOUNTING IT IS THE GATE. There is no
- * second line of defence behind it.
- *
- * AND THE CREDENTIAL IT HANDS OVER IS THE PRECONDITION FOR A REAL ATTACK ON
- * THIS SAME PACKAGE. The 246007 finding reduces to "a caller who KNOWS A
- * SESSION TOKEN can act on a session it does not own". The purpose of this
- * page is to put a live session token on the clipboard of whoever loads it. A
- * screen-share, a shoulder-surfed screenshot or a support call is enough.
- * Treat the rendered value as a live credential, because that is what it is.
- *
- * NOTE FOR MAINTAINERS: this warning must stay on THIS docstring, the one
- * attached to the exported declaration. An identical block placed higher in
- * the file does NOT reach the emitted .d.ts — measured, after I made exactly
- * that mistake — so it would warn no consumer at all.
- *
- * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
- * ```typescript
- * // app/test-env/jwt-inspect/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
- * export { JwtInspectPage as default } from '@payez/next-mvp/pages/test-env';
- * ```
- * Gate the whole /test-env segment in your middleware, per environment. If you
- * are not actively debugging token contents, DO NOT MOUNT THIS AT ALL — the
- * safest configuration is the absence of the route.
- */
-export function JwtInspectPage() {
-  const { data: sessionData, isPending } = authClient.useSession();
-  const session = sessionData;
-  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const [jwtHeader, setJwtHeader] = useState<any>(null);
-  const [jwtPayload, setJwtPayload] = useState<any>(null);
-  const [serverSession, setServerSession] = useState<any>(null);
-
-  // Detect dark mode
-  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);
-  }, []);
-
-  // Fetch enriched session from server (has IDP tokens, roles, userId)
-  useEffect(() => {
-    if (!session) return;
-    fetch('/api/internal/session-data')
-      .then(r => r.ok ? r.json() : null)
-      .then(d => {
-        if (d) setServerSession(d);
-      })
-      .catch(() => {});
-  }, [session]);
-
-  // Decode JWT header and payload from server session's IDP access token
-  useEffect(() => {
-    const token = serverSession?.idpAccessToken || (session as any)?.accessToken;
-    if (token) {
-      setJwtHeader(decodeJwtHeader(token));
-      setJwtPayload(decodeJwtPayload(token));
-    }
-  }, [serverSession, session]);
-
-  // PAY-1470 (BAPert rulings 59022, 59040): credentials are shown as tokenLogId + length ONLY. The Reveal toggles
-  // (per token and for the raw session JSON) and the Copy buttons are gone: "never renders token material"
-  // includes click-to-reveal, because a full bearer one click away on a prod-reachable page is the same defect.
-  // The redaction rules (key names, JWT / PEM / URL-password shapes) live in ./redact-credentials.
-
-  if (status === 'loading') {
-    return (
-      <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
-        Loading session...
-      </div>
-    );
-  }
-
-  if (status === 'unauthenticated') {
-    return (
-      <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
-        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-red-900/30 border border-red-800' : 'bg-red-50 border border-red-200'}`}>
-          <h2 className="text-lg font-semibold mb-2">Not Authenticated</h2>
-          <p>Please log in to inspect session data.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Merge server-side enriched session with client session
-  const ss = serverSession || {};
-  const ext = session as any;
-  const user = {
-    id: ss.userId || ext?.user?.id,
-    email: ss.email || ext?.user?.email,
-    name: ss.name || ext?.user?.name,
-    roles: ss.roles || [],
-    oauthProvider: ss.oauthProvider,
-    idpClientId: ss.idpClientId,
-    merchantId: ss.merchantId,
-    mfaVerified: ss.mfaVerified,
-    requiresTwoFactor: false,
-    authenticationMethods: ss.authenticationMethods,
-    authenticationLevel: ss.authenticationLevel,
-    mfaCompletedAt: ss.mfaCompletedAt,
-    mfaExpiresAt: ss.mfaExpiresAt,
-    twoFactorSessionVerified: ss.mfaVerified,
-  };
-  // Token fields for display
-  const displayExt = {
-    ...ext,
-    sessionToken: ss.sessionToken || ext?.sessionToken,
-    accessToken: ss.idpAccessToken || ext?.accessToken,
-    refreshToken: ss.idpRefreshToken || ext?.refreshToken,
-    accessTokenExpires: ss.idpAccessTokenExpires || ext?.accessTokenExpires,
-  };
-
-  // Card styling helpers
-  const cardClass = isDarkMode ? 'bg-slate-900 border border-slate-700' : 'bg-white border border-gray-200';
-  const labelClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
-  const valueClass = isDarkMode ? 'text-white' : 'text-gray-900';
-
-  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 space-y-6">
-        <h1 className="text-2xl font-bold">Session Inspector</h1>
-        <p className={`text-sm ${labelClass}`}>
-          Better Auth session + IDP tokens from Redis
-        </p>
-
-        {/* User Identity */}
-        <div className={`p-4 rounded-lg ${cardClass}`}>
-          <h2 className="text-lg font-semibold mb-4">User Identity</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-            <InfoRow label="User ID" value={user.id} labelClass={labelClass} valueClass={valueClass} />
-            <InfoRow label="Email" value={user.email} labelClass={labelClass} valueClass={valueClass} />
-            <InfoRow label="Name" value={user.name} labelClass={labelClass} valueClass={valueClass} />
-            <InfoRow label="OAuth Provider" value={user.oauthProvider} labelClass={labelClass} valueClass={valueClass} />
-            <InfoRow label="IDP Client ID" value={user.idpClientId} labelClass={labelClass} valueClass={valueClass} />
-            <InfoRow label="Merchant ID" value={user.merchantId} labelClass={labelClass} valueClass={valueClass} />
-          </div>
-        </div>
-
-        {/* Roles */}
-        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-purple-900/30 border border-purple-700' : 'bg-purple-50 border border-purple-200'}`}>
-          <h2 className="text-lg font-semibold mb-4">Roles</h2>
-          {user.roles && user.roles.length > 0 ? (
-            <div className="flex flex-wrap gap-2">
-              {user.roles.map((role: string) => (
-                <span
-                  key={role}
-                  className={`px-3 py-1 rounded-full text-sm font-medium ${
-                    isDarkMode ? 'bg-purple-800 text-purple-100' : 'bg-purple-200 text-purple-800'
-                  }`}
-                >
-                  {role}
-                </span>
-              ))}
-            </div>
-          ) : (
-            <p className={labelClass}>No roles assigned</p>
-          )}
-        </div>
-
-        {/* 2FA Status */}
-        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-yellow-900/30 border border-yellow-700' : 'bg-yellow-50 border border-yellow-200'}`}>
-          <h2 className="text-lg font-semibold mb-4">2FA Status</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-            <div>
-              <span className={labelClass}>2FA Verified:</span>{' '}
-              <StatusBadge
-                value={user.twoFactorSessionVerified}
-                trueText="Yes"
-                falseText="No"
-                isDarkMode={isDarkMode}
-              />
-            </div>
-            <div>
-              <span className={labelClass}>Requires 2FA:</span>{' '}
-              <StatusBadge
-                value={user.requiresTwoFactor}
-                trueText="Yes"
-                falseText="No"
-                isDarkMode={isDarkMode}
-                invertColors
-              />
-            </div>
-            <InfoRow
-              label="Auth Methods (AMR)"
-              value={user.authenticationMethods?.join(', ')}
-              labelClass={labelClass}
-              valueClass={valueClass}
-            />
-            <InfoRow
-              label="Auth Level (ACR)"
-              value={user.authenticationLevel}
-              labelClass={labelClass}
-              valueClass={valueClass}
-            />
-            <InfoRow
-              label="MFA Completed At"
-              value={user.mfaCompletedAt ? new Date(user.mfaCompletedAt).toISOString() : undefined}
-              labelClass={labelClass}
-              valueClass={valueClass}
-            />
-            <InfoRow
-              label="MFA Expires At"
-              value={user.mfaExpiresAt ? new Date(user.mfaExpiresAt).toISOString() : undefined}
-              labelClass={labelClass}
-              valueClass={valueClass}
-            />
-          </div>
-        </div>
-
-        {/* Tokens */}
-        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-blue-900/30 border border-blue-700' : 'bg-blue-50 border border-blue-200'}`}>
-          <h2 className="text-lg font-semibold mb-4">Tokens</h2>
-          <div className="space-y-4">
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className={labelClass}>Session Token (Redis Key):</span>
-              </div>
-              <code className={`block p-2 rounded text-xs break-all ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
-                {displayExt.sessionToken ? maskToken(displayExt.sessionToken) : 'N/A'}
-              </code>
-            </div>
-
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className={labelClass}>Access Token (IDP):</span>
-              </div>
-              <code className={`block p-2 rounded text-xs break-all max-h-24 overflow-auto ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
-                {displayExt.accessToken ? maskToken(displayExt.accessToken) : 'N/A'}
-              </code>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-              <div>
-                <span className={labelClass}>Has Refresh Token:</span>{' '}
-                <StatusBadge
-                  value={!!displayExt.refreshToken}
-                  trueText="Yes"
-                  falseText="No"
-                  isDarkMode={isDarkMode}
-                />
-              </div>
-              <InfoRow
-                label="Access Token Expires"
-                value={displayExt.accessTokenExpires ? new Date(displayExt.accessTokenExpires).toISOString() : undefined}
-                labelClass={labelClass}
-                valueClass={valueClass}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* JWT Header (contains kid for key lookup) */}
-        {jwtHeader && (
-          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-orange-900/30 border border-orange-700' : 'bg-orange-50 border border-orange-200'}`}>
-            <h2 className="text-lg font-semibold mb-4">JWT Header</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-              <InfoRow label="Algorithm (alg)" value={jwtHeader.alg} labelClass={labelClass} valueClass={valueClass} />
-              <InfoRow label="Type (typ)" value={jwtHeader.typ} labelClass={labelClass} valueClass={valueClass} />
-              <div>
-                <span className={labelClass}>Key ID (kid):</span>{' '}
-                <span className={`font-mono ${jwtHeader.kid ? (isDarkMode ? 'text-green-400' : 'text-green-600') : (isDarkMode ? 'text-red-400' : 'text-red-600')}`}>
-                  {jwtHeader.kid || 'NOT PRESENT'}
-                </span>
-              </div>
-              {Object.entries(jwtHeader)
-                .filter(([key]) => !['alg', 'typ', 'kid'].includes(key))
-                .map(([key, value]) => (
-                  <InfoRow
-                    key={key}
-                    label={key}
-                    value={typeof value === 'object' ? JSON.stringify(redactCredentials(value)) : String(redactCredentials(value, key))}
-                    labelClass={labelClass}
-                    valueClass={valueClass}
-                  />
-                ))
-              }
-            </div>
-          </div>
-        )}
-
-        {/* JWT Payload Claims */}
-        {jwtPayload && (
-          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-green-900/30 border border-green-700' : 'bg-green-50 border border-green-200'}`}>
-            <h2 className="text-lg font-semibold mb-4">JWT Payload Claims</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-              <InfoRow label="Subject (sub)" value={jwtPayload.sub} labelClass={labelClass} valueClass={valueClass} />
-              <InfoRow label="Issuer (iss)" value={jwtPayload.iss} labelClass={labelClass} valueClass={valueClass} />
-              <InfoRow label="Audience (aud)" value={Array.isArray(jwtPayload.aud) ? jwtPayload.aud.join(', ') : jwtPayload.aud} labelClass={labelClass} valueClass={valueClass} />
-              <InfoRow label="Client ID" value={jwtPayload.client_id} labelClass={labelClass} valueClass={valueClass} />
-              <InfoRow
-                label="Expires (exp)"
-                value={jwtPayload.exp ? new Date(jwtPayload.exp * 1000).toISOString() : undefined}
-                labelClass={labelClass}
-                valueClass={valueClass}
-              />
-              <InfoRow
-                label="Issued At (iat)"
-                value={jwtPayload.iat ? new Date(jwtPayload.iat * 1000).toISOString() : undefined}
-                labelClass={labelClass}
-                valueClass={valueClass}
-              />
-              <InfoRow
-                label="AMR (Auth Methods)"
-                value={Array.isArray(jwtPayload.amr) ? jwtPayload.amr.join(', ') : jwtPayload.amr}
-                labelClass={labelClass}
-                valueClass={valueClass}
-              />
-              <InfoRow label="ACR (Auth Context)" value={jwtPayload.acr} labelClass={labelClass} valueClass={valueClass} />
-            </div>
-          </div>
-        )}
-
-        {/* Session Expiry */}
-        <div className={`p-4 rounded-lg ${cardClass}`}>
-          <h2 className="text-lg font-semibold mb-4">Session Metadata</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-            <InfoRow
-              label="Session Expires"
-              value={(session as any)?.expires ? new Date((session as any).expires).toISOString() : undefined}
-              labelClass={labelClass}
-              valueClass={valueClass}
-            />
-            <InfoRow
-              label="Error"
-              value={ext.error}
-              labelClass={labelClass}
-              valueClass={ext.error ? 'text-red-500' : valueClass}
-            />
-          </div>
-        </div>
-
-        {/* Raw Session Data - credentials redacted by default, see redactCredentials above */}
-        <details className={`p-4 rounded-lg ${cardClass}`}>
-          <summary className="font-semibold cursor-pointer">
-            Raw Session Data &mdash; credentials redacted (Click to expand)
-          </summary>
-          <div className="mt-3">
-            <span className={`text-xs ${labelClass}`}>
-              Token values are masked. Structure, claims and expiry fields are unchanged.
-            </span>
-          </div>
-          <pre className={`mt-4 text-xs overflow-auto p-3 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
-            {JSON.stringify(redactCredentials({ clientSession: session, serverSession: serverSession }), null, 2)}
-          </pre>
-        </details>
-      </div>
-    </div>
-  );
-}
-
-// Helper Components
-
-function InfoRow({
-  label,
-  value,
-  labelClass,
-  valueClass,
-}: {
-  label: string;
-  value?: string | null;
-  labelClass: string;
-  valueClass: string;
-}) {
-  return (
-    <div>
-      <span className={labelClass}>{label}:</span>{' '}
-      <span className={valueClass}>{value || 'N/A'}</span>
-    </div>
-  );
-}
-
-function StatusBadge({
-  value,
-  trueText,
-  falseText,
-  isDarkMode,
-  invertColors = false,
-}: {
-  value: boolean;
-  trueText: string;
-  falseText: string;
-  isDarkMode: boolean;
-  invertColors?: boolean;
-}) {
-  const isPositive = invertColors ? !value : value;
-  const colorClass = isPositive
-    ? isDarkMode ? 'bg-green-800 text-green-100' : 'bg-green-200 text-green-800'
-    : isDarkMode ? 'bg-red-800 text-red-100' : 'bg-red-200 text-red-800';
-
-  return (
-    <span className={`px-2 py-0.5 rounded text-xs font-medium ${colorClass}`}>
-      {value ? trueText : falseText}
-    </span>
-  );
-}
-
-
-export default JwtInspectPage;
+'use client';
+
+import { authClient } from '../../client/better-auth-client';
+import { useState, useEffect } from 'react';
+import { maskToken, redactCredentials } from './redact-credentials';
+
+// Decode JWT header (contains kid, alg, typ)
+function decodeJwtHeader(token: string): any {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+    const header = parts[0].replace(/-/g, '+').replace(/_/g, '/');
+    const decoded = atob(header);
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+
+// Decode JWT payload (contains claims)
+function decodeJwtPayload(token: string): any {
+  try {
+    const parts = token.split('.');
+    if (parts.length !== 3) return null;
+    const payload = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+    const decoded = atob(payload);
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * ⚠️ DEBUG PAGE THAT DISPLAYS AND COPIES LIVE CREDENTIALS — DO NOT MOUNT
+ * IN PRODUCTION. ⚠️
+ *
+ * Session Inspector Page. Debug page for inspecting session data from Redis:
+ * shows user info, roles, 2FA status, and TOKENS. It offers
+ * COPY-TO-CLIPBOARD buttons for the live SESSION TOKEN and ACCESS TOKEN, and
+ * reads them from the consuming app's `/api/internal/session-data` route.
+ *
+ * ────────────────────────── WHY THIS WARNING EXISTS (QAPert 35000 / 248991) ──────────────────────────
+ * THIS PAGE HAS NO ENV GATE OF ITS OWN. Unlike the force-expire handler
+ * (default-denied behind ENABLE_TEST_ROUTES) or the idp-token route (behind
+ * ENABLE_TOKEN_INSPECTOR), a mounted page is reachable exactly as far as the
+ * consuming app's own middleware allows. MOUNTING IT IS THE GATE. There is no
+ * second line of defence behind it.
+ *
+ * AND THE CREDENTIAL IT HANDS OVER IS THE PRECONDITION FOR A REAL ATTACK ON
+ * THIS SAME PACKAGE. The 246007 finding reduces to "a caller who KNOWS A
+ * SESSION TOKEN can act on a session it does not own". The purpose of this
+ * page is to put a live session token on the clipboard of whoever loads it. A
+ * screen-share, a shoulder-surfed screenshot or a support call is enough.
+ * Treat the rendered value as a live credential, because that is what it is.
+ *
+ * NOTE FOR MAINTAINERS: this warning must stay on THIS docstring, the one
+ * attached to the exported declaration. An identical block placed higher in
+ * the file does NOT reach the emitted .d.ts — measured, after I made exactly
+ * that mistake — so it would warn no consumer at all.
+ *
+ * ────────────────────────── IF YOU MOUNT IT, MOUNT IT LIKE THIS ──────────────────────────
+ * ```typescript
+ * // app/test-env/jwt-inspect/page.tsx   — TEST/DEV ENVIRONMENTS ONLY
+ * export { JwtInspectPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ * Gate the whole /test-env segment in your middleware, per environment. If you
+ * are not actively debugging token contents, DO NOT MOUNT THIS AT ALL — the
+ * safest configuration is the absence of the route.
+ */
+export function JwtInspectPage() {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [jwtHeader, setJwtHeader] = useState<any>(null);
+  const [jwtPayload, setJwtPayload] = useState<any>(null);
+  const [serverSession, setServerSession] = useState<any>(null);
+
+  // Detect dark mode
+  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);
+  }, []);
+
+  // Fetch enriched session from server (has IDP tokens, roles, userId)
+  useEffect(() => {
+    if (!session) return;
+    fetch('/api/internal/session-data')
+      .then(r => r.ok ? r.json() : null)
+      .then(d => {
+        if (d) setServerSession(d);
+      })
+      .catch(() => {});
+  }, [session]);
+
+  // Decode JWT header and payload from server session's IDP access token
+  useEffect(() => {
+    const token = serverSession?.idpAccessToken || (session as any)?.accessToken;
+    if (token) {
+      setJwtHeader(decodeJwtHeader(token));
+      setJwtPayload(decodeJwtPayload(token));
+    }
+  }, [serverSession, session]);
+
+  // PAY-1470 (BAPert rulings 59022, 59040): credentials are shown as tokenLogId + length ONLY. The Reveal toggles
+  // (per token and for the raw session JSON) and the Copy buttons are gone: "never renders token material"
+  // includes click-to-reveal, because a full bearer one click away on a prod-reachable page is the same defect.
+  // The redaction rules (key names, JWT / PEM / URL-password shapes) live in ./redact-credentials.
+
+  if (status === 'loading') {
+    return (
+      <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
+        Loading session...
+      </div>
+    );
+  }
+
+  if (status === 'unauthenticated') {
+    return (
+      <div className={`min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`}>
+        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-red-900/30 border border-red-800' : 'bg-red-50 border border-red-200'}`}>
+          <h2 className="text-lg font-semibold mb-2">Not Authenticated</h2>
+          <p>Please log in to inspect session data.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Merge server-side enriched session with client session
+  const ss = serverSession || {};
+  const ext = session as any;
+  const user = {
+    id: ss.userId || ext?.user?.id,
+    email: ss.email || ext?.user?.email,
+    name: ss.name || ext?.user?.name,
+    roles: ss.roles || [],
+    oauthProvider: ss.oauthProvider,
+    idpClientId: ss.idpClientId,
+    merchantId: ss.merchantId,
+    mfaVerified: ss.mfaVerified,
+    requiresTwoFactor: false,
+    authenticationMethods: ss.authenticationMethods,
+    authenticationLevel: ss.authenticationLevel,
+    mfaCompletedAt: ss.mfaCompletedAt,
+    mfaExpiresAt: ss.mfaExpiresAt,
+    twoFactorSessionVerified: ss.mfaVerified,
+  };
+  // Token fields for display
+  const displayExt = {
+    ...ext,
+    sessionToken: ss.sessionToken || ext?.sessionToken,
+    accessToken: ss.idpAccessToken || ext?.accessToken,
+    refreshToken: ss.idpRefreshToken || ext?.refreshToken,
+    accessTokenExpires: ss.idpAccessTokenExpires || ext?.accessTokenExpires,
+  };
+
+  // Card styling helpers
+  const cardClass = isDarkMode ? 'bg-slate-900 border border-slate-700' : 'bg-white border border-gray-200';
+  const labelClass = isDarkMode ? 'text-slate-400' : 'text-gray-500';
+  const valueClass = isDarkMode ? 'text-white' : 'text-gray-900';
+
+  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 space-y-6">
+        <h1 className="text-2xl font-bold">Session Inspector</h1>
+        <p className={`text-sm ${labelClass}`}>
+          Better Auth session + IDP tokens from Redis
+        </p>
+
+        {/* User Identity */}
+        <div className={`p-4 rounded-lg ${cardClass}`}>
+          <h2 className="text-lg font-semibold mb-4">User Identity</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+            <InfoRow label="User ID" value={user.id} labelClass={labelClass} valueClass={valueClass} />
+            <InfoRow label="Email" value={user.email} labelClass={labelClass} valueClass={valueClass} />
+            <InfoRow label="Name" value={user.name} labelClass={labelClass} valueClass={valueClass} />
+            <InfoRow label="OAuth Provider" value={user.oauthProvider} labelClass={labelClass} valueClass={valueClass} />
+            <InfoRow label="IDP Client ID" value={user.idpClientId} labelClass={labelClass} valueClass={valueClass} />
+            <InfoRow label="Merchant ID" value={user.merchantId} labelClass={labelClass} valueClass={valueClass} />
+          </div>
+        </div>
+
+        {/* Roles */}
+        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-purple-900/30 border border-purple-700' : 'bg-purple-50 border border-purple-200'}`}>
+          <h2 className="text-lg font-semibold mb-4">Roles</h2>
+          {user.roles && user.roles.length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {user.roles.map((role: string) => (
+                <span
+                  key={role}
+                  className={`px-3 py-1 rounded-full text-sm font-medium ${
+                    isDarkMode ? 'bg-purple-800 text-purple-100' : 'bg-purple-200 text-purple-800'
+                  }`}
+                >
+                  {role}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className={labelClass}>No roles assigned</p>
+          )}
+        </div>
+
+        {/* 2FA Status */}
+        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-yellow-900/30 border border-yellow-700' : 'bg-yellow-50 border border-yellow-200'}`}>
+          <h2 className="text-lg font-semibold mb-4">2FA Status</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+            <div>
+              <span className={labelClass}>2FA Verified:</span>{' '}
+              <StatusBadge
+                value={user.twoFactorSessionVerified}
+                trueText="Yes"
+                falseText="No"
+                isDarkMode={isDarkMode}
+              />
+            </div>
+            <div>
+              <span className={labelClass}>Requires 2FA:</span>{' '}
+              <StatusBadge
+                value={user.requiresTwoFactor}
+                trueText="Yes"
+                falseText="No"
+                isDarkMode={isDarkMode}
+                invertColors
+              />
+            </div>
+            <InfoRow
+              label="Auth Methods (AMR)"
+              value={user.authenticationMethods?.join(', ')}
+              labelClass={labelClass}
+              valueClass={valueClass}
+            />
+            <InfoRow
+              label="Auth Level (ACR)"
+              value={user.authenticationLevel}
+              labelClass={labelClass}
+              valueClass={valueClass}
+            />
+            <InfoRow
+              label="MFA Completed At"
+              value={user.mfaCompletedAt ? new Date(user.mfaCompletedAt).toISOString() : undefined}
+              labelClass={labelClass}
+              valueClass={valueClass}
+            />
+            <InfoRow
+              label="MFA Expires At"
+              value={user.mfaExpiresAt ? new Date(user.mfaExpiresAt).toISOString() : undefined}
+              labelClass={labelClass}
+              valueClass={valueClass}
+            />
+          </div>
+        </div>
+
+        {/* Tokens */}
+        <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-blue-900/30 border border-blue-700' : 'bg-blue-50 border border-blue-200'}`}>
+          <h2 className="text-lg font-semibold mb-4">Tokens</h2>
+          <div className="space-y-4">
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className={labelClass}>Session Token (Redis Key):</span>
+              </div>
+              <code className={`block p-2 rounded text-xs break-all ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
+                {displayExt.sessionToken ? maskToken(displayExt.sessionToken) : 'N/A'}
+              </code>
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className={labelClass}>Access Token (IDP):</span>
+              </div>
+              <code className={`block p-2 rounded text-xs break-all max-h-24 overflow-auto ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
+                {displayExt.accessToken ? maskToken(displayExt.accessToken) : 'N/A'}
+              </code>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+              <div>
+                <span className={labelClass}>Has Refresh Token:</span>{' '}
+                <StatusBadge
+                  value={!!displayExt.refreshToken}
+                  trueText="Yes"
+                  falseText="No"
+                  isDarkMode={isDarkMode}
+                />
+              </div>
+              <InfoRow
+                label="Access Token Expires"
+                value={displayExt.accessTokenExpires ? new Date(displayExt.accessTokenExpires).toISOString() : undefined}
+                labelClass={labelClass}
+                valueClass={valueClass}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* JWT Header (contains kid for key lookup) */}
+        {jwtHeader && (
+          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-orange-900/30 border border-orange-700' : 'bg-orange-50 border border-orange-200'}`}>
+            <h2 className="text-lg font-semibold mb-4">JWT Header</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+              <InfoRow label="Algorithm (alg)" value={jwtHeader.alg} labelClass={labelClass} valueClass={valueClass} />
+              <InfoRow label="Type (typ)" value={jwtHeader.typ} labelClass={labelClass} valueClass={valueClass} />
+              <div>
+                <span className={labelClass}>Key ID (kid):</span>{' '}
+                <span className={`font-mono ${jwtHeader.kid ? (isDarkMode ? 'text-green-400' : 'text-green-600') : (isDarkMode ? 'text-red-400' : 'text-red-600')}`}>
+                  {jwtHeader.kid || 'NOT PRESENT'}
+                </span>
+              </div>
+              {Object.entries(jwtHeader)
+                .filter(([key]) => !['alg', 'typ', 'kid'].includes(key))
+                .map(([key, value]) => (
+                  <InfoRow
+                    key={key}
+                    label={key}
+                    value={typeof value === 'object' ? JSON.stringify(redactCredentials(value)) : String(redactCredentials(value, key))}
+                    labelClass={labelClass}
+                    valueClass={valueClass}
+                  />
+                ))
+              }
+            </div>
+          </div>
+        )}
+
+        {/* JWT Payload Claims */}
+        {jwtPayload && (
+          <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-green-900/30 border border-green-700' : 'bg-green-50 border border-green-200'}`}>
+            <h2 className="text-lg font-semibold mb-4">JWT Payload Claims</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+              <InfoRow label="Subject (sub)" value={jwtPayload.sub} labelClass={labelClass} valueClass={valueClass} />
+              <InfoRow label="Issuer (iss)" value={jwtPayload.iss} labelClass={labelClass} valueClass={valueClass} />
+              <InfoRow label="Audience (aud)" value={Array.isArray(jwtPayload.aud) ? jwtPayload.aud.join(', ') : jwtPayload.aud} labelClass={labelClass} valueClass={valueClass} />
+              <InfoRow label="Client ID" value={jwtPayload.client_id} labelClass={labelClass} valueClass={valueClass} />
+              <InfoRow
+                label="Expires (exp)"
+                value={jwtPayload.exp ? new Date(jwtPayload.exp * 1000).toISOString() : undefined}
+                labelClass={labelClass}
+                valueClass={valueClass}
+              />
+              <InfoRow
+                label="Issued At (iat)"
+                value={jwtPayload.iat ? new Date(jwtPayload.iat * 1000).toISOString() : undefined}
+                labelClass={labelClass}
+                valueClass={valueClass}
+              />
+              <InfoRow
+                label="AMR (Auth Methods)"
+                value={Array.isArray(jwtPayload.amr) ? jwtPayload.amr.join(', ') : jwtPayload.amr}
+                labelClass={labelClass}
+                valueClass={valueClass}
+              />
+              <InfoRow label="ACR (Auth Context)" value={jwtPayload.acr} labelClass={labelClass} valueClass={valueClass} />
+            </div>
+          </div>
+        )}
+
+        {/* Session Expiry */}
+        <div className={`p-4 rounded-lg ${cardClass}`}>
+          <h2 className="text-lg font-semibold mb-4">Session Metadata</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+            <InfoRow
+              label="Session Expires"
+              value={(session as any)?.expires ? new Date((session as any).expires).toISOString() : undefined}
+              labelClass={labelClass}
+              valueClass={valueClass}
+            />
+            <InfoRow
+              label="Error"
+              value={ext.error}
+              labelClass={labelClass}
+              valueClass={ext.error ? 'text-red-500' : valueClass}
+            />
+          </div>
+        </div>
+
+        {/* Raw Session Data - credentials redacted by default, see redactCredentials above */}
+        <details className={`p-4 rounded-lg ${cardClass}`}>
+          <summary className="font-semibold cursor-pointer">
+            Raw Session Data &mdash; credentials redacted (Click to expand)
+          </summary>
+          <div className="mt-3">
+            <span className={`text-xs ${labelClass}`}>
+              Token values are masked. Structure, claims and expiry fields are unchanged.
+            </span>
+          </div>
+          <pre className={`mt-4 text-xs overflow-auto p-3 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`}>
+            {JSON.stringify(redactCredentials({ clientSession: session, serverSession: serverSession }), null, 2)}
+          </pre>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+// Helper Components
+
+function InfoRow({
+  label,
+  value,
+  labelClass,
+  valueClass,
+}: {
+  label: string;
+  value?: string | null;
+  labelClass: string;
+  valueClass: string;
+}) {
+  return (
+    <div>
+      <span className={labelClass}>{label}:</span>{' '}
+      <span className={valueClass}>{value || 'N/A'}</span>
+    </div>
+  );
+}
+
+function StatusBadge({
+  value,
+  trueText,
+  falseText,
+  isDarkMode,
+  invertColors = false,
+}: {
+  value: boolean;
+  trueText: string;
+  falseText: string;
+  isDarkMode: boolean;
+  invertColors?: boolean;
+}) {
+  const isPositive = invertColors ? !value : value;
+  const colorClass = isPositive
+    ? isDarkMode ? 'bg-green-800 text-green-100' : 'bg-green-200 text-green-800'
+    : isDarkMode ? 'bg-red-800 text-red-100' : 'bg-red-200 text-red-800';
+
+  return (
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${colorClass}`}>
+      {value ? trueText : falseText}
+    </span>
+  );
+}
+
+
+export default JwtInspectPage;