@umituz/react-native-auth 2.5.7 → 2.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.7",
+  "version": "2.5.10",
   "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/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/index.ts

@@ -113,6 +113,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
 // =============================================================================

package/src/presentation/components/AuthBottomSheet.tsx

@@ -13,7 +13,6 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
-import { X } from "lucide-react-native";
 import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
 import { LoginForm } from "./LoginForm";
@@ -105,7 +104,9 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
           onPress={handleClose}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <X size={24} color={tokens.colors.textSecondary} />
+          <Text style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
+            ✕
+          </Text>
         </TouchableOpacity>
 
         <View style={styles.header}>
@@ -156,6 +157,10 @@ const styles = StyleSheet.create({
     padding: 8,
     zIndex: 10,
   },
+  closeIcon: {
+    fontSize: 24,
+    fontWeight: "400",
+  },
   header: {
     alignItems: "center",
     marginBottom: 24,

package/src/presentation/components/ProfileSection.tsx

@@ -14,6 +14,7 @@ export interface ProfileSectionConfig {
     isAnonymous: boolean;
     avatarUrl?: string;
     accountSettingsRoute?: string;
+    benefits?: string[]; // App-specific benefits for anonymous users to encourage sign-in
 }
 
 export interface ProfileSectionProps {
@@ -111,6 +112,22 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
                         { borderTopColor: tokens.colors.border },
                     ]}
                 >
+                    {/* Benefits List */}
+                    {profile.benefits && profile.benefits.length > 0 && (
+                        <View style={styles.benefitsContainer}>
+                            {profile.benefits.map((benefit, index) => (
+                                <View key={index} style={styles.benefitItem}>
+                                    <Text style={[styles.benefitBullet, { color: tokens.colors.primary }]}>
+                                        ✓
+                                    </Text>
+                                    <Text style={[styles.benefitText, { color: tokens.colors.textSecondary }]}>
+                                        {benefit}
+                                    </Text>
+                                </View>
+                            ))}
+                        </View>
+                    )}
+
                     <TouchableOpacity
                         style={[
                             styles.ctaButton,
@@ -176,6 +193,25 @@ const styles = StyleSheet.create({
         paddingTop: 12,
         borderTopWidth: 1,
     },
+    benefitsContainer: {
+        marginBottom: 16,
+        gap: 8,
+    },
+    benefitItem: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+    },
+    benefitBullet: {
+        fontSize: 16,
+        fontWeight: "600",
+        marginTop: 2,
+    },
+    benefitText: {
+        flex: 1,
+        fontSize: 14,
+        lineHeight: 20,
+    },
     ctaButton: {
         paddingVertical: 12,
         borderRadius: 8,

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]);
 };