@umituz/react-native-auth 3.6.76 → 3.6.78

package/src/presentation/components/form/FormPasswordInput.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from "react";
+import { TextInput, StyleSheet, ViewStyle } from "react-native";
+import { AtomicInput } from "@umituz/react-native-design-system";
+
+export interface FormPasswordInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label: string;
+  placeholder: string;
+  error?: string | null;
+  disabled?: boolean;
+  onSubmitEditing?: () => void;
+  returnKeyType?: "next" | "done";
+  style?: ViewStyle;
+}
+
+export const FormPasswordInput = forwardRef<React.ElementRef<typeof TextInput>, FormPasswordInputProps>(
+  (
+    {
+      value,
+      onChangeText,
+      label,
+      placeholder,
+      error,
+      disabled = false,
+      onSubmitEditing,
+      returnKeyType = "done",
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <AtomicInput
+        ref={ref}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        secureTextEntry
+        showPasswordToggle
+        autoCapitalize="none"
+        autoCorrect={false}
+        disabled={disabled}
+        state={error ? "error" : "default"}
+        helperText={error || undefined}
+        returnKeyType={returnKeyType}
+        onSubmitEditing={onSubmitEditing}
+        blurOnSubmit={returnKeyType === "done"}
+        textContentType="oneTimeCode"
+        style={[styles.input, style]}
+      />
+    );
+  }
+);
+
+FormPasswordInput.displayName = "FormPasswordInput";
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: 20,
+  },
+});

package/src/presentation/components/form/FormTextInput.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from "react";
+import { TextInput, StyleSheet, ViewStyle } from "react-native";
+import { AtomicInput } from "@umituz/react-native-design-system";
+
+export interface FormTextInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  label: string;
+  placeholder: string;
+  error?: string | null;
+  disabled?: boolean;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  onSubmitEditing?: () => void;
+  returnKeyType?: "next" | "done";
+  style?: ViewStyle;
+}
+
+export const FormTextInput = forwardRef<React.ElementRef<typeof TextInput>, FormTextInputProps>(
+  (
+    {
+      value,
+      onChangeText,
+      label,
+      placeholder,
+      error,
+      disabled = false,
+      autoCapitalize = "none",
+      onSubmitEditing,
+      returnKeyType = "next",
+      style,
+    },
+    ref
+  ) => {
+    return (
+      <AtomicInput
+        ref={ref}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        autoCapitalize={autoCapitalize}
+        disabled={disabled}
+        state={error ? "error" : "default"}
+        helperText={error || undefined}
+        returnKeyType={returnKeyType}
+        onSubmitEditing={onSubmitEditing}
+        blurOnSubmit={returnKeyType === "done"}
+        style={[styles.input, style]}
+      />
+    );
+  }
+);
+
+FormTextInput.displayName = "FormTextInput";
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: 20,
+  },
+});

package/src/presentation/components/form/index.ts

@@ -0,0 +1,6 @@
+export { FormEmailInput } from "./FormEmailInput";
+export { FormPasswordInput } from "./FormPasswordInput";
+export { FormTextInput } from "./FormTextInput";
+export type { FormEmailInputProps } from "./FormEmailInput";
+export type { FormPasswordInputProps } from "./FormPasswordInput";
+export type { FormTextInputProps } from "./FormTextInput";

package/src/presentation/hooks/useAccountManagement.ts

@@ -49,14 +49,44 @@ export const useAccountManagement = (
     passwordPromptConfirm = "Confirm",
   } = options;
 
+  const PASSWORD_PROMPT_TIMEOUT_MS = 300000; // 5 minutes
+
   const defaultPasswordPrompt = useCallback((): Promise<string | null> => {
     return new Promise((resolve) => {
+      let resolved = false;
+
+      const timeoutId = setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          resolve(null); // Treat timeout as cancellation
+        }
+      }, PASSWORD_PROMPT_TIMEOUT_MS);
+
       Alert.prompt(
         passwordPromptTitle,
         passwordPromptMessage,
         [
-          { text: passwordPromptCancel, style: "cancel", onPress: () => resolve(null) },
-          { text: passwordPromptConfirm, onPress: (pwd?: string) => resolve(pwd || null) },
+          {
+            text: passwordPromptCancel,
+            style: "cancel",
+            onPress: () => {
+              if (!resolved) {
+                resolved = true;
+                clearTimeout(timeoutId);
+                resolve(null);
+              }
+            }
+          },
+          {
+            text: passwordPromptConfirm,
+            onPress: (pwd?: string) => {
+              if (!resolved) {
+                resolved = true;
+                clearTimeout(timeoutId);
+                resolve(pwd || null);
+              }
+            }
+          },
         ],
         "secure-text"
       );

package/src/presentation/hooks/useAuth.ts

@@ -70,6 +70,7 @@ export function useAuth(): UseAuthResult {
         setLoading(true);
         setError(null);
         await signUpMutation.mutateAsync({ email, password, displayName });
+        // Only clear anonymous flag after successful signup
         setIsAnonymous(false);
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : "Sign up failed");
@@ -87,6 +88,7 @@ export function useAuth(): UseAuthResult {
         setLoading(true);
         setError(null);
         await signInMutation.mutateAsync({ email, password });
+        // Only clear anonymous flag after successful signin
         setIsAnonymous(false);
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : "Sign in failed");
@@ -114,14 +116,18 @@ export function useAuth(): UseAuthResult {
   const continueAnonymously = useCallback(async () => {
     try {
       setLoading(true);
+      setError(null);
       await anonymousModeMutation.mutateAsync();
+      // Only set anonymous flag after successful mutation
       setIsAnonymous(true);
-    } catch {
-      setIsAnonymous(true);
+    } catch (err: unknown) {
+      // Don't set anonymous flag on error - let user try again or choose another option
+      setError(err instanceof Error ? err.message : "Failed to continue anonymously");
+      throw err;
     } finally {
       setLoading(false);
     }
-  }, [setIsAnonymous, setLoading, anonymousModeMutation]);
+  }, [setIsAnonymous, setLoading, setError, anonymousModeMutation]);
 
   return {
     user, userId, userType, loading, isAuthReady, isAnonymous, isAuthenticated, isRegisteredUser, error,

package/src/presentation/hooks/useAuthBottomSheet.ts

@@ -28,8 +28,6 @@ export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
   const { socialConfig, onGoogleSignIn, onAppleSignIn, onAuthSuccess } = params;
 
   const modalRef = useRef<BottomSheetModalRef>(null);
-  const [googleLoading, setGoogleLoading] = useState(false);
-  const [appleLoading, setAppleLoading] = useState(false);
 
   const { isVisible, mode, hideAuthModal, setMode, executePendingCallback, clearPendingCallback } =
     useAuthModalStore();
@@ -44,6 +42,10 @@ export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
     return determineEnabledProviders(socialConfig, appleAvailable, googleConfigured);
   }, [socialConfig, appleAvailable, googleConfigured]);
 
+  // Social auth loading states
+  const [googleLoading, setGoogleLoading] = useState(false);
+  const [appleLoading, setAppleLoading] = useState(false);
+
   // Handle visibility sync with modalRef
   useEffect(() => {
     if (isVisible) {
@@ -90,7 +92,7 @@ export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
     setMode("login");
   }, [setMode]);
 
-  const handleGoogleSignInInternal = useCallback(async () => {
+  const handleGoogleSignIn = useCallback(async () => {
     setGoogleLoading(true);
     try {
       if (onGoogleSignIn) {
@@ -103,7 +105,7 @@ export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
     }
   }, [onGoogleSignIn, signInWithGoogle]);
 
-  const handleAppleSignInInternal = useCallback(async () => {
+  const handleAppleSignIn = useCallback(async () => {
     setAppleLoading(true);
     try {
       if (onAppleSignIn) {
@@ -126,7 +128,7 @@ export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
     handleClose,
     handleNavigateToRegister,
     handleNavigateToLogin,
-    handleGoogleSignIn: handleGoogleSignInInternal,
-    handleAppleSignIn: handleAppleSignInInternal,
+    handleGoogleSignIn,
+    handleAppleSignIn,
   };
 }

package/src/presentation/hooks/useLoginForm.ts

@@ -3,6 +3,7 @@ import { useAuth } from "./useAuth";
 import { getAuthErrorLocalizationKey, resolveErrorMessage } from "../utils/getAuthErrorMessage";
 import { validateLoginForm } from "../utils/form/formValidation.util";
 import { alertService } from "@umituz/react-native-design-system";
+import { useFormFields } from "../utils/form/useFormField.hook";
 
 export interface LoginFormTranslations {
   successTitle: string;
@@ -32,43 +33,55 @@ export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
   const { signIn, loading, error, continueAnonymously } = useAuth();
   const translations = config?.translations;
 
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
   const [emailError, setEmailError] = useState<string | null>(null);
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [localError, setLocalError] = useState<string | null>(null);
 
-  const getErrorMessage = useCallback((key: string) => {
-    return resolveErrorMessage(key, translations?.errors);
-  }, [translations]);
+  const clearLocalError = useCallback(() => {
+    setLocalError(null);
+  }, []);
 
-  const clearErrors = useCallback(() => {
+  const clearFieldErrorsState = useCallback(() => {
     setEmailError(null);
     setPasswordError(null);
     setLocalError(null);
   }, []);
 
+  const { fields, updateField } = useFormFields(
+    { email: "", password: "" },
+    null,
+    { clearLocalError }
+  );
+
+  const getErrorMessage = useCallback((key: string) => {
+    return resolveErrorMessage(key, translations?.errors);
+  }, [translations]);
+
+  const clearErrors = useCallback(() => {
+    clearFieldErrorsState();
+  }, [clearFieldErrorsState]);
+
   const handleEmailChange = useCallback(
     (text: string) => {
-      setEmail(text);
-      if (emailError || localError) clearErrors();
+      updateField("email", text);
+      if (emailError || localError) clearFieldErrorsState();
     },
-    [emailError, localError, clearErrors],
+    [updateField, emailError, localError, clearFieldErrorsState]
   );
 
   const handlePasswordChange = useCallback(
     (text: string) => {
-      setPassword(text);
-      if (passwordError || localError) clearErrors();
+      updateField("password", text);
+      if (passwordError || localError) clearFieldErrorsState();
     },
-    [passwordError, localError, clearErrors],
+    [updateField, passwordError, localError, clearFieldErrorsState]
   );
 
   const handleSignIn = useCallback(async () => {
     clearErrors();
 
     const validation = validateLoginForm(
-      { email: email.trim(), password },
+      { email: fields.email.trim(), password: fields.password },
       getErrorMessage
     );
 
@@ -81,7 +94,7 @@ export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
     }
 
     try {
-      await signIn(email.trim(), password);
+      await signIn(fields.email.trim(), fields.password);
 
       if (translations) {
         alertService.success(
@@ -93,7 +106,7 @@ export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
       const localizationKey = getAuthErrorLocalizationKey(err);
       setLocalError(getErrorMessage(localizationKey));
     }
-  }, [email, password, signIn, translations, getErrorMessage, clearErrors]);
+  }, [fields, signIn, translations, getErrorMessage, clearErrors, updateField]);
 
   const handleContinueAnonymously = useCallback(async () => {
     try {
@@ -106,8 +119,8 @@ export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
   const displayError = localError || error;
 
   return {
-    email,
-    password,
+    email: fields.email,
+    password: fields.password,
     emailError,
     passwordError,
     localError,

package/src/presentation/hooks/useRegisterForm.ts

@@ -1,14 +1,12 @@
-import { useState, useCallback, useMemo } from "react";
-import {
-  validatePasswordForRegister,
-  type PasswordRequirements,
-} from "../../infrastructure/utils/AuthValidation";
+import { useState, useCallback } from "react";
 import { DEFAULT_PASSWORD_CONFIG } from "../../domain/value-objects/AuthConfig";
 import { useAuth } from "./useAuth";
 import { getAuthErrorLocalizationKey, resolveErrorMessage } from "../utils/getAuthErrorMessage";
 import { validateRegisterForm, errorsToFieldErrors } from "../utils/form/formValidation.util";
 import { alertService } from "@umituz/react-native-design-system";
-import { clearFieldErrors, clearFieldError } from "../utils/form/formErrorUtils";
+import { useFormFields } from "../utils/form/useFormField.hook";
+import { usePasswordValidation } from "../utils/form/usePasswordValidation.hook";
+import { clearFieldError, clearFieldErrors } from "../utils/form/formErrorUtils";
 
 export type FieldErrors = {
   displayName?: string;
@@ -35,7 +33,7 @@ export interface UseRegisterFormResult {
   fieldErrors: FieldErrors;
   localError: string | null;
   loading: boolean;
-  passwordRequirements: PasswordRequirements;
+  passwordRequirements: { hasMinLength: boolean };
   passwordsMatch: boolean;
   handleDisplayNameChange: (text: string) => void;
   handleEmailChange: (text: string) => void;
@@ -49,67 +47,84 @@ export function useRegisterForm(config?: UseRegisterFormConfig): UseRegisterForm
   const { signUp, loading, error } = useAuth();
   const translations = config?.translations;
 
-  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<FieldErrors>({});
 
-  const getErrorMessage = useCallback((key: string) => {
-    return resolveErrorMessage(key, translations?.errors);
-  }, [translations]);
-
-  const passwordRequirements = useMemo((): PasswordRequirements => {
-    if (!password) {
-      return { hasMinLength: false };
-    }
-    const result = validatePasswordForRegister(password, DEFAULT_PASSWORD_CONFIG);
-    return result.requirements;
-  }, [password]);
-
-  const passwordsMatch = useMemo(() => {
-    return password.length > 0 && password === confirmPassword;
-  }, [password, confirmPassword]);
+  const clearLocalError = useCallback(() => {
+    setLocalError(null);
+  }, []);
 
   const clearFormErrors = useCallback(() => {
     setLocalError(null);
     setFieldErrors({});
   }, []);
 
-  const handleDisplayNameChange = useCallback((text: string) => {
-    setDisplayName(text);
-    clearFieldError(setFieldErrors, "displayName");
-    if (localError) setLocalError(null);
-  }, [localError]);
-
-  const handleEmailChange = useCallback((text: string) => {
-    setEmail(text);
-    clearFieldError(setFieldErrors, "email");
-    if (localError) setLocalError(null);
-  }, [localError]);
-
-  const handlePasswordChange = useCallback((text: string) => {
-    setPassword(text);
-    clearFieldErrors(setFieldErrors, ["password", "confirmPassword"]);
-    if (localError) setLocalError(null);
-  }, [localError]);
-
-  const handleConfirmPasswordChange = useCallback((text: string) => {
-    setConfirmPassword(text);
-    clearFieldError(setFieldErrors, "confirmPassword");
-    if (localError) setLocalError(null);
-  }, [localError]);
+  const { fields, updateField } = useFormFields(
+    {
+      displayName: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+    setFieldErrors,
+    { clearLocalError }
+  );
+
+  const getErrorMessage = useCallback((key: string) => {
+    return resolveErrorMessage(key, translations?.errors);
+  }, [translations]);
+
+  const { passwordRequirements, passwordsMatch } = usePasswordValidation(
+    fields.password,
+    fields.confirmPassword,
+    { passwordConfig: DEFAULT_PASSWORD_CONFIG }
+  );
+
+  const handleDisplayNameChange = useCallback(
+    (text: string) => {
+      updateField("displayName", text);
+      clearFieldError(setFieldErrors, "displayName");
+      clearLocalError();
+    },
+    [updateField, clearLocalError]
+  );
+
+  const handleEmailChange = useCallback(
+    (text: string) => {
+      updateField("email", text);
+      clearFieldError(setFieldErrors, "email");
+      clearLocalError();
+    },
+    [updateField, clearLocalError]
+  );
+
+  const handlePasswordChange = useCallback(
+    (text: string) => {
+      updateField("password", text);
+      clearFieldErrors(setFieldErrors, ["password", "confirmPassword"]);
+      clearLocalError();
+    },
+    [updateField, clearLocalError]
+  );
+
+  const handleConfirmPasswordChange = useCallback(
+    (text: string) => {
+      updateField("confirmPassword", text);
+      clearFieldError(setFieldErrors, "confirmPassword");
+      clearLocalError();
+    },
+    [updateField, clearLocalError]
+  );
 
   const handleSignUp = useCallback(async () => {
     clearFormErrors();
 
     const validation = validateRegisterForm(
       {
-        displayName: displayName.trim() || undefined,
-        email: email.trim(),
-        password,
-        confirmPassword,
+        displayName: fields.displayName.trim() || undefined,
+        email: fields.email.trim(),
+        password: fields.password,
+        confirmPassword: fields.confirmPassword,
       },
       getErrorMessage,
       DEFAULT_PASSWORD_CONFIG
@@ -121,7 +136,7 @@ export function useRegisterForm(config?: UseRegisterFormConfig): UseRegisterForm
     }
 
     try {
-      await signUp(email.trim(), password, displayName.trim() || undefined);
+      await signUp(fields.email.trim(), fields.password, fields.displayName.trim() || undefined);
 
       if (translations) {
         alertService.success(translations.successTitle, translations.signUpSuccess);
@@ -130,15 +145,15 @@ export function useRegisterForm(config?: UseRegisterFormConfig): UseRegisterForm
       const localizationKey = getAuthErrorLocalizationKey(err);
       setLocalError(getErrorMessage(localizationKey));
     }
-  }, [displayName, email, password, confirmPassword, signUp, translations, getErrorMessage, clearFormErrors]);
+  }, [fields, signUp, translations, getErrorMessage, clearFormErrors, updateField]);
 
   const displayError = localError || error;
 
   return {
-    displayName,
-    email,
-    password,
-    confirmPassword,
+    displayName: fields.displayName,
+    email: fields.email,
+    password: fields.password,
+    confirmPassword: fields.confirmPassword,
     fieldErrors,
     localError,
     loading,

package/src/presentation/stores/authStore.ts

@@ -9,7 +9,7 @@
  * The isAnonymous flag indicates the user type, not whether user is null.
  */
 
-import { createStore } from "@umituz/react-native-design-system";
+import { createStore, storageService } from "@umituz/react-native-design-system";
 import { mapToAuthUser } from "../../infrastructure/utils/UserMapper";
 import type { AuthState, AuthActions, UserType } from "../../types/auth-store.types";
 import { initialAuthState } from "../../types/auth-store.types";
@@ -29,6 +29,7 @@ export const useAuthStore = createStore<AuthState, AuthActions>({
   name: "auth-store",
   initialState: initialAuthState,
   persist: true,
+  storage: storageService,
   version: 2,
   partialize: (state) => ({
     isAnonymous: state.isAnonymous,
@@ -45,7 +46,7 @@ export const useAuthStore = createStore<AuthState, AuthActions>({
     }
     return { ...initialAuthState, ...state };
   },
-  actions: (set, _get) => ({
+  actions: (set, get) => ({
     setFirebaseUser: (firebaseUser) => {
       const user = firebaseUser ? mapToAuthUser(firebaseUser) : null;
       const isAnonymous = firebaseUser?.isAnonymous ?? false;
@@ -57,10 +58,18 @@ export const useAuthStore = createStore<AuthState, AuthActions>({
     },
 
     setIsAnonymous: (isAnonymous) => {
-      // Only update the isAnonymous flag
-      // The user object will be updated by setFirebaseUser when needed
-      // This prevents inconsistencies between firebaseUser and user
-      set({ isAnonymous });
+      const currentState = get();
+      // Only update isAnonymous if it's consistent with the firebaseUser state
+      // If we have a firebaseUser, isAnonymous should match it
+      const currentUserIsAnonymous = currentState.firebaseUser?.isAnonymous ?? false;
+
+      if (currentState.firebaseUser) {
+        // We have a firebase user - sync isAnonymous with it
+        set({ isAnonymous: currentUserIsAnonymous });
+      } else {
+        // No firebase user yet, allow setting isAnonymous for anonymous mode preference
+        set({ isAnonymous });
+      }
     },
 
     setError: (error) => {

package/src/presentation/stores/initializeAuthListener.ts

@@ -15,7 +15,7 @@ import {
   completeListenerSetup,
 } from "../../infrastructure/utils/listener/listenerLifecycle.util";
 import {
-  isInitializationInProgress,
+  startInitialization,
   isListenerInitialized,
   resetListenerState,
   decrementRefCount,
@@ -30,8 +30,12 @@ export function initializeAuthListener(
 ): () => void {
   const { autoAnonymousSignIn = true, onAuthStateChange } = options;
 
-  // Prevent duplicate initialization
-  if (isInitializationInProgress()) {
+  // Atomic check-and-set to prevent race conditions
+  if (!startInitialization()) {
+    // Either already initializing or initialized - handle accordingly
+    if (isListenerInitialized()) {
+      return handleExistingInitialization()!;
+    }
     return handleInitializationInProgress();
   }
 
@@ -44,6 +48,8 @@ export function initializeAuthListener(
   const store = useAuthStore.getState();
 
   if (!auth) {
+    // Reset initialization state since we can't proceed
+    completeListenerSetup();
     return handleNoFirebaseAuth(store);
   }
 

package/src/presentation/utils/authTransition.util.ts

@@ -22,11 +22,12 @@ export interface AuthTransitionResult {
  */
 export function useAuthTransitions(
   state: AuthTransitionState,
-  onTransition?: (result: AuthTransitionResult) => void
+  onTransition?: (result: AuthTransitionResult) => (() => void) | void
 ): void {
   const prevIsAuthenticatedRef = useRef(state.isAuthenticated);
   const prevIsAnonymousRef = useRef(state.isAnonymous);
   const prevIsVisibleRef = useRef(state.isVisible);
+  const cleanupRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
     const justAuthenticated = !prevIsAuthenticatedRef.current && state.isAuthenticated;
@@ -41,11 +42,21 @@ export function useAuthTransitions(
       shouldClose,
     };
 
-    onTransition?.(result);
+    // Call previous cleanup before running new transition
+    cleanupRef.current?.();
+
+    const cleanup = onTransition?.(result);
+    cleanupRef.current = cleanup ?? null;
 
     prevIsAuthenticatedRef.current = state.isAuthenticated;
     prevIsVisibleRef.current = state.isVisible;
     prevIsAnonymousRef.current = state.isAnonymous;
+
+    // Return cleanup function for useEffect
+    return () => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
   }, [state.isAuthenticated, state.isVisible, state.isAnonymous, onTransition]);
 }