@umituz/react-native-auth 1.6.8 → 1.7.0

package/src/presentation/components/RegisterForm.tsx

@@ -1,23 +1,16 @@
 /**
  * Register Form Component
- * Form fields and actions for registration
+ * Single Responsibility: Render register form UI
  */
 
-import React, { useState } from "react";
+import React from "react";
 import { View, StyleSheet } from "react-native";
 import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system-atoms";
 import { useLocalization } from "@umituz/react-native-localization";
-import {
-  validateEmail,
-  validatePassword,
-  validatePasswordConfirmation,
-  batchValidate,
-} from "@umituz/react-native-validation";
-import { useAuth } from "../hooks/useAuth";
+import { useRegisterForm } from "../hooks/useRegisterForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
 import { AuthLegalLinks } from "./AuthLegalLinks";
-import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
 
 interface RegisterFormProps {
   onNavigateToLogin: () => void;
@@ -35,100 +28,20 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   onPrivacyPress,
 }) => {
   const { t } = useLocalization();
-  const { signUp, loading, error } = useAuth();
-
-  const [displayName, setDisplayName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [localError, setLocalError] = useState<string | null>(null);
-  const [fieldErrors, setFieldErrors] = useState<{
-    displayName?: string;
-    email?: string;
-    password?: string;
-    confirmPassword?: string;
-  }>({});
-
-  const handleDisplayNameChange = (text: string) => {
-    setDisplayName(text);
-    if (fieldErrors.displayName) {
-      setFieldErrors({ ...fieldErrors, displayName: undefined });
-    }
-    if (localError) setLocalError(null);
-  };
-
-  const handleEmailChange = (text: string) => {
-    setEmail(text);
-    if (fieldErrors.email) {
-      setFieldErrors({ ...fieldErrors, email: undefined });
-    }
-    if (localError) setLocalError(null);
-  };
-
-  const handlePasswordChange = (text: string) => {
-    setPassword(text);
-    if (fieldErrors.password) {
-      setFieldErrors({ ...fieldErrors, password: undefined });
-    }
-    if (fieldErrors.confirmPassword) {
-      setFieldErrors({ ...fieldErrors, confirmPassword: undefined });
-    }
-    if (localError) setLocalError(null);
-  };
-
-  const handleConfirmPasswordChange = (text: string) => {
-    setConfirmPassword(text);
-    if (fieldErrors.confirmPassword) {
-      setFieldErrors({ ...fieldErrors, confirmPassword: undefined });
-    }
-    if (localError) setLocalError(null);
-  };
-
-  const handleSignUp = async () => {
-    setLocalError(null);
-    setFieldErrors({});
-
-    const validationResult = batchValidate([
-      {
-        field: "email",
-        validator: () => validateEmail(email.trim()),
-      },
-      {
-        field: "password",
-        validator: () =>
-          validatePassword(password, {
-            minLength: 6,
-            requireUppercase: false,
-            requireLowercase: false,
-            requireNumber: false,
-          }),
-      },
-      {
-        field: "confirmPassword",
-        validator: () =>
-          validatePasswordConfirmation(password, confirmPassword),
-      },
-    ]);
-
-    if (!validationResult.isValid) {
-      setFieldErrors(validationResult.errors);
-      return;
-    }
-
-    try {
-      await signUp(
-        email.trim(),
-        password,
-        displayName.trim() || undefined,
-      );
-    } catch (err: any) {
-      const localizationKey = getAuthErrorLocalizationKey(err);
-      const errorMessage = t(localizationKey);
-      setLocalError(errorMessage);
-    }
-  };
-
-  const displayError = localError || error;
+  const {
+    displayName,
+    email,
+    password,
+    confirmPassword,
+    fieldErrors,
+    loading,
+    handleDisplayNameChange,
+    handleEmailChange,
+    handlePasswordChange,
+    handleConfirmPasswordChange,
+    handleSignUp,
+    displayError,
+  } = useRegisterForm();
 
   return (
     <>

package/src/presentation/hooks/useAuth.ts

@@ -6,11 +6,9 @@
  * Adds app-specific state (guest mode, error handling) on top of Firebase Auth.
  */
 
-import { useEffect, useRef, useCallback, useState } from "react";
 import type { User } from "firebase/auth";
-import { DeviceEventEmitter } from "react-native";
-import { getAuthService } from "../../infrastructure/services/AuthService";
-import { useFirebaseAuth } from "@umituz/react-native-firebase-auth";
+import { useAuthState } from "./useAuthState";
+import { useAuthActions } from "./useAuthActions";
 
 export interface UseAuthResult {
   /** Current authenticated user */
@@ -49,239 +47,19 @@ export interface UseAuthResult {
  * ```
  */
 export function useAuth(): UseAuthResult {
-  // Use Firebase Auth's built-in state management
-  const { user: firebaseUser, loading: firebaseLoading } = useFirebaseAuth();
-  
-  // App-specific state
-  // Initialize isGuest from service if available
-  const [isGuest, setIsGuest] = useState(() => {
-    const service = getAuthService();
-    return service ? service.getIsGuestMode() : false;
-  });
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const prevAuthState = useRef({ isAuthenticated: false, isGuest: false });
-
-  // Sync Firebase Auth user with guest mode
-  const user = isGuest ? null : firebaseUser;
-  const isAuthenticated = !!user && !isGuest;
-
-  // Update authStatus whenever authentication state changes
-  useEffect(() => {
-    if (firebaseLoading || loading) {
-      // setAuthStatus('loading'); // This line is removed
-    } else if (isAuthenticated) {
-      // setAuthStatus('authenticated'); // This line is removed
-    } else if (isGuest) {
-      // setAuthStatus('guest'); // This line is removed
-    } else {
-      // setAuthStatus('unauthenticated'); // This line is removed
-    }
-  }, [isAuthenticated, isGuest, firebaseLoading, loading]);
-
-  // Handle analytics initialization (if callbacks are provided in config)
-  useEffect(() => {
-    const authChanged =
-      prevAuthState.current.isAuthenticated !== isAuthenticated ||
-      prevAuthState.current.isGuest !== isGuest;
-
-    // Analytics initialization is handled by AuthService callbacks (onAnalyticsInit, onAnalyticsInitGuest)
-    // This effect is kept for backward compatibility but analytics should be configured via AuthConfig
-
-    // Update previous state
-    prevAuthState.current = { isAuthenticated, isGuest };
-  }, [isAuthenticated, isGuest]);
-
-  // Reset guest mode when user signs in
-  useEffect(() => {
-    if (firebaseUser && isGuest) {
-      setIsGuest(false);
-    }
-  }, [firebaseUser, isGuest]);
-
-  // Sync isGuest state with service on mount
-  useEffect(() => {
-    const service = getAuthService();
-    if (service) {
-      const serviceIsGuest = service.getIsGuestMode();
-      if (serviceIsGuest !== isGuest) {
-        setIsGuest(serviceIsGuest);
-      }
-    }
-  }, []);
-
-  // Listen for guest-mode-enabled event to update state
-  useEffect(() => {
-    const guestSubscription = DeviceEventEmitter.addListener(
-      "guest-mode-enabled",
-      () => {
-        /* eslint-disable-next-line no-console */
-        if (__DEV__) {
-          console.log("[useAuth] Guest mode enabled event received");
-        }
-        setIsGuest(true);
-      }
-    );
-
-    // Listen for user-authenticated event to ensure state updates
-    const authSubscription = DeviceEventEmitter.addListener(
-      "user-authenticated",
-      () => {
-        /* eslint-disable-next-line no-console */
-        if (__DEV__) {
-          console.log("[useAuth] User authenticated event received");
-        }
-        // Clear guest mode if set
-        if (isGuest) {
-          setIsGuest(false);
-        }
-      }
-    );
-
-    return () => {
-      guestSubscription.remove();
-      authSubscription.remove();
-    };
-  }, [isGuest]);
-
-  const signUp = useCallback(async (
-    email: string,
-    password: string,
-    displayName?: string
-  ) => {
-    const service = getAuthService();
-    if (!service) {
-      const err = "Auth service is not initialized";
-      setError(err);
-      throw new Error(err);
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      await service.signUp({ email, password, displayName });
-      // Clear guest mode when user signs up
-      if (isGuest) {
-        setIsGuest(false);
-      }
-      // User state is updated by Firebase Auth's onAuthStateChanged
-    } catch (err: any) {
-      const errorMessage = err.message || "Sign up failed";
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  }, [isGuest]);
-
-  const signIn = useCallback(async (email: string, password: string) => {
-    /* eslint-disable-next-line no-console */
-    if (__DEV__) {
-      console.log("[useAuth] signIn called with email:", email);
-    }
-    const service = getAuthService();
-    if (!service) {
-      const err = "Auth service is not initialized";
-      setError(err);
-      throw new Error(err);
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.log("[useAuth] Calling service.signIn()");
-      }
-      await service.signIn({ email, password });
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.log("[useAuth] Service.signIn() completed successfully");
-      }
-      // Clear guest mode when user signs in
-      if (isGuest) {
-        /* eslint-disable-next-line no-console */
-        if (__DEV__) {
-          console.log("[useAuth] Clearing guest mode after sign in");
-        }
-        setIsGuest(false);
-      }
-      // User state is updated by Firebase Auth's onAuthStateChanged
-    } catch (err: any) {
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.error("[useAuth] Error in signIn:", err);
-      }
-      const errorMessage = err.message || "Failed to sign in";
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  }, [isGuest]);
-
-  const signOut = useCallback(async () => {
-    const service = getAuthService();
-    if (!service) {
-      return;
-    }
-    try {
-      setLoading(true);
-      await service.signOut();
-      // User state is updated by Firebase Auth's onAuthStateChanged
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const continueAsGuest = useCallback(async () => {
-    /* eslint-disable-next-line no-console */
-    if (__DEV__) {
-      console.log("[useAuth] continueAsGuest called");
-    }
-    const service = getAuthService();
-    if (!service) {
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.log("[useAuth] No service, setting isGuest directly");
-      }
-      setIsGuest(true);
-      return;
-    }
-    try {
-      setLoading(true);
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.log("[useAuth] Calling service.setGuestMode()");
-      }
-      await service.setGuestMode();
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.log("[useAuth] Service.setGuestMode() completed, setting isGuest to true");
-      }
-      // State will be updated by event listener, but set it here too for immediate update
-      setIsGuest(true);
-    } catch (error) {
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.error("[useAuth] Error in continueAsGuest:", error);
-      }
-      // Even if service fails, set guest mode locally
-      setIsGuest(true);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const state = useAuthState();
+  const actions = useAuthActions(state);
 
   return {
-    user,
-    loading: loading || firebaseLoading,
-    isGuest,
-    isAuthenticated,
-    // authStatus, // This line is removed
-    error,
-    signUp,
-    signIn,
-    signOut,
-    continueAsGuest,
-    setError,
+    user: state.user,
+    loading: state.loading,
+    isGuest: state.isGuest,
+    isAuthenticated: state.isAuthenticated,
+    error: state.error,
+    signUp: actions.signUp,
+    signIn: actions.signIn,
+    signOut: actions.signOut,
+    continueAsGuest: actions.continueAsGuest,
+    setError: state.setError,
   };
 }

package/src/presentation/hooks/useAuthActions.ts

@@ -0,0 +1,186 @@
+/**
+ * useAuthActions Hook
+ * Single Responsibility: Handle authentication actions
+ */
+
+import { useCallback } from "react";
+import { getAuthService } from "../../infrastructure/services/AuthService";
+import type { UseAuthStateResult } from "./useAuthState";
+
+export interface UseAuthActionsResult {
+  signUp: (email: string, password: string, displayName?: string) => Promise<void>;
+  signIn: (email: string, password: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  continueAsGuest: () => Promise<void>;
+}
+
+/**
+ * Hook for authentication actions
+ */
+export function useAuthActions(
+  state: UseAuthStateResult
+): UseAuthActionsResult {
+  const { isGuest, setIsGuest, setLoading, setError } = state;
+
+  const signUp = useCallback(async (
+    email: string,
+    password: string,
+    displayName?: string
+  ) => {
+    const service = getAuthService();
+    if (!service) {
+      const err = "Auth service is not initialized";
+      setError(err);
+      throw new Error(err);
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      await service.signUp({ email, password, displayName });
+      if (isGuest) {
+        setIsGuest(false);
+      }
+    } catch (err: any) {
+      const errorMessage = err.message || "Sign up failed";
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [isGuest, setIsGuest, setLoading, setError]);
+
+  const signIn = useCallback(async (email: string, password: string) => {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) {
+      console.log("[useAuthActions] signIn called with email:", email);
+    }
+    const service = getAuthService();
+    if (!service) {
+      const err = "Auth service is not initialized";
+      setError(err);
+      throw new Error(err);
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] Calling service.signIn()");
+      }
+      await service.signIn({ email, password });
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] Service.signIn() completed successfully");
+      }
+      if (isGuest) {
+        /* eslint-disable-next-line no-console */
+        if (__DEV__) {
+          console.log("[useAuthActions] Clearing guest mode after sign in");
+        }
+        setIsGuest(false);
+      }
+    } catch (err: any) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.error("[useAuthActions] Error in signIn:", err);
+      }
+      const errorMessage = err.message || "Failed to sign in";
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [isGuest, setIsGuest, setLoading, setError]);
+
+  const signOut = useCallback(async () => {
+    const service = getAuthService();
+    if (!service) {
+      return;
+    }
+    try {
+      setLoading(true);
+      await service.signOut();
+    } finally {
+      setLoading(false);
+    }
+  }, [setLoading]);
+
+  const continueAsGuest = useCallback(async () => {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) {
+      console.log("========================================");
+      console.log("[useAuthActions] 🎯 continueAsGuest() CALLED");
+      console.log("[useAuthActions] Current state:", {
+        isGuest,
+        loading: state.loading,
+      });
+      console.log("========================================");
+    }
+    
+    const service = getAuthService();
+    if (!service) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] ⚠️ No service available, setting isGuest directly");
+      }
+      setIsGuest(true);
+      return;
+    }
+    
+    try {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] Setting loading to true...");
+      }
+      setLoading(true);
+      
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] 📞 Calling service.setGuestMode()...");
+      }
+      await service.setGuestMode();
+      
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] ✅ Service.setGuestMode() completed successfully");
+        console.log("[useAuthActions] Setting isGuest to true...");
+      }
+      
+      setIsGuest(true);
+      
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] ✅ isGuest set to true");
+      }
+    } catch (error) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.error("[useAuthActions] ❌ ERROR in continueAsGuest:", error);
+        console.error("[useAuthActions] Error details:", {
+          message: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined,
+        });
+      }
+      setIsGuest(true);
+    } finally {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] Setting loading to false...");
+      }
+      setLoading(false);
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) {
+        console.log("[useAuthActions] ✅ continueAsGuest() FINISHED");
+        console.log("========================================");
+      }
+    }
+  }, [isGuest, setIsGuest, setLoading, state.loading]);
+
+  return {
+    signUp,
+    signIn,
+    signOut,
+    continueAsGuest,
+  };
+}
+

package/src/presentation/hooks/useAuthState.ts

@@ -0,0 +1,99 @@
+/**
+ * useAuthState Hook
+ * Single Responsibility: Manage authentication state
+ */
+
+import { useState, useEffect } from "react";
+import type { User } from "firebase/auth";
+import { DeviceEventEmitter } from "react-native";
+import { getAuthService } from "../../infrastructure/services/AuthService";
+import { useFirebaseAuth } from "@umituz/react-native-firebase-auth";
+
+export interface UseAuthStateResult {
+  user: User | null;
+  isAuthenticated: boolean;
+  isGuest: boolean;
+  loading: boolean;
+  error: string | null;
+  setError: (error: string | null) => void;
+  setIsGuest: (isGuest: boolean) => void;
+  setLoading: (loading: boolean) => void;
+}
+
+/**
+ * Hook for managing authentication state
+ */
+export function useAuthState(): UseAuthStateResult {
+  const { user: firebaseUser, loading: firebaseLoading } = useFirebaseAuth();
+  const [isGuest, setIsGuest] = useState(() => {
+    const service = getAuthService();
+    return service ? service.getIsGuestMode() : false;
+  });
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const user = isGuest ? null : firebaseUser;
+  const isAuthenticated = !!user && !isGuest;
+
+  // Reset guest mode when user signs in
+  useEffect(() => {
+    if (firebaseUser && isGuest) {
+      setIsGuest(false);
+    }
+  }, [firebaseUser, isGuest]);
+
+  // Sync isGuest state with service on mount
+  useEffect(() => {
+    const service = getAuthService();
+    if (service) {
+      const serviceIsGuest = service.getIsGuestMode();
+      if (serviceIsGuest !== isGuest) {
+        setIsGuest(serviceIsGuest);
+      }
+    }
+  }, []);
+
+  // Listen for guest-mode-enabled event
+  useEffect(() => {
+    const guestSubscription = DeviceEventEmitter.addListener(
+      "guest-mode-enabled",
+      () => {
+        /* eslint-disable-next-line no-console */
+        if (__DEV__) {
+          console.log("[useAuthState] Guest mode enabled event received");
+        }
+        setIsGuest(true);
+      }
+    );
+
+    const authSubscription = DeviceEventEmitter.addListener(
+      "user-authenticated",
+      () => {
+        /* eslint-disable-next-line no-console */
+        if (__DEV__) {
+          console.log("[useAuthState] User authenticated event received");
+        }
+        if (isGuest) {
+          setIsGuest(false);
+        }
+      }
+    );
+
+    return () => {
+      guestSubscription.remove();
+      authSubscription.remove();
+    };
+  }, [isGuest]);
+
+  return {
+    user,
+    isAuthenticated,
+    isGuest,
+    loading: loading || firebaseLoading,
+    error,
+    setError,
+    setIsGuest,
+    setLoading,
+  };
+}
+