@umituz/react-native-auth 2.6.17 → 2.6.19

package/package.json

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

@@ -170,8 +170,6 @@ 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';
-export { UserProfileHeader } from './presentation/components/UserProfileHeader';
-export type { UserProfileHeaderProps } from './presentation/components/UserProfileHeader';
 
 // =============================================================================
 // PRESENTATION LAYER - Stores

package/src/presentation/components/AuthErrorDisplay.tsx

@@ -1,10 +1,11 @@
 /**
  * Auth Error Display Component
- * Displays authentication errors
+ * Displays authentication errors using design system tokens
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface AuthErrorDisplayProps {
   error: string | null;
@@ -13,13 +14,28 @@ interface AuthErrorDisplayProps {
 export const AuthErrorDisplay: React.FC<AuthErrorDisplayProps> = ({
   error,
 }) => {
+  const tokens = useAppDesignTokens();
+
   if (!error) {
     return null;
   }
 
   return (
-    <View style={styles.errorContainer}>
-      <Text style={styles.errorText}>{error}</Text>
+    <View
+      style={[
+        styles.errorContainer,
+        {
+          backgroundColor: tokens.colors.errorLight,
+          borderColor: tokens.colors.error,
+        },
+      ]}
+    >
+      <AtomicText
+        type="body"
+        style={[styles.errorText, { color: tokens.colors.error }]}
+      >
+        {error}
+      </AtomicText>
     </View>
   );
 };
@@ -29,12 +45,9 @@ const styles = StyleSheet.create({
     marginBottom: 16,
     padding: 14,
     borderRadius: 12,
-    backgroundColor: "rgba(255, 59, 48, 0.1)",
     borderWidth: 1,
-    borderColor: "rgba(255, 59, 48, 0.2)",
   },
   errorText: {
-    color: "#FF3B30",
     fontSize: 14,
     textAlign: "center",
     fontWeight: "500",

package/src/presentation/hooks/useAuthState.ts

@@ -38,9 +38,24 @@ export function useAuthState(): UseAuthStateResult {
 
   // Memoize user to prevent new object reference on every render
   const user = useMemo(() => {
+    // If no Firebase user, return null
+    if (!firebaseUser) return null;
+
+    // If Firebase user exists and is NOT anonymous, always return the user
+    // This ensures real authenticated users (email, Google, Apple) always have user object
+    // even if isGuest was previously true (which gets reset by useEffect below)
+    if (!firebaseUser.isAnonymous) {
+      return mapToAuthUser(firebaseUser);
+    }
+
+    // If Firebase user is anonymous AND we're in guest mode, return null
+    // Guest mode = user clicked "Continue as Guest" with no account
     if (isGuest) return null;
+
+    // If Firebase user is anonymous but NOT in guest mode, return the user
+    // This handles anonymous auth accounts that can be upgraded later
     return mapToAuthUser(firebaseUser);
-  }, [isGuest, firebaseUser?.uid]);
+  }, [isGuest, firebaseUser?.uid, firebaseUser?.isAnonymous]);
 
   // Anonymous users are NOT authenticated - they need to register/login
   const isAuthenticated = !!user && !isGuest && !user.isAnonymous;

package/src/presentation/components/UserProfileHeader.tsx

@@ -1,166 +0,0 @@
-/**
- * User Profile Header Component
- * Displays user avatar, name, and ID
- * Works for both guest and authenticated users
- */
-
-import React, { useCallback } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicIcon,
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { useNavigation } from "@react-navigation/native";
-import { Avatar } from "@umituz/react-native-avatar";
-
-export interface UserProfileHeaderProps {
-  /** User display name */
-  displayName?: string;
-  /** User ID */
-  userId?: string;
-  /** Whether user is anonymous (device-based ID) */
-  isAnonymous?: boolean;
-  /** Avatar URL (optional) */
-  avatarUrl?: string;
-  /** Navigation route for account settings */
-  accountSettingsRoute?: string;
-  /** Custom onPress handler */
-  onPress?: () => void;
-  /** Custom anonymous user display name */
-  anonymousDisplayName?: string;
-  /** Custom avatar service URL */
-  avatarServiceUrl?: string;
-  /** Default user display name when no displayName provided */
-  defaultUserDisplayName?: string;
-  /** Default anonymous display name */
-  defaultAnonymousDisplayName?: string;
-}
-
-export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
-  displayName,
-  userId,
-  isAnonymous = false,
-  avatarUrl,
-  accountSettingsRoute,
-  onPress,
-  anonymousDisplayName,
-  avatarServiceUrl,
-  defaultUserDisplayName,
-  defaultAnonymousDisplayName,
-}) => {
-  const tokens = useAppDesignTokens();
-  const navigation = useNavigation();
-  const colors = tokens.colors;
-  const spacing = tokens.spacing;
-  const finalDisplayName = displayName || (isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : defaultUserDisplayName || "User");
-  const avatarName = isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : finalDisplayName;
-
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    } else if (accountSettingsRoute) {
-      navigation.navigate(accountSettingsRoute as never);
-    }
-  }, [onPress, accountSettingsRoute, navigation]);
-
-  const shouldShowChevron = !!(onPress || accountSettingsRoute);
-  const isPressable = !!(onPress || accountSettingsRoute);
-
-  const containerStyle = [
-    styles.container,
-    {
-      backgroundColor: colors.surface,
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.md,
-      marginHorizontal: spacing.md,
-    },
-  ];
-
-  const content = (
-    <>
-      <View style={styles.content}>
-        <View style={styles.avatarContainer}>
-          <Avatar
-            uri={avatarUrl}
-            name={avatarName}
-            size="lg"
-            shape="circle"
-          />
-        </View>
-        <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
-          <AtomicText
-            type="headlineSmall"
-            style={[styles.name, { color: colors.textPrimary }]}
-            numberOfLines={1}
-          >
-            {finalDisplayName}
-          </AtomicText>
-          {userId && (
-            <AtomicText
-              type="bodySmall"
-              style={[styles.id, { color: colors.textSecondary }]}
-              numberOfLines={1}
-            >
-              {userId}
-            </AtomicText>
-          )}
-        </View>
-      </View>
-      <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
-        <AtomicIcon name="chevron-forward" size="md" color="onSurface" />
-      </View>
-    </>
-  );
-
-  if (isPressable) {
-    return (
-      <TouchableOpacity
-        style={containerStyle}
-        onPress={handlePress}
-        activeOpacity={0.7}
-      >
-        {content}
-      </TouchableOpacity>
-    );
-  }
-
-  return <View style={containerStyle}>{content}</View>;
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginTop: 0,
-    marginBottom: 0,
-    borderRadius: 20,
-    minHeight: 80,
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  avatarContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  textContainer: {
-    flex: 1,
-  },
-  name: {
-    fontWeight: "700",
-  },
-  id: {
-    fontWeight: "500",
-    opacity: 0.7,
-  },
-  chevronContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
-
-