@payez/next-mvp 3.9.0 → 4.0.0

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

@@ -1,155 +1,157 @@
-"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;
+"use client";
+import React, { useState, useEffect } from "react";
+import { authClient } from '../../client/better-auth-client';
+
+/**
+ * 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 } = authClient.useSession();
+  // TODO: Better Auth session refresh
+  const update = async () => { /* no-op: Better Auth handles session refresh internally */ };
+  const [result, setResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [sessionDetails, setSessionDetails] = useState<any>(null);
+
+  // Fetch detailed session info on mount
+  useEffect(() => {
+    async function fetchSessionDetails() {
+      try {
+        const res = await fetch("/api/auth/session", { credentials: "include" });
+        const data = await res.json();
+        setSessionDetails(data);
+      } catch (e) {
+        console.error("Failed to fetch session details", e);
+      }
+    }
+    fetchSessionDetails();
+  }, [result]); // Refetch after refresh
+
+  async function handleRefresh() {
+    setLoading(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/auth/refresh", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+      });
+      const data = await res.json();
+      setResult({ status: res.status, ...data });
+      // Update NextAuth session
+      await update();
+    } catch (e: any) {
+      setResult({ error: e.message });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleForceExpire() {
+    setLoading(true);
+    setResult(null);
+    try {
+      const res = await fetch("/api/test/force-expire", {
+        method: "POST",
+        credentials: "include",
+      });
+      const data = await res.json();
+      setResult({ action: "force_expire", status: res.status, ...data });
+    } catch (e: any) {
+      setResult({ error: e.message });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const formatExpiry = (exp: number | string | undefined) => {
+    if (!exp) return "N/A";
+    const date = new Date(typeof exp === "string" ? exp : exp);
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffSecs = Math.floor((diffMs % 60000) / 1000);
+    return `${date.toLocaleTimeString()} (${diffMins}m ${diffSecs}s remaining)`;
+  };
+
+  return (
+    <div className="p-8 max-w-2xl mx-auto bg-gray-900 min-h-screen text-white">
+      <h1 className="text-2xl font-bold mb-4">Refresh Token Test</h1>
+
+      {/* Session Info */}
+      <div className="mb-6 rounded border border-blue-500 bg-blue-900/30 p-4">
+        <h2 className="font-semibold mb-2 text-blue-300">Current Session</h2>
+        <div className="text-sm space-y-1 font-mono">
+          <div><span className="text-gray-400">User:</span> {session?.user?.email || "Not logged in"}</div>
+          <div><span className="text-gray-400">2FA Complete:</span> {String((session?.user as any)?.twoFactorSessionVerified ?? "unknown")}</div>
+          <div>
+            <span className="text-gray-400">Access Token:</span>{" "}
+            {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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useSession } from 'next-auth/react';
+import { authClient } from '../../client/better-auth-client';
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 
@@ -16,7 +16,9 @@ import Link from 'next/link';
  * ```
  */
 export function TestEnvPage() {
-  const { data: session, status } = useSession();
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {

package/src/pages/verify-code/page.tsx

@@ -32,7 +32,7 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useSession, signOut, getSession } from 'next-auth/react';
+import { authClient } from '../../client/better-auth-client';
 import { Suspense } from 'react';
 import { useColors } from '../../theme/useTheme';
 
@@ -54,7 +54,11 @@ function VerifyCodeForm() {
   const searchParams = useSearchParams();
   const callbackUrl = searchParams?.get('callbackUrl') || '/dashboard';
 
-  const { data: session, status, update: updateSession } = useSession();
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  // TODO: Better Auth session refresh
+  const updateSession = async () => { return session; };
   const colors = useColors();
 
   // Method selection
@@ -146,7 +150,7 @@ function VerifyCodeForm() {
           // Session expired - redirect to login
           setError('Your session has expired. Redirecting to login...');
           setTimeout(async () => {
-            await signOut({ redirect: false });
+            await authClient.signOut();
             const safeCallback = callbackUrl.startsWith('/account-auth/') ? '/dashboard' : callbackUrl;
             router.push(`/account-auth/login?callbackUrl=${encodeURIComponent(safeCallback)}`);
           }, 1200);
@@ -197,7 +201,7 @@ function VerifyCodeForm() {
           if (data.valid === false || data.mfaExpired === true) {
             setError('Your session has expired. Redirecting to login...');
             setTimeout(async () => {
-              await signOut({ redirect: false });
+              await authClient.signOut();
               if (typeof window !== 'undefined') {
                 sessionStorage.removeItem(VERIFY_IN_PROGRESS_KEY);
               }
@@ -243,7 +247,7 @@ function VerifyCodeForm() {
         );
         
         setTimeout(async () => {
-          await signOut({ redirect: false });
+          await authClient.signOut();
           if (typeof window !== 'undefined') {
             sessionStorage.removeItem(VERIFY_IN_PROGRESS_KEY);
           }
@@ -318,7 +322,7 @@ function VerifyCodeForm() {
         );
         
         setTimeout(async () => {
-          await signOut({ redirect: false });
+          await authClient.signOut();
           if (typeof window !== 'undefined') {
             sessionStorage.removeItem(VERIFY_IN_PROGRESS_KEY);
           }

package/src/routes/auth/logout.ts

@@ -15,7 +15,7 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { getToken } from 'next-auth/jwt';
+import { getSession } from '../../server/auth';
 import { deleteSession } from '../../lib/session-store';
 import {
   getSessionCookieName,
@@ -23,39 +23,22 @@ import {
   getCsrfCookieName,
   getSecureCsrfCookieName,
   getCallbackUrlCookieName,
-  getJwtCookieName
 } from '../../lib/app-slug';
-import { getIDPClientConfig } from '../../lib/idp-client-config';
 import { siteEvents, getClientIp } from '../../lib/site-logger';
 
-async function getConfig() {
-  const idpConfig = await getIDPClientConfig();
-  const idpBaseUrl = process.env.IDP_URL;
-  if (!idpBaseUrl) {
-    throw new Error('[IDP_URL] FATAL: IDP_URL environment variable is REQUIRED.');
-  }
-  return {
-    nextAuthSecret: idpConfig.nextAuthSecret || '',
-    idpBaseUrl,
-    clientId: process.env.CLIENT_ID || process.env.NEXT_PUBLIC_IDP_CLIENT_ID || '',
-  };
-}
-
 /**
  * POST /api/auth/logout - Sign out and clean up session
  *
  * Performs complete logout:
  * 1. Revokes tokens at IDP (if refresh token available)
  * 2. Deletes session from store
- * 3. Clears NextAuth session cookie
+ * 3. Clears session cookies
  */
 export async function POST(req: NextRequest) {
-  const { nextAuthSecret, idpBaseUrl, clientId } = await getConfig();
-
   try {
-    const token = await getToken({ req, secret: nextAuthSecret, cookieName: getJwtCookieName() });
+    const session = await getSession(req);
 
-    if (!token) {
+    if (!session) {
       // Already logged out
       return NextResponse.json({
         success: true,
@@ -63,8 +46,7 @@ export async function POST(req: NextRequest) {
       });
     }
 
-    // Support both field names: sessionToken (auth.ts JWT) and redisSessionId (legacy)
-    const sessionId = (token as any).sessionToken || (token as any).redisSessionId;
+    const sessionId = session.session?.token;
 
     // Delete session from store (this also removes the refresh token)
     if (sessionId) {
@@ -77,7 +59,7 @@ export async function POST(req: NextRequest) {
     }
 
     // Log logout event (fire-and-forget)
-    const userId = (token as any).sub || (token as any).idpUserId;
+    const userId = session.user?.id;
     if (userId) {
       siteEvents.logout({
         user_id: userId,
@@ -89,7 +71,7 @@ export async function POST(req: NextRequest) {
       });
     }
 
-    // Build response that clears NextAuth cookies
+    // Build response that clears session cookies
     const response = NextResponse.json({
       success: true,
       message: 'Logged out successfully'

package/src/routes/auth/nextauth.ts

@@ -1,71 +1,45 @@
-/**
- * Ready-to-Use NextAuth Route Handler
- *
- * Provides a pre-configured NextAuth handler that uses dynamic OAuth providers
- * loaded from IDP at startup via getAuthOptions().
- *
- * @version 2.2.0 - Dynamic provider loading from IDP
- * @since auth-ready-v2-hotfix
- */
-
-import NextAuth from 'next-auth';
-import { authOptions, getAuthOptions } from '../../auth/auth-options';
-
-// Cached handler - built once with dynamic providers
-let cachedHandler: ReturnType<typeof NextAuth> | null = null;
-let handlerPromise: Promise<ReturnType<typeof NextAuth>> | null = null;
-
-/**
- * Get or build the NextAuth handler with dynamic providers.
- * Uses caching to avoid rebuilding on every request.
- */
-async function getHandler(): Promise<ReturnType<typeof NextAuth>> {
-    // Return cached if available
-    if (cachedHandler) {
-        return cachedHandler;
-    }
-
-    // Prevent concurrent builds
-    if (handlerPromise) {
-        return handlerPromise;
-    }
-
-    handlerPromise = (async () => {
-        try {
-            // Try to get dynamic auth options from IDP
-            const options = await getAuthOptions();
-            console.log('[NEXTAUTH_ROUTE] Built handler with dynamic providers');
-            cachedHandler = NextAuth(options);
-            return cachedHandler;
-        } catch (error) {
-            // Fallback to static options if IDP unavailable
-            console.warn('[NEXTAUTH_ROUTE] Failed to get dynamic options, using static fallback:', {
-                error: error instanceof Error ? error.message : String(error)
-            });
-            cachedHandler = NextAuth(authOptions);
-            return cachedHandler;
-        } finally {
-            handlerPromise = null;
-        }
-    })();
-
-    return handlerPromise;
-}
-
-/**
- * GET handler for NextAuth
- * Uses async factory to get dynamic providers from IDP
- */
-export async function GET(request: Request, context: any) {
-    const handler = await getHandler();
-    return handler(request, context);
-}
-
-/**
- * POST handler for NextAuth
- * Uses async factory to get dynamic providers from IDP
- */
-export async function POST(request: Request, context: any) {
-    const handler = await getHandler();
-    return handler(request, context);
-}
+/**
+ * Ready-to-Use Auth Route Handler (Better Auth)
+ *
+ * Provides a pre-configured Better Auth handler that uses dynamic OAuth providers
+ * loaded from IDP at startup.
+ *
+ * Replaces the former NextAuth handler. The file name is kept as nextauth.ts
+ * to avoid breaking re-exports in routes/auth/index.ts.
+ *
+ * @version 4.0.0 - Better Auth migration
+ * @since better-auth-4.0
+ */
+
+import { getBetterAuthHandler } from '../../auth/better-auth';
+import { NextResponse } from 'next/server';
+
+/**
+ * GET handler for auth routes
+ * Delegates to Better Auth instance.
+ */
+export async function GET(request: Request) {
+  const handler = await getBetterAuthHandler();
+  if (!handler) {
+    return NextResponse.json(
+      { error: 'Auth handler not available' },
+      { status: 503 }
+    );
+  }
+  return handler.GET(request);
+}
+
+/**
+ * POST handler for auth routes
+ * Delegates to Better Auth instance.
+ */
+export async function POST(request: Request) {
+  const handler = await getBetterAuthHandler();
+  if (!handler) {
+    return NextResponse.json(
+      { error: 'Auth handler not available' },
+      { status: 503 }
+    );
+  }
+  return handler.POST(request);
+}