@umituz/react-native-auth 2.5.4 → 2.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "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

@@ -102,12 +102,28 @@ 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 { useProfileEdit } from './presentation/hooks/useProfileEdit';
+export type { UseProfileEditReturn, ProfileEditFormState } from './presentation/hooks/useProfileEdit';
+
+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 { EditProfileScreen } from './presentation/screens/EditProfileScreen';
+export type { EditProfileConfig, EditProfileScreenProps } from './presentation/screens/EditProfileScreen';
+
 export { AuthNavigator } from './presentation/navigation/AuthNavigator';
 export type {
   AuthStackParamList,
@@ -133,6 +149,8 @@ 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/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/useProfileEdit.ts

@@ -0,0 +1,84 @@
+/**
+ * useProfileEdit Hook
+ * Simple profile editing with form state management
+ * Apps provide image picker and backend update logic
+ */
+
+import { useState, useCallback } from "react";
+
+export interface ProfileEditFormState {
+    displayName: string;
+    email: string;
+    photoURL: string | null;
+    isModified: boolean;
+}
+
+export interface UseProfileEditReturn {
+    formState: ProfileEditFormState;
+    setDisplayName: (value: string) => void;
+    setEmail: (value: string) => void;
+    setPhotoURL: (value: string | null) => void;
+    resetForm: (initial: Partial<ProfileEditFormState>) => void;
+    validateForm: () => { isValid: boolean; errors: string[] };
+}
+
+export const useProfileEdit = (
+    initialState: Partial<ProfileEditFormState> = {},
+): UseProfileEditReturn => {
+    const [formState, setFormState] = useState<ProfileEditFormState>({
+        displayName: initialState.displayName || "",
+        email: initialState.email || "",
+        photoURL: initialState.photoURL || null,
+        isModified: false,
+    });
+
+    const setDisplayName = useCallback((value: string) => {
+        setFormState((prev) => ({ ...prev, displayName: value, isModified: true }));
+    }, []);
+
+    const setEmail = useCallback((value: string) => {
+        setFormState((prev) => ({ ...prev, email: value, isModified: true }));
+    }, []);
+
+    const setPhotoURL = useCallback((value: string | null) => {
+        setFormState((prev) => ({ ...prev, photoURL: value, isModified: true }));
+    }, []);
+
+    const resetForm = useCallback((initial: Partial<ProfileEditFormState>) => {
+        setFormState({
+            displayName: initial.displayName || "",
+            email: initial.email || "",
+            photoURL: initial.photoURL || null,
+            isModified: false,
+        });
+    }, []);
+
+    const validateForm = useCallback((): {
+        isValid: boolean;
+        errors: string[];
+    } => {
+        const errors: string[] = [];
+
+        if (!formState.displayName.trim()) {
+            errors.push("Display name is required");
+        }
+
+        if (formState.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.email)) {
+            errors.push("Invalid email format");
+        }
+
+        return {
+            isValid: errors.length === 0,
+            errors,
+        };
+    }, [formState]);
+
+    return {
+        formState,
+        setDisplayName,
+        setEmail,
+        setPhotoURL,
+        resetForm,
+        validateForm,
+    };
+};

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/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,
+    },
+});

package/src/presentation/screens/EditProfileScreen.tsx

@@ -0,0 +1,232 @@
+/**
+ * Edit Profile Screen
+ * Pure UI for profile editing
+ * Business logic provided via props
+ */
+
+import React from "react";
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    ScrollView,
+    StyleSheet,
+    ActivityIndicator,
+} from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface EditProfileConfig {
+    displayName: string;
+    email: string;
+    photoURL: string | null;
+    isLoading?: boolean;
+    isSaving?: boolean;
+    onChangeDisplayName: (value: string) => void;
+    onChangeEmail: (value: string) => void;
+    onChangePhoto?: () => void;
+    onSave: () => void;
+    onCancel?: () => void;
+    labels: {
+        title: string;
+        displayNameLabel: string;
+        displayNamePlaceholder: string;
+        emailLabel: string;
+        emailPlaceholder: string;
+        photoLabel: string;
+        changePhotoButton: string;
+        saveButton: string;
+        cancelButton: string;
+    };
+}
+
+export interface EditProfileScreenProps {
+    config: EditProfileConfig;
+}
+
+export const EditProfileScreen: React.FC<EditProfileScreenProps> = ({
+    config,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    if (config.isLoading) {
+        return (
+            <View style={[styles.loading, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+                <ActivityIndicator size="large" color={tokens.colors.primary} />
+            </View>
+        );
+    }
+
+    return (
+        <ScrollView
+            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+            contentContainerStyle={styles.content}
+        >
+            <Text style={[styles.title, { color: tokens.colors.text }]}>
+                {config.labels.title}
+            </Text>
+
+            {/* Display Name */}
+            <View style={styles.field}>
+                <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                    {config.labels.displayNameLabel}
+                </Text>
+                <TextInput
+                    style={[
+                        styles.input,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            color: tokens.colors.text,
+                            borderColor: tokens.colors.border,
+                        },
+                    ]}
+                    value={config.displayName}
+                    onChangeText={config.onChangeDisplayName}
+                    placeholder={config.labels.displayNamePlaceholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                />
+            </View>
+
+            {/* Email */}
+            <View style={styles.field}>
+                <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                    {config.labels.emailLabel}
+                </Text>
+                <TextInput
+                    style={[
+                        styles.input,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            color: tokens.colors.text,
+                            borderColor: tokens.colors.border,
+                        },
+                    ]}
+                    value={config.email}
+                    onChangeText={config.onChangeEmail}
+                    placeholder={config.labels.emailPlaceholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                />
+            </View>
+
+            {/* Photo */}
+            {config.onChangePhoto && (
+                <View style={styles.field}>
+                    <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                        {config.labels.photoLabel}
+                    </Text>
+                    <TouchableOpacity
+                        style={[
+                            styles.photoButton,
+                            { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.border },
+                        ]}
+                        onPress={config.onChangePhoto}
+                    >
+                        <Text style={[styles.photoButtonText, { color: tokens.colors.primary }]}>
+                            {config.labels.changePhotoButton}
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+
+            {/* Actions */}
+            <View style={styles.actions}>
+                <TouchableOpacity
+                    style={[styles.saveButton, { backgroundColor: tokens.colors.primary }]}
+                    onPress={config.onSave}
+                    disabled={config.isSaving}
+                >
+                    {config.isSaving ? (
+                        <ActivityIndicator size="small" color={tokens.colors.onPrimary} />
+                    ) : (
+                        <Text style={[styles.saveButtonText, { color: tokens.colors.onPrimary }]}>
+                            {config.labels.saveButton}
+                        </Text>
+                    )}
+                </TouchableOpacity>
+
+                {config.onCancel && (
+                    <TouchableOpacity
+                        style={[
+                            styles.cancelButton,
+                            { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.border },
+                        ]}
+                        onPress={config.onCancel}
+                        disabled={config.isSaving}
+                    >
+                        <Text style={[styles.cancelButtonText, { color: tokens.colors.text }]}>
+                            {config.labels.cancelButton}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        padding: 16,
+    },
+    loading: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: "600",
+        marginBottom: 24,
+    },
+    field: {
+        marginBottom: 20,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        marginBottom: 8,
+    },
+    input: {
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+    },
+    photoButton: {
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        alignItems: "center",
+    },
+    photoButtonText: {
+        fontSize: 14,
+        fontWeight: "500",
+    },
+    actions: {
+        marginTop: 32,
+        gap: 12,
+    },
+    saveButton: {
+        padding: 16,
+        borderRadius: 8,
+        alignItems: "center",
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+    cancelButton: {
+        padding: 16,
+        borderRadius: 8,
+        alignItems: "center",
+        borderWidth: 1,
+    },
+    cancelButtonText: {
+        fontSize: 16,
+        fontWeight: "500",
+    },
+});