@payez/next-mvp 3.9.1 → 4.0.1

package/src/components/admin/VibeAdminLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { useSession } from 'next-auth/react';
+import { authClient } from '../../client/better-auth-client';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import Link from 'next/link';
@@ -50,7 +50,9 @@ export function VibeAdminLayout({
   isDarkMode: isDarkModeProp,
   adminRole = 'vibe_app_admin',
 }: VibeAdminLayoutProps) {
-  const { data: session, status } = useSession();
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
   const router = useRouter();
   const adminConfig = useVibeAdmin();
   

package/src/config/logger.ts

@@ -45,7 +45,7 @@ const createLogger = (): any => {
 };
 
 let logger: any;
-if (!globalThis.process?.browser) {
+if (!(globalThis.process as any)?.browser) {
   logger = createLogger();
   addConfigWatcher((updatedConfig) => { loggingConfig = updatedConfig; if (logger && logger.level !== undefined) { logger.level = loggingConfig.logLevel; } });
 } else { logger = console; }

package/src/hooks/useAuth.ts

@@ -1,115 +1,117 @@
-'use client';
-
-/**
- * ⚠️ WARNING: This hook cannot be used directly from the @payez/next-mvp package!
- *
- * @deprecated Import this hook from your local app instead
- *
- * **Why?** React Context (SessionProvider) cannot cross package boundaries in file:// linked packages.
- *
- * **Solution:** Create a local version in your app (e.g., src/hooks/useAuth.ts) that imports standardizedApi:
- *
- * @example
- * ```typescript
- * // src/hooks/useAuth.ts (YOUR APP)
- * 'use client';
- * import { useSession } from 'next-auth/react';
- * import { standardizedApi } from '@payez/next-mvp/lib/standardized-client-api';
- *
- * export function useAuth() {
- *   const { data: session } = useSession(); // Works in your app context
- *   // ... implementation
- * }
- * ```
- *
- * @see {@link https://github.com/payez/next-mvp/blob/main/docs/centralized-auth-api-pattern.md#why-local-hooks-for-auth Complete documentation}
- */
-
-import { useSession, signOut } from 'next-auth/react';
-import { useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import { standardizedApi, ApiResult } from '../lib/standardized-client-api';
-
-// Custom session type matching NextAuth structure
-export interface CustomSession {
-  user: {
-    id: string;
-    email: string;
-    roles?: string[];
-    twoFactorMethod?: string;
-    twoFactorSessionVerified?: boolean;
-    requiresTwoFactor?: boolean;
-  };
-  accessToken?: string;
-  refreshToken?: string;
-  expires: string;
-  error?: string;
-}
-
-export interface UseAuthResult {
-  session: CustomSession | null;
-  status: 'loading' | 'authenticated' | 'unauthenticated';
-  isLoading: boolean;
-  isAuthenticated: boolean;
-  // API helper that automatically includes the auth token
-  apiCall: <T>(url: string, method?: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: any) => Promise<ApiResult<T>>;
-}
-
-export function useAuth(): UseAuthResult {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-
-  const isLoading = status === 'loading';
-  const isAuthenticated = status === 'authenticated' && !!session?.accessToken;
-
-  // Handle sign out with redirect
-  const handleSignOut = useCallback(async () => {
-    await signOut({ redirect: false });
-    router.push('/account-auth/login?error=SessionExpired');
-  }, [router]);
-
-  // API helper that automatically includes the auth token and uses standardized API
-  const apiCall = useCallback(
-    async <T>(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET', data?: any): Promise<ApiResult<T>> => {
-      if (!session?.accessToken) {
-        console.error('[useAuth] No access token available');
-        throw new Error('Not authenticated');
-      }
-
-      try {
-        // Use standardized API which handles token refresh and validates response format
-        switch (method) {
-          case 'GET':
-            return await standardizedApi.get<T>(url, session.accessToken!);
-          case 'POST':
-            return await standardizedApi.post<T>(url, data, session.accessToken!);
-          case 'PUT':
-            return await standardizedApi.put<T>(url, data);
-          case 'DELETE':
-            return await standardizedApi.delete<T>(url);
-          default:
-            throw new Error(`Unsupported method: ${method}`);
-        }
-      } catch (error) {
-        console.error('[useAuth] API call failed:', error);
-
-        // standardizedApi handles token refresh internally, but if we still get auth errors, sign out
-        if (error instanceof Error && error.message.includes('Authentication failed')) {
-          console.warn('[useAuth] Authentication failed, signing out...');
-          await handleSignOut();
-        }
-
-        throw error;
-      }
-    },
-    [session?.accessToken, handleSignOut]
-  );
-
-  return {
-    session: session as CustomSession | null,
-    status,
-    isLoading,
-    isAuthenticated,
-    apiCall
-  };
-}
+'use client';
+
+/**
+ * ⚠️ WARNING: This hook cannot be used directly from the @payez/next-mvp package!
+ *
+ * @deprecated Import this hook from your local app instead
+ *
+ * **Why?** React Context (SessionProvider) cannot cross package boundaries in file:// linked packages.
+ *
+ * **Solution:** Create a local version in your app (e.g., src/hooks/useAuth.ts) that imports standardizedApi:
+ *
+ * @example
+ * ```typescript
+ * // src/hooks/useAuth.ts (YOUR APP)
+ * 'use client';
+ * import { authClient } from '@payez/next-mvp/client/better-auth-client';
+ * import { standardizedApi } from '@payez/next-mvp/lib/standardized-client-api';
+ *
+ * export function useAuth() {
+ *   const { data: session } = useSession(); // Works in your app context
+ *   // ... implementation
+ * }
+ * ```
+ *
+ * @see {@link https://github.com/payez/next-mvp/blob/main/docs/centralized-auth-api-pattern.md#why-local-hooks-for-auth Complete documentation}
+ */
+
+import { authClient } from '../client/better-auth-client';
+import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { standardizedApi, ApiResult } from '../lib/standardized-client-api';
+
+// Custom session type matching NextAuth structure
+export interface CustomSession {
+  user: {
+    id: string;
+    email: string;
+    roles?: string[];
+    twoFactorMethod?: string;
+    twoFactorSessionVerified?: boolean;
+    requiresTwoFactor?: boolean;
+  };
+  accessToken?: string;
+  refreshToken?: string;
+  expires: string;
+  error?: string;
+}
+
+export interface UseAuthResult {
+  session: CustomSession | null;
+  status: 'loading' | 'authenticated' | 'unauthenticated';
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  // API helper that automatically includes the auth token
+  apiCall: <T>(url: string, method?: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: any) => Promise<ApiResult<T>>;
+}
+
+export function useAuth(): UseAuthResult {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  const router = useRouter();
+
+  const isLoading = status === 'loading';
+  const isAuthenticated = status === 'authenticated' && !!(session as any)?.accessToken;
+
+  // Handle sign out with redirect
+  const handleSignOut = useCallback(async () => {
+    await authClient.signOut();
+    router.push('/account-auth/login?error=SessionExpired');
+  }, [router]);
+
+  // API helper that automatically includes the auth token and uses standardized API
+  const apiCall = useCallback(
+    async <T>(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET', data?: any): Promise<ApiResult<T>> => {
+      if (!(session as any)?.accessToken) {
+        console.error('[useAuth] No access token available');
+        throw new Error('Not authenticated');
+      }
+
+      try {
+        // Use standardized API which handles token refresh and validates response format
+        switch (method) {
+          case 'GET':
+            return await standardizedApi.get<T>(url, (session as any).accessToken!);
+          case 'POST':
+            return await standardizedApi.post<T>(url, data, (session as any).accessToken!);
+          case 'PUT':
+            return await standardizedApi.put<T>(url, data);
+          case 'DELETE':
+            return await standardizedApi.delete<T>(url);
+          default:
+            throw new Error(`Unsupported method: ${method}`);
+        }
+      } catch (error) {
+        console.error('[useAuth] API call failed:', error);
+
+        // standardizedApi handles token refresh internally, but if we still get auth errors, sign out
+        if (error instanceof Error && error.message.includes('Authentication failed')) {
+          console.warn('[useAuth] Authentication failed, signing out...');
+          await handleSignOut();
+        }
+
+        throw error;
+      }
+    },
+    [(session as any)?.accessToken, handleSignOut]
+  );
+
+  return {
+    session: session as CustomSession | null,
+    status,
+    isLoading,
+    isAuthenticated,
+    apiCall
+  };
+}

package/src/hooks/useAuthSettings.ts

@@ -7,7 +7,7 @@
 
 'use client';
 
-import { useSession } from 'next-auth/react';
+import { authClient } from '../client/better-auth-client';
 import type { AuthSettings } from '../lib/idp-client-config';
 
 /**
@@ -39,7 +39,7 @@ interface SessionWithAuthSettings {
  * ```
  */
 export function useAuthSettings(): AuthSettings | null {
-    const { data: session } = useSession();
+    const { data: session } = authClient.useSession();
 
     if (!session) {
         return null;

package/src/hooks/useAvailableProviders.ts

@@ -8,8 +8,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { getProviders, LiteralUnion, ClientSafeProvider } from 'next-auth/react';
-import { BuiltInProviderType } from 'next-auth/providers/index';
+import { authClient } from '../client/better-auth-client';
 import type { FederatedProvider } from '../types/auth';
 
 // Map NextAuth provider IDs to our FederatedProvider type
@@ -29,7 +28,7 @@ export interface UseAvailableProvidersResult {
     providers: FederatedProvider[];
     isLoading: boolean;
     error: Error | null;
-    rawProviders: Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvider> | null;
+    rawProviders: Record<string, any> | null;
 }
 
 /**
@@ -56,7 +55,7 @@ export interface UseAvailableProvidersResult {
  */
 export function useAvailableProviders(): UseAvailableProvidersResult {
     const [providers, setProviders] = useState<FederatedProvider[]>([]);
-    const [rawProviders, setRawProviders] = useState<Record<LiteralUnion<BuiltInProviderType>, ClientSafeProvider> | null>(null);
+    const [rawProviders, setRawProviders] = useState<Record<string, any> | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
 
@@ -65,7 +64,12 @@ export function useAvailableProviders(): UseAvailableProvidersResult {
 
         async function fetchProviders() {
             try {
-                const result = await getProviders();
+                // Fetch available providers from Better Auth
+                // Better Auth doesn't have a getProviders equivalent, so we use a static list
+                // based on configured social providers
+                const result: Record<string, { id: string; name: string }> = {
+                    google: { id: 'google', name: 'Google' },
+                };
 
                 if (!mounted) return;
 

package/src/hooks/useSessionExpiration.ts

@@ -1,102 +1,101 @@
-/**
- * Hook to detect and handle stale/expired sessions during 2FA flow
- *
- * Use this in verify-code pages to automatically redirect to login
- * when the provisional bearer token has expired.
- *
- * @example
- * ```tsx
- * import { useSessionExpiration } from '@payez/next-mvp/hooks/useSessionExpiration';
- *
- * function VerifyCodePage() {
- *   const { data: session } = useSession();
- *   const router = useRouter();
- *   const searchParams = useSearchParams();
- *   const [error, setError] = useState<string | null>(null);
- *
- *   const callbackUrl = searchParams?.get('callbackUrl') || '/dashboard';
- *
- *   // Automatically handles session expiration
- *   const sessionValid = useSessionExpiration({
- *     session,
- *     router,
- *     callbackUrl,
- *     onExpired: (message) => setError(message)
- *   });
- *
- *   if (!sessionValid) return null; // Will redirect
- *   // ... rest of component
- * }
- * ```
- */
-
-import { useEffect } from 'react';
-import { signOut } from 'next-auth/react';
-import type { Session } from 'next-auth';
-
-export interface UseSessionExpirationOptions {
-  /** NextAuth session object */
-  session: Session | null | undefined;
-  /** Next.js router for navigation */
-  router: {
-    push: (url: string) => void;
-  };
-  /** URL to redirect to after login */
-  callbackUrl?: string;
-  /** Callback when session expires - use to set error state */
-  onExpired?: (message: string) => void;
-  /** Delay before redirect in milliseconds (default: 1500) */
-  redirectDelay?: number;
-  /** Custom redirect URL (default: /account-auth/login) */
-  loginUrl?: string;
-}
-
-/**
- * Detects stale sessions and redirects to login
- *
- * Returns:
- * - `true` if session is valid (has accessToken)
- * - `false` if session is loading (no session yet)
- * - `null` if session is stale (will trigger redirect)
- */
-export function useSessionExpiration({
-  session,
-  router,
-  callbackUrl = '/dashboard',
-  onExpired,
-  redirectDelay = 1500,
-  loginUrl = '/account-auth/login'
-}: UseSessionExpirationOptions): boolean | null {
-  useEffect(() => {
-    // If session exists but no accessToken, the token is stale/expired
-    if (session && !(session as any).accessToken) {
-      const message = 'Your session has expired. Redirecting to login...';
-      if (onExpired) {
-        onExpired(message);
-      }
-
-      setTimeout(async () => {
-        // Clear the session before redirecting
-        await signOut({ redirect: false });
-
-        const params = new URLSearchParams({
-          callbackUrl,
-          error: 'SessionExpired'
-        });
-
-        router.push(`${loginUrl}?${params.toString()}`);
-      }, redirectDelay);
-    }
-  }, [session, router, callbackUrl, onExpired, redirectDelay, loginUrl]);
-
-  // Return session validity state
-  if (session && !(session as any).accessToken) {
-    return null; // Stale session - will redirect
-  }
-
-  if ((session as any)?.accessToken) {
-    return true; // Valid session
-  }
-
-  return false; // No session yet - loading
-}
+/**
+ * Hook to detect and handle stale/expired sessions during 2FA flow
+ *
+ * Use this in verify-code pages to automatically redirect to login
+ * when the provisional bearer token has expired.
+ *
+ * @example
+ * ```tsx
+ * import { useSessionExpiration } from '@payez/next-mvp/hooks/useSessionExpiration';
+ *
+ * function VerifyCodePage() {
+ *   const { data: session } = useSession();
+ *   const router = useRouter();
+ *   const searchParams = useSearchParams();
+ *   const [error, setError] = useState<string | null>(null);
+ *
+ *   const callbackUrl = searchParams?.get('callbackUrl') || '/dashboard';
+ *
+ *   // Automatically handles session expiration
+ *   const sessionValid = useSessionExpiration({
+ *     session,
+ *     router,
+ *     callbackUrl,
+ *     onExpired: (message) => setError(message)
+ *   });
+ *
+ *   if (!sessionValid) return null; // Will redirect
+ *   // ... rest of component
+ * }
+ * ```
+ */
+
+import { useEffect } from 'react';
+import { authClient } from '../client/better-auth-client';
+
+export interface UseSessionExpirationOptions {
+  /** Session object */
+  session: any | null | undefined;
+  /** Next.js router for navigation */
+  router: {
+    push: (url: string) => void;
+  };
+  /** URL to redirect to after login */
+  callbackUrl?: string;
+  /** Callback when session expires - use to set error state */
+  onExpired?: (message: string) => void;
+  /** Delay before redirect in milliseconds (default: 1500) */
+  redirectDelay?: number;
+  /** Custom redirect URL (default: /account-auth/login) */
+  loginUrl?: string;
+}
+
+/**
+ * Detects stale sessions and redirects to login
+ *
+ * Returns:
+ * - `true` if session is valid (has accessToken)
+ * - `false` if session is loading (no session yet)
+ * - `null` if session is stale (will trigger redirect)
+ */
+export function useSessionExpiration({
+  session,
+  router,
+  callbackUrl = '/dashboard',
+  onExpired,
+  redirectDelay = 1500,
+  loginUrl = '/account-auth/login'
+}: UseSessionExpirationOptions): boolean | null {
+  useEffect(() => {
+    // If session exists but no accessToken, the token is stale/expired
+    if (session && !(session as any).accessToken) {
+      const message = 'Your session has expired. Redirecting to login...';
+      if (onExpired) {
+        onExpired(message);
+      }
+
+      setTimeout(async () => {
+        // Clear the session before redirecting
+        await authClient.signOut();
+
+        const params = new URLSearchParams({
+          callbackUrl,
+          error: 'SessionExpired'
+        });
+
+        router.push(`${loginUrl}?${params.toString()}`);
+      }, redirectDelay);
+    }
+  }, [session, router, callbackUrl, onExpired, redirectDelay, loginUrl]);
+
+  // Return session validity state
+  if (session && !(session as any).accessToken) {
+    return null; // Stale session - will redirect
+  }
+
+  if ((session as any)?.accessToken) {
+    return true; // Valid session
+  }
+
+  return false; // No session yet - loading
+}