@umituz/react-native-auth 2.5.9 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.9",
+  "version": "2.6.0",
   "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/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/utils/guestNameGenerator.ts

@@ -0,0 +1,79 @@
+/**
+ * Anonymous User Name Generator
+ * Generates friendly, random names for anonymous users
+ * Fully generic - no app-specific content
+ */
+
+const DEFAULT_NAMES = [
+    'Alex',
+    'Sam',
+    'Jordan',
+    'Taylor',
+    'Morgan',
+    'Casey',
+    'Riley',
+    'Avery',
+    'Quinn',
+    'Blake',
+    'Charlie',
+    'Dakota',
+    'Eden',
+    'Finley',
+    'Harper',
+    'Sage',
+    'River',
+    'Skylar',
+    'Rowan',
+    'Phoenix',
+];
+
+export interface GuestNameConfig {
+    names?: string[];
+    prefixes?: string[];
+    usePrefixes?: boolean;
+}
+
+/**
+ * Generate a random guest name
+ * Uses userId to ensure consistency per user
+ */
+export function generateGuestName(
+    userId?: string,
+    config?: GuestNameConfig,
+): string {
+    const names = config?.names || DEFAULT_NAMES;
+    const prefixes = config?.prefixes || [];
+    const usePrefixes = config?.usePrefixes ?? false;
+
+    if (!userId) {
+        const randomIndex = Math.floor(Math.random() * names.length);
+        return names[randomIndex];
+    }
+
+    // Use userId hash for consistent name per user
+    const hash = userId.split('').reduce((acc, char) => {
+        return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
+    }, 0);
+
+    const nameIndex = Math.abs(hash) % names.length;
+    const name = names[nameIndex];
+
+    if (usePrefixes && prefixes.length > 0) {
+        const prefixIndex = Math.abs(hash >> 8) % prefixes.length;
+        return `${prefixes[prefixIndex]} ${name}`;
+    }
+
+    return name;
+}
+
+/**
+ * Get guest display name with fallback
+ */
+export function getGuestDisplayName(
+    userId?: string,
+    fallback = 'Guest',
+    config?: GuestNameConfig,
+): string {
+    if (!userId) return fallback;
+    return generateGuestName(userId, config);
+}

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';
 
 // =============================================================================
@@ -113,6 +126,10 @@ export type { UseProfileEditReturn, ProfileEditFormState } from './presentation/
 
 export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
 
+// Domain Utils - Guest Names
+export { generateGuestName, getGuestDisplayName } from './domain/utils/guestNameGenerator';
+export type { GuestNameConfig } from './domain/utils/guestNameGenerator';
+
 // =============================================================================
 // PRESENTATION LAYER - Screens & Navigation
 // =============================================================================
@@ -147,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,184 @@
+/**
+ * SocialLoginButtons Component
+ * Renders social sign-in buttons (Google, Apple)
+ * Configurable via props - enabled providers shown dynamically
+ */
+
+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";
+
+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} />
+            ) : (
+              <>
+                <GoogleIcon />
+                <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} />
+            ) : (
+              <>
+                <AppleIcon color={tokens.colors.textPrimary} />
+                <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
+                  Apple
+                </Text>
+              </>
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * Google Icon SVG as React Native component
+ */
+const GoogleIcon: React.FC = () => (
+  <View style={styles.iconContainer}>
+    <Text style={styles.googleIcon}>G</Text>
+  </View>
+);
+
+/**
+ * Apple Icon as simple text (uses SF Symbol on iOS)
+ */
+const AppleIcon: React.FC<{ color: string }> = ({ color }) => (
+  <Text style={[styles.appleIcon, { color }]}></Text>
+);
+
+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",
+  },
+  iconContainer: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  googleIcon: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#4285F4",
+  },
+  appleIcon: {
+    fontSize: 20,
+  },
+});

package/src/presentation/hooks/useUserProfile.ts

@@ -6,6 +6,7 @@
 
 import { useMemo } from "react";
 import { useAuth } from "./useAuth";
+import { generateGuestName, type GuestNameConfig } from "../../domain/utils/guestNameGenerator";
 
 export interface UserProfileData {
     displayName: string;
@@ -16,9 +17,9 @@ export interface UserProfileData {
 }
 
 export interface UseUserProfileParams {
-    anonymousDisplayName?: string;
     guestDisplayName?: string;
     accountRoute?: string;
+    guestNameConfig?: GuestNameConfig;
 }
 
 export const useUserProfile = (
@@ -26,9 +27,9 @@ export const useUserProfile = (
 ): UserProfileData | undefined => {
     const { user } = useAuth();
 
-    const anonymousName = params?.anonymousDisplayName || "Anonymous User";
-    const guestName = params?.guestDisplayName || "Guest User";
+    const guestName = params?.guestDisplayName || "Guest";
     const accountRoute = params?.accountRoute || "Account";
+    const nameConfig = params?.guestNameConfig;
 
     return useMemo(() => {
         if (!user) {
@@ -39,7 +40,7 @@ export const useUserProfile = (
 
         if (isAnonymous) {
             return {
-                displayName: anonymousName,
+                displayName: generateGuestName(user.uid, nameConfig),
                 userId: user.uid,
                 isAnonymous: true,
             };
@@ -52,5 +53,5 @@ export const useUserProfile = (
             isAnonymous: false,
             avatarUrl: user.photoURL || undefined,
         };
-    }, [user, anonymousName, guestName, accountRoute]);
+    }, [user, guestName, accountRoute, nameConfig]);
 };