@umituz/react-native-auth 4.3.94 → 4.3.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "4.3.94",
+  "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/components/AuthBottomSheet.styles.ts

@@ -11,8 +11,8 @@ export const styles = StyleSheet.create({
         borderRadius: 2,
     },
     scrollContent: {
-        paddingHorizontal: 24,
-        paddingBottom: 80,
+        // paddingHorizontal ve paddingBottom artık component içinden responsive olarak verilecek
+        flexGrow: 1,
     },
     closeButton: {
         position: "absolute",
@@ -23,9 +23,9 @@ export const styles = StyleSheet.create({
     },
     header: {
         alignItems: "center",
-        marginBottom: 24,
-        marginTop: 8,
-        paddingTop: 16,
+        // marginBottom artık component içinden responsive olarak verilecek
+        // marginTop artık component içinden responsive olarak verilecek
+        // paddingTop artık component içinden responsive olarak verilecek
     },
     title: {
         marginBottom: 8,

package/src/presentation/components/AuthBottomSheet.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, ScrollView } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText, AtomicIcon, AtomicKeyboardAvoidingView } from "@umituz/react-native-design-system/atoms";
 import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
 import { useAuthBottomSheet, type SocialAuthConfiguration } from "../hooks/useAuthBottomSheet";
@@ -44,6 +45,7 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
   onAuthSuccess,
 }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   const {
     modalRef,
@@ -59,6 +61,23 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     handleAppleSignIn,
   } = useAuthBottomSheet({ socialConfig, onGoogleSignIn, onAppleSignIn, onAuthSuccess });
 
+  const scrollContentStyle = useMemo(() => [
+    styles.scrollContent,
+    {
+      paddingHorizontal: responsive.horizontalPadding,
+      paddingBottom: responsive.verticalPadding * 3,
+    },
+  ], [responsive.horizontalPadding, responsive.verticalPadding]);
+
+  const headerStyle = useMemo(() => [
+    styles.header,
+    {
+      marginBottom: responsive.verticalPadding,
+      marginTop: responsive.horizontalPadding,
+      paddingTop: responsive.horizontalPadding,
+    },
+  ], [responsive.verticalPadding, responsive.horizontalPadding]);
+
   return (
     <BottomSheetModal
       ref={modalRef}
@@ -80,11 +99,11 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
         </TouchableOpacity>
 
         <ScrollView
-          contentContainerStyle={styles.scrollContent}
+          contentContainerStyle={scrollContentStyle}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
-          <View style={styles.header}>
+          <View style={headerStyle}>
             <AtomicText type="headlineLarge" color="textPrimary" style={styles.title}>
               {mode === "login" ? translations.signIn : translations.createAccount}
             </AtomicText>

package/src/presentation/components/AuthHeader.tsx

@@ -7,6 +7,7 @@
 import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 
 interface AuthHeaderProps {
@@ -16,9 +17,10 @@ interface AuthHeaderProps {
 
 export const AuthHeader = memo<AuthHeaderProps>(({ title, subtitle }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   return (
-    <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: tokens.spacing.md }]}>
+    <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: responsive.horizontalPadding }]}>
       <AtomicText
         type="headlineLarge"
         color="textPrimary"

package/src/presentation/components/LoginForm.tsx

@@ -1,6 +1,7 @@
-import React, { useRef, memo } from "react";
+import React, { useRef, memo, useMemo } from "react";
 import { StyleSheet, TextInput } from "react-native";
 import { AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { useLoginForm } from "../hooks/useLoginForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
@@ -27,6 +28,7 @@ export const LoginForm = memo<LoginFormProps>(({
   onNavigateToRegister,
 }) => {
   const passwordRef = useRef<React.ElementRef<typeof TextInput>>(null);
+  const responsive = useResponsive();
   const {
     email,
     password,
@@ -39,6 +41,11 @@ export const LoginForm = memo<LoginFormProps>(({
     displayError,
   } = useLoginForm();
 
+  const signInButtonStyle = useMemo(() => [
+    styles.signInButton,
+    { marginBottom: responsive.verticalPadding },
+  ], [responsive.verticalPadding]);
+
   return (
     <>
       <FormEmailInput
@@ -71,7 +78,7 @@ export const LoginForm = memo<LoginFormProps>(({
         onPress={() => { void handleSignIn(); }}
         disabled={loading || !email.trim() || !password}
         fullWidth
-        style={styles.signInButton}
+        style={signInButtonStyle}
       >
         {translations.signIn}
       </AtomicButton>
@@ -87,9 +94,7 @@ export const LoginForm = memo<LoginFormProps>(({
 });
 
 const styles = StyleSheet.create({
-  signInButton: {
-    marginBottom: 16,
-  },
+  signInButton: {},
 });
 
 LoginForm.displayName = 'LoginForm';

package/src/presentation/components/SocialLoginButtons.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
@@ -27,6 +28,7 @@ interface SocialLoginButtonsProps {
 
 export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations, enabledProviders, onGooglePress, onApplePress, googleLoading = false, appleLoading = false }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
 
   // PERFORMANCE: Memoize provider checks to prevent recalculation on every render
   const { hasGoogle, hasApple } = useMemo(() => ({
@@ -34,12 +36,17 @@ export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations,
     hasApple: enabledProviders.includes("apple"),
   }), [enabledProviders]);
 
+  const containerStyle = useMemo(() => [
+    styles.container,
+    { marginTop: responsive.verticalPadding },
+  ], [responsive.verticalPadding]);
+
   if (!hasGoogle && !hasApple) {
     return null;
   }
 
   return (
-    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
+    <View style={containerStyle}>
       <View style={styles.dividerContainer}>
         <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
         <AtomicText type="bodySmall" color="textSecondary" style={styles.dividerText}>

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,53 +1,122 @@
 /**
  * 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();
 
   // PERFORMANCE: Stable callback reference
   const handleNavigateToRegister = useCallback(() => {
     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
       keyboardAvoiding
-      maxWidth={440}
+      maxWidth={responsive.maxContentWidth}
       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,21 +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 {
@@ -24,26 +30,76 @@ 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();
 
   // PERFORMANCE: Stable callback reference
   const handleNavigateToLogin = useCallback(() => {
     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
       keyboardAvoiding
-      maxWidth={440}
+      maxWidth={responsive.maxContentWidth}
       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}
@@ -53,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,
+  },
+});