@djangocfg/api 2.1.57 → 2.1.58

package/src/auth/hooks/useAuthForm.ts

@@ -1,339 +1,405 @@
 "use client"
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { useAuth } from '../context';
+import type { AuthChannel, AuthFormReturn, UseAuthFormOptions } from '../types';
 import { authLogger } from '../utils/logger';
+import { useAuthFormState } from './useAuthFormState';
+import { useAuthValidation } from './useAuthValidation';
 import { useAutoAuth } from './useAutoAuth';
-import { useLocalStorage } from './useLocalStorage';
-
-export interface AuthFormState {
-  identifier: string; // Email or phone number
-  channel: 'email' | 'phone';
-  otp: string;
-  isLoading: boolean;
-  acceptedTerms: boolean;
-  step: 'identifier' | 'otp';
-  error: string;
-}
-
-export interface AuthFormHandlers {
-  setIdentifier: (identifier: string) => void;
-  setChannel: (channel: 'email' | 'phone') => void;
-  setOtp: (otp: string) => void;
-  setAcceptedTerms: (accepted: boolean) => void;
-  setError: (error: string) => void;
-  clearError: () => void;
-  handleIdentifierSubmit: (e: React.FormEvent) => Promise<void>;
-  handleOTPSubmit: (e: React.FormEvent) => Promise<void>;
-  handleResendOTP: () => Promise<void>;
-  handleBackToIdentifier: () => void;
-  forceOTPStep: () => void;
-  // Utility methods
-  detectChannelFromIdentifier: (identifier: string) => 'email' | 'phone' | null;
-  validateIdentifier: (identifier: string, channel?: 'email' | 'phone') => boolean;
-}
-
-export interface UseAuthFormOptions {
-  onIdentifierSuccess?: (identifier: string, channel: 'email' | 'phone') => void;
-  onOTPSuccess?: () => void;
-  onError?: (message: string) => void;
-  sourceUrl: string;
-  /** URL to redirect after successful OTP verification */
-  redirectUrl?: string;
-  /** If true, user must accept terms before submitting. Default: false */
-  requireTermsAcceptance?: boolean;
-  /** Path to auth page for auto-OTP detection. Default: '/auth' */
-  authPath?: string;
-}
-
-export const useAuthForm = (options: UseAuthFormOptions): AuthFormState & AuthFormHandlers => {
-  const { onIdentifierSuccess, onOTPSuccess, onError, sourceUrl, redirectUrl, requireTermsAcceptance = false, authPath = '/auth' } = options;
-  
-  // Form state
-  const [identifier, setIdentifier] = useState('');
-  const [channel, setChannel] = useState<'email' | 'phone'>('email');
-  const [otp, setOtp] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [acceptedTerms, setAcceptedTerms] = useState(false);
-  const [step, setStep] = useState<'identifier' | 'otp'>('identifier');
-  const [error, setError] = useState('');
-  
-
-  
-  // Auth hooks
-  const { requestOTP, verifyOTP, getSavedEmail, saveEmail, getSavedPhone, savePhone } = useAuth();
-  const [savedTermsAccepted, setSavedTermsAccepted] = useLocalStorage('auth_terms_accepted', false);
-  const [savedEmail, setSavedEmail] = useLocalStorage('auth_email', '');
-  const [savedPhone, setSavedPhone] = useLocalStorage('auth_phone', '');
-
-  // Utility functions
-  const detectChannelFromIdentifier = useCallback((identifier: string): 'email' | 'phone' | null => {
-    if (!identifier) return null;
-    
-    // Email detection
-    if (identifier.includes('@')) {
-      return 'email';
-    }
-    
-    // Phone detection (starts with + and contains digits)
-    if (identifier.startsWith('+') && /^\+[1-9]\d{6,14}$/.test(identifier)) {
-      return 'phone';
-    }
-    
-    return null;
-  }, []);
-
-  const validateIdentifier = useCallback((identifier: string, channelType?: 'email' | 'phone'): boolean => {
-    if (!identifier) return false;
-    
-    const detectedChannel = channelType || detectChannelFromIdentifier(identifier);
-    
-    if (detectedChannel === 'email') {
-      // Basic email validation
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier);
-    } else if (detectedChannel === 'phone') {
-      // E.164 phone validation
-      return /^\+[1-9]\d{6,14}$/.test(identifier);
+import { useTwoFactor } from './useTwoFactor';
+
+/**
+ * Complete auth form hook.
+ * Composes smaller hooks for state, validation, and submission.
+ */
+export const useAuthForm = (options: UseAuthFormOptions): AuthFormReturn => {
+  const {
+    onIdentifierSuccess,
+    onOTPSuccess,
+    onError,
+    sourceUrl,
+    redirectUrl,
+    requireTermsAcceptance = false,
+    authPath = '/auth',
+  } = options;
+
+  // Compose smaller hooks
+  const formState = useAuthFormState();
+  const validation = useAuthValidation();
+
+  // Ref to track auto-submit from URL
+  const isAutoSubmitFromUrlRef = useRef(false);
+
+  // Auth context for API calls and storage
+  const {
+    requestOTP,
+    verifyOTP,
+    getSavedEmail,
+    saveEmail,
+    clearSavedEmail,
+    getSavedPhone,
+    savePhone,
+    clearSavedPhone,
+  } = useAuth();
+
+  // Destructure for convenience
+  const {
+    identifier,
+    channel,
+    otp,
+    isLoading,
+    acceptedTerms,
+    twoFactorSessionId,
+    twoFactorCode,
+    useBackupCode,
+    setIdentifier,
+    setChannel,
+    setOtp,
+    setStep,
+    setError,
+    setIsLoading,
+    clearError,
+    setTwoFactorSessionId,
+    setShouldPrompt2FA,
+    setTwoFactorCode,
+    setUseBackupCode,
+  } = formState;
+
+  // 2FA verification hook - skip redirect so we can show success screen
+  const twoFactor = useTwoFactor({
+    onSuccess: () => {
+      authLogger.info('2FA verification successful, showing success screen');
+      setStep('success');
+      onOTPSuccess?.();
+    },
+    onError: (error) => {
+      setError(error);
+      onError?.(error);
+    },
+    redirectUrl,
+    skipRedirect: true, // We handle navigation via success step
+  });
+
+  const { detectChannelFromIdentifier, validateIdentifier } = validation;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Storage Helper
+  // ─────────────────────────────────────────────────────────────────────────
+
+  const saveIdentifierToStorage = useCallback((id: string, ch: AuthChannel) => {
+    if (ch === 'email') {
+      saveEmail(id);
+      clearSavedPhone();
+    } else {
+      savePhone(id);
+      clearSavedEmail();
     }
-    
-    return false;
-  }, [detectChannelFromIdentifier]);
+  }, [saveEmail, savePhone, clearSavedEmail, clearSavedPhone]);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Effects
+  // ─────────────────────────────────────────────────────────────────────────
 
-  // Load saved data on mount
+  // Load saved identifier on mount
   useEffect(() => {
-    const authSavedEmail = getSavedEmail();
-    const authSavedPhone = getSavedPhone();
-    
-    // Prioritize phone over email if both exist
-    if (authSavedPhone) {
-      setIdentifier(authSavedPhone);
+    const savedPhone = getSavedPhone();
+    const savedEmail = getSavedEmail();
+
+    // Prioritize phone over email
+    if (savedPhone) {
+      setIdentifier(savedPhone);
       setChannel('phone');
-    } else if (authSavedEmail) {
-      setIdentifier(authSavedEmail);
+    } else if (savedEmail) {
+      setIdentifier(savedEmail);
       setChannel('email');
     }
-    
-    if (savedTermsAccepted) {
-      setAcceptedTerms(savedTermsAccepted);
-    }
-  }, [getSavedEmail, getSavedPhone, savedTermsAccepted]);
+  }, [getSavedEmail, getSavedPhone, setIdentifier, setChannel]);
 
   // Auto-detect channel when identifier changes
   useEffect(() => {
     if (identifier) {
-      const detectedChannel = detectChannelFromIdentifier(identifier);
-      if (detectedChannel && detectedChannel !== channel) {
-        setChannel(detectedChannel);
+      const detected = detectChannelFromIdentifier(identifier);
+      if (detected && detected !== channel) {
+        setChannel(detected);
       }
     }
-  }, [identifier, channel, detectChannelFromIdentifier]);
-
+  }, [identifier, channel, detectChannelFromIdentifier, setChannel]);
 
-
-  const clearError = useCallback(() => setError(''), []);
+  // ─────────────────────────────────────────────────────────────────────────
+  // Submit Handlers
+  // ─────────────────────────────────────────────────────────────────────────
 
   const handleIdentifierSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!identifier) {
-      const message = channel === 'phone' ? 'Please enter your phone number' : 'Please enter your email address';
-      setError(message);
-      onError?.(message);
+      const msg = channel === 'phone'
+        ? 'Please enter your phone number'
+        : 'Please enter your email address';
+      setError(msg);
+      onError?.(msg);
       return;
     }
 
-    // Validate identifier format
     if (!validateIdentifier(identifier, channel)) {
-      const message = channel === 'phone' 
-        ? 'Please enter a valid phone number (e.g., +1234567890)' 
+      const msg = channel === 'phone'
+        ? 'Please enter a valid phone number (e.g., +1234567890)'
         : 'Please enter a valid email address';
-      setError(message);
-      onError?.(message);
+      setError(msg);
+      onError?.(msg);
       return;
     }
 
     if (requireTermsAcceptance && !acceptedTerms) {
-      const message = 'Please accept the Terms of Service and Privacy Policy';
-      setError(message);
-      onError?.(message);
+      const msg = 'Please accept the Terms of Service and Privacy Policy';
+      setError(msg);
+      onError?.(msg);
       return;
     }
 
     setIsLoading(true);
     clearError();
-    
+
     try {
       const result = await requestOTP(identifier, channel, sourceUrl);
-      
+
       if (result.success) {
-        // Save identifier and terms acceptance on successful request, clear opposite channel
-        if (channel === 'email') {
-          saveEmail(identifier);
-          setSavedPhone(''); // Clear phone storage
-        } else if (channel === 'phone') {
-          savePhone(identifier);
-          setSavedEmail(''); // Clear email storage
-        }
-        setSavedTermsAccepted(true);
+        saveIdentifierToStorage(identifier, channel);
         setStep('otp');
         onIdentifierSuccess?.(identifier, channel);
       } else {
         setError(result.message);
         onError?.(result.message);
       }
-    } catch (error) {
-      const message = 'An unexpected error occurred';
-      setError(message);
-      onError?.(message);
+    } catch {
+      const msg = 'An unexpected error occurred';
+      setError(msg);
+      onError?.(msg);
     } finally {
       setIsLoading(false);
     }
-  }, [identifier, channel, acceptedTerms, validateIdentifier, requestOTP, saveEmail, clearError, setSavedTermsAccepted, onIdentifierSuccess, onError, sourceUrl]);
-
-  const handleOTPSubmit = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!otp || otp.length < 6) {
-      const message = 'Please enter the 6-digit verification code';
-      setError(message);
-      onError?.(message);
-      return;
+  }, [
+    identifier, channel, acceptedTerms, requireTermsAcceptance,
+    validateIdentifier, requestOTP, saveIdentifierToStorage,
+    setError, setIsLoading, setStep, clearError,
+    onIdentifierSuccess, onError, sourceUrl,
+  ]);
+
+  // Core OTP submit - accepts explicit values to avoid stale closures
+  const submitOTP = useCallback(async (
+    submitIdentifier: string,
+    submitOtp: string,
+    submitChannel: AuthChannel
+  ): Promise<boolean> => {
+    if (!submitOtp || submitOtp.length < 6) {
+      const msg = 'Please enter the 6-digit verification code';
+      setError(msg);
+      onError?.(msg);
+      return false;
     }
 
     setIsLoading(true);
     clearError();
 
     try {
-      const result = await verifyOTP(identifier, otp, channel, sourceUrl, redirectUrl);
+      // Skip redirect - we'll show success screen first
+      const result = await verifyOTP(submitIdentifier, submitOtp, submitChannel, sourceUrl, redirectUrl, true);
+
+      // Check if 2FA is required (user has TOTP device)
+      if (result.requires_2fa && result.session_id) {
+        authLogger.info('2FA required after OTP verification');
+        setTwoFactorSessionId(result.session_id);
+        setShouldPrompt2FA(result.should_prompt_2fa || false);
+        setStep('2fa');
+        saveIdentifierToStorage(submitIdentifier, submitChannel);
+        return true; // OTP was successful, now need 2FA
+      }
 
       if (result.success) {
-        // Save identifier on successful login, clear opposite channel
-        if (channel === 'email') {
-          setSavedEmail(identifier);
-          setSavedPhone(''); // Clear phone storage
-        } else if (channel === 'phone') {
-          setSavedPhone(identifier);
-          setSavedEmail(''); // Clear email storage
+        saveIdentifierToStorage(submitIdentifier, submitChannel);
+
+        // Check if user should be prompted to set up 2FA
+        if (result.should_prompt_2fa) {
+          authLogger.info('OTP verification successful, prompting 2FA setup');
+          setShouldPrompt2FA(true);
+          setStep('2fa-setup');
+          onOTPSuccess?.();
+          return true;
         }
+
+        authLogger.info('OTP verification successful, showing success screen');
+        setStep('success');
         onOTPSuccess?.();
+        return true;
       } else {
         setError(result.message);
         onError?.(result.message);
+        return false;
       }
-    } catch (error) {
-      const message = 'An unexpected error occurred';
-      setError(message);
-      onError?.(message);
+    } catch {
+      const msg = 'An unexpected error occurred';
+      setError(msg);
+      onError?.(msg);
+      return false;
     } finally {
       setIsLoading(false);
     }
-  }, [identifier, otp, channel, verifyOTP, clearError, setSavedEmail, onOTPSuccess, onError, sourceUrl, redirectUrl]);
+  }, [verifyOTP, saveIdentifierToStorage, setError, setIsLoading, clearError, onOTPSuccess, onError, sourceUrl, redirectUrl, setTwoFactorSessionId, setShouldPrompt2FA, setStep]);
+
+  const handleOTPSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    await submitOTP(identifier, otp, channel);
+  }, [identifier, otp, channel, submitOTP]);
 
   const handleResendOTP = useCallback(async () => {
     setIsLoading(true);
     clearError();
-    
+
     try {
       const result = await requestOTP(identifier, channel, sourceUrl);
-      
+
       if (result.success) {
-        // Save identifier and clear OTP input, clear opposite channel
-        if (channel === 'email') {
-          saveEmail(identifier);
-          setSavedPhone(''); // Clear phone storage
-        } else if (channel === 'phone') {
-          savePhone(identifier);
-          setSavedEmail(''); // Clear email storage
-        }
+        saveIdentifierToStorage(identifier, channel);
         setOtp('');
       } else {
         setError(result.message);
         onError?.(result.message);
       }
-    } catch (error) {
-      const message = 'Failed to resend verification code';
-      setError(message);
-      onError?.(message);
+    } catch {
+      const msg = 'Failed to resend verification code';
+      setError(msg);
+      onError?.(msg);
     } finally {
       setIsLoading(false);
     }
-  }, [identifier, channel, requestOTP, saveEmail, clearError, setOtp, onError, sourceUrl]);
+  }, [identifier, channel, requestOTP, saveIdentifierToStorage, setOtp, setError, setIsLoading, clearError, onError, sourceUrl]);
 
   const handleBackToIdentifier = useCallback(() => {
     setStep('identifier');
     clearError();
-  }, [clearError]);
+  }, [setStep, clearError]);
 
   const forceOTPStep = useCallback(() => {
     setStep('otp');
     clearError();
-  }, [clearError]);
+  }, [setStep, clearError]);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // 2FA Handlers
+  // ─────────────────────────────────────────────────────────────────────────
+
+  const handle2FASubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
 
-  const handleAcceptedTermsChange = useCallback((checked: boolean) => {
-    setAcceptedTerms(checked);
-    setSavedTermsAccepted(checked);
-  }, [setSavedTermsAccepted]);
+    if (!twoFactorSessionId) {
+      const msg = 'Missing 2FA session';
+      setError(msg);
+      onError?.(msg);
+      return;
+    }
+
+    if (useBackupCode) {
+      await twoFactor.verifyBackupCode(twoFactorSessionId, twoFactorCode);
+    } else {
+      await twoFactor.verifyTOTP(twoFactorSessionId, twoFactorCode);
+    }
+  }, [twoFactorSessionId, twoFactorCode, useBackupCode, twoFactor, setError, onError]);
+
+  const handleUseBackupCode = useCallback(() => {
+    setUseBackupCode(true);
+    setTwoFactorCode('');
+    clearError();
+  }, [setUseBackupCode, setTwoFactorCode, clearError]);
+
+  const handleUseTOTP = useCallback(() => {
+    setUseBackupCode(false);
+    setTwoFactorCode('');
+    clearError();
+  }, [setUseBackupCode, setTwoFactorCode, clearError]);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Auto-auth from URL
+  // ─────────────────────────────────────────────────────────────────────────
 
-  // Auto-detect OTP from URL query parameters (only on auth page)
   useAutoAuth({
     allowedPaths: [authPath],
-    onOTPDetected: (otp: string) => {
-      authLogger.info('OTP detected, auto-submitting');
+    onOTPDetected: (detectedOtp: string) => {
+      if (isAutoSubmitFromUrlRef.current || isLoading) return;
+      isAutoSubmitFromUrlRef.current = true;
+
+      authLogger.info('OTP detected from URL, auto-submitting');
 
-      // Get saved identifier from auth context
-      const savedEmail = getSavedEmail();
       const savedPhone = getSavedPhone();
+      const savedEmail = getSavedEmail();
+
+      let autoIdentifier = '';
+      let autoChannel: AuthChannel = 'email';
 
-      // Prioritize phone over email if both exist
       if (savedPhone) {
-        setIdentifier(savedPhone);
-        setChannel('phone');
+        autoIdentifier = savedPhone;
+        autoChannel = 'phone';
       } else if (savedEmail) {
-        setIdentifier(savedEmail);
-        setChannel('email');
+        autoIdentifier = savedEmail;
+        autoChannel = 'email';
+      }
+
+      if (!autoIdentifier) {
+        authLogger.warn('No saved identifier found for auto-submit');
+        isAutoSubmitFromUrlRef.current = false;
+        return;
       }
 
-      // Set OTP and force OTP step
-      setOtp(otp);
+      // Update UI state
+      setIdentifier(autoIdentifier);
+      setChannel(autoChannel);
+      setOtp(detectedOtp);
       setStep('otp');
 
-      // Auto-submit after a short delay to ensure state is updated
-      setTimeout(() => {
-        const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
-        handleOTPSubmit(fakeEvent);
-      }, 200);
+      // Submit with explicit values
+      setTimeout(async () => {
+        try {
+          await submitOTP(autoIdentifier, detectedOtp, autoChannel);
+        } finally {
+          isAutoSubmitFromUrlRef.current = false;
+        }
+      }, 100);
     },
     cleanupUrl: true,
   });
 
+  // ─────────────────────────────────────────────────────────────────────────
+  // Return
+  // ─────────────────────────────────────────────────────────────────────────
+
   return {
-    // Form state
-    identifier,
-    channel,
-    otp,
-    isLoading,
-    acceptedTerms,
-    step,
-    error,
-    
-    // Form handlers
-    setIdentifier,
-    setChannel,
-    setOtp,
-    setAcceptedTerms: handleAcceptedTermsChange,
-    setError,
-    clearError,
-    
-    // Auth handlers
+    // State
+    ...formState,
+
+    // Submit handlers
     handleIdentifierSubmit,
     handleOTPSubmit,
     handleResendOTP,
     handleBackToIdentifier,
     forceOTPStep,
-    
-    // Utility methods
-    detectChannelFromIdentifier,
-    validateIdentifier,
+
+    // 2FA handlers
+    handle2FASubmit,
+    handleUseBackupCode,
+    handleUseTOTP,
+
+    // Validation
+    ...validation,
+
+    // Auto-submit ref
+    isAutoSubmittingFromUrl: isAutoSubmitFromUrlRef,
+
+    // 2FA state from hook (for loading indicator)
+    is2FALoading: twoFactor.isLoading,
+    twoFactorWarning: twoFactor.warning,
   };
-}; 
+};
+
+// Re-export types for convenience
+export type { AuthFormReturn, UseAuthFormOptions } from '../types';