@payez/next-mvp 3.0.0

package/dist/pages/showcase/ShowcasePage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Feature Showcase Page
+ *
+ * Demonstrates MVP capabilities with interactive examples.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/showcase/page.tsx
+ * export { ShowcasePage as default } from '@payez/next-mvp/pages/showcase';
+ * ```
+ */
+export declare function ShowcasePage(): import("react/jsx-runtime").JSX.Element;
+export default ShowcasePage;

package/dist/pages/showcase/ShowcasePage.js

@@ -0,0 +1,140 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowcasePage = ShowcasePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("next-auth/react");
+const react_2 = require("react");
+const link_1 = __importDefault(require("next/link"));
+// Shared dark mode hook to avoid duplication
+function useDarkMode() {
+    const [isDarkMode, setIsDarkMode] = (0, react_2.useState)(false);
+    (0, react_2.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);
+    }, []);
+    return isDarkMode;
+}
+function FeatureCard({ title, description, status, link, children }) {
+    const isDarkMode = useDarkMode();
+    const content = ((0, jsx_runtime_1.jsxs)("div", { className: `p-6 rounded-lg h-full ${isDarkMode
+            ? 'bg-slate-900 border border-slate-700'
+            : 'bg-white border border-gray-200'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-lg", children: title }), status === 'coming-soon' && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded-full ${isDarkMode ? 'bg-amber-900/50 text-amber-400' : 'bg-amber-100 text-amber-700'}`, children: "Coming Soon" }))] }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm mb-4 ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`, children: description }), children] }));
+    if (link && status === 'available') {
+        return ((0, jsx_runtime_1.jsx)(link_1.default, { href: link, className: "block hover:opacity-90 transition-opacity", children: content }));
+    }
+    return content;
+}
+function DemoButton({ variant, children, onClick }) {
+    const variants = {
+        primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+        secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-slate-700 dark:hover:bg-slate-600 dark:text-white',
+        danger: 'bg-red-600 hover:bg-red-700 text-white',
+    };
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: `px-4 py-2 rounded-lg text-sm font-medium transition-colors ${variants[variant]}`, children: children }));
+}
+/**
+ * Feature Showcase Page
+ *
+ * Demonstrates MVP capabilities with interactive examples.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/showcase/page.tsx
+ * export { ShowcasePage as default } from '@payez/next-mvp/pages/showcase';
+ * ```
+ */
+function ShowcasePage() {
+    const { data: session, status } = (0, react_1.useSession)();
+    const isDarkMode = useDarkMode();
+    const [toastVisible, setToastVisible] = (0, react_2.useState)(false);
+    const [toastMessage, setToastMessage] = (0, react_2.useState)('');
+    const [modalVisible, setModalVisible] = (0, react_2.useState)(false);
+    const toastTimeoutRef = (0, react_2.useRef)(null);
+    const modalRef = (0, react_2.useRef)(null);
+    const previousFocusRef = (0, react_2.useRef)(null);
+    // Type the extended session properly
+    const extSession = session;
+    // Toast with proper cleanup to prevent race conditions
+    const showToast = (0, react_2.useCallback)((message) => {
+        if (toastTimeoutRef.current) {
+            clearTimeout(toastTimeoutRef.current);
+        }
+        setToastMessage(message);
+        setToastVisible(true);
+        toastTimeoutRef.current = setTimeout(() => setToastVisible(false), 3000);
+    }, []);
+    // Cleanup toast timeout on unmount
+    (0, react_2.useEffect)(() => {
+        return () => {
+            if (toastTimeoutRef.current) {
+                clearTimeout(toastTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Modal focus trap and keyboard handling
+    (0, react_2.useEffect)(() => {
+        if (!modalVisible)
+            return;
+        // Store previous focus
+        previousFocusRef.current = document.activeElement;
+        // Focus the modal
+        modalRef.current?.focus();
+        // Handle Escape key
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                setModalVisible(false);
+            }
+            // Focus trap
+            if (e.key === 'Tab' && modalRef.current) {
+                const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                const firstElement = focusableElements[0];
+                const lastElement = focusableElements[focusableElements.length - 1];
+                if (e.shiftKey && document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement?.focus();
+                }
+                else if (!e.shiftKey && document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            // Restore focus when modal closes
+            previousFocusRef.current?.focus();
+        };
+    }, [modalVisible]);
+    // Get status text for screen readers
+    const getStatusText = () => {
+        if (status === 'authenticated')
+            return 'Authenticated';
+        if (status === 'loading')
+            return 'Loading';
+        return 'Not authenticated';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-6xl mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold mb-2", children: "MVP Feature Showcase" }), (0, jsx_runtime_1.jsx)("p", { className: `${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`, children: "Interactive demonstrations of @payez/next-mvp capabilities" })] }), (0, jsx_runtime_1.jsxs)("div", { className: `mb-8 p-4 rounded-lg flex items-center justify-between ${isDarkMode ? 'bg-slate-900 border border-slate-700' : 'bg-white border'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full ${status === 'authenticated' ? 'bg-green-500' :
+                                            status === 'loading' ? 'bg-yellow-500' : 'bg-red-500'}`, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: getStatusText() }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: status === 'authenticated' ? `Logged in as ${session?.user?.email}` :
+                                            status === 'loading' ? 'Loading session...' : 'Not authenticated' })] }), status === 'unauthenticated' && ((0, jsx_runtime_1.jsx)(link_1.default, { href: "/account-auth/login", className: "text-blue-500 hover:text-blue-600 text-sm font-medium", children: "Sign in to test authenticated features" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8", children: [(0, jsx_runtime_1.jsx)(FeatureCard, { title: "Authentication", description: "Complete auth flow with traditional login, OAuth providers, and password recovery.", status: "available", link: "/account-auth/login", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Email/Password" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "OAuth" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "2FA" })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Role-Based Access Control", description: "Fine-grained permissions with roles and access control configuration.", status: "available", children: (0, jsx_runtime_1.jsx)("div", { className: `text-xs p-3 rounded font-mono ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: extSession?.user?.roles ?
+                                        `Roles: ${extSession.user.roles.join(', ')}` :
+                                        'Sign in to view roles' }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Toast Notifications", description: "Non-blocking notifications for user feedback and status updates.", status: "available", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(DemoButton, { variant: "primary", onClick: () => showToast('Success! Action completed.'), children: "Success" }), (0, jsx_runtime_1.jsx)(DemoButton, { variant: "danger", onClick: () => showToast('Error! Something went wrong.'), children: "Error" })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Modal Dialogs", description: "Accessible modal dialogs for confirmations and focused interactions.", status: "available", children: (0, jsx_runtime_1.jsx)(DemoButton, { variant: "secondary", onClick: () => setModalVisible(true), children: "Open Modal" }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Form Validation", description: "Client and server-side validation with real-time feedback and error handling.", status: "available", link: "/account-auth/recovery", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Real-time" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Password Rules" })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Session Management", description: "JWT-based sessions with automatic refresh and secure token handling.", status: "available", link: "/test-env", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1 text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: "Access Token:" }), (0, jsx_runtime_1.jsx)("span", { className: extSession?.accessToken ? 'text-green-500' : 'text-red-500', children: extSession?.accessToken ? 'Valid' : 'None' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: "Refresh Token:" }), (0, jsx_runtime_1.jsx)("span", { className: extSession?.refreshToken ? 'text-green-500' : 'text-red-500', children: extSession?.refreshToken ? 'Valid' : 'None' })] })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "User Profile", description: "Profile management with avatar, display name, and account settings.", status: "available", link: "/profile", children: (0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-3 p-2 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium", children: session?.user?.email?.charAt(0).toUpperCase() || '?' }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm truncate", children: session?.user?.email || 'Not signed in' })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Security Settings", description: "Password management, 2FA configuration, and active session control.", status: "available", link: "/security", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Change Password" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "2FA Setup" })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Theme Support", description: "Light and dark mode with system preference detection and manual toggle.", status: "available", children: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-3", children: (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 rounded text-sm ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: ["Current: ", isDarkMode ? 'Dark' : 'Light'] }) }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Admin Panel", description: "Built-in admin interface for user management, roles, and system configuration.", status: "coming-soon", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "User Management" }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-1 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Schema Browser" })] }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "Data Tables", description: "Sortable, filterable, paginated tables with column customization.", status: "coming-soon", children: (0, jsx_runtime_1.jsx)("div", { className: `text-xs p-3 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "Sort, filter, paginate, export" }) }), (0, jsx_runtime_1.jsx)(FeatureCard, { title: "API Client", description: "Type-safe API client with automatic auth headers and error handling.", status: "available", children: (0, jsx_runtime_1.jsx)("div", { className: `text-xs p-3 rounded font-mono ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: "fetchWithSession(url, options)" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-6 rounded-lg ${isDarkMode ? 'bg-slate-900 border border-slate-700' : 'bg-white border'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-semibold text-lg mb-4", children: "Quick Links" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-3", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: "/test-env", className: `px-4 py-2 rounded-lg text-sm ${isDarkMode ? 'bg-slate-800 hover:bg-slate-700' : 'bg-gray-100 hover:bg-gray-200'}`, children: "Debug Tools" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "/test-env/jwt-inspect", className: `px-4 py-2 rounded-lg text-sm ${isDarkMode ? 'bg-slate-800 hover:bg-slate-700' : 'bg-gray-100 hover:bg-gray-200'}`, children: "JWT Inspector" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "/account-auth/login", className: `px-4 py-2 rounded-lg text-sm ${isDarkMode ? 'bg-slate-800 hover:bg-slate-700' : 'bg-gray-100 hover:bg-gray-200'}`, children: "Login Page" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "/profile", className: `px-4 py-2 rounded-lg text-sm ${isDarkMode ? 'bg-slate-800 hover:bg-slate-700' : 'bg-gray-100 hover:bg-gray-200'}`, children: "Profile" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: "/security", className: `px-4 py-2 rounded-lg text-sm ${isDarkMode ? 'bg-slate-800 hover:bg-slate-700' : 'bg-gray-100 hover:bg-gray-200'}`, children: "Security Settings" })] })] })] }), toastVisible && ((0, jsx_runtime_1.jsx)("div", { role: "alert", "aria-live": "polite", className: `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg transition-opacity ${isDarkMode ? 'bg-slate-800 text-white' : 'bg-gray-900 text-white'}`, children: toastMessage })), modalVisible && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50", onClick: (e) => {
+                    if (e.target === e.currentTarget)
+                        setModalVisible(false);
+                }, children: (0, jsx_runtime_1.jsxs)("div", { ref: modalRef, role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", tabIndex: -1, className: `max-w-md w-full p-6 rounded-lg ${isDarkMode ? 'bg-slate-900' : 'bg-white'}`, children: [(0, jsx_runtime_1.jsx)("h3", { id: "modal-title", className: "text-xl font-semibold mb-4", children: "Example Modal" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-6 ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`, children: "This is a demonstration of an accessible modal dialog. Press Escape to close, or use Tab to navigate between buttons." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)(DemoButton, { variant: "secondary", onClick: () => setModalVisible(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(DemoButton, { variant: "primary", onClick: () => {
+                                        setModalVisible(false);
+                                        showToast('Action confirmed!');
+                                    }, children: "Confirm" })] })] }) }))] }));
+}
+exports.default = ShowcasePage;

package/dist/pages/showcase/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Feature Showcase Page
+ *
+ * Export showcase page for MVP consumers.
+ *
+ * Usage:
+ * ```typescript
+ * // app/showcase/page.tsx
+ * export { ShowcasePage as default } from '@payez/next-mvp/pages/showcase';
+ * ```
+ */
+export { ShowcasePage, ShowcasePage as default } from './ShowcasePage';

package/dist/pages/showcase/index.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * Feature Showcase Page
+ *
+ * Export showcase page for MVP consumers.
+ *
+ * Usage:
+ * ```typescript
+ * // app/showcase/page.tsx
+ * export { ShowcasePage as default } from '@payez/next-mvp/pages/showcase';
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.ShowcasePage = void 0;
+var ShowcasePage_1 = require("./ShowcasePage");
+Object.defineProperty(exports, "ShowcasePage", { enumerable: true, get: function () { return ShowcasePage_1.ShowcasePage; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ShowcasePage_1.ShowcasePage; } });

package/dist/pages/test-env/EmergencyLogoutPage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Emergency Logout Page
+ *
+ * Nuclear option for clearing auth state when things go wrong.
+ * Clears cookies, localStorage, and forces NextAuth signout.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/test-env/emergency-logout/page.tsx
+ * export { EmergencyLogoutPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+export declare function EmergencyLogoutPage(): import("react/jsx-runtime").JSX.Element;
+export default EmergencyLogoutPage;

package/dist/pages/test-env/EmergencyLogoutPage.js

@@ -0,0 +1,98 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmergencyLogoutPage = EmergencyLogoutPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("next-auth/react");
+const react_2 = require("react");
+/**
+ * Emergency Logout Page
+ *
+ * Nuclear option for clearing auth state when things go wrong.
+ * Clears cookies, localStorage, and forces NextAuth signout.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/test-env/emergency-logout/page.tsx
+ * export { EmergencyLogoutPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+function EmergencyLogoutPage() {
+    const { status } = (0, react_1.useSession)();
+    const [isDarkMode, setIsDarkMode] = (0, react_2.useState)(false);
+    const [isLoggingOut, setIsLoggingOut] = (0, react_2.useState)(false);
+    const [logoutComplete, setLogoutComplete] = (0, react_2.useState)(false);
+    const [logs, setLogs] = (0, react_2.useState)([]);
+    (0, react_2.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 addLog = (message) => {
+        setLogs(prev => [...prev, `[${new Date().toISOString().substring(11, 19)}] ${message}`]);
+    };
+    const handleEmergencyLogout = async () => {
+        setIsLoggingOut(true);
+        setLogs([]);
+        try {
+            // Step 1: Clear all cookies
+            addLog('Clearing cookies...');
+            document.cookie.split(';').forEach(cookie => {
+                const name = cookie.split('=')[0].trim();
+                document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
+                document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=${window.location.hostname}`;
+            });
+            addLog('Cookies cleared');
+            // Step 2: Clear localStorage
+            addLog('Clearing localStorage...');
+            const keysToRemove = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key)
+                    keysToRemove.push(key);
+            }
+            keysToRemove.forEach(key => {
+                localStorage.removeItem(key);
+                addLog(`  Removed: ${key}`);
+            });
+            addLog(`localStorage cleared (${keysToRemove.length} items)`);
+            // Step 3: Clear sessionStorage
+            addLog('Clearing sessionStorage...');
+            sessionStorage.clear();
+            addLog('sessionStorage cleared');
+            // Step 4: Call NextAuth signOut
+            addLog('Calling NextAuth signOut...');
+            await (0, react_1.signOut)({ redirect: false });
+            addLog('NextAuth signOut complete');
+            // Step 5: Clear any auth-related fetch cache
+            addLog('Invalidating caches...');
+            if ('caches' in window) {
+                const cacheNames = await caches.keys();
+                await Promise.all(cacheNames.map(name => caches.delete(name)));
+                addLog(`Cleared ${cacheNames.length} caches`);
+            }
+            addLog('Emergency logout complete!');
+            setLogoutComplete(true);
+        }
+        catch (error) {
+            addLog(`ERROR: ${error instanceof Error ? error.message : String(error)}`);
+        }
+        finally {
+            setIsLoggingOut(false);
+        }
+    };
+    const handleRedirectHome = () => {
+        window.location.href = '/';
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl mx-auto", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold mb-2", children: "Emergency Logout" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-6 ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`, children: "Nuclear option for when auth gets into a bad state. Clears everything." }), (0, jsx_runtime_1.jsxs)("div", { className: `mb-6 p-4 rounded-lg ${isDarkMode ? 'bg-slate-900' : 'bg-white border'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-semibold mb-2", children: "Current Status" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `inline-block w-3 h-3 rounded-full ${status === 'authenticated' ? 'bg-green-500' :
+                                        status === 'loading' ? 'bg-yellow-500' : 'bg-red-500'}` }), (0, jsx_runtime_1.jsx)("span", { className: "capitalize", children: status })] })] }), !logoutComplete ? ((0, jsx_runtime_1.jsx)("button", { onClick: handleEmergencyLogout, disabled: isLoggingOut, className: `w-full py-3 px-4 rounded-lg font-semibold transition-colors ${isLoggingOut
+                        ? 'bg-gray-500 cursor-not-allowed'
+                        : 'bg-red-600 hover:bg-red-700 text-white'}`, children: isLoggingOut ? 'Logging out...' : 'Emergency Logout' })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-green-900/30 border border-green-700' : 'bg-green-50 border border-green-200'}`, children: (0, jsx_runtime_1.jsx)("p", { className: `font-semibold ${isDarkMode ? 'text-green-400' : 'text-green-700'}`, children: "Logout complete! All auth state has been cleared." }) }), (0, jsx_runtime_1.jsx)("button", { onClick: handleRedirectHome, className: "w-full py-3 px-4 rounded-lg font-semibold bg-blue-600 hover:bg-blue-700 text-white transition-colors", children: "Go to Home Page" })] })), logs.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `mt-6 p-4 rounded-lg font-mono text-sm ${isDarkMode ? 'bg-slate-900' : 'bg-gray-100'}`, children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold mb-2", children: "Log" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1", children: logs.map((log, i) => ((0, jsx_runtime_1.jsx)("div", { className: log.includes('ERROR') ? 'text-red-500' : isDarkMode ? 'text-gray-300' : 'text-gray-700', children: log }, i))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: `mt-8 p-4 rounded-lg ${isDarkMode ? 'bg-slate-900' : 'bg-white border'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-semibold mb-2", children: "What this does" }), (0, jsx_runtime_1.jsxs)("ul", { className: `list-disc list-inside space-y-1 ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`, children: [(0, jsx_runtime_1.jsx)("li", { children: "Clears all browser cookies" }), (0, jsx_runtime_1.jsx)("li", { children: "Clears localStorage (theme, preferences, etc.)" }), (0, jsx_runtime_1.jsx)("li", { children: "Clears sessionStorage" }), (0, jsx_runtime_1.jsx)("li", { children: "Calls NextAuth signOut" }), (0, jsx_runtime_1.jsx)("li", { children: "Invalidates browser caches" })] })] })] }) }));
+}
+exports.default = EmergencyLogoutPage;

package/dist/pages/test-env/JwtInspectPage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Session Inspector Page
+ *
+ * Debug page for inspecting session data from Redis.
+ * Shows user info, roles, 2FA status, and tokens.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/test-env/jwt-inspect/page.tsx
+ * export { JwtInspectPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+export declare function JwtInspectPage(): import("react/jsx-runtime").JSX.Element;
+export default JwtInspectPage;

package/dist/pages/test-env/JwtInspectPage.js

@@ -0,0 +1,114 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JwtInspectPage = JwtInspectPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("next-auth/react");
+const react_2 = require("react");
+// Decode JWT header (contains kid, alg, typ)
+function decodeJwtHeader(token) {
+    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) {
+    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;
+    }
+}
+/**
+ * Session Inspector Page
+ *
+ * Debug page for inspecting session data from Redis.
+ * Shows user info, roles, 2FA status, and tokens.
+ *
+ * Usage in consuming app:
+ * ```typescript
+ * // app/test-env/jwt-inspect/page.tsx
+ * export { JwtInspectPage as default } from '@payez/next-mvp/pages/test-env';
+ * ```
+ */
+function JwtInspectPage() {
+    const { data: session, status } = (0, react_1.useSession)();
+    const [copied, setCopied] = (0, react_2.useState)(null);
+    const [isDarkMode, setIsDarkMode] = (0, react_2.useState)(false);
+    const [jwtHeader, setJwtHeader] = (0, react_2.useState)(null);
+    const [jwtPayload, setJwtPayload] = (0, react_2.useState)(null);
+    // Detect dark mode
+    (0, react_2.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);
+    }, []);
+    // Decode JWT header and payload when accessToken changes
+    (0, react_2.useEffect)(() => {
+        const ext = session;
+        if (ext?.accessToken) {
+            setJwtHeader(decodeJwtHeader(ext.accessToken));
+            setJwtPayload(decodeJwtPayload(ext.accessToken));
+        }
+    }, [session]);
+    const copyToClipboard = (text, label) => {
+        navigator.clipboard.writeText(text);
+        setCopied(label);
+        setTimeout(() => setCopied(null), 2000);
+    };
+    if (status === 'loading') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`, children: "Loading session..." }));
+    }
+    if (status === 'unauthenticated') {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-red-900/30 border border-red-800' : 'bg-red-50 border border-red-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-2", children: "Not Authenticated" }), (0, jsx_runtime_1.jsx)("p", { children: "Please log in to inspect session data." })] }) }));
+    }
+    // Extended session with all custom fields
+    const ext = session;
+    const user = ext?.user || {};
+    // 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 ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen p-8 ${isDarkMode ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900'}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-4xl mx-auto space-y-6", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold", children: "Session Inspector" }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${labelClass}`, children: "Session data from Redis (via NextAuth session callback)" }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${cardClass}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "User Identity" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsx)(InfoRow, { label: "User ID", value: user.id, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Email", value: user.email, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Name", value: user.name, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "OAuth Provider", value: user.oauthProvider, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "IDP Client ID", value: user.idpClientId, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Merchant ID", value: user.merchantId, labelClass: labelClass, valueClass: valueClass })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-purple-900/30 border border-purple-700' : 'bg-purple-50 border border-purple-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "Roles" }), user.roles && user.roles.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => ((0, jsx_runtime_1.jsx)("span", { className: `px-3 py-1 rounded-full text-sm font-medium ${isDarkMode ? 'bg-purple-800 text-purple-100' : 'bg-purple-200 text-purple-800'}`, children: role }, role))) })) : ((0, jsx_runtime_1.jsx)("p", { className: labelClass, children: "No roles assigned" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-yellow-900/30 border border-yellow-700' : 'bg-yellow-50 border border-yellow-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "2FA Status" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "2FA Verified:" }), ' ', (0, jsx_runtime_1.jsx)(StatusBadge, { value: user.twoFactorSessionVerified, trueText: "Yes", falseText: "No", isDarkMode: isDarkMode })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "Requires 2FA:" }), ' ', (0, jsx_runtime_1.jsx)(StatusBadge, { value: user.requiresTwoFactor, trueText: "Yes", falseText: "No", isDarkMode: isDarkMode, invertColors: true })] }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Auth Methods (AMR)", value: user.authenticationMethods?.join(', '), labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Auth Level (ACR)", value: user.authenticationLevel, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "MFA Completed At", value: user.mfaCompletedAt ? new Date(user.mfaCompletedAt).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "MFA Expires At", value: user.mfaExpiresAt ? new Date(user.mfaExpiresAt).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-blue-900/30 border border-blue-700' : 'bg-blue-50 border border-blue-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "Tokens" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "Session Token (Redis Key):" }), ext.sessionToken && ((0, jsx_runtime_1.jsx)(CopyButton, { onClick: () => copyToClipboard(ext.sessionToken, 'session'), copied: copied === 'session', isDarkMode: isDarkMode }))] }), (0, jsx_runtime_1.jsx)("code", { className: `block p-2 rounded text-xs break-all ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: ext.sessionToken || 'N/A' })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "Access Token (IDP):" }), ext.accessToken && ((0, jsx_runtime_1.jsx)(CopyButton, { onClick: () => copyToClipboard(ext.accessToken, 'access'), copied: copied === 'access', isDarkMode: isDarkMode }))] }), (0, jsx_runtime_1.jsx)("code", { className: `block p-2 rounded text-xs break-all max-h-24 overflow-auto ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: ext.accessToken || 'N/A' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "Has Refresh Token:" }), ' ', (0, jsx_runtime_1.jsx)(StatusBadge, { value: !!ext.refreshToken, trueText: "Yes", falseText: "No", isDarkMode: isDarkMode })] }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Access Token Expires", value: ext.accessTokenExpires ? new Date(ext.accessTokenExpires).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass })] })] })] }), jwtHeader && ((0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-orange-900/30 border border-orange-700' : 'bg-orange-50 border border-orange-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "JWT Header" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsx)(InfoRow, { label: "Algorithm (alg)", value: jwtHeader.alg, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Type (typ)", value: jwtHeader.typ, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: labelClass, children: "Key ID (kid):" }), ' ', (0, jsx_runtime_1.jsx)("span", { className: `font-mono ${jwtHeader.kid ? (isDarkMode ? 'text-green-400' : 'text-green-600') : (isDarkMode ? 'text-red-400' : 'text-red-600')}`, children: jwtHeader.kid || 'NOT PRESENT' })] }), Object.entries(jwtHeader)
+                                    .filter(([key]) => !['alg', 'typ', 'kid'].includes(key))
+                                    .map(([key, value]) => ((0, jsx_runtime_1.jsx)(InfoRow, { label: key, value: typeof value === 'object' ? JSON.stringify(value) : String(value), labelClass: labelClass, valueClass: valueClass }, key)))] })] })), jwtPayload && ((0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${isDarkMode ? 'bg-green-900/30 border border-green-700' : 'bg-green-50 border border-green-200'}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "JWT Payload Claims" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsx)(InfoRow, { label: "Subject (sub)", value: jwtPayload.sub, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Issuer (iss)", value: jwtPayload.iss, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Audience (aud)", value: Array.isArray(jwtPayload.aud) ? jwtPayload.aud.join(', ') : jwtPayload.aud, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Client ID", value: jwtPayload.client_id, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Expires (exp)", value: jwtPayload.exp ? new Date(jwtPayload.exp * 1000).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Issued At (iat)", value: jwtPayload.iat ? new Date(jwtPayload.iat * 1000).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "AMR (Auth Methods)", value: Array.isArray(jwtPayload.amr) ? jwtPayload.amr.join(', ') : jwtPayload.amr, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "ACR (Auth Context)", value: jwtPayload.acr, labelClass: labelClass, valueClass: valueClass })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: `p-4 rounded-lg ${cardClass}`, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold mb-4", children: "Session Metadata" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 text-sm", children: [(0, jsx_runtime_1.jsx)(InfoRow, { label: "Session Expires", value: session?.expires ? new Date(session.expires).toISOString() : undefined, labelClass: labelClass, valueClass: valueClass }), (0, jsx_runtime_1.jsx)(InfoRow, { label: "Error", value: ext.error, labelClass: labelClass, valueClass: ext.error ? 'text-red-500' : valueClass })] })] }), (0, jsx_runtime_1.jsxs)("details", { className: `p-4 rounded-lg ${cardClass}`, children: [(0, jsx_runtime_1.jsx)("summary", { className: "font-semibold cursor-pointer", children: "Raw Session Data (Click to expand)" }), (0, jsx_runtime_1.jsx)("pre", { className: `mt-4 text-xs overflow-auto p-3 rounded ${isDarkMode ? 'bg-slate-800' : 'bg-gray-100'}`, children: JSON.stringify(session, null, 2) })] })] }) }));
+}
+// Helper Components
+function InfoRow({ label, value, labelClass, valueClass, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: labelClass, children: [label, ":"] }), ' ', (0, jsx_runtime_1.jsx)("span", { className: valueClass, children: value || 'N/A' })] }));
+}
+function StatusBadge({ value, trueText, falseText, isDarkMode, invertColors = false, }) {
+    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 ((0, jsx_runtime_1.jsx)("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${colorClass}`, children: value ? trueText : falseText }));
+}
+function CopyButton({ onClick, copied, isDarkMode, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: `px-2 py-1 rounded text-xs ${copied
+            ? 'bg-green-600 text-white'
+            : isDarkMode
+                ? 'bg-slate-700 hover:bg-slate-600 text-white'
+                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'}`, children: copied ? 'Copied!' : 'Copy' }));
+}
+exports.default = JwtInspectPage;

package/dist/pages/test-env/RefreshTokenPage.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 declare function RefreshTokenPage(): import("react/jsx-runtime").JSX.Element;
+export default RefreshTokenPage;

package/dist/pages/test-env/RefreshTokenPage.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RefreshTokenPage = RefreshTokenPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("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';
+ * ```
+ */
+function RefreshTokenPage() {
+    const { data: session, update } = (0, react_2.useSession)();
+    const [result, setResult] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [sessionDetails, setSessionDetails] = (0, react_1.useState)(null);
+    // Fetch detailed session info on mount
+    (0, react_1.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) {
+            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) {
+            setResult({ error: e.message });
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    const formatExpiry = (exp) => {
+        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 ((0, jsx_runtime_1.jsxs)("div", { className: "p-8 max-w-2xl mx-auto bg-gray-900 min-h-screen text-white", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold mb-4", children: "Refresh Token Test" }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-6 rounded border border-blue-500 bg-blue-900/30 p-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "font-semibold mb-2 text-blue-300", children: "Current Session" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm space-y-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: "User:" }), " ", session?.user?.email || "Not logged in"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: "2FA Complete:" }), " ", String(session?.user?.twoFactorSessionVerified ?? "unknown")] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: "Access Token:" }), " ", sessionDetails?.accessToken ? `${sessionDetails.accessToken.substring(0, 40)}...` : "N/A"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: "Refresh Token:" }), " ", sessionDetails?.refreshToken ? `${sessionDetails.refreshToken.substring(0, 40)}...` : "N/A"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-400", children: "Access Expires:" }), " ", formatExpiry(sessionDetails?.accessTokenExpires)] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50", onClick: handleRefresh, disabled: loading, children: loading ? "Refreshing..." : "Test Refresh Token" }), (0, jsx_runtime_1.jsx)("button", { className: "bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded disabled:opacity-50", onClick: handleForceExpire, disabled: loading, children: "Force Expire Token" }), (0, jsx_runtime_1.jsx)("button", { className: "bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded", onClick: () => window.location.reload(), children: "Reload Page" })] }), result && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded border border-gray-600 bg-gray-800 p-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold mb-2 text-gray-300", children: "Result:" }), (0, jsx_runtime_1.jsx)("pre", { className: "text-xs overflow-x-auto whitespace-pre-wrap text-green-400", children: JSON.stringify(result, null, 2) })] })), (0, jsx_runtime_1.jsxs)("details", { className: "mt-4", children: [(0, jsx_runtime_1.jsx)("summary", { className: "cursor-pointer text-gray-400 hover:text-white", children: "Raw Session Details" }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-2 text-xs bg-gray-800 p-2 rounded overflow-x-auto text-gray-300", children: JSON.stringify(sessionDetails, null, 2) })] })] }));
+}
+exports.default = RefreshTokenPage;

package/dist/pages/test-env/TestEnvPage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 declare function TestEnvPage(): import("react/jsx-runtime").JSX.Element;
+export default TestEnvPage;