@umituz/react-native-auth 2.5.10 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.10",
+  "version": "2.6.1",
   "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",
@@ -28,34 +28,36 @@
     "url": "git+https://github.com/umituz/react-native-auth.git"
   },
   "peerDependencies": {
-    "firebase": ">=11.0.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "@umituz/react-native-firebase-auth": "latest",
-    "@react-navigation/stack": ">=6.0.0",
+    "@gorhom/bottom-sheet": ">=4.0.0",
     "@react-navigation/native": ">=6.0.0",
+    "@react-navigation/stack": ">=6.0.0",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-firebase-auth": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-validation": "latest",
     "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-validation": "latest",
     "expo-linear-gradient": ">=13.0.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "zustand": ">=4.0.0",
-    "@gorhom/bottom-sheet": ">=4.0.0",
+    "firebase": ">=11.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=3.0.0",
-    "react-native-gesture-handler": ">=2.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=13.0.0",
+    "zustand": ">=4.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.1.0",
+    "@gorhom/bottom-sheet": "^5.0.0",
     "@types/node": "^20.0.0",
-    "typescript": "~5.9.2",
-    "react-native": "~0.76.0",
+    "@types/react": "~19.1.0",
     "firebase": "^11.0.0",
-    "zustand": "^4.0.0",
-    "@gorhom/bottom-sheet": "^5.0.0",
+    "react-native": "~0.76.0",
+    "react-native-gesture-handler": "^2.0.0",
     "react-native-reanimated": "^3.0.0",
-    "react-native-gesture-handler": "^2.0.0"
+    "react-native-svg": "^15.15.1",
+    "typescript": "~5.9.2",
+    "zustand": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/application/ports/IAuthProvider.ts

@@ -4,6 +4,7 @@
  */
 
 import type { AuthUser } from "../../domain/entities/AuthUser";
+import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
 export interface AuthCredentials {
   email: string;
@@ -14,6 +15,14 @@ export interface SignUpCredentials extends AuthCredentials {
   displayName?: string;
 }
 
+/**
+ * Result from social sign-in operations
+ */
+export interface SocialSignInResult {
+  user: AuthUser;
+  isNewUser: boolean;
+}
+
 export interface IAuthProvider {
   /**
    * Initialize the auth provider
@@ -35,6 +44,23 @@ export interface IAuthProvider {
    */
   signUp(credentials: SignUpCredentials): Promise<AuthUser>;
 
+  /**
+   * Sign in with Google
+   * @returns User and whether this is a new user
+   */
+  signInWithGoogle?(): Promise<SocialSignInResult>;
+
+  /**
+   * Sign in with Apple
+   * @returns User and whether this is a new user
+   */
+  signInWithApple?(): Promise<SocialSignInResult>;
+
+  /**
+   * Check if a social provider is supported
+   */
+  isSocialProviderSupported?(provider: SocialAuthProvider): boolean;
+
   /**
    * Sign out current user
    */

package/src/domain/value-objects/AuthConfig.ts

@@ -11,8 +11,39 @@ export interface PasswordConfig {
   requireSpecialChar: boolean;
 }
 
+/**
+ * Social authentication provider configuration
+ */
+export interface SocialProviderConfig {
+  enabled: boolean;
+}
+
+export interface GoogleAuthConfig extends SocialProviderConfig {
+  webClientId?: string;
+  iosClientId?: string;
+  androidClientId?: string;
+}
+
+export interface AppleAuthConfig extends SocialProviderConfig {
+  // Apple Sign In doesn't require additional config for basic usage
+}
+
+/**
+ * Social authentication configuration
+ */
+export interface SocialAuthConfig {
+  google?: GoogleAuthConfig;
+  apple?: AppleAuthConfig;
+}
+
+/**
+ * Supported social auth providers
+ */
+export type SocialAuthProvider = "google" | "apple";
+
 export interface AuthConfig {
   password: PasswordConfig;
+  social?: SocialAuthConfig;
 }
 
 export const DEFAULT_PASSWORD_CONFIG: PasswordConfig = {
@@ -23,7 +54,13 @@ export const DEFAULT_PASSWORD_CONFIG: PasswordConfig = {
   requireSpecialChar: false,
 };
 
+export const DEFAULT_SOCIAL_CONFIG: SocialAuthConfig = {
+  google: { enabled: false },
+  apple: { enabled: false },
+};
+
 export const DEFAULT_AUTH_CONFIG: AuthConfig = {
   password: DEFAULT_PASSWORD_CONFIG,
+  social: DEFAULT_SOCIAL_CONFIG,
 };
 

package/src/index.ts

@@ -43,8 +43,20 @@ export {
 // DOMAIN LAYER - Value Objects
 // =============================================================================
 
-export type { AuthConfig, PasswordConfig } from './domain/value-objects/AuthConfig';
-export { DEFAULT_AUTH_CONFIG, DEFAULT_PASSWORD_CONFIG } from './domain/value-objects/AuthConfig';
+export type {
+  AuthConfig,
+  PasswordConfig,
+  SocialAuthConfig,
+  SocialProviderConfig,
+  GoogleAuthConfig,
+  AppleAuthConfig,
+  SocialAuthProvider,
+} from './domain/value-objects/AuthConfig';
+export {
+  DEFAULT_AUTH_CONFIG,
+  DEFAULT_PASSWORD_CONFIG,
+  DEFAULT_SOCIAL_CONFIG,
+} from './domain/value-objects/AuthConfig';
 
 // =============================================================================
 // APPLICATION LAYER - Ports
@@ -55,6 +67,7 @@ export type {
   IAuthProvider,
   AuthCredentials,
   SignUpCredentials,
+  SocialSignInResult,
 } from './application/ports/IAuthProvider';
 
 // =============================================================================
@@ -151,6 +164,8 @@ 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 { SocialLoginButtons } from './presentation/components/SocialLoginButtons';
+export type { SocialLoginButtonsProps } from './presentation/components/SocialLoginButtons';
 export { ProfileSection } from './presentation/components/ProfileSection';
 export type { ProfileSectionConfig, ProfileSectionProps } from './presentation/components/ProfileSection';
 export { AccountActions } from './presentation/components/AccountActions';

package/src/presentation/components/AuthBottomSheet.tsx

@@ -3,7 +3,7 @@
  * Bottom sheet modal for authentication (Login/Register)
  */
 
-import React, { useEffect, useCallback, useRef } from "react";
+import React, { useEffect, useCallback, useRef, useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import {
   BottomSheetModal,
@@ -17,12 +17,20 @@ import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
 import { LoginForm } from "./LoginForm";
 import { RegisterForm } from "./RegisterForm";
+import { SocialLoginButtons } from "./SocialLoginButtons";
+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 */
+  onGoogleSignIn?: () => Promise<void>;
+  /** Called when Apple sign-in is requested */
+  onAppleSignIn?: () => Promise<void>;
 }
 
 export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
@@ -30,11 +38,17 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
   privacyUrl,
   onTermsPress,
   onPrivacyPress,
+  socialProviders = [],
+  onGoogleSignIn,
+  onAppleSignIn,
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const modalRef = useRef<BottomSheetModal>(null);
 
+  const [googleLoading, setGoogleLoading] = useState(false);
+  const [appleLoading, setAppleLoading] = useState(false);
+
   const { isVisible, mode, hideAuthModal, setMode, executePendingCallback, clearPendingCallback } =
     useAuthModalStore();
   const { isAuthenticated, isGuest } = useAuth();
@@ -72,6 +86,26 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
     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 renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} pressBehavior="close" />
@@ -130,6 +164,16 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
               onPrivacyPress={onPrivacyPress}
             />
           )}
+
+          {socialProviders.length > 0 && (
+            <SocialLoginButtons
+              enabledProviders={socialProviders}
+              onGooglePress={handleGoogleSignIn}
+              onApplePress={handleAppleSignIn}
+              googleLoading={googleLoading}
+              appleLoading={appleLoading}
+            />
+          )}
         </View>
       </BottomSheetScrollView>
     </BottomSheetModal>

package/src/presentation/components/SocialLoginButtons.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  ActivityIndicator,
+} from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
+import { AppleIconSvg, GoogleIconSvg } from "./icons";
+
+export interface SocialLoginButtonsProps {
+  /** Enabled providers to display */
+  enabledProviders: SocialAuthProvider[];
+  /** Called when Google sign-in is pressed */
+  onGooglePress?: () => void;
+  /** Called when Apple sign-in is pressed */
+  onApplePress?: () => void;
+  /** Loading state for Google button */
+  googleLoading?: boolean;
+  /** Loading state for Apple button */
+  appleLoading?: boolean;
+  /** Disable all buttons */
+  disabled?: boolean;
+}
+
+export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
+  enabledProviders,
+  onGooglePress,
+  onApplePress,
+  googleLoading = false,
+  appleLoading = false,
+  disabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  const showGoogle = enabledProviders.includes("google");
+  const showApple = enabledProviders.includes("apple") && Platform.OS === "ios";
+
+  if (!showGoogle && !showApple) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.dividerContainer}>
+        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
+        <Text style={[styles.dividerText, { color: tokens.colors.textSecondary }]}>
+          {t("auth.orContinueWith")}
+        </Text>
+        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
+      </View>
+
+      <View style={styles.buttonsContainer}>
+        {showGoogle && (
+          <TouchableOpacity
+            style={[
+              styles.socialButton,
+              { borderColor: tokens.colors.border },
+              disabled && styles.disabledButton,
+            ]}
+            onPress={onGooglePress}
+            disabled={disabled || googleLoading}
+            activeOpacity={0.7}
+          >
+            {googleLoading ? (
+              <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
+            ) : (
+              <>
+                <GoogleIconSvg size={20} />
+                <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
+                  Google
+                </Text>
+              </>
+            )}
+          </TouchableOpacity>
+        )}
+
+        {showApple && (
+          <TouchableOpacity
+            style={[
+              styles.socialButton,
+              { borderColor: tokens.colors.border },
+              disabled && styles.disabledButton,
+            ]}
+            onPress={onApplePress}
+            disabled={disabled || appleLoading}
+            activeOpacity={0.7}
+          >
+            {appleLoading ? (
+              <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
+            ) : (
+              <>
+                <AppleIconSvg size={20} color={tokens.colors.textPrimary} />
+                <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
+                  Apple
+                </Text>
+              </>
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+  },
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  divider: {
+    flex: 1,
+    height: 1,
+  },
+  dividerText: {
+    marginHorizontal: 16,
+    fontSize: 14,
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  socialButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
+

package/src/presentation/components/icons/AppleIconSvg.tsx

@@ -0,0 +1,24 @@
+/**
+ * Apple Icon SVG
+ * Dark mode compatible Apple logo
+ */
+
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export interface AppleIconSvgProps {
+    size?: number;
+    color: string;
+}
+
+export const AppleIconSvg: React.FC<AppleIconSvgProps> = ({
+    size = 20,
+    color,
+}) => (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.02-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+            fill={color}
+        />
+    </Svg>
+);

package/src/presentation/components/icons/GoogleIconSvg.tsx

@@ -0,0 +1,32 @@
+/**
+ * Google Icon SVG
+ * Standard Google logo with color
+ */
+
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export interface GoogleIconSvgProps {
+    size?: number;
+}
+
+export const GoogleIconSvg: React.FC<GoogleIconSvgProps> = ({ size = 20 }) => (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+        <Path
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            fill="#4285F4"
+        />
+        <Path
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            fill="#34A853"
+        />
+        <Path
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            fill="#FBBC05"
+        />
+        <Path
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            fill="#EA4335"
+        />
+    </Svg>
+);

package/src/presentation/components/icons/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Social Login Icons
+ */
+
+export { AppleIconSvg } from "./AppleIconSvg";
+export { GoogleIconSvg } from "./GoogleIconSvg";