@umituz/react-native-auth 1.3.1 → 1.4.0

package/README.md

@@ -15,6 +15,7 @@ npm install @umituz/react-native-auth
 - `firebase` >= 11.0.0
 - `react` >= 18.2.0
 - `react-native` >= 0.74.0
+- `@umituz/react-native-firebase-auth` >= 1.0.0 (for Firebase Auth initialization)
 
 ## Features
 
@@ -46,9 +47,10 @@ Initialize the service early in your app (e.g., in `App.tsx`):
 
 ```typescript
 import { initializeAuthService } from '@umituz/react-native-auth';
-import { getFirebaseAuth } from '@umituz/react-native-firebase';
+import { getFirebaseAuth } from '@umituz/react-native-firebase-auth';
 
-// Initialize Firebase first (using @umituz/react-native-firebase)
+// Initialize Firebase App first (using @umituz/react-native-firebase)
+// Then initialize Firebase Auth (using @umituz/react-native-firebase-auth)
 const auth = getFirebaseAuth();
 
 // Initialize auth service
@@ -189,15 +191,16 @@ await authService.setGuestMode();
 3. **Guest Mode**: Use guest mode for offline-first apps that don't require authentication
 4. **User Callbacks**: Use `onUserCreated` and `onSignOut` callbacks for app-specific logic
 
-## Integration with @umituz/react-native-firebase
+## Integration with Firebase Packages
 
-This package works seamlessly with `@umituz/react-native-firebase`:
+This package works seamlessly with Firebase initialization packages:
 
 ```typescript
-import { initializeFirebase, getFirebaseAuth } from '@umituz/react-native-firebase';
+import { initializeFirebase } from '@umituz/react-native-firebase';
+import { initializeFirebaseAuth, getFirebaseAuth } from '@umituz/react-native-firebase-auth';
 import { initializeAuthService } from '@umituz/react-native-auth';
 
-// Initialize Firebase
+// 1. Initialize Firebase App
 const config = {
   apiKey: 'your-api-key',
   authDomain: 'your-project.firebaseapp.com',
@@ -205,11 +208,19 @@ const config = {
 };
 initializeFirebase(config);
 
-// Initialize Auth Service
+// 2. Initialize Firebase Auth
+initializeFirebaseAuth();
+
+// 3. Initialize Auth Service (business logic)
 const auth = getFirebaseAuth();
-initializeAuthService(auth);
+initializeAuthService(auth, {
+  minPasswordLength: 6,
+  // ... other config
+});
 ```
 
+**Note:** This package is provider-agnostic. While it currently uses Firebase Auth, it can be easily adapted to work with Supabase or other authentication providers in the future.
+
 ## License
 
 MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "1.3.1",
-  "description": "Firebase Authentication wrapper for React Native apps - Secure, type-safe, and production-ready",
+  "version": "1.4.0",
+  "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design supports Firebase Auth and can be adapted for Supabase or other providers.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -34,6 +34,7 @@
     "firebase": ">=11.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
+    "@umituz/react-native-firebase-auth": ">=1.1.0",
     "@react-navigation/stack": "^6.0.0",
     "@react-navigation/native": "^6.0.0",
     "@umituz/react-native-design-system": "*",

package/src/domain/value-objects/AuthConfig.ts

@@ -20,9 +20,17 @@ export interface AuthConfig {
   onUserUpdated?: (user: any) => Promise<void> | void;
   /** Callback for sign out cleanup */
   onSignOut?: () => Promise<void> | void;
+  /** Callback for analytics logging on sign in */
+  onSignIn?: (method: string) => Promise<void> | void;
+  /** Callback for analytics logging on guest mode */
+  onGuestModeEnabled?: () => Promise<void> | void;
+  /** Callback for analytics initialization when user authenticates */
+  onAnalyticsInit?: (userId: string) => Promise<void> | void;
+  /** Callback for analytics initialization when guest mode enabled */
+  onAnalyticsInitGuest?: () => Promise<void> | void;
 }
 
-export const DEFAULT_AUTH_CONFIG: Required<Omit<AuthConfig, 'onUserCreated' | 'onUserUpdated' | 'onSignOut'>> = {
+export const DEFAULT_AUTH_CONFIG: Required<Omit<AuthConfig, 'onUserCreated' | 'onUserUpdated' | 'onSignOut' | 'onSignIn' | 'onGuestModeEnabled' | 'onAnalyticsInit' | 'onAnalyticsInitGuest'>> = {
   minPasswordLength: 6,
   requireUppercase: false,
   requireLowercase: false,

package/src/index.ts

@@ -74,3 +74,9 @@ export type {
 export { AuthLegalLinks } from './presentation/components/AuthLegalLinks';
 export type { AuthLegalLinksProps } from './presentation/components/AuthLegalLinks';
 
+// =============================================================================
+// PRESENTATION LAYER - Utilities
+// =============================================================================
+
+export { getAuthErrorLocalizationKey } from './presentation/utils/getAuthErrorMessage';
+

package/src/infrastructure/services/AuthService.ts

@@ -96,9 +96,6 @@ function mapFirebaseAuthError(error: any): Error {
   if (code === "auth/invalid-email") {
     return new AuthInvalidEmailError();
   }
-  if (code === "auth/operation-not-allowed") {
-    return new AuthConfigurationError("Email/password authentication is not enabled");
-  }
   if (code === "auth/weak-password") {
     return new AuthWeakPasswordError();
   }
@@ -117,6 +114,12 @@ function mapFirebaseAuthError(error: any): Error {
   if (code === "auth/too-many-requests") {
     return new AuthError("Too many requests. Please try again later.", "AUTH_TOO_MANY_REQUESTS");
   }
+  if (code === "auth/configuration-not-found" || code === "auth/app-not-authorized") {
+    return new AuthConfigurationError("Authentication is not properly configured. Please contact support.");
+  }
+  if (code === "auth/operation-not-allowed") {
+    return new AuthConfigurationError("Email/password authentication is not enabled. Please contact support.");
+  }
 
   return new AuthError(message, code);
 }
@@ -201,6 +204,7 @@ export class AuthService implements IAuthService {
       }
 
       // Call user created callback if provided
+      // User state is managed by Firebase Auth's onAuthStateChanged
       if (this.config.onUserCreated) {
         try {
           await this.config.onUserCreated(userCredential.user);
@@ -242,6 +246,17 @@ export class AuthService implements IAuthService {
       );
 
       this.isGuestMode = false;
+
+      // Call analytics callback if provided
+      // User state is managed by Firebase Auth's onAuthStateChanged
+      if (this.config.onSignIn) {
+        try {
+          await this.config.onSignIn("email");
+        } catch (callbackError) {
+          // Don't fail signin if analytics callback fails
+        }
+      }
+
       return userCredential.user;
     } catch (error: any) {
       throw mapFirebaseAuthError(error);
@@ -264,6 +279,7 @@ export class AuthService implements IAuthService {
       this.isGuestMode = false;
 
       // Call sign out callback if provided
+      // User state is managed by Firebase Auth's onAuthStateChanged
       if (this.config.onSignOut) {
         try {
           await this.config.onSignOut();
@@ -292,6 +308,16 @@ export class AuthService implements IAuthService {
     }
 
     this.isGuestMode = true;
+
+    // Call analytics callback if provided
+    // Guest mode state is managed by useAuth hook
+    if (this.config.onGuestModeEnabled) {
+      try {
+        await this.config.onGuestModeEnabled();
+      } catch (callbackError) {
+        // Don't fail guest mode if analytics callback fails
+      }
+    }
   }
 
   /**

package/src/presentation/components/AuthContainer.tsx

@@ -59,3 +59,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthDivider.tsx

@@ -57,3 +57,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthErrorDisplay.tsx

@@ -41,3 +41,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthFormCard.tsx

@@ -36,3 +36,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthGradientBackground.tsx

@@ -21,3 +21,6 @@ export const AuthGradientBackground: React.FC = () => {
   );
 };
 
+
+
+

package/src/presentation/components/AuthHeader.tsx

@@ -66,3 +66,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthLegalLinks.tsx

@@ -133,3 +133,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/AuthLink.tsx

@@ -62,3 +62,6 @@ const styles = StyleSheet.create({
   },
 });
 
+
+
+

package/src/presentation/components/LoginForm.tsx

@@ -11,6 +11,7 @@ import { useAuth } from "../hooks/useAuth";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthDivider } from "./AuthDivider";
 import { AuthLink } from "./AuthLink";
+import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
 
 interface LoginFormProps {
   onNavigateToRegister: () => void;
@@ -73,7 +74,8 @@ export const LoginForm: React.FC<LoginFormProps> = ({
     try {
       await signIn(email.trim(), password);
     } catch (err: any) {
-      const errorMessage = err.message || t("auth.errors.unknownError");
+      const localizationKey = getAuthErrorLocalizationKey(err);
+      const errorMessage = t(localizationKey);
       setLocalError(errorMessage);
     }
   };

package/src/presentation/components/RegisterForm.tsx

@@ -17,6 +17,7 @@ import { useAuth } from "../hooks/useAuth";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
 import { AuthLegalLinks } from "./AuthLegalLinks";
+import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
 
 interface RegisterFormProps {
   onNavigateToLogin: () => void;
@@ -121,7 +122,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         displayName.trim() || undefined,
       );
     } catch (err: any) {
-      const errorMessage = err.message || t("auth.errors.unknownError");
+      const localizationKey = getAuthErrorLocalizationKey(err);
+      const errorMessage = t(localizationKey);
       setLocalError(errorMessage);
     }
   };

package/src/presentation/hooks/useAuth.ts

@@ -1,11 +1,15 @@
 /**
  * useAuth Hook
  * React hook for authentication state management
+ * 
+ * Uses Firebase Auth's built-in state management via useFirebaseAuth hook.
+ * Adds app-specific state (guest mode, error handling) on top of Firebase Auth.
  */
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useRef, useCallback, useState } from "react";
 import type { User } from "firebase/auth";
 import { getAuthService } from "../../infrastructure/services/AuthService";
+import { useFirebaseAuth } from "@umituz/react-native-firebase-auth";
 
 export interface UseAuthResult {
   /** Current authenticated user */
@@ -26,58 +30,62 @@ export interface UseAuthResult {
   signOut: () => Promise<void>;
   /** Continue as guest function */
   continueAsGuest: () => Promise<void>;
+  /** Set error manually (for form validation, etc.) */
+  setError: (error: string | null) => void;
 }
 
 /**
  * Hook for authentication state management
  * 
+ * Uses Firebase Auth's built-in state management and adds app-specific features:
+ * - Guest mode support
+ * - Error handling
+ * - Loading states
+ * 
  * @example
  * ```typescript
  * const { user, isAuthenticated, signIn, signUp, signOut } = useAuth();
  * ```
  */
 export function useAuth(): UseAuthResult {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
+  // Use Firebase Auth's built-in state management
+  const { user: firebaseUser, loading: firebaseLoading } = useFirebaseAuth();
+  
+  // App-specific state
   const [isGuest, setIsGuest] = useState(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;
 
+  // Handle analytics initialization (if callbacks are provided in config)
   useEffect(() => {
-    const service = getAuthService();
-    if (!service) {
-      // Auth service not initialized
-      setUser(null);
-      setIsGuest(false);
-      setLoading(false);
-      return () => {};
-    }
+    const authChanged =
+      prevAuthState.current.isAuthenticated !== isAuthenticated ||
+      prevAuthState.current.isGuest !== isGuest;
 
-    try {
-      const unsubscribe = service.onAuthStateChange((currentUser) => {
-        setUser(currentUser);
-        setIsGuest(service.getIsGuestMode());
-        setLoading(false);
-      });
+    // Analytics initialization is handled by AuthService callbacks (onAnalyticsInit, onAnalyticsInitGuest)
+    // This effect is kept for backward compatibility but analytics should be configured via AuthConfig
 
-      // Set initial state
-      const currentUser = service.getCurrentUser();
-      setUser(currentUser);
-      setIsGuest(service.getIsGuestMode());
-      setLoading(false);
+    // Update previous state
+    prevAuthState.current = { isAuthenticated, isGuest };
+  }, [isAuthenticated, isGuest]);
 
-      return () => {
-        unsubscribe();
-      };
-    } catch (error) {
-      // Auth service error
-      setUser(null);
+  // Reset guest mode when user signs in
+  useEffect(() => {
+    if (firebaseUser && isGuest) {
       setIsGuest(false);
-      setLoading(false);
-      return () => {};
     }
-  }, []);
+  }, [firebaseUser, isGuest]);
 
-  const signUp = useCallback(async (email: string, password: string, displayName?: string) => {
+  const signUp = useCallback(async (
+    email: string,
+    password: string,
+    displayName?: string
+  ) => {
     const service = getAuthService();
     if (!service) {
       const err = "Auth service is not initialized";
@@ -85,13 +93,16 @@ export function useAuth(): UseAuthResult {
       throw new Error(err);
     }
     try {
+      setLoading(true);
       setError(null);
       await service.signUp({ email, password, displayName });
-      // State will be updated via onAuthStateChange
+      // 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);
     }
   }, []);
 
@@ -103,13 +114,16 @@ export function useAuth(): UseAuthResult {
       throw new Error(err);
     }
     try {
+      setLoading(true);
       setError(null);
       await service.signIn({ email, password });
-      // State will be updated via onAuthStateChange
+      // User state is updated by Firebase Auth's onAuthStateChanged
     } catch (err: any) {
-      const errorMessage = err.message || "Sign in failed";
+      const errorMessage = err.message || "Failed to sign in";
       setError(errorMessage);
       throw err;
+    } finally {
+      setLoading(false);
     }
   }, []);
 
@@ -118,9 +132,13 @@ export function useAuth(): UseAuthResult {
     if (!service) {
       return;
     }
-    await service.signOut();
-    setUser(null);
-    setIsGuest(false);
+    try {
+      setLoading(true);
+      await service.signOut();
+      // User state is updated by Firebase Auth's onAuthStateChanged
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
   const continueAsGuest = useCallback(async () => {
@@ -129,21 +147,25 @@ export function useAuth(): UseAuthResult {
       setIsGuest(true);
       return;
     }
-    await service.setGuestMode();
-    setUser(null);
-    setIsGuest(true);
+    try {
+      setLoading(true);
+      await service.setGuestMode();
+      setIsGuest(true);
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
   return {
     user,
-    loading,
+    loading: loading || firebaseLoading,
     isGuest,
-    isAuthenticated: !!user && !isGuest,
+    isAuthenticated,
     error,
     signUp,
     signIn,
     signOut,
     continueAsGuest,
+    setError,
   };
 }
-

package/src/presentation/utils/getAuthErrorMessage.ts

@@ -0,0 +1,81 @@
+/**
+ * Get localized error message from AuthError
+ * Maps error codes to localization keys
+ */
+
+import type { AuthError } from "../../domain/errors/AuthError";
+
+/**
+ * Map AuthError code to localization key
+ */
+export function getAuthErrorLocalizationKey(error: Error): string {
+  // Check if error has code property
+  const code = (error as any).code;
+
+  // Map error codes to localization keys
+  const errorCodeMap: Record<string, string> = {
+    AUTH_INVALID_EMAIL: "auth.errors.invalidEmail",
+    AUTH_WEAK_PASSWORD: "auth.errors.weakPassword",
+    AUTH_USER_NOT_FOUND: "auth.errors.userNotFound",
+    AUTH_WRONG_PASSWORD: "auth.errors.wrongPassword",
+    AUTH_EMAIL_ALREADY_IN_USE: "auth.errors.emailAlreadyInUse",
+    AUTH_NETWORK_ERROR: "auth.errors.networkError",
+    AUTH_CONFIG_ERROR: "auth.errors.configurationError",
+    AUTH_TOO_MANY_REQUESTS: "auth.errors.tooManyRequests",
+    AUTH_USER_DISABLED: "auth.errors.userDisabled",
+    AUTH_NOT_INITIALIZED: "auth.errors.authNotInitialized",
+  };
+
+  // Check error name for specific error types
+  if (error.name === "AuthInvalidEmailError") {
+    return "auth.errors.invalidEmail";
+  }
+  if (error.name === "AuthWeakPasswordError") {
+    return "auth.errors.weakPassword";
+  }
+  if (error.name === "AuthUserNotFoundError") {
+    return "auth.errors.userNotFound";
+  }
+  if (error.name === "AuthWrongPasswordError") {
+    return "auth.errors.wrongPassword";
+  }
+  if (error.name === "AuthEmailAlreadyInUseError") {
+    return "auth.errors.emailAlreadyInUse";
+  }
+  if (error.name === "AuthNetworkError") {
+    return "auth.errors.networkError";
+  }
+  if (error.name === "AuthConfigurationError") {
+    return "auth.errors.configurationError";
+  }
+  if (error.name === "AuthInitializationError") {
+    return "auth.errors.authNotInitialized";
+  }
+
+  // Use code if available
+  if (code && errorCodeMap[code]) {
+    return errorCodeMap[code];
+  }
+
+  // Check error message for specific patterns
+  const message = error.message.toLowerCase();
+  if (message.includes("too many requests")) {
+    return "auth.errors.tooManyRequests";
+  }
+  if (message.includes("user account has been disabled") || message.includes("user disabled")) {
+    return "auth.errors.userDisabled";
+  }
+  if (message.includes("not properly configured") || message.includes("configuration")) {
+    return "auth.errors.configurationError";
+  }
+  if (message.includes("not enabled") || message.includes("operation not allowed")) {
+    return "auth.errors.operationNotAllowed";
+  }
+
+  // Default to unknown error
+  return "auth.errors.unknownError";
+}
+
+
+
+