@payez/next-mvp 4.1.9 → 4.1.11

package/src/client/AuthContext.tsx

@@ -1,143 +1,143 @@
-'use client';
-
-import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
-import { authClient } from './better-auth-client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { AuthConfig, AuthMode, FederatedProvider } from '@/types/auth';
-
-const AuthContext = createContext<AuthConfig | null>(null);
-
-const defaultConfig: AuthConfig = {
-  mode: 'traditional',
-  providers: [],
-  enableRecovery: true,
-  enableEmailSignup: true,
-  allowPasswordReset: true,
-};
-
-// Map provider IDs to our FederatedProvider type
-const PROVIDER_MAP: Record<string, FederatedProvider> = {
-  'google': 'google',
-  'apple': 'apple',
-  'facebook': 'facebook',
-  'github': 'github',
-  'azure-ad': 'microsoft',
-  'microsoft-entra-id': 'microsoft',
-};
-
-// OAuth providers we support in UI (excludes credentials)
-const OAUTH_PROVIDER_IDS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
-
-interface AuthProviderProps {
-  children: ReactNode;
-  config?: Partial<AuthConfig>;
-  /**
-   * If true, providers will be loaded dynamically from IDP config
-   * instead of using the static providers array from config.
-   */
-  useDynamicProviders?: boolean;
-}
-
-export function AuthProvider({ children, config, useDynamicProviders = true }: AuthProviderProps) {
-  const [dynamicProviders, setDynamicProviders] = useState<FederatedProvider[]>([]);
-  const [providersLoaded, setProvidersLoaded] = useState(!useDynamicProviders);
-
-  // Create QueryClient instance for React Query - used internally by MVP hooks
-  const [queryClient] = useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60 * 1000, // 1 minute
-        retry: 1,
-        refetchOnWindowFocus: false,
-      },
-    },
-  }));
-
-  // Load available providers on mount
-  useEffect(() => {
-    if (!useDynamicProviders) return;
-
-    let mounted = true;
-
-    async function fetchDynamicProviders() {
-      try {
-        // Better Auth doesn't have a getProviders equivalent.
-        // Use static provider map based on configured social providers.
-        const result: Record<string, { id: string; name: string }> | null = {
-          google: { id: 'google', name: 'Google' },
-        };
-
-        if (!mounted) return;
-
-        if (result) {
-          // Filter to OAuth providers only and map to FederatedProvider type
-          const oauthProviders = Object.keys(result)
-            .filter(id => OAUTH_PROVIDER_IDS.includes(id))
-            .map(id => PROVIDER_MAP[id])
-            .filter((p): p is FederatedProvider => p !== undefined);
-
-          setDynamicProviders(oauthProviders);
-        }
-      } catch (err) {
-        // Fall back to static config providers on error
-      } finally {
-        if (mounted) {
-          setProvidersLoaded(true);
-        }
-      }
-    }
-
-    fetchDynamicProviders();
-
-    return () => {
-      mounted = false;
-    };
-  }, [useDynamicProviders]);
-
-  // Determine final providers list
-  const providers = useDynamicProviders && providersLoaded
-    ? dynamicProviders
-    : (config?.providers ?? defaultConfig.providers);
-
-  const authConfig: AuthConfig = {
-    ...defaultConfig,
-    ...config,
-    providers, // Override with dynamic providers if enabled
-  };
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <AuthContext.Provider value={authConfig}>
-        {children}
-      </AuthContext.Provider>
-    </QueryClientProvider>
-  );
-}
-
-export function useAuthConfig(): AuthConfig {
-  const context = useContext(AuthContext);
-  if (!context) {
-    return defaultConfig;
-  }
-  return context;
-}
-
-export function useAuthMode(): AuthMode {
-  const config = useAuthConfig();
-  return config.mode;
-}
-
-export function useFederatedProviders(): FederatedProvider[] {
-  const config = useAuthConfig();
-  return config.providers;
-}
-
-export function useFederatedAuthEnabled(): boolean {
-  const config = useAuthConfig();
-  return config.mode === 'federated' && config.providers.length > 0;
-}
-
-export function useTraditionalAuthEnabled(): boolean {
-  const config = useAuthConfig();
-  return config.mode === 'traditional';
-}
+'use client';
+
+import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
+import { authClient } from './better-auth-client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthConfig, AuthMode, FederatedProvider } from '@/types/auth';
+
+const AuthContext = createContext<AuthConfig | null>(null);
+
+const defaultConfig: AuthConfig = {
+  mode: 'traditional',
+  providers: [],
+  enableRecovery: true,
+  enableEmailSignup: true,
+  allowPasswordReset: true,
+};
+
+// Map provider IDs to our FederatedProvider type
+const PROVIDER_MAP: Record<string, FederatedProvider> = {
+  'google': 'google',
+  'apple': 'apple',
+  'facebook': 'facebook',
+  'github': 'github',
+  'azure-ad': 'microsoft',
+  'microsoft-entra-id': 'microsoft',
+};
+
+// OAuth providers we support in UI (excludes credentials)
+const OAUTH_PROVIDER_IDS = ['google', 'apple', 'facebook', 'github', 'azure-ad', 'microsoft-entra-id'];
+
+interface AuthProviderProps {
+  children: ReactNode;
+  config?: Partial<AuthConfig>;
+  /**
+   * If true, providers will be loaded dynamically from IDP config
+   * instead of using the static providers array from config.
+   */
+  useDynamicProviders?: boolean;
+}
+
+export function AuthProvider({ children, config, useDynamicProviders = true }: AuthProviderProps) {
+  const [dynamicProviders, setDynamicProviders] = useState<FederatedProvider[]>([]);
+  const [providersLoaded, setProvidersLoaded] = useState(!useDynamicProviders);
+
+  // Create QueryClient instance for React Query - used internally by MVP hooks
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000, // 1 minute
+        retry: 1,
+        refetchOnWindowFocus: false,
+      },
+    },
+  }));
+
+  // Load available providers on mount
+  useEffect(() => {
+    if (!useDynamicProviders) return;
+
+    let mounted = true;
+
+    async function fetchDynamicProviders() {
+      try {
+        // Better Auth doesn't have a getProviders equivalent.
+        // Use static provider map based on configured social providers.
+        const result: Record<string, { id: string; name: string }> | null = {
+          google: { id: 'google', name: 'Google' },
+        };
+
+        if (!mounted) return;
+
+        if (result) {
+          // Filter to OAuth providers only and map to FederatedProvider type
+          const oauthProviders = Object.keys(result)
+            .filter(id => OAUTH_PROVIDER_IDS.includes(id))
+            .map(id => PROVIDER_MAP[id])
+            .filter((p): p is FederatedProvider => p !== undefined);
+
+          setDynamicProviders(oauthProviders);
+        }
+      } catch (err) {
+        // Fall back to static config providers on error
+      } finally {
+        if (mounted) {
+          setProvidersLoaded(true);
+        }
+      }
+    }
+
+    fetchDynamicProviders();
+
+    return () => {
+      mounted = false;
+    };
+  }, [useDynamicProviders]);
+
+  // Determine final providers list
+  const providers = useDynamicProviders && providersLoaded
+    ? dynamicProviders
+    : (config?.providers ?? defaultConfig.providers);
+
+  const authConfig: AuthConfig = {
+    ...defaultConfig,
+    ...config,
+    providers, // Override with dynamic providers if enabled
+  };
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthContext.Provider value={authConfig}>
+        {children}
+      </AuthContext.Provider>
+    </QueryClientProvider>
+  );
+}
+
+export function useAuthConfig(): AuthConfig {
+  const context = useContext(AuthContext);
+  if (!context) {
+    return defaultConfig;
+  }
+  return context;
+}
+
+export function useAuthMode(): AuthMode {
+  const config = useAuthConfig();
+  return config.mode;
+}
+
+export function useFederatedProviders(): FederatedProvider[] {
+  const config = useAuthConfig();
+  return config.providers;
+}
+
+export function useFederatedAuthEnabled(): boolean {
+  const config = useAuthConfig();
+  return config.mode === 'federated' && config.providers.length > 0;
+}
+
+export function useTraditionalAuthEnabled(): boolean {
+  const config = useAuthConfig();
+  return config.mode === 'traditional';
+}

package/src/client/fetch-with-auth.ts

@@ -1,48 +1,48 @@
-// src/client/fetch-with-auth.ts
-import { authClient } from './better-auth-client';
-
-/**
- * A wrapper for the `fetch` API that automatically injects the session's
- * accessToken into the Authorization header and handles 401 Unauthorized
- * responses by redirecting the user to the login page.
- *
- * @param url The URL to fetch.
- * @param options The standard `fetch` options.
- * @returns A `Promise` that resolves to the `Response` object.
- * @throws An 'UNAUTHORIZED_REDIRECT' error after initiating the redirect to halt further execution.
- */
-export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
-  // 1. Retrieve the client-side session to get the accessToken.
-  const { data: session } = await authClient.getSession();
-
-  // 2. Inject the accessToken into the Authorization header.
-  const headers = new Headers(options.headers);
-  if ((session as any)?.accessToken) {
-    headers.set('Authorization', `Bearer ${(session as any).accessToken}`);
-  }
-  options.headers = headers;
-
-  const response = await fetch(url, options);
-
-  // 3. Handle the 401 response intelligently.
-  if (response.status === 401) {
-    // If we have a valid session, this is likely a claim/permission error, not an auth error
-    if ((session as any)?.accessToken) {
-      console.warn('API returned 401 despite valid session. Likely insufficient claims or permissions.');
-      // Don't redirect - let the calling code handle the error gracefully
-      return response;
-    }
-
-    // No valid session - this is a real authentication failure
-    console.error('Unauthorized API call (no valid session). Redirecting to login.');
-    // SAFEGUARD: Never use auth pages as callback URLs to prevent redirect loops
-    const pathname = window.location.pathname;
-    const safeCallbackUrl = pathname.startsWith('/account-auth/') ? '/' : pathname;
-    window.location.href = `/account-auth/login?callbackUrl=${encodeURIComponent(safeCallbackUrl)}`;
-
-    // Throw a specific error to signal that a redirect has been initiated.
-    throw new Error('UNAUTHORIZED_REDIRECT');
-  }
-
-  return response;
+// src/client/fetch-with-auth.ts
+import { authClient } from './better-auth-client';
+
+/**
+ * A wrapper for the `fetch` API that automatically injects the session's
+ * accessToken into the Authorization header and handles 401 Unauthorized
+ * responses by redirecting the user to the login page.
+ *
+ * @param url The URL to fetch.
+ * @param options The standard `fetch` options.
+ * @returns A `Promise` that resolves to the `Response` object.
+ * @throws An 'UNAUTHORIZED_REDIRECT' error after initiating the redirect to halt further execution.
+ */
+export async function fetchWithAuth(url: string, options: RequestInit = {}): Promise<Response> {
+  // 1. Retrieve the client-side session to get the accessToken.
+  const { data: session } = await authClient.getSession();
+
+  // 2. Inject the accessToken into the Authorization header.
+  const headers = new Headers(options.headers);
+  if ((session as any)?.accessToken) {
+    headers.set('Authorization', `Bearer ${(session as any).accessToken}`);
+  }
+  options.headers = headers;
+
+  const response = await fetch(url, options);
+
+  // 3. Handle the 401 response intelligently.
+  if (response.status === 401) {
+    // If we have a valid session, this is likely a claim/permission error, not an auth error
+    if ((session as any)?.accessToken) {
+      console.warn('API returned 401 despite valid session. Likely insufficient claims or permissions.');
+      // Don't redirect - let the calling code handle the error gracefully
+      return response;
+    }
+
+    // No valid session - this is a real authentication failure
+    console.error('Unauthorized API call (no valid session). Redirecting to login.');
+    // SAFEGUARD: Never use auth pages as callback URLs to prevent redirect loops
+    const pathname = window.location.pathname;
+    const safeCallbackUrl = pathname.startsWith('/account-auth/') ? '/' : pathname;
+    window.location.href = `/account-auth/login?callbackUrl=${encodeURIComponent(safeCallbackUrl)}`;
+
+    // Throw a specific error to signal that a redirect has been initiated.
+    throw new Error('UNAUTHORIZED_REDIRECT');
+  }
+
+  return response;
 }

package/src/components/SessionSync.tsx

@@ -1,138 +1,138 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { authClient } from '../client/better-auth-client';
-import { useAuthStore } from '../stores/authStore';
-import { isValidSession } from '../lib/session';
-import {
-  getSecureSessionCookieName,
-  getSecureCsrfCookieName,
-  getCallbackUrlCookieName
-} from '../lib/app-slug';
-
-/**
- * Sanitize sensitive data for logging
- * Never log full user IDs or emails in any environment
- */
-function sanitizeForLog(value: string | undefined, type: 'email' | 'userId'): string {
-  if (!value) return '(empty)';
-  
-  if (type === 'email') {
-    return '***@***'; // Never log emails
-  }
-  
-  if (type === 'userId') {
-    // Only show first 8 chars in development
-    if (process.env.NODE_ENV === 'development') {
-      return value.substring(0, 8) + '...';
-    }
-    return '***'; // Fully redact in production
-  }
-  
-  return '***';
-}
-
-/**
- * SessionSync - Bridges NextAuth session with Zustand auth store
- * 
- * CRITICAL: This component enforces strict session validation. If NextAuth
- * reports an authenticated status but the session data is invalid (empty user ID,
- * empty email, or missing access token), it forces a sign-out to prevent
- * contradictory state like "hasSession: true, userId: ''"
- * 
- * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
- */
-export function SessionSync({ children }: { children: React.ReactNode }) {
-  const { data: sessionData, isPending } = authClient.useSession();
-  const session = sessionData;
-  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
-  const { setSession, clearSession } = useAuthStore();
-  
-  // Guard against duplicate sign-out calls
-  const isSigningOutRef = useRef(false);
-
-  useEffect(() => {
-    let isMounted = true;
-    
-    // Only process when NextAuth has finished loading
-    if (status === 'loading') {
-      return;
-    }
-
-    // Strict validation: Check if session is actually valid
-    const isValid = isValidSession(session);
-
-    // CRITICAL FIX: If NextAuth says "authenticated" but session is invalid,
-    // this is a broken state that must be fixed immediately
-    if (status === 'authenticated' && !isValid) {
-      // GUARD: Prevent duplicate sign-out
-      if (isSigningOutRef.current) {
-        console.warn('[SessionSync] Sign-out already in progress, skipping');
-        return;
-      }
-      isSigningOutRef.current = true;
-      
-      console.error('[SessionSync] CRITICAL: Invalid session detected despite authenticated status!');
-      console.error('[SessionSync] This indicates a session with empty user data - forcing sign-out');
-      
-      // Log diagnostic info with PII redaction
-      // Note: session is typed as Session | null from NextAuth, but may have invalid/partial data
-      const sessionData = session as any; // Explicit cast needed for error logging
-      console.error('[SessionSync] Session data:', {
-        hasSessionObject: !!sessionData,
-        hasUser: !!sessionData?.user,
-        userId: sanitizeForLog(sessionData?.user?.id, 'userId'),
-        userEmail: sanitizeForLog(sessionData?.user?.email, 'email'),
-        hasAccessToken: !!sessionData?.accessToken,
-      });
-      
-      // Clear the auth store immediately
-      clearSession();
-
-      // FIX: Force clear all auth cookies including stale provisional tokens (app-slug prefixed)
-      // This prevents infinite loop when provisional token exists but session is invalid
-      // Root cause: OAuth creates provisional token before Redis session exists
-      try {
-        const secureSession = getSecureSessionCookieName();
-        const secureCsrf = getSecureCsrfCookieName();
-        const callbackUrl = getCallbackUrlCookieName();
-        document.cookie = `${secureSession}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
-        document.cookie = `${secureCsrf}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax`;
-        document.cookie = `__Secure-${callbackUrl}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
-      } catch (e) {
-        // Cookie clearing failed - non-critical, continue with signout
-      }
-
-      // Force Better Auth to sign out (this will clear cookies and trigger redirect)
-      authClient.signOut()
-        .then(() => {
-          if (isMounted) {
-            // Use generic error code instead of implementation details
-            window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
-          }
-        })
-        .catch((err) => {
-          console.error('[SessionSync] Error during forced signout:', err);
-          if (isMounted) {
-            window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
-          }
-        });
-      
-      return;
-    }
-
-    // Normal flow: Update store based on valid session status
-    if (status === 'authenticated' && isValid) {
-      setSession(session);
-    } else if (status === 'unauthenticated') {
-      clearSession();
-    }
-    
-    // Cleanup function to prevent post-unmount updates
-    return () => {
-      isMounted = false;
-    };
-  }, [session, status, setSession, clearSession]);
-
-  return <>{children}</>;
-}
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { authClient } from '../client/better-auth-client';
+import { useAuthStore } from '../stores/authStore';
+import { isValidSession } from '../lib/session';
+import {
+  getSecureSessionCookieName,
+  getSecureCsrfCookieName,
+  getCallbackUrlCookieName
+} from '../lib/app-slug';
+
+/**
+ * Sanitize sensitive data for logging
+ * Never log full user IDs or emails in any environment
+ */
+function sanitizeForLog(value: string | undefined, type: 'email' | 'userId'): string {
+  if (!value) return '(empty)';
+  
+  if (type === 'email') {
+    return '***@***'; // Never log emails
+  }
+  
+  if (type === 'userId') {
+    // Only show first 8 chars in development
+    if (process.env.NODE_ENV === 'development') {
+      return value.substring(0, 8) + '...';
+    }
+    return '***'; // Fully redact in production
+  }
+  
+  return '***';
+}
+
+/**
+ * SessionSync - Bridges NextAuth session with Zustand auth store
+ * 
+ * CRITICAL: This component enforces strict session validation. If NextAuth
+ * reports an authenticated status but the session data is invalid (empty user ID,
+ * empty email, or missing access token), it forces a sign-out to prevent
+ * contradictory state like "hasSession: true, userId: ''"
+ * 
+ * This ensures the app NEVER shows authenticated UI with empty/invalid session data.
+ */
+export function SessionSync({ children }: { children: React.ReactNode }) {
+  const { data: sessionData, isPending } = authClient.useSession();
+  const session = sessionData;
+  const status = isPending ? 'loading' : session ? 'authenticated' : 'unauthenticated';
+  const { setSession, clearSession } = useAuthStore();
+  
+  // Guard against duplicate sign-out calls
+  const isSigningOutRef = useRef(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    
+    // Only process when NextAuth has finished loading
+    if (status === 'loading') {
+      return;
+    }
+
+    // Strict validation: Check if session is actually valid
+    const isValid = isValidSession(session);
+
+    // CRITICAL FIX: If NextAuth says "authenticated" but session is invalid,
+    // this is a broken state that must be fixed immediately
+    if (status === 'authenticated' && !isValid) {
+      // GUARD: Prevent duplicate sign-out
+      if (isSigningOutRef.current) {
+        console.warn('[SessionSync] Sign-out already in progress, skipping');
+        return;
+      }
+      isSigningOutRef.current = true;
+      
+      console.error('[SessionSync] CRITICAL: Invalid session detected despite authenticated status!');
+      console.error('[SessionSync] This indicates a session with empty user data - forcing sign-out');
+      
+      // Log diagnostic info with PII redaction
+      // Note: session is typed as Session | null from NextAuth, but may have invalid/partial data
+      const sessionData = session as any; // Explicit cast needed for error logging
+      console.error('[SessionSync] Session data:', {
+        hasSessionObject: !!sessionData,
+        hasUser: !!sessionData?.user,
+        userId: sanitizeForLog(sessionData?.user?.id, 'userId'),
+        userEmail: sanitizeForLog(sessionData?.user?.email, 'email'),
+        hasAccessToken: !!sessionData?.accessToken,
+      });
+      
+      // Clear the auth store immediately
+      clearSession();
+
+      // FIX: Force clear all auth cookies including stale provisional tokens (app-slug prefixed)
+      // This prevents infinite loop when provisional token exists but session is invalid
+      // Root cause: OAuth creates provisional token before Redis session exists
+      try {
+        const secureSession = getSecureSessionCookieName();
+        const secureCsrf = getSecureCsrfCookieName();
+        const callbackUrl = getCallbackUrlCookieName();
+        document.cookie = `${secureSession}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+        document.cookie = `${secureCsrf}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax`;
+        document.cookie = `__Secure-${callbackUrl}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; Secure; SameSite=Lax`;
+      } catch (e) {
+        // Cookie clearing failed - non-critical, continue with signout
+      }
+
+      // Force Better Auth to sign out (this will clear cookies and trigger redirect)
+      authClient.signOut()
+        .then(() => {
+          if (isMounted) {
+            // Use generic error code instead of implementation details
+            window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+          }
+        })
+        .catch((err) => {
+          console.error('[SessionSync] Error during forced signout:', err);
+          if (isMounted) {
+            window.location.href = '/account-auth/login?error=SessionExpired&code=1001';
+          }
+        });
+      
+      return;
+    }
+
+    // Normal flow: Update store based on valid session status
+    if (status === 'authenticated' && isValid) {
+      setSession(session);
+    } else if (status === 'unauthenticated') {
+      clearSession();
+    }
+    
+    // Cleanup function to prevent post-unmount updates
+    return () => {
+      isMounted = false;
+    };
+  }, [session, status, setSession, clearSession]);
+
+  return <>{children}</>;
+}