@umituz/react-native-auth 1.11.0 → 2.0.1

package/src/infrastructure/services/GuestModeService.ts

@@ -0,0 +1,86 @@
+/**
+ * Guest Mode Service
+ * Handles guest mode functionality
+ */
+
+import type { IAuthProvider } from "../../application/ports/IAuthProvider";
+import type { AuthUser } from "../../domain/entities/AuthUser";
+import { emitGuestModeEnabled } from "../utils/AuthEventEmitter";
+
+export interface IStorageProvider {
+  get(key: string): Promise<string | null>;
+  set(key: string, value: string): Promise<void>;
+  remove(key: string): Promise<void>;
+}
+
+export class GuestModeService {
+  private isGuestMode: boolean = false;
+  private storageKey: string;
+
+  constructor(storageKey: string = "@auth_guest_mode") {
+    this.storageKey = storageKey;
+  }
+
+  async load(storageProvider: IStorageProvider): Promise<boolean> {
+    try {
+      const value = await storageProvider.get(this.storageKey);
+      this.isGuestMode = value === "true";
+      return this.isGuestMode;
+    } catch {
+      return false;
+    }
+  }
+
+  async save(storageProvider: IStorageProvider): Promise<void> {
+    try {
+      await storageProvider.set(this.storageKey, this.isGuestMode.toString());
+    } catch {
+      // Silently fail storage operations
+    }
+  }
+
+  async clear(storageProvider: IStorageProvider): Promise<void> {
+    try {
+      await storageProvider.remove(this.storageKey);
+    } catch {
+      // Silently fail storage operations
+    }
+    this.isGuestMode = false;
+  }
+
+  async enable(storageProvider: IStorageProvider, provider?: IAuthProvider): Promise<void> {
+    // Sign out from provider if logged in
+    if (provider?.getCurrentUser()) {
+      try {
+        await provider.signOut();
+      } catch {
+        // Ignore sign out errors when switching to guest mode
+      }
+    }
+
+    this.isGuestMode = true;
+    await this.save(storageProvider);
+    emitGuestModeEnabled();
+  }
+
+  getIsGuestMode(): boolean {
+    return this.isGuestMode;
+  }
+
+  setGuestMode(enabled: boolean): void {
+    this.isGuestMode = enabled;
+  }
+
+  wrapAuthStateCallback(
+    callback: (user: AuthUser | null) => void
+  ): (user: AuthUser | null) => void {
+    return (user: AuthUser | null) => {
+      // Don't update if in guest mode
+      if (!this.isGuestMode) {
+        callback(user);
+      } else {
+        callback(null);
+      }
+    };
+  }
+}

package/src/infrastructure/storage/GuestModeStorage.ts

@@ -3,18 +3,27 @@
  * Single Responsibility: Manage guest mode persistence
  */
 
-import { storageRepository, unwrap } from "@umituz/react-native-storage";
-
-const GUEST_MODE_KEY = "@auth_guest_mode";
+import type { IStorageProvider } from "../services/GuestModeService";
+import { getAuthPackage } from "../services/AuthPackage";
 
 /**
  * Load guest mode from storage
  */
-export async function loadGuestMode(): Promise<boolean> {
+export async function loadGuestMode(storageKey?: string): Promise<boolean> {
   try {
-    const result = await storageRepository.getString(GUEST_MODE_KEY, "false");
-    const guestModeValue = unwrap(result, "false");
-    return guestModeValue === "true";
+    const packageConfig = getAuthPackage()?.getConfig();
+    const key = storageKey ?? packageConfig?.storageKeys.guestMode ?? "@auth_guest_mode";
+    
+    const storageProvider = getAuthPackage()?.getStorageProvider();
+    if (!storageProvider) {
+      if (__DEV__) {
+        console.warn("[GuestModeStorage] No storage provider available");
+      }
+      return false;
+    }
+
+    const value = await storageProvider.get(key);
+    return value === "true";
   } catch {
     return false;
   }
@@ -23,19 +32,28 @@ export async function loadGuestMode(): Promise<boolean> {
 /**
  * Save guest mode to storage
  */
-export async function saveGuestMode(isGuest: boolean): Promise<void> {
+export async function saveGuestMode(isGuest: boolean, storageKey?: string): Promise<void> {
   try {
+    const packageConfig = getAuthPackage()?.getConfig();
+    const key = storageKey ?? packageConfig?.storageKeys.guestMode ?? "@auth_guest_mode";
+    
+    const storageProvider = getAuthPackage()?.getStorageProvider();
+    if (!storageProvider) {
+      if (__DEV__) {
+        console.warn("[GuestModeStorage] No storage provider available");
+      }
+      return;
+    }
+
     if (isGuest) {
-      await storageRepository.setString(GUEST_MODE_KEY, "true");
-      /* eslint-disable-next-line no-console */
+      await storageProvider.set(key, "true");
       if (__DEV__) {
         console.log("[GuestModeStorage] Guest mode persisted to storage");
       }
     } else {
-      await storageRepository.removeItem(GUEST_MODE_KEY);
+      await storageProvider.remove(key);
     }
   } catch (error) {
-    /* eslint-disable-next-line no-console */
     if (__DEV__) {
       console.warn("[GuestModeStorage] Failed to persist guest mode:", error);
     }
@@ -45,9 +63,17 @@ export async function saveGuestMode(isGuest: boolean): Promise<void> {
 /**
  * Clear guest mode from storage
  */
-export async function clearGuestMode(): Promise<void> {
+export async function clearGuestMode(storageKey?: string): Promise<void> {
   try {
-    await storageRepository.removeItem(GUEST_MODE_KEY);
+    const packageConfig = getAuthPackage()?.getConfig();
+    const key = storageKey ?? packageConfig?.storageKeys.guestMode ?? "@auth_guest_mode";
+    
+    const storageProvider = getAuthPackage()?.getStorageProvider();
+    if (!storageProvider) {
+      return;
+    }
+
+    await storageProvider.remove(key);
   } catch {
     // Ignore storage errors
   }

package/src/infrastructure/utils/AuthErrorMapper.ts

@@ -18,9 +18,13 @@ import {
  * Map Firebase Auth errors to domain errors
  */
 export function mapFirebaseAuthError(error: unknown): Error {
-  const errorObj = error as { code?: string; message?: string } | undefined;
-  const code = errorObj?.code || "";
-  const message = errorObj?.message || "Authentication failed";
+  if (!error || typeof error !== 'object') {
+    return new AuthError("Authentication failed", "AUTH_UNKNOWN_ERROR");
+  }
+
+  const errorObj = error as { code?: string; message?: string };
+  const code = errorObj.code || "";
+  const message = errorObj.message || "Authentication failed";
 
   switch (code) {
     case "auth/email-already-in-use":

package/src/infrastructure/utils/AuthValidation.ts

@@ -4,6 +4,7 @@
  */
 
 import type { PasswordConfig } from "../../domain/value-objects/AuthConfig";
+import { getAuthPackage } from "../services/AuthPackage";
 
 export interface ValidationResult {
   isValid: boolean;
@@ -22,11 +23,35 @@ export interface PasswordRequirements {
   hasSpecialChar: boolean;
 }
 
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-const UPPERCASE_REGEX = /[A-Z]/;
-const LOWERCASE_REGEX = /[a-z]/;
-const NUMBER_REGEX = /[0-9]/;
-const SPECIAL_CHAR_REGEX = /[!@#$%^&*(),.?":{}|<>]/;
+export interface ValidationConfig {
+  emailRegex: RegExp;
+  uppercaseRegex: RegExp;
+  lowercaseRegex: RegExp;
+  numberRegex: RegExp;
+  specialCharRegex: RegExp;
+  displayNameMinLength: number;
+}
+
+const DEFAULT_VALIDATION_CONFIG: ValidationConfig = {
+  emailRegex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  uppercaseRegex: /[A-Z]/,
+  lowercaseRegex: /[a-z]/,
+  numberRegex: /[0-9]/,
+  specialCharRegex: /[!@#$%^&*(),.?":{}|<>]/,
+  displayNameMinLength: 2,
+};
+
+function getValidationConfig(): ValidationConfig {
+  const packageConfig = getAuthPackage()?.getConfig();
+  return {
+    emailRegex: packageConfig?.validation.emailRegex || DEFAULT_VALIDATION_CONFIG.emailRegex,
+    uppercaseRegex: DEFAULT_VALIDATION_CONFIG.uppercaseRegex,
+    lowercaseRegex: DEFAULT_VALIDATION_CONFIG.lowercaseRegex,
+    numberRegex: DEFAULT_VALIDATION_CONFIG.numberRegex,
+    specialCharRegex: DEFAULT_VALIDATION_CONFIG.specialCharRegex,
+    displayNameMinLength: DEFAULT_VALIDATION_CONFIG.displayNameMinLength,
+  };
+}
 
 /**
  * Validate email format
@@ -36,7 +61,8 @@ export function validateEmail(email: string): ValidationResult {
     return { isValid: false, error: "Email is required" };
   }
 
-  if (!EMAIL_REGEX.test(email.trim())) {
+  const config = getValidationConfig();
+  if (!config.emailRegex.test(email.trim())) {
     return { isValid: false, error: "Please enter a valid email address" };
   }
 
@@ -63,13 +89,14 @@ export function validatePasswordForRegister(
   password: string,
   config: PasswordConfig
 ): PasswordStrengthResult {
+  const validationConfig = getValidationConfig();
   const requirements: PasswordRequirements = {
     hasMinLength: password.length >= config.minLength,
-    hasUppercase: !config.requireUppercase || UPPERCASE_REGEX.test(password),
-    hasLowercase: !config.requireLowercase || LOWERCASE_REGEX.test(password),
-    hasNumber: !config.requireNumber || NUMBER_REGEX.test(password),
+    hasUppercase: !config.requireUppercase || validationConfig.uppercaseRegex.test(password),
+    hasLowercase: !config.requireLowercase || validationConfig.lowercaseRegex.test(password),
+    hasNumber: !config.requireNumber || validationConfig.numberRegex.test(password),
     hasSpecialChar:
-      !config.requireSpecialChar || SPECIAL_CHAR_REGEX.test(password),
+      !config.requireSpecialChar || validationConfig.specialCharRegex.test(password),
   };
 
   if (!password || password.length === 0) {
@@ -88,7 +115,7 @@ export function validatePasswordForRegister(
     };
   }
 
-  if (config.requireUppercase && !UPPERCASE_REGEX.test(password)) {
+  if (config.requireUppercase && !validationConfig.uppercaseRegex.test(password)) {
     return {
       isValid: false,
       error: "Password must contain at least one uppercase letter",
@@ -96,7 +123,7 @@ export function validatePasswordForRegister(
     };
   }
 
-  if (config.requireLowercase && !LOWERCASE_REGEX.test(password)) {
+  if (config.requireLowercase && !validationConfig.lowercaseRegex.test(password)) {
     return {
       isValid: false,
       error: "Password must contain at least one lowercase letter",
@@ -104,7 +131,7 @@ export function validatePasswordForRegister(
     };
   }
 
-  if (config.requireNumber && !NUMBER_REGEX.test(password)) {
+  if (config.requireNumber && !validationConfig.numberRegex.test(password)) {
     return {
       isValid: false,
       error: "Password must contain at least one number",
@@ -112,7 +139,7 @@ export function validatePasswordForRegister(
     };
   }
 
-  if (config.requireSpecialChar && !SPECIAL_CHAR_REGEX.test(password)) {
+  if (config.requireSpecialChar && !validationConfig.specialCharRegex.test(password)) {
     return {
       isValid: false,
       error: "Password must contain at least one special character",
@@ -146,16 +173,19 @@ export function validatePasswordConfirmation(
  */
 export function validateDisplayName(
   displayName: string,
-  minLength: number = 2
+  minLength?: number
 ): ValidationResult {
   if (!displayName || displayName.trim() === "") {
     return { isValid: false, error: "Name is required" };
   }
 
-  if (displayName.trim().length < minLength) {
+  const config = getValidationConfig();
+  const actualMinLength = minLength ?? config.displayNameMinLength;
+
+  if (displayName.trim().length < actualMinLength) {
     return {
       isValid: false,
-      error: `Name must be at least ${minLength} characters`,
+      error: `Name must be at least ${actualMinLength} characters`,
     };
   }
 

package/src/presentation/components/PasswordMatchIndicator.tsx

@@ -0,0 +1,50 @@
+/**
+ * Password Match Indicator Component
+ * Shows whether passwords match
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface PasswordMatchIndicatorProps {
+  isMatch: boolean;
+}
+
+export const PasswordMatchIndicator: React.FC<PasswordMatchIndicatorProps> = ({
+  isMatch,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  const color = isMatch ? tokens.colors.success : tokens.colors.error;
+  const text = isMatch
+    ? t("auth.passwordsMatch", { defaultValue: "Passwords match" })
+    : t("auth.passwordsDontMatch", { defaultValue: "Passwords don't match" });
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.dot, { backgroundColor: color }]} />
+      <Text style={[styles.text, { color }]}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 8,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -0,0 +1,118 @@
+/**
+ * Password Strength Indicator Component
+ * Shows password requirements with visual feedback
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
+
+export interface PasswordStrengthIndicatorProps {
+  requirements: PasswordRequirements;
+  showLabels?: boolean;
+}
+
+interface RequirementDotProps {
+  label: string;
+  isValid: boolean;
+  successColor: string;
+  pendingColor: string;
+}
+
+const RequirementDot: React.FC<RequirementDotProps> = ({
+  label,
+  isValid,
+  successColor,
+  pendingColor,
+}) => {
+  const color = isValid ? successColor : pendingColor;
+
+  return (
+    <View style={styles.requirement}>
+      <View style={[styles.dot, { backgroundColor: color }]} />
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </View>
+  );
+};
+
+export const PasswordStrengthIndicator: React.FC<
+  PasswordStrengthIndicatorProps
+> = ({ requirements, showLabels = true }) => {
+  const tokens = useAppDesignTokens();
+  const successColor = tokens.colors.success;
+  const pendingColor = tokens.colors.textTertiary;
+
+  const items = [
+    { key: "minLength", label: "8+", isValid: requirements.hasMinLength },
+    { key: "uppercase", label: "A-Z", isValid: requirements.hasUppercase },
+    { key: "lowercase", label: "a-z", isValid: requirements.hasLowercase },
+    { key: "number", label: "0-9", isValid: requirements.hasNumber },
+    { key: "special", label: "!@#", isValid: requirements.hasSpecialChar },
+  ];
+
+  if (!showLabels) {
+    return (
+      <View style={styles.dotsOnly}>
+        {items.map((item) => (
+          <View
+            key={item.key}
+            style={[
+              styles.dotOnly,
+              {
+                backgroundColor: item.isValid ? successColor : pendingColor,
+              },
+            ]}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {items.map((item) => (
+        <RequirementDot
+          key={item.key}
+          label={item.label}
+          isValid={item.isValid}
+          successColor={successColor}
+          pendingColor={pendingColor}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    marginTop: 8,
+  },
+  dotsOnly: {
+    flexDirection: "row",
+    gap: 6,
+    marginTop: 8,
+  },
+  requirement: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  dotOnly: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/RegisterForm.tsx

@@ -11,6 +11,8 @@ import { useRegisterForm } from "../hooks/useRegisterForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
 import { AuthLegalLinks } from "./AuthLegalLinks";
+import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
+import { PasswordMatchIndicator } from "./PasswordMatchIndicator";
 
 interface RegisterFormProps {
   onNavigateToLogin: () => void;
@@ -35,6 +37,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     confirmPassword,
     fieldErrors,
     loading,
+    passwordRequirements,
+    passwordsMatch,
     handleDisplayNameChange,
     handleEmailChange,
     handlePasswordChange,
@@ -86,6 +90,9 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           state={fieldErrors.password ? "error" : "default"}
           helperText={fieldErrors.password || undefined}
         />
+        {password.length > 0 && (
+          <PasswordStrengthIndicator requirements={passwordRequirements} />
+        )}
       </View>
 
       <View style={styles.inputContainer}>
@@ -102,6 +109,9 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           state={fieldErrors.confirmPassword ? "error" : "default"}
           helperText={fieldErrors.confirmPassword || undefined}
         />
+        {confirmPassword.length > 0 && (
+          <PasswordMatchIndicator isMatch={passwordsMatch} />
+        )}
       </View>
 
       <AuthErrorDisplay error={displayError} />

package/src/presentation/hooks/useAuthActions.ts

@@ -40,8 +40,8 @@ export function useAuthActions(
       if (isGuest) {
         setIsGuest(false);
       }
-    } catch (err: any) {
-      const errorMessage = err.message || "Sign up failed";
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Sign up failed";
       setError(errorMessage);
       throw err;
     } finally {
@@ -79,12 +79,8 @@ export function useAuthActions(
         }
         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";
+} catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Sign in failed";
       setError(errorMessage);
       throw err;
     } finally {
@@ -152,12 +148,13 @@ export function useAuthActions(
       if (__DEV__) {
         console.log("[useAuthActions] ✅ isGuest set to true");
       }
-    } catch (error) {
-      /* eslint-disable-next-line no-console */
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to continue as guest";
+      setError(errorMessage);
       if (__DEV__) {
         console.error("[useAuthActions] ❌ ERROR in continueAsGuest:", error);
         console.error("[useAuthActions] Error details:", {
-          message: error instanceof Error ? error.message : String(error),
+          message: errorMessage,
           stack: error instanceof Error ? error.stack : undefined,
         });
       }

package/src/presentation/hooks/useAuthState.ts

@@ -83,9 +83,19 @@ export function useAuthState(): UseAuthStateResult {
       }
     );
 
+    const errorSubscription = DeviceEventEmitter.addListener(
+      "auth-error",
+      (payload: any) => {
+        if (payload?.error) {
+          setError(payload.error);
+        }
+      }
+    );
+
     return () => {
       guestSubscription.remove();
       authSubscription.remove();
+      errorSubscription.remove();
     };
   }, []);