@umituz/react-native-auth 2.5.3 → 2.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "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/domain/entities/UserProfile.ts

@@ -0,0 +1,19 @@
+/**
+ * User Profile Types
+ * Domain types for user profile management across all apps
+ */
+
+export interface UserProfile {
+    uid: string;
+    email: string | null;
+    displayName: string | null;
+    photoURL: string | null;
+    isAnonymous: boolean;
+    createdAt: Date | null;
+    lastLoginAt: Date | null;
+}
+
+export interface UpdateProfileParams {
+    displayName?: string;
+    photoURL?: string;
+}

package/src/index.ts

@@ -99,12 +99,26 @@ export type {
 export { useAuth } from './presentation/hooks/useAuth';
 export type { UseAuthResult } from './presentation/hooks/useAuth';
 
+export { useUserProfile } from './presentation/hooks/useUserProfile';
+export type { UserProfileData, UseUserProfileParams } from './presentation/hooks/useUserProfile';
+
+export { useAccountManagement } from './presentation/hooks/useAccountManagement';
+export type { UseAccountManagementReturn } from './presentation/hooks/useAccountManagement';
+
+export { useProfileUpdate } from './presentation/hooks/useProfileUpdate';
+export type { UseProfileUpdateReturn } from './presentation/hooks/useProfileUpdate';
+
+export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
+
 // =============================================================================
 // PRESENTATION LAYER - Screens & Navigation
 // =============================================================================
 
 export { LoginScreen } from './presentation/screens/LoginScreen';
 export { RegisterScreen } from './presentation/screens/RegisterScreen';
+export { AccountScreen } from './presentation/screens/AccountScreen';
+export type { AccountScreenConfig, AccountScreenProps } from './presentation/screens/AccountScreen';
+
 export { AuthNavigator } from './presentation/navigation/AuthNavigator';
 export type {
   AuthStackParamList,
@@ -128,6 +142,10 @@ 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 { ProfileSection } from './presentation/components/ProfileSection';
+export type { ProfileSectionConfig, ProfileSectionProps } from './presentation/components/ProfileSection';
+export { AccountActions } from './presentation/components/AccountActions';
+export type { AccountActionsConfig, AccountActionsProps } from './presentation/components/AccountActions';
 
 // =============================================================================
 // PRESENTATION LAYER - Stores

package/src/presentation/components/AccountActions.tsx

@@ -0,0 +1,138 @@
+/**
+ * Account Actions Component
+ * Provides logout and delete account functionality
+ * Only shown for authenticated (non-anonymous) users
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface AccountActionsConfig {
+    logoutText?: string;
+    deleteAccountText?: string;
+    logoutConfirmTitle?: string;
+    logoutConfirmMessage?: string;
+    deleteConfirmTitle?: string;
+    deleteConfirmMessage?: string;
+    onLogout: () => Promise<void>;
+    onDeleteAccount: () => Promise<void>;
+}
+
+export interface AccountActionsProps {
+    config: AccountActionsConfig;
+}
+
+export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
+    const tokens = useAppDesignTokens();
+    const {
+        logoutText = "Log Out",
+        deleteAccountText = "Delete Account",
+        logoutConfirmTitle = "Log Out?",
+        logoutConfirmMessage = "Are you sure you want to log out?",
+        deleteConfirmTitle = "Delete Account?",
+        deleteConfirmMessage =
+        "This will permanently delete your account and all data. This action cannot be undone.",
+        onLogout,
+        onDeleteAccount,
+    } = config;
+
+    const handleLogout = () => {
+        Alert.alert(logoutConfirmTitle, logoutConfirmMessage, [
+            { text: "Cancel", style: "cancel" },
+            {
+                text: logoutText,
+                style: "destructive",
+                onPress: async () => {
+                    try {
+                        await onLogout();
+                    } catch (error) {
+                        console.error("Logout failed:", error);
+                    }
+                },
+            },
+        ]);
+    };
+
+    const handleDeleteAccount = () => {
+        Alert.alert(deleteConfirmTitle, deleteConfirmMessage, [
+            { text: "Cancel", style: "cancel" },
+            {
+                text: deleteAccountText,
+                style: "destructive",
+                onPress: async () => {
+                    try {
+                        await onDeleteAccount();
+                    } catch (error) {
+                        console.error("Delete account failed:", error);
+                    }
+                },
+            },
+        ]);
+    };
+
+    return (
+        <View style={styles.container}>
+            {/* Logout */}
+            <TouchableOpacity
+                style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+                onPress={handleLogout}
+                activeOpacity={0.7}
+            >
+                <Text style={[styles.actionIcon, { color: tokens.colors.error }]}>
+                    ⎋
+                </Text>
+                <Text style={[styles.actionText, { color: tokens.colors.error }]}>
+                    {logoutText}
+                </Text>
+                <Text style={[styles.chevron, { color: tokens.colors.textTertiary }]}>
+                    ›
+                </Text>
+            </TouchableOpacity>
+
+            {/* Delete Account */}
+            <TouchableOpacity
+                style={[styles.actionButton, { borderColor: tokens.colors.border }]}
+                onPress={handleDeleteAccount}
+                activeOpacity={0.7}
+            >
+                <Text style={[styles.actionIcon, { color: tokens.colors.error }]}>
+                    🗑
+                </Text>
+                <Text style={[styles.actionText, { color: tokens.colors.error }]}>
+                    {deleteAccountText}
+                </Text>
+                <Text style={[styles.chevron, { color: tokens.colors.textTertiary }]}>
+                    ›
+                </Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: 12,
+    },
+    actionButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+        borderRadius: 12,
+        borderWidth: 1,
+        gap: 12,
+    },
+    actionIcon: {
+        fontSize: 20,
+    },
+    actionText: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: "500",
+    },
+    chevron: {
+        fontSize: 24,
+        fontWeight: "400",
+    },
+});

package/src/presentation/components/ProfileSection.tsx

@@ -0,0 +1,188 @@
+/**
+ * Profile Section Component
+ * Generic user profile section for settings screens
+ * Shows user info, sign in CTA for anonymous, or account navigation for signed in users
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface ProfileSectionConfig {
+    displayName: string;
+    userId?: string;
+    isAnonymous: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+}
+
+export interface ProfileSectionProps {
+    profile: ProfileSectionConfig;
+    onPress?: () => void;
+    onSignIn?: () => void;
+    signInText?: string;
+    anonymousText?: string;
+}
+
+export const ProfileSection: React.FC<ProfileSectionProps> = ({
+    profile,
+    onPress,
+    onSignIn,
+    signInText = "Sign In",
+    anonymousText = "Anonymous User",
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const handlePress = () => {
+        if (profile.isAnonymous && onSignIn) {
+            onSignIn();
+        } else if (onPress) {
+            onPress();
+        }
+    };
+
+    const getInitials = (name: string): string => {
+        return name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+
+    return (
+        <TouchableOpacity
+            style={[styles.container, { backgroundColor: tokens.colors.surface }]}
+            onPress={handlePress}
+            activeOpacity={0.7}
+            disabled={!onPress && !onSignIn}
+        >
+            <View style={styles.content}>
+                {/* Avatar */}
+                <View
+                    style={[
+                        styles.avatar,
+                        { backgroundColor: profile.isAnonymous ? tokens.colors.warning : tokens.colors.primary },
+                    ]}
+                >
+                    {profile.avatarUrl ? (
+                        <Text style={styles.avatarText}>
+                            {getInitials(profile.displayName)}
+                        </Text>
+                    ) : (
+                        <Text
+                            style={[styles.avatarText, { color: tokens.colors.onPrimary }]}
+                        >
+                            {getInitials(profile.displayName)}
+                        </Text>
+                    )}
+                </View>
+
+                {/* User Info */}
+                <View style={styles.info}>
+                    <Text
+                        style={[styles.displayName, { color: tokens.colors.textPrimary }]}
+                        numberOfLines={1}
+                    >
+                        {profile.displayName}
+                    </Text>
+                    {profile.userId && (
+                        <Text
+                            style={[styles.userId, { color: tokens.colors.textSecondary }]}
+                            numberOfLines={1}
+                        >
+                            {profile.userId}
+                        </Text>
+                    )}
+                </View>
+
+                {/* Action Icon */}
+                {(onPress || onSignIn) && (
+                    <Text style={[styles.chevron, { color: tokens.colors.textTertiary }]}>
+                        ›
+                    </Text>)}
+            </View>
+
+            {/* Sign In CTA for Anonymous Users */}
+            {profile.isAnonymous && onSignIn && (
+                <View
+                    style={[
+                        styles.ctaContainer,
+                        { borderTopColor: tokens.colors.border },
+                    ]}
+                >
+                    <TouchableOpacity
+                        style={[
+                            styles.ctaButton,
+                            { backgroundColor: tokens.colors.primary },
+                        ]}
+                        onPress={onSignIn}
+                        activeOpacity={0.8}
+                    >
+                        <Text
+                            style={[
+                                styles.ctaText,
+                                { color: tokens.colors.onPrimary },
+                            ]}
+                        >
+                            {signInText}
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 16,
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    avatar: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 12,
+    },
+    avatarText: {
+        fontSize: 20,
+        fontWeight: "600",
+    },
+    info: {
+        flex: 1,
+    },
+    displayName: {
+        fontSize: 18,
+        fontWeight: "600",
+        marginBottom: 2,
+    },
+    userId: {
+        fontSize: 13,
+    },
+    chevron: {
+        fontSize: 24,
+        fontWeight: "400",
+    },
+    ctaContainer: {
+        marginTop: 12,
+        paddingTop: 12,
+        borderTopWidth: 1,
+    },
+    ctaButton: {
+        paddingVertical: 12,
+        borderRadius: 8,
+        alignItems: "center",
+    },
+    ctaText: {
+        fontSize: 15,
+        fontWeight: "600",
+    },
+});

package/src/presentation/hooks/useAccountManagement.ts

@@ -0,0 +1,41 @@
+/**
+ * useAccountManagement Hook
+ * Provides account management functionality (logout, delete)
+ */
+
+import { useCallback } from "react";
+import { useAuth } from "./useAuth";
+
+export interface UseAccountManagementReturn {
+    logout: () => Promise<void>;
+    deleteAccount: () => Promise<void>;
+    isLoading: boolean;
+}
+
+export const useAccountManagement = (): UseAccountManagementReturn => {
+    const { user, loading, signOut } = useAuth();
+
+    const logout = useCallback(async () => {
+        await signOut();
+    }, [signOut]);
+
+    const deleteAccount = useCallback(async () => {
+        if (!user) {
+            throw new Error("No user logged in");
+        }
+
+        if (user.isAnonymous) {
+            throw new Error("Cannot delete anonymous account");
+        }
+
+        // Note: Add user deletion logic via Firebase Admin SDK on backend
+        // Frontend should call backend API to delete user account
+        throw new Error("Account deletion requires backend implementation");
+    }, [user]);
+
+    return {
+        logout,
+        deleteAccount,
+        isLoading: loading,
+    };
+};

package/src/presentation/hooks/useProfileUpdate.ts

@@ -0,0 +1,44 @@
+/**
+ * useProfileUpdate Hook
+ * Hook for profile updates - implementation should be provided by app
+ * Apps should use Firebase SDK directly or backend API
+ */
+
+import { useState, useCallback } from "react";
+import { useAuth } from "./useAuth";
+import type { UpdateProfileParams } from "../../domain/entities/UserProfile";
+
+export interface UseProfileUpdateReturn {
+    updateProfile: (params: UpdateProfileParams) => Promise<void>;
+    isUpdating: boolean;
+    error: string | null;
+}
+
+export const useProfileUpdate = (): UseProfileUpdateReturn => {
+    const { user } = useAuth();
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const updateProfile = useCallback(
+        async (params: UpdateProfileParams) => {
+            if (!user) {
+                throw new Error("No user logged in");
+            }
+
+            if (user.isAnonymous) {
+                throw new Error("Anonymous users cannot update profile");
+            }
+
+            // Note: App should implement this via Firebase SDK
+            // Example: auth().currentUser?.updateProfile({ displayName, photoURL })
+            throw new Error("Profile update should be implemented by app");
+        },
+        [user],
+    );
+
+    return {
+        updateProfile,
+        isUpdating,
+        error,
+    };
+};

package/src/presentation/hooks/useUserProfile.ts

@@ -0,0 +1,56 @@
+/**
+ * useUserProfile Hook
+ * Generic hook for user profile configuration
+ * Returns profile data for display in settings or profile screens
+ */
+
+import { useMemo } from "react";
+import { useAuth } from "./useAuth";
+
+export interface UserProfileData {
+    displayName: string;
+    userId?: string;
+    isAnonymous: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+}
+
+export interface UseUserProfileParams {
+    anonymousDisplayName?: string;
+    guestDisplayName?: string;
+    accountRoute?: string;
+}
+
+export const useUserProfile = (
+    params?: UseUserProfileParams,
+): UserProfileData | undefined => {
+    const { user } = useAuth();
+
+    const anonymousName = params?.anonymousDisplayName || "Anonymous User";
+    const guestName = params?.guestDisplayName || "Guest User";
+    const accountRoute = params?.accountRoute || "Account";
+
+    return useMemo(() => {
+        if (!user) {
+            return undefined;
+        }
+
+        const isAnonymous = user.isAnonymous || false;
+
+        if (isAnonymous) {
+            return {
+                displayName: anonymousName,
+                userId: user.uid,
+                isAnonymous: true,
+            };
+        }
+
+        return {
+            accountSettingsRoute: accountRoute,
+            displayName: user.displayName || user.email || guestName,
+            userId: user.uid,
+            isAnonymous: false,
+            avatarUrl: user.photoURL || undefined,
+        };
+    }, [user, anonymousName, guestName, accountRoute]);
+};

package/src/presentation/screens/AccountScreen.tsx

@@ -0,0 +1,47 @@
+/**
+ * Account Screen
+ * Pure UI component for account management
+ * Business logic provided via props from app layer
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { ProfileSection, type ProfileSectionConfig } from "../components/ProfileSection";
+import { AccountActions, type AccountActionsConfig } from "../components/AccountActions";
+
+export interface AccountScreenConfig {
+    profile: ProfileSectionConfig;
+    accountActions: AccountActionsConfig;
+}
+
+export interface AccountScreenProps {
+    config: AccountScreenConfig;
+}
+
+export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <ScrollView
+            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+            contentContainerStyle={styles.content}
+        >
+            <ProfileSection profile={config.profile} />
+            <View style={styles.divider} />
+            <AccountActions config={config.accountActions} />
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        padding: 16,
+    },
+    divider: {
+        height: 24,
+    },
+});