@umituz/react-native-auth 3.4.20 → 3.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.4.20",
+  "version": "3.4.21",
   "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

@@ -172,6 +172,9 @@ export type { UseGoogleAuthResult, GoogleAuthConfig as GoogleAuthHookConfig } fr
 export { useAppleAuth } from './presentation/hooks/useAppleAuth';
 export type { UseAppleAuthResult } from './presentation/hooks/useAppleAuth';
 
+export { useAuthBottomSheet } from './presentation/hooks/useAuthBottomSheet';
+export { useAuthBottomSheetWrapper } from './presentation/hooks/useAuthBottomSheetWrapper';
+
 export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
 
 // Domain Utils - Anonymous Names
@@ -217,10 +220,8 @@ export type { PasswordMatchIndicatorProps } from './presentation/components/Pass
 export { AuthBottomSheet } from './presentation/components/AuthBottomSheet';
 export type { AuthBottomSheetProps } from './presentation/components/AuthBottomSheet';
 export { AuthBottomSheetWrapper } from './presentation/components/AuthBottomSheetWrapper';
-export type {
-  AuthBottomSheetWrapperProps,
-  SocialAuthConfiguration,
-} from './presentation/components/AuthBottomSheetWrapper';
+export type { AuthBottomSheetWrapperProps } from './presentation/components/AuthBottomSheetWrapper';
+export type { SocialAuthConfiguration } from './presentation/hooks/useAuthBottomSheetWrapper';
 export { SocialLoginButtons } from './presentation/components/SocialLoginButtons';
 export type { SocialLoginButtonsProps } from './presentation/components/SocialLoginButtons';
 export { ProfileSection } from './presentation/components/ProfileSection';

package/src/presentation/components/AuthBottomSheet.tsx

@@ -3,7 +3,7 @@
  * Bottom sheet modal for authentication (Login/Register)
  */
 
-import React, { useEffect, useCallback, useRef, useState } from "react";
+import React from "react";
 import { View, TouchableOpacity, ScrollView } from "react-native";
 import {
   useAppDesignTokens,
@@ -11,11 +11,9 @@ import {
   AtomicIcon,
   AtomicKeyboardAvoidingView,
   BottomSheetModal,
-  type BottomSheetModalRef,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useAuthModalStore } from "../stores/authModalStore";
-import { useAuth } from "../hooks/useAuth";
+import { useAuthBottomSheet } from "../hooks/useAuthBottomSheet";
 import { LoginForm } from "./LoginForm";
 import { RegisterForm } from "./RegisterForm";
 import { SocialLoginButtons } from "./SocialLoginButtons";
@@ -46,80 +44,19 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
-  const modalRef = useRef<BottomSheetModalRef>(null);
 
-  const [googleLoading, setGoogleLoading] = useState(false);
-  const [appleLoading, setAppleLoading] = useState(false);
-
-  const { isVisible, mode, hideAuthModal, setMode, executePendingCallback, clearPendingCallback } =
-    useAuthModalStore();
-  const { isAuthenticated, isAnonymous } = useAuth();
-
-  useEffect(() => {
-    if (isVisible) {
-      modalRef.current?.present();
-    } else {
-      modalRef.current?.dismiss();
-    }
-  }, [isVisible]);
-
-  const handleDismiss = useCallback(() => {
-    hideAuthModal();
-    clearPendingCallback();
-  }, [hideAuthModal, clearPendingCallback]);
-
-  const handleClose = useCallback(() => {
-    modalRef.current?.dismiss();
-    handleDismiss();
-  }, [handleDismiss]);
-
-  const prevIsAuthenticatedRef = useRef(isAuthenticated);
-  const prevIsVisibleRef = useRef(isVisible);
-
-  useEffect(() => {
-    // Only close the modal if the user was NOT authenticated and then BECOMES authenticated 
-    // while the modal is visible.
-    if (!prevIsAuthenticatedRef.current && isAuthenticated && isVisible && !isAnonymous) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        // eslint-disable-next-line no-console
-        console.log("[AuthBottomSheet] Auto-closing due to successful authentication transition");
-      }
-      handleClose();
-      executePendingCallback();
-    }
-    
-    // Update ref for next render
-    prevIsAuthenticatedRef.current = isAuthenticated;
-    prevIsVisibleRef.current = isVisible;
-  }, [isAuthenticated, isVisible, isAnonymous, executePendingCallback, handleClose]);
-
-  const handleNavigateToRegister = useCallback(() => {
-    setMode("register");
-  }, [setMode]);
-
-  const handleNavigateToLogin = useCallback(() => {
-    setMode("login");
-  }, [setMode]);
-
-  const handleGoogleSignIn = useCallback(async () => {
-    if (!onGoogleSignIn) return;
-    setGoogleLoading(true);
-    try {
-      await onGoogleSignIn();
-    } finally {
-      setGoogleLoading(false);
-    }
-  }, [onGoogleSignIn]);
-
-  const handleAppleSignIn = useCallback(async () => {
-    if (!onAppleSignIn) return;
-    setAppleLoading(true);
-    try {
-      await onAppleSignIn();
-    } finally {
-      setAppleLoading(false);
-    }
-  }, [onAppleSignIn]);
+  const {
+    modalRef,
+    googleLoading,
+    appleLoading,
+    mode,
+    handleDismiss,
+    handleClose,
+    handleNavigateToRegister,
+    handleNavigateToLogin,
+    handleGoogleSignIn,
+    handleAppleSignIn,
+  } = useAuthBottomSheet({ onGoogleSignIn, onAppleSignIn });
 
   return (
     <BottomSheetModal
@@ -131,11 +68,6 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
       <AtomicKeyboardAvoidingView
         style={{ flex: 1 }}
       >
-        <ScrollView
-          contentContainerStyle={styles.scrollContent}
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
         <TouchableOpacity
           style={styles.closeButton}
           onPress={handleClose}
@@ -146,6 +78,12 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
           <AtomicIcon name="close" size="md" color="secondary" />
         </TouchableOpacity>
 
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+        >
+
         <View style={styles.header}>
           <AtomicText type="headlineLarge" color="primary" style={styles.title}>
             {mode === "login" ? t("auth.signIn") : t("auth.createAccount")}

package/src/presentation/components/AuthBottomSheetWrapper.tsx

@@ -18,19 +18,9 @@
  * ```
  */
 
-import React, { useCallback, useMemo } from "react";
-import { Platform } from "react-native";
+import React from "react";
 import { AuthBottomSheet } from "./AuthBottomSheet";
-import { useGoogleAuth, type GoogleAuthConfig } from "../hooks/useGoogleAuth";
-import { useAppleAuth } from "../hooks/useAppleAuth";
-import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
-
-declare const __DEV__: boolean;
-
-export interface SocialAuthConfiguration {
-  google?: GoogleAuthConfig;
-  apple?: { enabled: boolean };
-}
+import { useAuthBottomSheetWrapper, type SocialAuthConfiguration } from "../hooks/useAuthBottomSheetWrapper";
 
 export interface AuthBottomSheetWrapperProps {
   /** Terms of Service URL */
@@ -55,51 +45,9 @@ export const AuthBottomSheetWrapper: React.FC<AuthBottomSheetWrapperProps> = ({
   onPrivacyPress,
   socialConfig,
 }) => {
-  const { signInWithGoogle, googleConfigured } = useGoogleAuth(socialConfig?.google);
-  const { signInWithApple, appleAvailable } = useAppleAuth();
-
-  const providers = useMemo<SocialAuthProvider[]>(() => {
-    const result: SocialAuthProvider[] = [];
-
-    if (Platform.OS === "ios" && socialConfig?.apple?.enabled && appleAvailable) {
-      result.push("apple");
-    }
-
-    if (googleConfigured) {
-      result.push("google");
-    }
-
-    if (__DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[AuthBottomSheetWrapper] Enabled providers:", result);
-    }
-
-    return result;
-  }, [socialConfig?.apple?.enabled, appleAvailable, googleConfigured]);
-
-  const handleGoogleSignIn = useCallback(async () => {
-    if (__DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[AuthBottomSheetWrapper] Google sign-in requested");
-    }
-    const result = await signInWithGoogle();
-    if (__DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[AuthBottomSheetWrapper] Google result:", result);
-    }
-  }, [signInWithGoogle]);
-
-  const handleAppleSignIn = useCallback(async () => {
-    if (__DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[AuthBottomSheetWrapper] Apple sign-in requested");
-    }
-    const result = await signInWithApple();
-    if (__DEV__) {
-      // eslint-disable-next-line no-console
-      console.log("[AuthBottomSheetWrapper] Apple result:", result);
-    }
-  }, [signInWithApple]);
+  const { providers, handleGoogleSignIn, handleAppleSignIn } = useAuthBottomSheetWrapper({
+    socialConfig,
+  });
 
   return (
     <AuthBottomSheet

package/src/presentation/hooks/useAuthBottomSheet.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { BottomSheetModalRef } from "@umituz/react-native-design-system";
+import { useAuthModalStore } from "../stores/authModalStore";
+import { useAuth } from "../hooks/useAuth";
+
+interface UseAuthBottomSheetProps {
+  onGoogleSignIn?: () => Promise<void>;
+  onAppleSignIn?: () => Promise<void>;
+}
+
+export function useAuthBottomSheet({ onGoogleSignIn, onAppleSignIn }: UseAuthBottomSheetProps) {
+  const modalRef = useRef<BottomSheetModalRef>(null);
+  const [googleLoading, setGoogleLoading] = useState(false);
+  const [appleLoading, setAppleLoading] = useState(false);
+
+  const { isVisible, mode, hideAuthModal, setMode, executePendingCallback, clearPendingCallback } =
+    useAuthModalStore();
+  const { isAuthenticated, isAnonymous } = useAuth();
+
+  // Handle visibility sync with modalRef
+  useEffect(() => {
+    if (isVisible) {
+      modalRef.current?.present();
+    } else {
+      modalRef.current?.dismiss();
+    }
+  }, [isVisible]);
+
+  const handleDismiss = useCallback(() => {
+    hideAuthModal();
+    clearPendingCallback();
+  }, [hideAuthModal, clearPendingCallback]);
+
+  const handleClose = useCallback(() => {
+    modalRef.current?.dismiss();
+    handleDismiss();
+  }, [handleDismiss]);
+
+  const prevIsAuthenticatedRef = useRef(isAuthenticated);
+  const prevIsVisibleRef = useRef(isVisible);
+  const prevIsAnonymousRef = useRef(isAnonymous);
+
+  useEffect(() => {
+    // Determine if user just successfully authenticated (either A: were not authed at all, or B: were anonymous and now aren't)
+    const justAuthenticated = !prevIsAuthenticatedRef.current && isAuthenticated;
+    const justConvertedFromAnonymous = prevIsAnonymousRef.current && !isAnonymous && isAuthenticated;
+
+    if ((justAuthenticated || justConvertedFromAnonymous) && isVisible && !isAnonymous) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("[AuthBottomSheet] Auto-closing due to successful authentication transition", {
+          justAuthenticated,
+          justConvertedFromAnonymous,
+        });
+      }
+      handleClose();
+      executePendingCallback();
+    }
+    
+    // Update refs for next render
+    prevIsAuthenticatedRef.current = isAuthenticated;
+    prevIsVisibleRef.current = isVisible;
+    prevIsAnonymousRef.current = isAnonymous;
+  }, [isAuthenticated, isVisible, isAnonymous, executePendingCallback, handleClose]);
+
+  const handleNavigateToRegister = useCallback(() => {
+    setMode("register");
+  }, [setMode]);
+
+  const handleNavigateToLogin = useCallback(() => {
+    setMode("login");
+  }, [setMode]);
+
+  const handleGoogleSignIn = useCallback(async () => {
+    if (!onGoogleSignIn) return;
+    setGoogleLoading(true);
+    try {
+      await onGoogleSignIn();
+    } finally {
+      setGoogleLoading(false);
+    }
+  }, [onGoogleSignIn]);
+
+  const handleAppleSignIn = useCallback(async () => {
+    if (!onAppleSignIn) return;
+    setAppleLoading(true);
+    try {
+      await onAppleSignIn();
+    } finally {
+      setAppleLoading(false);
+    }
+  }, [onAppleSignIn]);
+
+  return {
+    modalRef,
+    googleLoading,
+    appleLoading,
+    mode,
+    handleDismiss,
+    handleClose,
+    handleNavigateToRegister,
+    handleNavigateToLogin,
+    handleGoogleSignIn,
+    handleAppleSignIn,
+  };
+}

package/src/presentation/hooks/useAuthBottomSheetWrapper.ts

@@ -0,0 +1,70 @@
+import { useCallback, useMemo } from "react";
+import { Platform } from "react-native";
+import { useGoogleAuth, type GoogleAuthConfig } from "./useGoogleAuth";
+import { useAppleAuth } from "./useAppleAuth";
+import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
+
+declare const __DEV__: boolean;
+
+export interface SocialAuthConfiguration {
+  google?: GoogleAuthConfig;
+  apple?: { enabled: boolean };
+}
+
+interface UseAuthBottomSheetWrapperProps {
+  socialConfig?: SocialAuthConfiguration;
+}
+
+export function useAuthBottomSheetWrapper({ socialConfig }: UseAuthBottomSheetWrapperProps) {
+  const { signInWithGoogle, googleConfigured } = useGoogleAuth(socialConfig?.google);
+  const { signInWithApple, appleAvailable } = useAppleAuth();
+
+  const providers = useMemo<SocialAuthProvider[]>(() => {
+    const result: SocialAuthProvider[] = [];
+
+    if (Platform.OS === "ios" && socialConfig?.apple?.enabled && appleAvailable) {
+      result.push("apple");
+    }
+
+    if (googleConfigured) {
+      result.push("google");
+    }
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAuthBottomSheetWrapper] Enabled providers:", result);
+    }
+
+    return result;
+  }, [socialConfig?.apple?.enabled, appleAvailable, googleConfigured]);
+
+  const handleGoogleSignIn = useCallback(async () => {
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAuthBottomSheetWrapper] Google sign-in requested");
+    }
+    const result = await signInWithGoogle();
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAuthBottomSheetWrapper] Google result:", result);
+    }
+  }, [signInWithGoogle]);
+
+  const handleAppleSignIn = useCallback(async () => {
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAuthBottomSheetWrapper] Apple sign-in requested");
+    }
+    const result = await signInWithApple();
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAuthBottomSheetWrapper] Apple result:", result);
+    }
+  }, [signInWithApple]);
+
+  return {
+    providers,
+    handleGoogleSignIn,
+    handleAppleSignIn,
+  };
+}