@umituz/react-native-auth 3.4.20 → 3.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.4.20",
+  "version": "3.4.22",
   "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 type { SocialAuthConfiguration } from './presentation/hooks/useAuthBottomSheet';
+
 export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
 
 // Domain Utils - Anonymous Names
@@ -216,11 +219,6 @@ export { PasswordMatchIndicator } from './presentation/components/PasswordMatchI
 export type { PasswordMatchIndicatorProps } from './presentation/components/PasswordMatchIndicator';
 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 { 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,27 +11,24 @@ 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, type SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
 import { LoginForm } from "./LoginForm";
 import { RegisterForm } from "./RegisterForm";
 import { SocialLoginButtons } from "./SocialLoginButtons";
 import { styles } from "./AuthBottomSheet.styles";
-import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
 export interface AuthBottomSheetProps {
   termsUrl?: string;
   privacyUrl?: string;
   onTermsPress?: () => void;
   onPrivacyPress?: () => void;
-  /** Enabled social auth providers */
-  socialProviders?: SocialAuthProvider[];
-  /** Called when Google sign-in is requested */
+  /** Social auth configuration */
+  socialConfig?: SocialAuthConfiguration;
+  /** Called when Google sign-in is requested (overrides internal behavior) */
   onGoogleSignIn?: () => Promise<void>;
-  /** Called when Apple sign-in is requested */
+  /** Called when Apple sign-in is requested (overrides internal behavior) */
   onAppleSignIn?: () => Promise<void>;
 }
 
@@ -40,86 +37,26 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
   privacyUrl,
   onTermsPress,
   onPrivacyPress,
-  socialProviders = [],
+  socialConfig,
   onGoogleSignIn,
   onAppleSignIn,
 }) => {
   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,
+    providers,
+    handleDismiss,
+    handleClose,
+    handleNavigateToRegister,
+    handleNavigateToLogin,
+    handleGoogleSignIn,
+    handleAppleSignIn,
+  } = useAuthBottomSheet({ socialConfig, 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")}
@@ -168,9 +106,9 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
             />
           )}
 
-          {socialProviders.length > 0 && (
+          {providers.length > 0 && (
             <SocialLoginButtons
-              enabledProviders={socialProviders}
+              enabledProviders={providers}
               onGooglePress={() => { void handleGoogleSignIn(); }}
               onApplePress={() => { void handleAppleSignIn(); }}
               googleLoading={googleLoading}

package/src/presentation/hooks/useAuthBottomSheet.ts

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Platform } from "react-native";
+import type { BottomSheetModalRef } from "@umituz/react-native-design-system";
+import { useAuthModalStore } from "../stores/authModalStore";
+import { useAuth } from "../hooks/useAuth";
+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 UseAuthBottomSheetParams {
+  socialConfig?: SocialAuthConfiguration;
+  onGoogleSignIn?: () => Promise<void>;
+  onAppleSignIn?: () => Promise<void>;
+}
+
+export function useAuthBottomSheet(params: UseAuthBottomSheetParams = {}) {
+  const { socialConfig, onGoogleSignIn, onAppleSignIn } = params;
+  
+  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();
+
+  // Social Auth Hooks
+  const { signInWithGoogle, googleConfigured } = useGoogleAuth(socialConfig?.google);
+  const { signInWithApple, appleAvailable } = useAppleAuth();
+
+  // Determine enabled providers
+  const providers = useMemo<SocialAuthProvider[]>(() => {
+    const result: SocialAuthProvider[] = [];
+
+    if (Platform.OS === "ios" && socialConfig?.apple?.enabled && appleAvailable) {
+      result.push("apple");
+    }
+
+    if (googleConfigured) {
+      result.push("google");
+    }
+
+    return result;
+  }, [socialConfig?.apple?.enabled, appleAvailable, googleConfigured]);
+
+  // 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(() => {
+    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("[useAuthBottomSheet] Auto-closing due to successful authentication transition", {
+          justAuthenticated,
+          justConvertedFromAnonymous,
+        });
+      }
+      handleClose();
+      executePendingCallback();
+    }
+    
+    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 handleGoogleSignInInternal = useCallback(async () => {
+    setGoogleLoading(true);
+    try {
+      if (onGoogleSignIn) {
+        await onGoogleSignIn();
+      } else if (signInWithGoogle) {
+        await signInWithGoogle();
+      }
+    } finally {
+      setGoogleLoading(false);
+    }
+  }, [onGoogleSignIn, signInWithGoogle]);
+
+  const handleAppleSignInInternal = useCallback(async () => {
+    setAppleLoading(true);
+    try {
+      if (onAppleSignIn) {
+        await onAppleSignIn();
+      } else if (signInWithApple) {
+        await signInWithApple();
+      }
+    } finally {
+      setAppleLoading(false);
+    }
+  }, [onAppleSignIn, signInWithApple]);
+
+  return {
+    modalRef,
+    googleLoading,
+    appleLoading,
+    mode,
+    providers,
+    handleDismiss,
+    handleClose,
+    handleNavigateToRegister,
+    handleNavigateToLogin,
+    handleGoogleSignIn: handleGoogleSignInInternal,
+    handleAppleSignIn: handleAppleSignInInternal,
+  };
+}

package/src/presentation/components/AuthBottomSheetWrapper.tsx

@@ -1,115 +0,0 @@
-/**
- * AuthBottomSheetWrapper Component
- * Self-contained auth modal with integrated social login
- *
- * This wrapper component combines AuthBottomSheet with social auth hooks,
- * providing a complete authentication solution for apps.
- *
- * Usage:
- * ```tsx
- * <AuthBottomSheetWrapper
- *   termsUrl="https://myapp.com/terms"
- *   privacyUrl="https://myapp.com/privacy"
- *   socialConfig={{
- *     google: { webClientId: '...', iosClientId: '...' },
- *     apple: { enabled: true }
- *   }}
- * />
- * ```
- */
-
-import React, { useCallback, useMemo } from "react";
-import { Platform } from "react-native";
-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 };
-}
-
-export interface AuthBottomSheetWrapperProps {
-  /** Terms of Service URL */
-  termsUrl?: string;
-  /** Privacy Policy URL */
-  privacyUrl?: string;
-  /** Called when Terms link is pressed (overrides default behavior) */
-  onTermsPress?: () => void;
-  /** Called when Privacy link is pressed (overrides default behavior) */
-  onPrivacyPress?: () => void;
-  /** Social auth configuration */
-  socialConfig?: SocialAuthConfiguration;
-}
-
-/**
- * Self-contained auth bottom sheet with integrated social login
- */
-export const AuthBottomSheetWrapper: React.FC<AuthBottomSheetWrapperProps> = ({
-  termsUrl,
-  privacyUrl,
-  onTermsPress,
-  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]);
-
-  return (
-    <AuthBottomSheet
-      termsUrl={termsUrl}
-      privacyUrl={privacyUrl}
-      onTermsPress={onTermsPress}
-      onPrivacyPress={onPrivacyPress}
-      socialProviders={providers}
-      onGoogleSignIn={handleGoogleSignIn}
-      onAppleSignIn={handleAppleSignIn}
-    />
-  );
-};