@djangocfg/layouts 1.0.1

package/src/auth/hooks/useAuthForm.ts

@@ -0,0 +1,329 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useAuth } from '../context';
+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;
+}
+
+export const useAuthForm = (options: UseAuthFormOptions): AuthFormState & AuthFormHandlers => {
+  const { onIdentifierSuccess, onOTPSuccess, onError, sourceUrl } = 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);
+    }
+    
+    return false;
+  }, [detectChannelFromIdentifier]);
+
+  // Load saved data on mount
+  useEffect(() => {
+    const authSavedEmail = getSavedEmail();
+    const authSavedPhone = getSavedPhone();
+    
+    // Prioritize phone over email if both exist
+    if (authSavedPhone) {
+      setIdentifier(authSavedPhone);
+      setChannel('phone');
+    } else if (authSavedEmail) {
+      setIdentifier(authSavedEmail);
+      setChannel('email');
+    }
+    
+    if (savedTermsAccepted) {
+      setAcceptedTerms(savedTermsAccepted);
+    }
+  }, [getSavedEmail, getSavedPhone, savedTermsAccepted]);
+
+  // Auto-detect channel when identifier changes
+  useEffect(() => {
+    if (identifier) {
+      const detectedChannel = detectChannelFromIdentifier(identifier);
+      if (detectedChannel && detectedChannel !== channel) {
+        setChannel(detectedChannel);
+      }
+    }
+  }, [identifier, channel, detectChannelFromIdentifier]);
+
+
+
+  const clearError = useCallback(() => setError(''), []);
+
+  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);
+      return;
+    }
+
+    // Validate identifier format
+    if (!validateIdentifier(identifier, channel)) {
+      const message = channel === 'phone' 
+        ? 'Please enter a valid phone number (e.g., +1234567890)' 
+        : 'Please enter a valid email address';
+      setError(message);
+      onError?.(message);
+      return;
+    }
+
+    if (!acceptedTerms) {
+      const message = 'Please accept the Terms of Service and Privacy Policy';
+      setError(message);
+      onError?.(message);
+      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);
+        setStep('otp');
+        onIdentifierSuccess?.(identifier, channel);
+      } else {
+        setError(result.message);
+        onError?.(result.message);
+      }
+    } catch (error) {
+      const message = 'An unexpected error occurred';
+      setError(message);
+      onError?.(message);
+    } 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;
+    }
+
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      const result = await verifyOTP(identifier, otp, channel, sourceUrl);
+      
+      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
+        }
+        onOTPSuccess?.();
+      } else {
+        setError(result.message);
+        onError?.(result.message);
+      }
+    } catch (error) {
+      const message = 'An unexpected error occurred';
+      setError(message);
+      onError?.(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [identifier, otp, channel, verifyOTP, clearError, setSavedEmail, onOTPSuccess, onError, sourceUrl]);
+
+  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
+        }
+        setOtp('');
+      } else {
+        setError(result.message);
+        onError?.(result.message);
+      }
+    } catch (error) {
+      const message = 'Failed to resend verification code';
+      setError(message);
+      onError?.(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [identifier, channel, requestOTP, saveEmail, clearError, setOtp, onError, sourceUrl]);
+
+  const handleBackToIdentifier = useCallback(() => {
+    setStep('identifier');
+    clearError();
+  }, [clearError]);
+
+  const forceOTPStep = useCallback(() => {
+    setStep('otp');
+    clearError();
+  }, [clearError]);
+
+  const handleAcceptedTermsChange = useCallback((checked: boolean) => {
+    setAcceptedTerms(checked);
+    setSavedTermsAccepted(checked);
+  }, [setSavedTermsAccepted]);
+
+  // Auto-detect OTP from URL query parameters
+  useAutoAuth({
+    onOTPDetected: (otp: string) => {
+      console.log('[useAuthForm] OTP detected, auto-submitting');
+      
+      // Get saved identifier from auth context
+      const savedEmail = getSavedEmail();
+      const savedPhone = getSavedPhone();
+      
+      // Prioritize phone over email if both exist
+      if (savedPhone) {
+        setIdentifier(savedPhone);
+        setChannel('phone');
+      } else if (savedEmail) {
+        setIdentifier(savedEmail);
+        setChannel('email');
+      }
+      
+      // Set OTP and force OTP step
+      setOtp(otp);
+      setStep('otp');
+      
+      // Auto-submit after a short delay to ensure state is updated
+      setTimeout(() => {
+        const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
+        handleOTPSubmit(fakeEvent);
+      }, 200);
+    },
+    cleanupUrl: true,
+  });
+
+  return {
+    // Form state
+    identifier,
+    channel,
+    otp,
+    isLoading,
+    acceptedTerms,
+    step,
+    error,
+    
+    // Form handlers
+    setIdentifier,
+    setChannel,
+    setOtp,
+    setAcceptedTerms: handleAcceptedTermsChange,
+    setError,
+    clearError,
+    
+    // Auth handlers
+    handleIdentifierSubmit,
+    handleOTPSubmit,
+    handleResendOTP,
+    handleBackToIdentifier,
+    forceOTPStep,
+    
+    // Utility methods
+    detectChannelFromIdentifier,
+    validateIdentifier,
+  };
+}; 

package/src/auth/hooks/useAuthGuard.ts

@@ -0,0 +1,23 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+import { useAuth } from '../context';
+
+interface UseAuthGuardOptions {
+  redirectTo?: string;
+  requireAuth?: boolean;
+}
+
+export const useAuthGuard = (options: UseAuthGuardOptions = {}) => {
+  const { redirectTo = '/auth', requireAuth = true } = options;
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && requireAuth && !isAuthenticated) {
+      router.push(redirectTo);
+    }
+  }, [isAuthenticated, isLoading, router, redirectTo, requireAuth]);
+
+  return { isAuthenticated, isLoading };
+}; 

package/src/auth/hooks/useAuthRedirect.ts

@@ -0,0 +1,51 @@
+import { useSessionStorage } from './useSessionStorage';
+
+const AUTH_REDIRECT_KEY = 'auth_redirect_url';
+
+export interface AuthRedirectOptions {
+  fallbackUrl?: string;
+  clearOnUse?: boolean;
+}
+
+export const useAuthRedirectManager = (options: AuthRedirectOptions = {}) => {
+  const { fallbackUrl = '/dashboard', clearOnUse = true } = options;
+  const [redirectUrl, setRedirectUrl, removeRedirectUrl] = useSessionStorage<string>(AUTH_REDIRECT_KEY, '');
+
+  const setRedirect = (url: string) => {
+    setRedirectUrl(url);
+  };
+
+  const getRedirect = () => {
+    return redirectUrl;
+  };
+
+  const clearRedirect = () => {
+    removeRedirectUrl();
+  };
+
+  const hasRedirect = () => {
+    return redirectUrl.length > 0;
+  };
+
+  const getFinalRedirectUrl = () => {
+    return redirectUrl || fallbackUrl;
+  };
+
+  const useAndClearRedirect = () => {
+    const finalUrl = getFinalRedirectUrl();
+    if (clearOnUse) {
+      clearRedirect();
+    }
+    return finalUrl;
+  };
+
+  return {
+    redirectUrl,
+    setRedirect,
+    getRedirect,
+    clearRedirect,
+    hasRedirect,
+    getFinalRedirectUrl,
+    useAndClearRedirect
+  };
+}; 

package/src/auth/hooks/useAutoAuth.ts

@@ -0,0 +1,42 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export interface UseAutoAuthOptions {
+  onOTPDetected?: (otp: string) => void;
+  cleanupUrl?: boolean;
+}
+
+/**
+ * Hook for automatic authentication from URL query parameters
+ * Detects OTP from URL and triggers callback
+ */
+export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
+  const { onOTPDetected, cleanupUrl = true } = options;
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    const queryOtp = router.query.otp as string;
+
+    // Handle OTP detection
+    if (queryOtp && typeof queryOtp === 'string' && queryOtp.length === 6) {
+      console.log('[useAutoAuth] OTP detected in URL:', queryOtp);
+      onOTPDetected?.(queryOtp);
+    }
+
+    // Clean up URL to remove sensitive params for security
+    if (cleanupUrl && queryOtp) {
+      const { otp: _, ...cleanQuery } = router.query;
+      router.replace({
+        pathname: router.pathname,
+        query: cleanQuery
+      }, undefined, { shallow: true });
+    }
+  }, [router.isReady, router.query, router.pathname, onOTPDetected, cleanupUrl]);
+
+  return {
+    isReady: router.isReady,
+    hasOTP: !!(router.query.otp),
+  };
+};

package/src/auth/hooks/useLocalStorage.ts

@@ -0,0 +1,211 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Simple localStorage hook with better error handling
+ * @param key - Storage key
+ * @param initialValue - Default value if key doesn't exist
+ * @returns [value, setValue, removeValue] - Current value, setter function, and remove function
+ */
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // Get initial value from localStorage or use provided initialValue
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item === null) {
+        return initialValue;
+      }
+      
+      // Try to parse as JSON first, fallback to string
+      try {
+        return JSON.parse(item);
+      } catch {
+        // If JSON.parse fails, return as string
+        return item as T;
+      }
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  // Check data size and limit
+  const checkDataSize = (data: any): boolean => {
+    try {
+      const jsonString = JSON.stringify(data);
+      const sizeInBytes = new Blob([jsonString]).size;
+      const sizeInKB = sizeInBytes / 1024;
+      
+      // Limit to 1MB per item
+      if (sizeInKB > 1024) {
+        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
+        return false;
+      }
+      
+      return true;
+    } catch (error) {
+      console.error(`Error checking data size for key "${key}":`, error);
+      return false;
+    }
+  };
+
+  // Clear old data when localStorage is full
+  const clearOldData = () => {
+    try {
+      const keys = Object.keys(localStorage).filter(key => key && typeof key === 'string');
+      // Remove oldest items if we have more than 50 items
+      if (keys.length > 50) {
+        const itemsToRemove = Math.ceil(keys.length * 0.2);
+        for (let i = 0; i < itemsToRemove; i++) {
+          try {
+            const key = keys[i];
+            if (key) {
+              localStorage.removeItem(key);
+              localStorage.removeItem(`${key}_timestamp`);
+            }
+          } catch {
+            // Ignore errors when removing items
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error clearing old localStorage data:', error);
+    }
+  };
+
+  // Force clear all data if quota is exceeded
+  const forceClearAll = () => {
+    try {
+      const keys = Object.keys(localStorage);
+      for (const key of keys) {
+        try {
+          localStorage.removeItem(key);
+        } catch {
+          // Ignore errors when removing items
+        }
+      }
+    } catch (error) {
+      console.error('Error force clearing localStorage:', error);
+    }
+  };
+
+  // Update localStorage when value changes
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      
+      // Check data size before attempting to save
+      if (!checkDataSize(valueToStore)) {
+        console.warn(`Data size too large for key "${key}", removing key`);
+        // Remove the key if data is too large
+        try {
+          window.localStorage.removeItem(key);
+          window.localStorage.removeItem(`${key}_timestamp`);
+        } catch {
+          // Ignore errors when removing
+        }
+        // Still update the state
+        setStoredValue(valueToStore);
+        return;
+      }
+      
+      setStoredValue(valueToStore);
+
+      if (typeof window !== 'undefined') {
+        // Try to set the value
+        try {
+          // For strings, store directly without JSON.stringify
+          if (typeof valueToStore === 'string') {
+            window.localStorage.setItem(key, valueToStore);
+          } else {
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+          // Add timestamp for cleanup
+          window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
+        } catch (storageError: any) {
+          // If quota exceeded, clear old data and try again
+          if (storageError.name === 'QuotaExceededError' || 
+              storageError.code === 22 || 
+              storageError.message?.includes('quota')) {
+            console.warn('localStorage quota exceeded, clearing old data...');
+            clearOldData();
+            
+            // Try again after clearing
+            try {
+              // For strings, store directly without JSON.stringify
+              if (typeof valueToStore === 'string') {
+                window.localStorage.setItem(key, valueToStore);
+              } else {
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+              }
+              window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
+            } catch (retryError) {
+              console.error(`Failed to set localStorage key "${key}" after clearing old data:`, retryError);
+              // If still fails, force clear all and try one more time
+              try {
+                forceClearAll();
+                // For strings, store directly without JSON.stringify
+                if (typeof valueToStore === 'string') {
+                  window.localStorage.setItem(key, valueToStore);
+                } else {
+                  window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                }
+                window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
+              } catch (finalError) {
+                console.error(`Failed to set localStorage key "${key}" after force clearing:`, finalError);
+                // If still fails, just update the state without localStorage
+                setStoredValue(valueToStore);
+              }
+            }
+          } else {
+            throw storageError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+      // Still update the state even if localStorage fails
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    }
+  };
+
+  // Remove value from localStorage
+  const removeValue = () => {
+    try {
+      setStoredValue(initialValue);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.removeItem(key);
+          window.localStorage.removeItem(`${key}_timestamp`);
+        } catch (removeError: any) {
+          // If removal fails due to quota, try to clear some data first
+          if (removeError.name === 'QuotaExceededError' || 
+              removeError.code === 22 || 
+              removeError.message?.includes('quota')) {
+            console.warn('localStorage quota exceeded during removal, clearing old data...');
+            clearOldData();
+            
+            try {
+              window.localStorage.removeItem(key);
+              window.localStorage.removeItem(`${key}_timestamp`);
+            } catch (retryError) {
+              console.error(`Failed to remove localStorage key "${key}" after clearing:`, retryError);
+              // If still fails, force clear all
+              forceClearAll();
+            }
+          } else {
+            throw removeError;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(`Error removing localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue, removeValue] as const;
+}