@umituz/react-native-auth 2.7.7 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.7.7",
+  "version": "3.0.0",
   "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/index.ts

@@ -178,6 +178,13 @@ export type { AccountActionsConfig, AccountActionsProps } from './presentation/c
 export { useAuthModalStore } from './presentation/stores/authModalStore';
 export type { AuthModalMode } from './presentation/stores/authModalStore';
 
+export {
+  useAuthStore,
+  initializeAuthListener,
+  resetAuthListener,
+  selectIsAuthenticated,
+} from './presentation/stores/authStore';
+
 // =============================================================================
 // PRESENTATION LAYER - Utilities
 // =============================================================================

package/src/presentation/hooks/useAuth.ts

@@ -2,12 +2,23 @@
  * useAuth Hook
  * React hook for authentication state management
  *
- * Uses provider-agnostic AuthUser type.
- * Adds app-specific state (guest mode, error handling) on top of provider auth.
+ * Uses centralized Zustand store for auth state.
+ * Single source of truth - no duplicate subscriptions.
+ *
+ * @example
+ * ```typescript
+ * const { user, isAuthenticated, signIn, signUp, signOut } = useAuth();
+ * ```
  */
 
-import { useAuthState } from "./useAuthState";
-import { useAuthActions } from "./useAuthActions";
+import { useCallback } from "react";
+import { useAuthStore, selectIsAuthenticated } from "../stores/authStore";
+import {
+  useSignInMutation,
+  useSignUpMutation,
+  useSignOutMutation,
+  useGuestModeMutation,
+} from "./mutations/useAuthMutations";
 import type { AuthUser } from "../../domain/entities/AuthUser";
 
 export interface UseAuthResult {
@@ -35,31 +46,105 @@ export interface UseAuthResult {
 
 /**
  * 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
- * 
+ *
+ * Uses centralized Zustand store - all components share the same state.
+ * Must call initializeAuthListener() once in app root.
+ *
  * @example
  * ```typescript
  * const { user, isAuthenticated, signIn, signUp, signOut } = useAuth();
  * ```
  */
 export function useAuth(): UseAuthResult {
-  const state = useAuthState();
-  const actions = useAuthActions(state);
+  // State from store
+  const user = useAuthStore((state) => state.user);
+  const loading = useAuthStore((state) => state.loading);
+  const isGuest = useAuthStore((state) => state.isGuest);
+  const error = useAuthStore((state) => state.error);
+  const isAuthenticated = useAuthStore(selectIsAuthenticated);
+
+  // Actions from store
+  const setLoading = useAuthStore((state) => state.setLoading);
+  const setError = useAuthStore((state) => state.setError);
+  const setIsGuest = useAuthStore((state) => state.setIsGuest);
+
+  // Mutations
+  const signInMutation = useSignInMutation();
+  const signUpMutation = useSignUpMutation();
+  const signOutMutation = useSignOutMutation();
+  const guestModeMutation = useGuestModeMutation();
+
+  const signUp = useCallback(
+    async (email: string, password: string, displayName?: string) => {
+      try {
+        setLoading(true);
+        setError(null);
+        await signUpMutation.mutateAsync({ email, password, displayName });
+        if (isGuest) {
+          setIsGuest(false);
+        }
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : "Sign up failed";
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [isGuest, setIsGuest, setLoading, setError, signUpMutation]
+  );
+
+  const signIn = useCallback(
+    async (email: string, password: string) => {
+      try {
+        setLoading(true);
+        setError(null);
+        await signInMutation.mutateAsync({ email, password });
+        if (isGuest) {
+          setIsGuest(false);
+        }
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : "Sign in failed";
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [isGuest, setIsGuest, setLoading, setError, signInMutation]
+  );
+
+  const signOut = useCallback(async () => {
+    try {
+      setLoading(true);
+      await signOutMutation.mutateAsync();
+    } finally {
+      setLoading(false);
+    }
+  }, [setLoading, signOutMutation]);
+
+  const continueAsGuest = useCallback(async () => {
+    try {
+      setLoading(true);
+      await guestModeMutation.mutateAsync();
+      setIsGuest(true);
+    } catch {
+      setIsGuest(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [setIsGuest, setLoading, guestModeMutation]);
 
   return {
-    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,
+    user,
+    loading,
+    isGuest,
+    isAuthenticated,
+    error,
+    signUp,
+    signIn,
+    signOut,
+    continueAsGuest,
+    setError,
   };
 }

package/src/presentation/screens/AccountScreen.tsx

@@ -53,12 +53,11 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
 };
 
 const styles = StyleSheet.create({
-},
     content: {
-    padding: 16,
-},
+        padding: 16,
+    },
     divider: {
-    height: 24,
-},
+        height: 24,
+    },
 });
 

package/src/presentation/stores/authStore.ts

@@ -0,0 +1,220 @@
+/**
+ * Auth Store
+ * Centralized auth state management using Zustand with AsyncStorage persistence
+ *
+ * Single source of truth for auth state across the app.
+ * Firebase auth changes are synced via initializeAuthListener().
+ *
+ * @example
+ * ```typescript
+ * // Initialize once in app root
+ * useEffect(() => {
+ *   const unsubscribe = initializeAuthListener();
+ *   return unsubscribe;
+ * }, []);
+ *
+ * // Use anywhere
+ * const { user, isAuthenticated, signIn, signOut } = useAuthStore();
+ * ```
+ */
+
+import { createStore } from "@umituz/react-native-storage";
+import { onAuthStateChanged, type User } from "firebase/auth";
+import { getFirebaseAuth } from "@umituz/react-native-firebase";
+import type { AuthUser } from "../../domain/entities/AuthUser";
+import { mapToAuthUser } from "../../infrastructure/utils/UserMapper";
+import { getAuthService } from "../../infrastructure/services/AuthService";
+
+// =============================================================================
+// STATE TYPES
+// =============================================================================
+
+interface AuthState {
+  /** Mapped AuthUser (null if not authenticated) */
+  user: AuthUser | null;
+  /** Raw Firebase user reference */
+  firebaseUser: User | null;
+  /** Loading state during auth operations */
+  loading: boolean;
+  /** Guest mode (user skipped authentication) */
+  isGuest: boolean;
+  /** Error message from last auth operation */
+  error: string | null;
+  /** Whether auth listener has initialized */
+  initialized: boolean;
+}
+
+interface AuthActions {
+  /** Update user from Firebase listener */
+  setFirebaseUser: (user: User | null) => void;
+  /** Set loading state */
+  setLoading: (loading: boolean) => void;
+  /** Set guest mode */
+  setIsGuest: (isGuest: boolean) => void;
+  /** Set error message */
+  setError: (error: string | null) => void;
+  /** Mark as initialized */
+  setInitialized: (initialized: boolean) => void;
+  /** Reset to initial state */
+  reset: () => void;
+}
+
+// =============================================================================
+// INITIAL STATE
+// =============================================================================
+
+const initialState: AuthState = {
+  user: null,
+  firebaseUser: null,
+  loading: true,
+  isGuest: false,
+  error: null,
+  initialized: false,
+};
+
+// =============================================================================
+// STORE
+// =============================================================================
+
+export const useAuthStore = createStore<AuthState, AuthActions>({
+  name: "auth-store",
+  initialState,
+  persist: true,
+  version: 1,
+  partialize: (state) => ({
+    // Only persist these fields (not functions, not firebaseUser)
+    isGuest: state.isGuest,
+    initialized: state.initialized,
+  }),
+  actions: (set, get) => ({
+    setFirebaseUser: (firebaseUser) => {
+      const { isGuest } = get();
+
+      let user: AuthUser | null = null;
+
+      if (firebaseUser) {
+        // Non-anonymous users always get mapped
+        if (!firebaseUser.isAnonymous) {
+          user = mapToAuthUser(firebaseUser);
+        }
+        // Anonymous users only if not in guest mode
+        else if (!isGuest) {
+          user = mapToAuthUser(firebaseUser);
+        }
+      }
+
+      set({
+        firebaseUser,
+        user,
+        loading: false,
+      });
+    },
+
+    setLoading: (loading) => set({ loading }),
+
+    setIsGuest: (isGuest) => {
+      const { firebaseUser } = get();
+
+      // Recalculate user when guest mode changes
+      let user: AuthUser | null = null;
+      if (firebaseUser) {
+        if (!firebaseUser.isAnonymous) {
+          user = mapToAuthUser(firebaseUser);
+        } else if (!isGuest) {
+          user = mapToAuthUser(firebaseUser);
+        }
+      }
+
+      set({ isGuest, user });
+    },
+
+    setError: (error) => set({ error }),
+
+    setInitialized: (initialized) => set({ initialized }),
+
+    reset: () => set(initialState),
+  }),
+});
+
+// =============================================================================
+// SELECTORS
+// =============================================================================
+
+/**
+ * Check if user is authenticated (not guest, not anonymous)
+ */
+export const selectIsAuthenticated = (state: AuthState): boolean => {
+  return !!state.user && !state.isGuest && !state.user.isAnonymous;
+};
+
+// =============================================================================
+// LISTENER
+// =============================================================================
+
+let listenerInitialized = false;
+
+/**
+ * Initialize Firebase auth listener
+ * Call once in app root, returns unsubscribe function
+ *
+ * @example
+ * ```typescript
+ * useEffect(() => {
+ *   const unsubscribe = initializeAuthListener();
+ *   return unsubscribe;
+ * }, []);
+ * ```
+ */
+export function initializeAuthListener(): () => void {
+  // Prevent multiple initializations
+  if (listenerInitialized) {
+    return () => {};
+  }
+
+  const auth = getFirebaseAuth();
+  const store = useAuthStore.getState();
+
+  if (!auth) {
+    store.setLoading(false);
+    store.setInitialized(true);
+    return () => {};
+  }
+
+  // Sync initial guest mode from service
+  const service = getAuthService();
+  if (service) {
+    const isGuest = service.getIsGuestMode();
+    if (isGuest) {
+      store.setIsGuest(true);
+    }
+  }
+
+  listenerInitialized = true;
+
+  // Subscribe to auth state changes
+  const unsubscribe = onAuthStateChanged(auth, (user) => {
+    if (__DEV__) {
+      console.log("[authStore] Auth state changed:", user?.uid ?? "null");
+    }
+
+    store.setFirebaseUser(user);
+    store.setInitialized(true);
+
+    // Reset guest mode when real user signs in
+    if (user && !user.isAnonymous && store.isGuest) {
+      store.setIsGuest(false);
+    }
+  });
+
+  return () => {
+    unsubscribe();
+    listenerInitialized = false;
+  };
+}
+
+/**
+ * Reset listener state (for testing)
+ */
+export function resetAuthListener(): void {
+  listenerInitialized = false;
+}

package/src/presentation/hooks/useAuthActions.ts

@@ -1,92 +0,0 @@
-import { useCallback } from "react";
-import type { UseAuthStateResult } from "./useAuthState";
-import {
-  useSignInMutation,
-  useSignUpMutation,
-  useSignOutMutation,
-  useGuestModeMutation,
-} from "./mutations/useAuthMutations";
-
-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>;
-}
-
-export function useAuthActions(state: UseAuthStateResult): UseAuthActionsResult {
-  const { isGuest, setIsGuest, setLoading, setError } = state;
-
-  const signInMutation = useSignInMutation();
-  const signUpMutation = useSignUpMutation();
-  const signOutMutation = useSignOutMutation();
-  const guestModeMutation = useGuestModeMutation();
-
-  const signUp = useCallback(
-    async (email: string, password: string, displayName?: string) => {
-      try {
-        setLoading(true);
-        setError(null);
-        await signUpMutation.mutateAsync({ email, password, displayName });
-        if (isGuest) {
-          setIsGuest(false);
-        }
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : "Sign up failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [isGuest, setIsGuest, setLoading, setError, signUpMutation],
-  );
-
-  const signIn = useCallback(
-    async (email: string, password: string) => {
-      try {
-        setLoading(true);
-        setError(null);
-        await signInMutation.mutateAsync({ email, password });
-        if (isGuest) {
-          setIsGuest(false);
-        }
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : "Sign in failed";
-        setError(errorMessage);
-        throw err;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [isGuest, setIsGuest, setLoading, setError, signInMutation],
-  );
-
-  const signOut = useCallback(async () => {
-    try {
-      setLoading(true);
-      await signOutMutation.mutateAsync();
-    } finally {
-      setLoading(false);
-    }
-  }, [setLoading, signOutMutation]);
-
-  const continueAsGuest = useCallback(async () => {
-    try {
-      setLoading(true);
-      await guestModeMutation.mutateAsync();
-      setIsGuest(true);
-    } catch {
-      setIsGuest(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [setIsGuest, setLoading, guestModeMutation]);
-
-  return {
-    signUp,
-    signIn,
-    signOut,
-    continueAsGuest,
-  };
-}

package/src/presentation/hooks/useAuthState.ts

@@ -1,131 +0,0 @@
-/**
- * useAuthState Hook
- * Single Responsibility: Manage authentication state
- */
-
-/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
-import { useState, useEffect, useRef, useMemo } from "react";
-import { DeviceEventEmitter } from "react-native";
-import { getAuthService } from "../../infrastructure/services/AuthService";
-import { useFirebaseAuth } from "@umituz/react-native-firebase";
-import { mapToAuthUser } from "../../infrastructure/utils/UserMapper";
-import type { AuthUser } from "../../domain/entities/AuthUser";
-
-export interface UseAuthStateResult {
-  user: AuthUser | 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);
-
-  // Ref to track latest isGuest value for event handlers
-  const isGuestRef = useRef(isGuest);
-
-  // Memoize user to prevent new object reference on every render
-  const user = useMemo(() => {
-    // If no Firebase user, return null
-    if (!firebaseUser) return null;
-
-    // If Firebase user exists and is NOT anonymous, always return the user
-    // This ensures real authenticated users (email, Google, Apple) always have user object
-    // even if isGuest was previously true (which gets reset by useEffect below)
-    if (!firebaseUser.isAnonymous) {
-      return mapToAuthUser(firebaseUser);
-    }
-
-    // If Firebase user is anonymous AND we're in guest mode, return null
-    // Guest mode = user clicked "Continue as Guest" with no account
-    if (isGuest) return null;
-
-    // If Firebase user is anonymous but NOT in guest mode, return the user
-    // This handles anonymous auth accounts that can be upgraded later
-    return mapToAuthUser(firebaseUser);
-  }, [isGuest, firebaseUser?.uid, firebaseUser?.isAnonymous]);
-
-  // Anonymous users are NOT authenticated - they need to register/login
-  const isAuthenticated = !!user && !isGuest && !user.isAnonymous;
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    isGuestRef.current = isGuest;
-  }, [isGuest]);
-
-  // Reset guest mode when user signs in
-  useEffect(() => {
-    if (firebaseUser && isGuest) {
-      setIsGuest(false);
-    }
-  }, [firebaseUser, isGuest]);
-
-  // Sync isGuest state with service on mount only
-  useEffect(() => {
-    const service = getAuthService();
-    if (service) {
-      const serviceIsGuest = service.getIsGuestMode();
-      if (serviceIsGuest !== isGuestRef.current) {
-        setIsGuest(serviceIsGuest);
-      }
-    }
-  }, []);
-
-  // Listen for auth events - subscribe once on mount
-  useEffect(() => {
-    const guestSubscription = DeviceEventEmitter.addListener(
-      "guest-mode-enabled",
-      () => setIsGuest(true)
-    );
-
-    const authSubscription = DeviceEventEmitter.addListener(
-      "user-authenticated",
-      () => {
-        if (isGuestRef.current) {
-          setIsGuest(false);
-        }
-      }
-    );
-
-    const errorSubscription = DeviceEventEmitter.addListener(
-      "auth-error",
-      (payload: { error?: string }) => {
-        if (payload?.error) {
-          setError(payload.error);
-        }
-      }
-    );
-
-
-    return () => {
-      guestSubscription.remove();
-      authSubscription.remove();
-      errorSubscription.remove();
-    };
-  }, []);
-
-  return {
-    user,
-    isAuthenticated,
-    isGuest,
-    loading: loading || firebaseLoading,
-    error,
-    setError,
-    setIsGuest,
-    setLoading,
-  };
-}
-