@payez/next-mvp 3.0.0

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

@@ -0,0 +1,155 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useSession } from "next-auth/react";
+
+/**
+ * Refresh Token Test Page
+ *
+ * Debug page for testing OAuth refresh token flow.
+ * Shows current session state, allows manual refresh trigger,
+ * and can force-expire tokens for testing.
+ *
+ * Usage:
+ * ```typescript
+ * // app/test-env/refresh-token/page.tsx
+ * export { RefreshTokenPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+export function RefreshTokenPage() {
+  const { data: session, update } = useSession();
+  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>{" "}
+            {sessionDetails?.accessToken ? `${sessionDetails.accessToken.substring(0, 40)}...` : "N/A"}
+          </div>
+          <div>
+            <span className="text-gray-400">Refresh Token:</span>{" "}
+            {sessionDetails?.refreshToken ? `${sessionDetails.refreshToken.substring(0, 40)}...` : "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(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">
+          {JSON.stringify(sessionDetails, null, 2)}
+        </pre>
+      </details>
+    </div>
+  );
+}
+
+export default RefreshTokenPage;

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

@@ -0,0 +1,116 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * Test Environment Index Page
+ *
+ * Debug tools index showing session status and links to debug pages.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/test-env/page.tsx
+ * export { TestEnvPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+export function TestEnvPage() {
+  const { data: session, status } = useSession();
+  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;

package/src/pages/test-env/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Test Environment Pages
+ *
+ * Export debug pages for MVP consumers.
+ *
+ * Usage:
+ * ```typescript
+ * // app/test-env/page.tsx
+ * export { TestEnvPage as default } from '@payez/next-mvp/pages/test-env';
+ *
+ * // app/test-env/jwt-inspect/page.tsx
+ * export { JwtInspectPage as default } from '@payez/next-mvp/pages/test-env';
+ *
+ * // app/test-env/refresh-token/page.tsx
+ * export { RefreshTokenPage as default } from '@payez/next-mvp/pages/test-env';
+ *
+ * // app/test-env/emergency-logout/page.tsx
+ * export { EmergencyLogoutPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+
+export { TestEnvPage, TestEnvPage as default } from './TestEnvPage';
+export { JwtInspectPage } from './JwtInspectPage';
+export { RefreshTokenPage } from './RefreshTokenPage';
+export { EmergencyLogoutPage } from './EmergencyLogoutPage';