@umituz/react-native-auth 4.3.95 → 4.3.96

package/package.json

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

@@ -166,9 +166,15 @@ export type { UseLocalErrorResult } from './presentation/hooks/useLocalError';
 export { AuthProvider } from './presentation/providers/AuthProvider';
 export type { ErrorFallbackProps } from './presentation/providers/AuthProvider';
 export { LoginScreen } from './presentation/screens/LoginScreen';
-export type { LoginScreenProps } from './presentation/screens/LoginScreen';
+export type {
+  LoginScreenProps,
+  LoginScreenTranslations,
+} from './presentation/screens/LoginScreen';
 export { RegisterScreen } from './presentation/screens/RegisterScreen';
-export type { RegisterScreenProps } from './presentation/screens/RegisterScreen';
+export type {
+  RegisterScreenProps,
+  RegisterScreenTranslations,
+} from './presentation/screens/RegisterScreen';
 export { AccountScreen } from './presentation/screens/AccountScreen';
 export type {
   AccountScreenProps,
@@ -183,12 +189,20 @@ export type {
   PasswordPromptScreenProps,
 } from './presentation/screens/PasswordPromptScreen';
 export { AuthNavigator } from './presentation/navigation/AuthNavigator';
-export type { AuthStackParamList } from './presentation/navigation/AuthNavigator';
+export type {
+  AuthStackParamList,
+  AuthNavigatorProps,
+  AuthNavigatorTranslations,
+} from './presentation/navigation/AuthNavigator';
 export { AuthBottomSheet } from './presentation/components/AuthBottomSheet';
 export type {
   AuthBottomSheetProps,
   AuthBottomSheetTranslations,
 } from './presentation/components/AuthBottomSheet';
+export { SocialLoginButtons } from './presentation/components/SocialLoginButtons';
+export type {
+  SocialLoginButtonsTranslations,
+} from './presentation/components/SocialLoginButtons';
 export { ProfileSection } from './presentation/components/ProfileSection';
 export type {
   ProfileSectionProps,

package/src/presentation/navigation/AuthNavigator.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { StackNavigator, type StackNavigatorConfig, type StackScreenProps } from "@umituz/react-native-design-system/molecules";
 import { storageRepository, unwrap } from "@umituz/react-native-design-system/storage";
+import type { SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
 import { LoginScreen, type LoginScreenTranslations } from "../screens/LoginScreen";
 import { RegisterScreen, type RegisterScreenTranslations } from "../screens/RegisterScreen";
 
@@ -10,28 +11,28 @@ export type AuthStackParamList = {
   Register: undefined;
 };
 
+// Storage key for persisting initial route preference across navigation
 const SHOW_REGISTER_KEY = "auth_show_register";
 
-interface AuthNavigatorTranslations {
+export interface AuthNavigatorTranslations {
   login: LoginScreenTranslations;
   register: RegisterScreenTranslations;
 }
 
-interface AuthNavigatorProps {
+export interface AuthNavigatorProps {
   translations: AuthNavigatorTranslations;
   termsUrl?: string;
   privacyUrl?: string;
   onTermsPress?: () => void;
   onPrivacyPress?: () => void;
+  socialConfig?: SocialAuthConfiguration;
+  onGoogleSignIn?: () => Promise<void>;
+  onAppleSignIn?: () => Promise<void>;
+  renderLogo?: () => React.ReactNode;
 }
 
-export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
-  translations,
-  termsUrl,
-  privacyUrl,
-  onTermsPress,
-  onPrivacyPress,
-}) => {
+export const AuthNavigator: React.FC<AuthNavigatorProps> = (props) => {
+  const { translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress, socialConfig, onGoogleSignIn, onAppleSignIn, renderLogo } = props;
   const tokens = useAppDesignTokens();
   const [initialRouteName, setInitialRouteName] = useState<
     "Login" | "Register" | undefined
@@ -77,29 +78,42 @@ export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
   const loginTranslations = useMemo(() => translations.login, [translations.login]);
   const registerTranslations = useMemo(() => translations.register, [translations.register]);
 
-  const LoginScreenWrapper = useCallback(
-    (props: StackScreenProps<AuthStackParamList, 'Login'>) => (
+  // Memoize social auth props
+  const socialAuthProps = useMemo(() => ({
+    socialConfig,
+    onGoogleSignIn,
+    onAppleSignIn,
+    renderLogo,
+  }), [socialConfig, onGoogleSignIn, onAppleSignIn, renderLogo]);
+
+  // Create screen components with proper types
+  const LoginScreenComponent = useMemo(() => {
+    // Use FC with generic props to satisfy StackNavigator type, then cast for internal use
+    const LoginScreenWrapper: React.FC<{ navigation: unknown; route: unknown }> = (props) => (
       <LoginScreen
-        {...props}
+        {...(props as StackScreenProps<AuthStackParamList, 'Login'>)}
         translations={loginTranslations}
+        {...socialAuthProps}
       />
-    ),
-    [loginTranslations]
-  );
+    );
+    return React.memo(LoginScreenWrapper);
+  }, [loginTranslations, socialAuthProps]);
 
-  const RegisterScreenWrapper = useCallback(
-    (props: StackScreenProps<AuthStackParamList, 'Register'>) => (
+  const RegisterScreenComponent = useMemo(() => {
+    // Use FC with generic props to satisfy StackNavigator type, then cast for internal use
+    const RegisterScreenWrapper: React.FC<{ navigation: unknown; route: unknown }> = (props) => (
       <RegisterScreen
-        {...props}
+        {...(props as StackScreenProps<AuthStackParamList, 'Register'>)}
         translations={registerTranslations}
         termsUrl={termsUrl}
         privacyUrl={privacyUrl}
         onTermsPress={onTermsPress}
         onPrivacyPress={onPrivacyPress}
+        {...socialAuthProps}
       />
-    ),
-    [registerTranslations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress]
-  );
+    );
+    return React.memo(RegisterScreenWrapper);
+  }, [registerTranslations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress, socialAuthProps]);
 
   if (initialRouteName === undefined) {
     return null;
@@ -112,8 +126,8 @@ export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
       cardStyle: { backgroundColor: tokens.colors.backgroundPrimary },
     },
     screens: [
-      { name: "Login", component: LoginScreenWrapper as React.ComponentType<any> },
-      { name: "Register", component: RegisterScreenWrapper as React.ComponentType<any> },
+      { name: "Login", component: LoginScreenComponent },
+      { name: "Register", component: RegisterScreenComponent },
     ],
   };
 

package/src/presentation/screens/LoginScreen.tsx

@@ -1,29 +1,44 @@
 /**
  * Login Screen Component
- * Login form screen with navigation
+ * Login form screen with navigation and social auth support
  * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import type { SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
+import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 import { AuthHeader } from "../components/AuthHeader";
 import { LoginForm, type LoginFormTranslations } from "../components/LoginForm";
+import { SocialLoginButtons, type SocialLoginButtonsTranslations } from "../components/SocialLoginButtons";
 
 export interface LoginScreenTranslations {
   title: string;
   subtitle?: string;
   form: LoginFormTranslations;
+  socialButtons?: SocialLoginButtonsTranslations;
 }
 
 export interface LoginScreenProps {
   translations: LoginScreenTranslations;
+  socialConfig?: SocialAuthConfiguration;
+  onGoogleSignIn?: () => Promise<void>;
+  onAppleSignIn?: () => Promise<void>;
+  renderLogo?: () => React.ReactNode;
 }
 
-export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
+export const LoginScreen = memo<LoginScreenProps>(({
+  translations,
+  socialConfig,
+  onGoogleSignIn,
+  onAppleSignIn,
+  renderLogo,
+}) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const responsive = useResponsive();
@@ -33,6 +48,35 @@ export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
     navigation.navigate("Register");
   }, [navigation]);
 
+  // Determine enabled social providers
+  const enabledProviders = useMemo<SocialAuthProvider[]>(() => {
+    if (!socialConfig) return [];
+    const providers: SocialAuthProvider[] = [];
+    // For Google, check if config exists
+    if (socialConfig.google) providers.push("google");
+    // For Apple, check if enabled flag is true
+    if (socialConfig.apple?.enabled) providers.push("apple");
+    return providers;
+  }, [socialConfig]);
+
+  const hasSocialAuth = enabledProviders.length > 0 && translations.socialButtons;
+  // Check if required handlers exist for enabled providers (only need handler if provider is enabled)
+  const hasGoogle = enabledProviders.includes("google") && onGoogleSignIn;
+  const hasApple = enabledProviders.includes("apple") && onAppleSignIn;
+  const showSocialButtons = hasSocialAuth && (hasGoogle || hasApple);
+
+  // Store social buttons translations in const to satisfy type checker (safe because we check hasSocialAuth first)
+  const socialButtonsTranslations = translations.socialButtons!;
+
+  // PERFORMANCE: Stable callbacks for social sign-in (wrap async handlers)
+  const handleGooglePress = useCallback(() => {
+    void onGoogleSignIn?.();
+  }, [onGoogleSignIn]);
+
+  const handleApplePress = useCallback(() => {
+    void onAppleSignIn?.();
+  }, [onAppleSignIn]);
+
   return (
     <ScreenLayout
       scrollable
@@ -41,15 +85,38 @@ export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
       contentContainerStyle={{ justifyContent: "center" }}
       backgroundColor={tokens.colors.backgroundPrimary}
     >
+      {/* Optional Logo/Illustration */}
+      {renderLogo && (
+        <View style={styles.logoContainer}>{renderLogo()}</View>
+      )}
+
       <AuthHeader title={translations.title} subtitle={translations.subtitle} />
+
       <AtomicCard variant="elevated" padding="lg">
         <LoginForm
           translations={translations.form}
           onNavigateToRegister={handleNavigateToRegister}
         />
+
+        {/* Social Login Buttons */}
+        {showSocialButtons && (
+          <SocialLoginButtons
+            translations={socialButtonsTranslations}
+            enabledProviders={enabledProviders}
+            onGooglePress={hasGoogle ? handleGooglePress : undefined}
+            onApplePress={hasApple ? handleApplePress : undefined}
+          />
+        )}
       </AtomicCard>
     </ScreenLayout>
   );
 });
 
 LoginScreen.displayName = 'LoginScreen';
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+});

package/src/presentation/screens/RegisterScreen.tsx

@@ -1,22 +1,27 @@
 /**
  * Register Screen Component
- * Registration form screen with navigation
+ * Registration form screen with navigation and social auth support
  * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { useResponsive } from "@umituz/react-native-design-system/responsive";
+import type { SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
+import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 import { AuthHeader } from "../components/AuthHeader";
 import { RegisterForm, type RegisterFormTranslations } from "../components/RegisterForm";
+import { SocialLoginButtons, type SocialLoginButtonsTranslations } from "../components/SocialLoginButtons";
 
 export interface RegisterScreenTranslations {
   title: string;
   subtitle?: string;
   form: RegisterFormTranslations;
+  socialButtons?: SocialLoginButtonsTranslations;
 }
 
 export interface RegisterScreenProps {
@@ -25,9 +30,23 @@ export interface RegisterScreenProps {
   privacyUrl?: string;
   onTermsPress?: () => void;
   onPrivacyPress?: () => void;
+  socialConfig?: SocialAuthConfiguration;
+  onGoogleSignIn?: () => Promise<void>;
+  onAppleSignIn?: () => Promise<void>;
+  renderLogo?: () => React.ReactNode;
 }
 
-export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress }) => {
+export const RegisterScreen = memo<RegisterScreenProps>(({
+  translations,
+  termsUrl,
+  privacyUrl,
+  onTermsPress,
+  onPrivacyPress,
+  socialConfig,
+  onGoogleSignIn,
+  onAppleSignIn,
+  renderLogo,
+}) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const responsive = useResponsive();
@@ -37,6 +56,35 @@ export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUr
     navigation.navigate("Login");
   }, [navigation]);
 
+  // Determine enabled social providers
+  const enabledProviders = useMemo<SocialAuthProvider[]>(() => {
+    if (!socialConfig) return [];
+    const providers: SocialAuthProvider[] = [];
+    // For Google, check if config exists
+    if (socialConfig.google) providers.push("google");
+    // For Apple, check if enabled flag is true
+    if (socialConfig.apple?.enabled) providers.push("apple");
+    return providers;
+  }, [socialConfig]);
+
+  const hasSocialAuth = enabledProviders.length > 0 && translations.socialButtons;
+  // Check if required handlers exist for enabled providers (only need handler if provider is enabled)
+  const hasGoogle = enabledProviders.includes("google") && onGoogleSignIn;
+  const hasApple = enabledProviders.includes("apple") && onAppleSignIn;
+  const showSocialButtons = hasSocialAuth && (hasGoogle || hasApple);
+
+  // Store social buttons translations in const to satisfy type checker (safe because we check hasSocialAuth first)
+  const socialButtonsTranslations = translations.socialButtons!;
+
+  // PERFORMANCE: Stable callbacks for social sign-in (wrap async handlers)
+  const handleGooglePress = useCallback(() => {
+    void onGoogleSignIn?.();
+  }, [onGoogleSignIn]);
+
+  const handleApplePress = useCallback(() => {
+    void onAppleSignIn?.();
+  }, [onAppleSignIn]);
+
   return (
     <ScreenLayout
       scrollable
@@ -45,7 +93,13 @@ export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUr
       contentContainerStyle={{ justifyContent: "center" }}
       backgroundColor={tokens.colors.backgroundPrimary}
     >
+      {/* Optional Logo/Illustration */}
+      {renderLogo && (
+        <View style={styles.logoContainer}>{renderLogo()}</View>
+      )}
+
       <AuthHeader title={translations.title} subtitle={translations.subtitle} />
+
       <AtomicCard variant="elevated" padding="lg">
         <RegisterForm
           translations={translations.form}
@@ -55,9 +109,26 @@ export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUr
           onTermsPress={onTermsPress}
           onPrivacyPress={onPrivacyPress}
         />
+
+        {/* Social Login Buttons */}
+        {showSocialButtons && (
+          <SocialLoginButtons
+            translations={socialButtonsTranslations}
+            enabledProviders={enabledProviders}
+            onGooglePress={hasGoogle ? handleGooglePress : undefined}
+            onApplePress={hasApple ? handleApplePress : undefined}
+          />
+        )}
       </AtomicCard>
     </ScreenLayout>
   );
 });
 
 RegisterScreen.displayName = 'RegisterScreen';
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+});