@umituz/react-native-auth 3.1.11 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.1.11",
+  "version": "3.2.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",
@@ -43,7 +43,9 @@
     "@umituz/react-native-storage": "*",
     "@umituz/react-native-tanstack": "*",
     "@umituz/react-native-validation": "*",
+    "expo-auth-session": ">=5.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-web-browser": ">=12.0.0",
     "firebase": ">=11.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
@@ -59,8 +61,8 @@
     "@react-native-async-storage/async-storage": "^1.24.0",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
-    "@react-navigation/native": "^6.0.0",
-    "@react-navigation/stack": "^6.0.0",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@sentry/react-native": "^7.8.0",
     "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
@@ -69,15 +71,15 @@
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-firebase": "^1.13.27",
-    "@umituz/react-native-haptics": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-sentry": "latest",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
-    "@umituz/react-native-uuid": "latest",
-    "@umituz/react-native-validation": "latest",
+    "@umituz/react-native-haptics": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-sentry": "*",
+    "@umituz/react-native-storage": "*",
+    "@umituz/react-native-tanstack": "*",
+    "@umituz/react-native-uuid": "*",
+    "@umituz/react-native-validation": "*",
     "eslint": "^8.57.0",
     "expo-apple-authentication": "^6.0.0",
     "expo-application": "^7.0.8",
@@ -86,8 +88,10 @@
     "expo-device": "^8.0.10",
     "expo-file-system": "^19.0.21",
     "expo-haptics": "^15.0.8",
+    "expo-auth-session": "^5.0.0",
     "expo-linear-gradient": "^13.0.0",
     "expo-sharing": "^14.0.8",
+    "expo-web-browser": "^12.0.0",
     "firebase": "^11.0.0",
     "react": "~19.1.0",
     "react-native": "~0.81.5",

package/src/index.ts

@@ -135,6 +135,15 @@ export type { UseProfileUpdateReturn } from './presentation/hooks/useProfileUpda
 export { useProfileEdit } from './presentation/hooks/useProfileEdit';
 export type { UseProfileEditReturn, ProfileEditFormState } from './presentation/hooks/useProfileEdit';
 
+export { useSocialLogin } from './presentation/hooks/useSocialLogin';
+export type { UseSocialLoginConfig, UseSocialLoginResult } from './presentation/hooks/useSocialLogin';
+
+export { useGoogleAuth } from './presentation/hooks/useGoogleAuth';
+export type { UseGoogleAuthResult, GoogleAuthConfig as GoogleAuthHookConfig } from './presentation/hooks/useGoogleAuth';
+
+export { useAppleAuth } from './presentation/hooks/useAppleAuth';
+export type { UseAppleAuthResult } from './presentation/hooks/useAppleAuth';
+
 export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
 
 // Domain Utils - Guest Names
@@ -175,6 +184,11 @@ 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/AuthBottomSheetWrapper.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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}
+    />
+  );
+};

package/src/presentation/components/AuthDivider.tsx

@@ -5,11 +5,11 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 export const AuthDivider: React.FC = () => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
   return (
@@ -27,7 +27,6 @@ export const AuthDivider: React.FC = () => {
           textTransform: "uppercase",
           letterSpacing: 0.5,
         }}
-        responsive
       >
         {t("general.or")}
       </AtomicText>

package/src/presentation/components/AuthFormCard.tsx

@@ -5,14 +5,14 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface AuthFormCardProps {
   children: React.ReactNode;
 }
 
 export const AuthFormCard: React.FC<AuthFormCardProps> = ({ children }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   return (
     <View

package/src/presentation/components/AuthHeader.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 interface AuthHeaderProps {
@@ -14,7 +14,7 @@ interface AuthHeaderProps {
 }
 
 export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
   return (
@@ -22,7 +22,6 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
       <AtomicText
         type="headlineLarge"
         style={{ color: tokens.colors.onPrimary, textAlign: "center" }}
-        responsive
       >
         {title}
       </AtomicText>
@@ -34,7 +33,6 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
             textAlign: "center",
             marginTop: tokens.spacing.xs,
           }}
-          responsive
         >
           {subtitle || t("auth.subtitle")}
         </AtomicText>

package/src/presentation/components/AuthLink.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicButton, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface AuthLinkProps {
   text: string;
@@ -20,14 +20,13 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
   onPress,
   disabled = false,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   return (
     <View style={[styles.container, { marginTop: tokens.spacing.xs, paddingTop: tokens.spacing.xs }]}>
       <AtomicText
         type="bodyMedium"
         style={{ color: tokens.colors.textSecondary }}
-        responsive
       >
         {text}{" "}
       </AtomicText>

package/src/presentation/hooks/useAppleAuth.ts

@@ -0,0 +1,61 @@
+/**
+ * useAppleAuth Hook
+ * Handles Apple Sign-In using Firebase auth
+ *
+ * This is a convenience wrapper around useSocialAuth from Firebase package
+ * specifically for Apple authentication.
+ */
+
+import { useCallback } from "react";
+import { Platform } from "react-native";
+import {
+  useSocialAuth,
+  type SocialAuthResult,
+} from "@umituz/react-native-firebase";
+
+declare const __DEV__: boolean;
+
+export interface UseAppleAuthResult {
+  signInWithApple: () => Promise<SocialAuthResult>;
+  appleLoading: boolean;
+  appleAvailable: boolean;
+}
+
+/**
+ * Hook for Apple authentication
+ */
+export function useAppleAuth(): UseAppleAuthResult {
+  const { signInWithApple, appleLoading, appleAvailable } = useSocialAuth({
+    apple: { enabled: Platform.OS === "ios" },
+  });
+
+  const handleSignInWithApple = useCallback(async (): Promise<SocialAuthResult> => {
+    if (Platform.OS !== "ios") {
+      return { success: false, error: "Apple Sign-In is only available on iOS" };
+    }
+
+    if (!appleAvailable) {
+      return { success: false, error: "Apple Sign-In is not available" };
+    }
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAppleAuth] Apple sign-in requested");
+    }
+
+    const result = await signInWithApple();
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useAppleAuth] Apple sign-in result:", result);
+    }
+
+    return result;
+  }, [appleAvailable, signInWithApple]);
+
+  return {
+    signInWithApple: handleSignInWithApple,
+    appleLoading,
+    appleAvailable,
+  };
+}

package/src/presentation/hooks/useGoogleAuth.ts

@@ -0,0 +1,184 @@
+/**
+ * useGoogleAuth Hook
+ * Handles Google OAuth flow using expo-auth-session and Firebase auth
+ *
+ * This hook provides complete Google sign-in flow:
+ * 1. OAuth flow via expo-auth-session
+ * 2. Firebase authentication with the obtained token
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import {
+  useSocialAuth,
+  type SocialAuthConfig,
+  type SocialAuthResult,
+} from "@umituz/react-native-firebase";
+
+declare const __DEV__: boolean;
+
+// Type declarations for expo-auth-session
+interface GoogleAuthRequestConfig {
+  iosClientId: string;
+  webClientId: string;
+  androidClientId: string;
+}
+
+interface AuthSessionAuthentication {
+  idToken?: string;
+  accessToken?: string;
+}
+
+interface AuthSessionResult {
+  type: "success" | "cancel" | "dismiss" | "error" | "locked";
+  authentication?: AuthSessionAuthentication;
+}
+
+interface AuthRequest {
+  promptAsync: () => Promise<AuthSessionResult>;
+}
+
+type UseAuthRequestReturn = [
+  AuthRequest | null,
+  AuthSessionResult | null,
+  () => Promise<AuthSessionResult>,
+];
+
+// Dynamic imports to handle optional dependencies
+type GoogleModule = { useAuthRequest: (config: GoogleAuthRequestConfig) => UseAuthRequestReturn };
+type WebBrowserModule = { maybeCompleteAuthSession: () => void };
+
+let Google: GoogleModule | null = null;
+let WebBrowser: WebBrowserModule | null = null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+  Google = require("expo-auth-session/providers/google") as GoogleModule;
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+  WebBrowser = require("expo-web-browser") as WebBrowserModule;
+  if (WebBrowser) {
+    WebBrowser.maybeCompleteAuthSession();
+  }
+} catch {
+  // expo-auth-session not available
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[useGoogleAuth] expo-auth-session not available");
+  }
+}
+
+export interface GoogleAuthConfig {
+  iosClientId?: string;
+  webClientId?: string;
+  androidClientId?: string;
+}
+
+export interface UseGoogleAuthResult {
+  signInWithGoogle: () => Promise<SocialAuthResult>;
+  googleLoading: boolean;
+  googleConfigured: boolean;
+}
+
+const PLACEHOLDER_CLIENT_ID = "000000000000-placeholder.apps.googleusercontent.com";
+
+/**
+ * Hook for Google authentication with expo-auth-session
+ */
+export function useGoogleAuth(config?: GoogleAuthConfig): UseGoogleAuthResult {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const googleConfigured = !!(
+    config?.iosClientId ||
+    config?.webClientId ||
+    config?.androidClientId
+  );
+
+  const socialAuthConfig: SocialAuthConfig = {
+    google: config,
+    apple: { enabled: false },
+  };
+
+  const { signInWithGoogleToken, googleLoading: firebaseLoading } =
+    useSocialAuth(socialAuthConfig);
+
+  // Use Google auth request if available
+  const authRequest = Google?.useAuthRequest({
+    iosClientId: config?.iosClientId || PLACEHOLDER_CLIENT_ID,
+    webClientId: config?.webClientId || PLACEHOLDER_CLIENT_ID,
+    androidClientId: config?.androidClientId || PLACEHOLDER_CLIENT_ID,
+  });
+
+  const request = authRequest?.[0] ?? null;
+  const googleResponse = authRequest?.[1] ?? null;
+  const promptGoogleAsync = authRequest?.[2];
+
+  // Handle Google OAuth response
+  useEffect(() => {
+    if (googleResponse?.type === "success") {
+      const idToken = googleResponse.authentication?.idToken;
+      if (idToken) {
+        setIsLoading(true);
+        signInWithGoogleToken(idToken)
+          .catch((error: unknown) => {
+            if (__DEV__) {
+              // eslint-disable-next-line no-console
+              console.error("[useGoogleAuth] Firebase sign-in error:", error);
+            }
+          })
+          .finally(() => {
+            setIsLoading(false);
+          });
+      }
+    }
+  }, [googleResponse, signInWithGoogleToken]);
+
+  const signInWithGoogle = useCallback(async (): Promise<SocialAuthResult> => {
+    if (!Google || !promptGoogleAsync) {
+      return { success: false, error: "expo-auth-session is not available" };
+    }
+
+    if (!googleConfigured) {
+      return { success: false, error: "Google Sign-In is not configured" };
+    }
+
+    if (!request) {
+      return { success: false, error: "Google Sign-In not ready" };
+    }
+
+    setIsLoading(true);
+    try {
+      const result = await promptGoogleAsync();
+
+      if (result.type === "success" && result.authentication?.idToken) {
+        const firebaseResult = await signInWithGoogleToken(
+          result.authentication.idToken,
+        );
+
+        if (__DEV__) {
+          // eslint-disable-next-line no-console
+          console.log("[useGoogleAuth] Sign-in successful:", firebaseResult);
+        }
+
+        return firebaseResult;
+      }
+
+      if (result.type === "cancel") {
+        return { success: false, error: "Google Sign-In was cancelled" };
+      }
+
+      return { success: false, error: "Google Sign-In failed" };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Google sign-in failed",
+      };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [googleConfigured, request, promptGoogleAsync, signInWithGoogleToken]);
+
+  return {
+    signInWithGoogle,
+    googleLoading: isLoading || firebaseLoading,
+    googleConfigured,
+  };
+}

package/src/presentation/hooks/useSocialLogin.ts

@@ -0,0 +1,115 @@
+/**
+ * useSocialLogin Hook
+ * Provides unified social login functionality using Firebase package
+ *
+ * This hook wraps @umituz/react-native-firebase's useSocialAuth
+ * and provides a simple interface for social authentication.
+ *
+ * Usage:
+ * ```typescript
+ * const { signInWithGoogle, signInWithApple, googleLoading, appleLoading } = useSocialLogin({
+ *   google: { webClientId: '...', iosClientId: '...' },
+ *   apple: { enabled: true }
+ * });
+ * ```
+ */
+
+import { useCallback } from "react";
+import { Platform } from "react-native";
+import {
+  useSocialAuth,
+  type SocialAuthConfig,
+  type SocialAuthResult,
+} from "@umituz/react-native-firebase";
+
+declare const __DEV__: boolean;
+
+export interface UseSocialLoginConfig extends SocialAuthConfig {}
+
+export interface UseSocialLoginResult {
+  /** Sign in with Google (handles OAuth flow internally if configured) */
+  signInWithGoogle: () => Promise<SocialAuthResult>;
+  /** Sign in with Apple */
+  signInWithApple: () => Promise<SocialAuthResult>;
+  /** Whether Google sign-in is in progress */
+  googleLoading: boolean;
+  /** Whether Apple sign-in is in progress */
+  appleLoading: boolean;
+  /** Whether Google is configured */
+  googleConfigured: boolean;
+  /** Whether Apple is available */
+  appleAvailable: boolean;
+}
+
+/**
+ * Hook for social authentication
+ * Integrates with @umituz/react-native-firebase for Firebase auth
+ */
+export function useSocialLogin(config?: UseSocialLoginConfig): UseSocialLoginResult {
+  const {
+    signInWithApple: firebaseSignInWithApple,
+    googleLoading,
+    appleLoading,
+    googleConfigured,
+    appleAvailable,
+  } = useSocialAuth(config);
+
+  /**
+   * Sign in with Google
+   * Note: For full OAuth flow, use useGoogleAuth hook which handles
+   * expo-auth-session OAuth flow and Firebase authentication
+   */
+  const signInWithGoogle = useCallback((): Promise<SocialAuthResult> => {
+    if (!googleConfigured) {
+      return Promise.resolve({ success: false, error: "Google Sign-In is not configured" });
+    }
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useSocialLogin] Use useGoogleAuth hook for Google OAuth flow");
+    }
+
+    return Promise.resolve({
+      success: false,
+      error: "Use useGoogleAuth hook for Google OAuth flow",
+    });
+  }, [googleConfigured]);
+
+  /**
+   * Sign in with Apple (full flow handled by Firebase package)
+   */
+  const signInWithApple = useCallback(async (): Promise<SocialAuthResult> => {
+    if (Platform.OS !== "ios") {
+      return { success: false, error: "Apple Sign-In is only available on iOS" };
+    }
+
+    if (!appleAvailable) {
+      return { success: false, error: "Apple Sign-In is not available" };
+    }
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useSocialLogin] Apple sign-in requested");
+    }
+
+    const result = await firebaseSignInWithApple();
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[useSocialLogin] Apple sign-in result:", result);
+    }
+
+    return result;
+  }, [appleAvailable, firebaseSignInWithApple]);
+
+  return {
+    signInWithGoogle,
+    signInWithApple,
+    googleLoading,
+    appleLoading,
+    googleConfigured,
+    appleAvailable,
+  };
+}
+
+export { type SocialAuthConfig, type SocialAuthResult };