@umituz/react-native-auth 3.6.63 → 3.6.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.6.63",
+  "version": "3.6.64",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/utils/AuthErrorMapper.ts

@@ -17,82 +17,10 @@ import {
   AuthWrongPasswordError,
   AuthNetworkError,
 } from "../../domain/errors/AuthError";
-
-/**
- * Firebase Auth error structure
- * Based on Firebase Auth SDK error format
- */
-interface FirebaseAuthError {
-  code: string;
-  message: string;
-  name?: string;
-  stack?: string;
-}
-
-/**
- * Type guard to check if error is a valid Firebase Auth error
- * @param error - Unknown error to check
- * @returns True if error matches Firebase Auth error structure
- */
-function isFirebaseAuthError(error: unknown): error is FirebaseAuthError {
-  if (!error || typeof error !== 'object') {
-    return false;
-  }
-
-  const err = error as Partial<FirebaseAuthError>;
-  return (
-    typeof err.code === 'string' &&
-    typeof err.message === 'string' &&
-    err.code.startsWith('auth/')
-  );
-}
-
-/**
- * Extract error code from error object
- * @param error - Unknown error
- * @returns Error code or empty string
- */
-function extractErrorCode(error: unknown): string {
-  if (isFirebaseAuthError(error)) {
-    return error.code;
-  }
-
-  // Fallback for non-Firebase errors
-  if (error && typeof error === 'object' && 'code' in error) {
-    const code = (error as { code?: unknown }).code;
-    if (typeof code === 'string') {
-      return code;
-    }
-  }
-
-  return '';
-}
-
-/**
- * Extract error message from error object
- * @param error - Unknown error
- * @returns Error message or default message
- */
-function extractErrorMessage(error: unknown): string {
-  if (isFirebaseAuthError(error)) {
-    return error.message;
-  }
-
-  // Fallback for Error objects
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  // Fallback for objects with message property
-  if (error && typeof error === 'object' && 'message' in error) {
-    const message = (error as { message?: unknown }).message;
-    if (typeof message === 'string') {
-      return message;
-    }
-  }
-
-  return "Authentication failed";
-}
+import {
+  extractErrorCode,
+  extractErrorMessage,
+} from "./error/errorExtraction";
 
 /**
  * Map Firebase Auth errors to domain errors

package/src/infrastructure/utils/error/errorExtraction.ts

@@ -0,0 +1,80 @@
+/**
+ * Error Extraction Utilities
+ * Utilities for extracting error information from various error types
+ */
+
+/**
+ * Firebase Auth error structure
+ * Based on Firebase Auth SDK error format
+ */
+interface FirebaseAuthError {
+    code: string;
+    message: string;
+    name?: string;
+    stack?: string;
+}
+
+/**
+ * Type guard to check if error is a valid Firebase Auth error
+ * @param error - Unknown error to check
+ * @returns True if error matches Firebase Auth error structure
+ */
+export function isFirebaseAuthError(error: unknown): error is FirebaseAuthError {
+    if (!error || typeof error !== 'object') {
+        return false;
+    }
+
+    const err = error as Partial<FirebaseAuthError>;
+    return (
+        typeof err.code === 'string' &&
+        typeof err.message === 'string' &&
+        err.code.startsWith('auth/')
+    );
+}
+
+/**
+ * Extract error code from error object
+ * @param error - Unknown error
+ * @returns Error code or empty string
+ */
+export function extractErrorCode(error: unknown): string {
+    if (isFirebaseAuthError(error)) {
+        return error.code;
+    }
+
+    // Fallback for non-Firebase errors
+    if (error && typeof error === 'object' && 'code' in error) {
+        const code = (error as { code?: unknown }).code;
+        if (typeof code === 'string') {
+            return code;
+        }
+    }
+
+    return '';
+}
+
+/**
+ * Extract error message from error object
+ * @param error - Unknown error
+ * @returns Error message or default message
+ */
+export function extractErrorMessage(error: unknown): string {
+    if (isFirebaseAuthError(error)) {
+        return error.message;
+    }
+
+    // Fallback for Error objects
+    if (error instanceof Error) {
+        return error.message;
+    }
+
+    // Fallback for objects with message property
+    if (error && typeof error === 'object' && 'message' in error) {
+        const message = (error as { message?: unknown }).message;
+        if (typeof message === 'string') {
+            return message;
+        }
+    }
+
+    return "Authentication failed";
+}

package/src/infrastructure/utils/listener/anonymousSignInHandler.ts

@@ -0,0 +1,156 @@
+/**
+ * Anonymous Sign-In Handler
+ * Handles anonymous authentication retry logic with timeout protection
+ */
+
+import { anonymousAuthService } from "@umituz/react-native-firebase";
+import type { Auth } from "firebase/auth";
+import type { User } from "firebase/auth";
+
+const MAX_ANONYMOUS_RETRIES = 2;
+const ANONYMOUS_RETRY_DELAY_MS = 1000;
+const ANONYMOUS_SIGNIN_TIMEOUT_MS = 10000;
+
+export interface AnonymousSignInCallbacks {
+    onSignInStart: () => void;
+    onSignInSuccess: () => void;
+    onSignInFailure: (error: Error) => void;
+}
+
+export interface AnonymousSignInOptions {
+    maxRetries?: number;
+    retryDelay?: number;
+    timeout?: number;
+}
+
+/**
+ * Attempt anonymous sign-in with retry logic and timeout protection
+ * @param auth - Firebase Auth instance
+ * @param callbacks - Callback functions for sign-in events
+ * @param options - Configuration options
+ */
+export async function attemptAnonymousSignIn(
+    auth: Auth,
+    callbacks: AnonymousSignInCallbacks,
+    options: AnonymousSignInOptions = {}
+): Promise<void> {
+    const {
+        maxRetries = MAX_ANONYMOUS_RETRIES,
+        retryDelay = ANONYMOUS_RETRY_DELAY_MS,
+        timeout = ANONYMOUS_SIGNIN_TIMEOUT_MS,
+    } = options;
+
+    callbacks.onSignInStart();
+
+    try {
+        // Add timeout protection
+        const timeoutPromise = new Promise<never>((_, reject) =>
+            setTimeout(() => reject(new Error("Anonymous sign-in timeout")), timeout)
+        );
+
+        // Race between sign-in and timeout
+        await Promise.race([
+            performAnonymousSignIn(auth, maxRetries, retryDelay),
+            timeoutPromise,
+        ]);
+
+        callbacks.onSignInSuccess();
+    } catch (error) {
+        const signInError = error instanceof Error ? error : new Error("Unknown sign-in error");
+        callbacks.onSignInFailure(signInError);
+    }
+}
+
+/**
+ * Perform anonymous sign-in with retry logic
+ */
+async function performAnonymousSignIn(
+    auth: Auth,
+    maxRetries: number,
+    retryDelay: number
+): Promise<void> {
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            await anonymousAuthService.signInAnonymously(auth);
+
+            if (__DEV__) {
+                console.log("[AnonymousSignInHandler] Anonymous sign-in successful");
+            }
+
+            return;
+        } catch (error) {
+            if (__DEV__) {
+                console.warn(`[AnonymousSignInHandler] Attempt ${attempt + 1}/${maxRetries} failed:`, error);
+            }
+
+            // If not last attempt, wait and retry
+            if (attempt < maxRetries - 1) {
+                await new Promise(resolve => setTimeout(resolve, retryDelay));
+                continue;
+            }
+
+            // All attempts failed
+            throw error;
+        }
+    }
+}
+
+/**
+ * Create anonymous sign-in handler for auth listener
+ * Returns a function that can be called when no user is detected
+ */
+export function createAnonymousSignInHandler(
+    auth: Auth | null,
+    store: {
+        setFirebaseUser: (user: User | null) => void;
+        setLoading: (loading: boolean) => void;
+        setInitialized: (initialized: boolean) => void;
+        setError: (error: string | null) => void;
+    }
+): () => Promise<void> {
+    return async () => {
+        if (!auth) {
+            if (__DEV__) {
+                console.warn("[AnonymousSignInHandler] No auth instance");
+            }
+            store.setFirebaseUser(null);
+            store.setLoading(false);
+            store.setInitialized(true);
+            return;
+        }
+
+        store.setLoading(true);
+
+        await attemptAnonymousSignIn(
+            auth,
+            {
+                onSignInStart: () => {
+                    if (__DEV__) {
+                        console.log("[AnonymousSignInHandler] Starting anonymous sign-in");
+                    }
+                },
+                onSignInSuccess: () => {
+                    if (__DEV__) {
+                        console.log("[AnonymousSignInHandler] Anonymous sign-in successful");
+                    }
+                    // Listener will be triggered again with the new user
+                    store.setFirebaseUser(null);
+                },
+                onSignInFailure: (error) => {
+                    if (__DEV__) {
+                        console.error("[AnonymousSignInHandler] All attempts failed:", error);
+                    }
+                    store.setFirebaseUser(null);
+                    store.setLoading(false);
+                    store.setInitialized(true);
+                    store.setError("Failed to sign in anonymously. Please check your connection.");
+                },
+            },
+            {
+                maxRetries: MAX_ANONYMOUS_RETRIES,
+                retryDelay: ANONYMOUS_RETRY_DELAY_MS,
+                timeout: ANONYMOUS_SIGNIN_TIMEOUT_MS,
+            }
+        );
+    };
+}

package/src/presentation/components/AccountActions.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicIcon, AtomicText, useAlert, AlertType, AlertMode } from "@umituz/react-native-design-system";
+import { actionButtonStyle } from "../utils/commonStyles";
 
 export interface AccountActionsConfig {
   logoutText: string;
@@ -99,12 +100,12 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
     <View style={styles.container}>
       {showChangePassword && onChangePassword && changePasswordText && (
         <TouchableOpacity
-          style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+          style={[actionButtonStyle.container, { borderColor: tokens.colors.border }]}
           onPress={onChangePassword}
           activeOpacity={0.7}
         >
           <AtomicIcon name="key-outline" size="md" color="textPrimary" />
-          <AtomicText style={styles.actionText} color="textPrimary">
+          <AtomicText style={actionButtonStyle.text} color="textPrimary">
             {changePasswordText}
           </AtomicText>
           <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
@@ -112,24 +113,24 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
       )}
 
       <TouchableOpacity
-        style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+        style={[actionButtonStyle.container, { borderColor: tokens.colors.border }]}
         onPress={handleLogout}
         activeOpacity={0.7}
       >
         <AtomicIcon name="log-out-outline" size="md" color="error" />
-        <AtomicText style={styles.actionText} color="error">
+        <AtomicText style={actionButtonStyle.text} color="error">
           {logoutText}
         </AtomicText>
         <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
       </TouchableOpacity>
 
       <TouchableOpacity
-        style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+        style={[actionButtonStyle.container, { borderColor: tokens.colors.border }]}
         onPress={handleDeleteAccount}
         activeOpacity={0.7}
       >
         <AtomicIcon name="trash-outline" size="md" color="error" />
-        <AtomicText style={styles.actionText} color="error">
+        <AtomicText style={actionButtonStyle.text} color="error">
           {deleteAccountText}
         </AtomicText>
         <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
@@ -142,18 +143,4 @@ const styles = StyleSheet.create({
   container: {
     gap: 12,
   },
-  actionButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    gap: 12,
-  },
-  actionText: {
-    flex: 1,
-    fontSize: 16,
-    fontWeight: "500",
-  },
 });

package/src/presentation/hooks/useProfileEdit.ts

@@ -5,6 +5,7 @@
  */
 
 import { useState, useCallback } from "react";
+import { validateEmail } from "../../infrastructure/utils/AuthValidation";
 
 export interface ProfileEditFormState {
     displayName: string;
@@ -63,8 +64,11 @@ export const useProfileEdit = (
             errors.push("Display name is required");
         }
 
-        if (formState.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.email)) {
-            errors.push("Invalid email format");
+        if (formState.email) {
+            const emailResult = validateEmail(formState.email);
+            if (!emailResult.isValid && emailResult.error) {
+                errors.push(emailResult.error);
+            }
         }
 
         return {

package/src/presentation/hooks/useRegisterForm.ts

@@ -9,6 +9,7 @@ import { useAuth } from "./useAuth";
 import { getAuthErrorLocalizationKey, resolveErrorMessage } from "../utils/getAuthErrorMessage";
 import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
 import { alertService } from "@umituz/react-native-design-system";
+import { clearFieldErrors, clearFieldError } from "../utils/form/formErrorUtils";
 
 export interface RegisterFormTranslations {
   successTitle: string;
@@ -77,42 +78,25 @@ export function useRegisterForm(config?: UseRegisterFormConfig): UseRegisterForm
 
   const handleDisplayNameChange = useCallback((text: string) => {
     setDisplayName(text);
-    setFieldErrors((prev) => {
-      const next = { ...prev };
-      if (next.displayName) delete next.displayName;
-      return next;
-    });
+    clearFieldError(setFieldErrors, "displayName");
     setLocalError(null);
   }, []);
 
   const handleEmailChange = useCallback((text: string) => {
     setEmail(text);
-    setFieldErrors((prev) => {
-      const next = { ...prev };
-      if (next.email) delete next.email;
-      return next;
-    });
+    clearFieldError(setFieldErrors, "email");
     setLocalError(null);
   }, []);
 
   const handlePasswordChange = useCallback((text: string) => {
     setPassword(text);
-    setFieldErrors((prev) => {
-      const next = { ...prev };
-      if (next.password) delete next.password;
-      if (next.confirmPassword) delete next.confirmPassword;
-      return next;
-    });
+    clearFieldErrors(setFieldErrors, ["password", "confirmPassword"]);
     setLocalError(null);
   }, []);
 
   const handleConfirmPasswordChange = useCallback((text: string) => {
     setConfirmPassword(text);
-    setFieldErrors((prev) => {
-      const next = { ...prev };
-      if (next.confirmPassword) delete next.confirmPassword;
-      return next;
-    });
+    clearFieldError(setFieldErrors, "confirmPassword");
     setLocalError(null);
   }, []);
 

package/src/presentation/screens/AccountScreen.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens, ScreenLayout, AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { actionButtonStyle } from "../utils/commonStyles";
 
 import { ProfileSection, type ProfileSectionConfig } from "../components/ProfileSection";
 import { AccountActions, type AccountActionsConfig } from "../components/AccountActions";
@@ -46,12 +47,12 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
                 <>
                     <View style={styles.divider} />
                     <TouchableOpacity
-                        style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+                        style={[actionButtonStyle.container, { borderColor: tokens.colors.border }]}
                         onPress={config.onEditProfile}
                         activeOpacity={0.7}
                     >
                         <AtomicIcon name="person-outline" size="md" customColor={tokens.colors.textPrimary} />
-                        <AtomicText style={[styles.actionText, { color: tokens.colors.textPrimary }]}>
+                        <AtomicText style={[actionButtonStyle.text, { color: tokens.colors.textPrimary }]}>
                             {config.editProfileText}
                         </AtomicText>
                         <AtomicIcon name="chevron-forward" size="sm" color="secondary" />
@@ -76,19 +77,5 @@ const styles = StyleSheet.create({
     divider: {
         height: 24,
     },
-    actionButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingVertical: 16,
-        paddingHorizontal: 16,
-        borderRadius: 12,
-        borderWidth: 1,
-        gap: 12,
-    },
-    actionText: {
-        flex: 1,
-        fontSize: 16,
-        fontWeight: "500",
-    },
 });
 

package/src/presentation/screens/EditProfileScreen.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicSpinner } from "@umituz/react-native-design-system";
+import { StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicSpinner, ScreenLayout } from "@umituz/react-native-design-system";
 import { EditProfileAvatar } from "../components/EditProfileAvatar";
 import { EditProfileForm } from "../components/EditProfileForm";
 import { EditProfileActions } from "../components/EditProfileActions";
@@ -45,15 +45,19 @@ export const EditProfileScreen: React.FC<EditProfileScreenProps> = ({ config })
 
     if (config.isLoading) {
         return (
-            <View style={[styles.loading, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+            <ScreenLayout
+                backgroundColor={tokens.colors.backgroundPrimary}
+                contentContainerStyle={styles.loadingContainer}
+            >
                 <AtomicSpinner size="lg" color="primary" fullContainer />
-            </View>
+            </ScreenLayout>
         );
     }
 
     return (
-        <ScrollView
-            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        <ScreenLayout
+            scrollable
+            backgroundColor={tokens.colors.backgroundPrimary}
             contentContainerStyle={styles.content}
         >
             <AtomicText type="headlineSmall" style={styles.title}>
@@ -79,22 +83,19 @@ export const EditProfileScreen: React.FC<EditProfileScreenProps> = ({ config })
                 onCancel={config.onCancel}
                 labels={config.labels}
             />
-        </ScrollView>
+        </ScreenLayout>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
+    loadingContainer: {
         flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
     },
     content: {
         padding: 16,
     },
-    loading: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
     title: {
         marginBottom: 24,
     },

package/src/presentation/stores/initializeAuthListener.ts

@@ -5,17 +5,11 @@
  */
 
 import { onIdTokenChanged } from "firebase/auth";
-import {
-  getFirebaseAuth,
-  anonymousAuthService,
-} from "@umituz/react-native-firebase";
+import { getFirebaseAuth } from "@umituz/react-native-firebase";
 import { useAuthStore } from "./authStore";
 import { getAuthService } from "../../infrastructure/services/AuthService";
 import type { AuthListenerOptions } from "../../types/auth-store.types";
-
-const MAX_ANONYMOUS_RETRIES = 2;
-const ANONYMOUS_RETRY_DELAY_MS = 1000;
-const ANONYMOUS_SIGNIN_TIMEOUT_MS = 10000;
+import { createAnonymousSignInHandler } from "../../infrastructure/utils/listener/anonymousSignInHandler";
 
 let listenerInitialized = false;
 let listenerRefCount = 0;
@@ -133,57 +127,16 @@ export function initializeAuthListener(
       if (__DEV__) {
         console.log("[AuthListener] No user, auto signing in anonymously...");
       }
-      // Set loading state while attempting sign-in
-      store.setLoading(true);
+
       anonymousSignInInProgress = true;
 
-      // Start anonymous sign-in without blocking the listener
-      // The listener will be triggered again when sign-in completes
+      // Create and execute anonymous sign-in handler
+      const handleAnonymousSignIn = createAnonymousSignInHandler(auth, store);
+
+      // Start sign-in without blocking the listener
       void (async () => {
         try {
-          // Add timeout protection
-          const timeoutPromise = new Promise((_, reject) =>
-            setTimeout(() => reject(new Error("Anonymous sign-in timeout")), ANONYMOUS_SIGNIN_TIMEOUT_MS)
-          );
-
-          // Race between sign-in and timeout
-          await Promise.race([
-            (async () => {
-              for (let attempt = 0; attempt < MAX_ANONYMOUS_RETRIES; attempt++) {
-                try {
-                  await anonymousAuthService.signInAnonymously(auth);
-                  if (__DEV__) {
-                    console.log("[AuthListener] Anonymous sign-in successful");
-                  }
-                  // Success - the listener will fire again with the new user
-                  return;
-                } catch (error) {
-                  if (__DEV__) {
-                    console.warn(`[AuthListener] Anonymous sign-in attempt ${attempt + 1} failed:`, error);
-                  }
-
-                  // If not last attempt, wait and retry
-                  if (attempt < MAX_ANONYMOUS_RETRIES - 1) {
-                    await new Promise(resolve => setTimeout(resolve, ANONYMOUS_RETRY_DELAY_MS));
-                    continue;
-                  }
-
-                  // All attempts failed
-                  throw error;
-                }
-              }
-            })(),
-            timeoutPromise,
-          ]);
-        } catch (error) {
-          // All attempts failed or timeout - set error state
-          if (__DEV__) {
-            console.error("[AuthListener] All anonymous sign-in attempts failed:", error);
-          }
-          store.setFirebaseUser(null);
-          store.setLoading(false);
-          store.setInitialized(true);
-          store.setError("Failed to sign in anonymously. Please check your connection.");
+          await handleAnonymousSignIn();
         } finally {
           anonymousSignInInProgress = false;
         }
@@ -191,7 +144,6 @@ export function initializeAuthListener(
 
       // Continue execution - don't return early
       // The listener will be triggered again when sign-in succeeds
-      // For now, set null user and let loading state indicate in-progress
       store.setFirebaseUser(null);
       initializationInProgress = false;
       return;

package/src/presentation/utils/commonStyles.ts

@@ -0,0 +1,68 @@
+/**
+ * Common Styles
+ * Shared style definitions for auth components
+ */
+
+import { StyleSheet } from "react-native";
+
+/**
+ * Action button style - used in account actions and profile sections
+ */
+export const actionButtonStyle = StyleSheet.create({
+    container: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+        borderRadius: 12,
+        borderWidth: 1,
+        gap: 12,
+    },
+    text: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: "500",
+    },
+});
+
+/**
+ * Input field styles - used in forms
+ */
+export const inputFieldStyle = StyleSheet.create({
+    container: {
+        marginBottom: 20,
+    },
+});
+
+/**
+ * Card content styles
+ */
+export const cardContentStyle = StyleSheet.create({
+    container: {
+        padding: 16,
+    },
+    divider: {
+        height: 24,
+    },
+});
+
+/**
+ * Avatar container styles
+ */
+export const avatarContainerStyle = StyleSheet.create({
+    container: {
+        marginRight: 12,
+    },
+});
+
+/**
+ * Info text styles
+ */
+export const infoTextStyle = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    displayName: {
+        marginBottom: 2,
+    },
+});

package/src/presentation/utils/form/formErrorUtils.ts

@@ -0,0 +1,99 @@
+/**
+ * Form Error Utilities
+ * Shared utilities for form error state management
+ */
+
+import { useCallback } from "react";
+
+export type FieldErrors<T extends string> = Partial<Record<T, string>>;
+
+/**
+ * Create a field error updater that clears the specified field error
+ * @param fieldErrors - Current field errors state
+ * @param setFieldErrors - Function to update field errors
+ * @param field - Field to clear
+ * @returns Function to clear the specified field error
+ */
+export function createFieldErrorUpdater<T extends string>(
+    fieldErrors: FieldErrors<T>,
+    setFieldErrors: (errors: FieldErrors<T> | ((prev: FieldErrors<T>) => FieldErrors<T>)) => void,
+    localError: string | null,
+    setLocalError: (error: string | null) => void
+) {
+    return useCallback((field: T) => {
+        if (fieldErrors[field]) {
+            setFieldErrors((prev) => {
+                const next = { ...prev };
+                delete next[field];
+                return next;
+            });
+        }
+        if (localError) {
+            setLocalError(null);
+        }
+    }, [fieldErrors, setFieldErrors, localError, setLocalError]);
+}
+
+/**
+ * Create a single field error updater
+ * @param setFieldErrors - Function to update field errors
+ * @param setLocalError - Function to update local error
+ * @param fields - Fields to clear when this updater is called
+ * @returns Function to clear specified field errors
+ */
+export function useFieldErrorClearer<T extends string>(
+    setFieldErrors: (errors: FieldErrors<T> | ((prev: FieldErrors<T>) => FieldErrors<T>)) => void,
+    setLocalError: (error: string | null) => void,
+    fields: T[]
+) {
+    return useCallback(() => {
+        setFieldErrors((prev) => {
+            const next = { ...prev };
+            fields.forEach((field) => {
+                if (next[field]) {
+                    delete next[field];
+                }
+            });
+            return next;
+        });
+        setLocalError(null);
+    }, [setFieldErrors, setLocalError, fields]);
+}
+
+/**
+ * Clear a specific field error
+ * @param setFieldErrors - Function to update field errors
+ * @param field - Field to clear
+ */
+export function clearFieldError<T extends string>(
+    setFieldErrors: (errors: FieldErrors<T> | ((prev: FieldErrors<T>) => FieldErrors<T>)) => void,
+    field: T
+) {
+    setFieldErrors((prev) => {
+        const next = { ...prev };
+        if (next[field]) {
+            delete next[field];
+        }
+        return next;
+    });
+}
+
+/**
+ * Clear multiple field errors
+ * @param setFieldErrors - Function to update field errors
+ * @param fields - Fields to clear
+ */
+export function clearFieldErrors<T extends string>(
+    setFieldErrors: (errors: FieldErrors<T> | ((prev: FieldErrors<T>) => FieldErrors<T>)) => void,
+    fields: T[]
+) {
+    setFieldErrors((prev) => {
+        const next = { ...prev };
+        fields.forEach((field) => {
+            if (next[field]) {
+                delete next[field];
+            }
+        });
+        return next;
+    });
+}