@umituz/react-native-auth 2.6.23 → 2.7.1

package/package.json

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

package/src/presentation/components/AccountActions.tsx

@@ -47,7 +47,7 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
                     try {
                         await onLogout();
                     } catch (error) {
-                        console.error("Logout failed:", error);
+                        // Silent error handling
                     }
                 },
             },
@@ -64,7 +64,7 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
                     try {
                         await onDeleteAccount();
                     } catch (error) {
-                        console.error("Delete account failed:", error);
+                        // Silent error handling
                     }
                 },
             },

package/src/presentation/components/AuthBottomSheet.styles.ts

@@ -21,10 +21,6 @@ export const styles = StyleSheet.create({
         padding: 8,
         zIndex: 10,
     },
-    closeIcon: {
-        fontSize: 24,
-        fontWeight: "400",
-    },
     header: {
         alignItems: "center",
         marginBottom: 24,
@@ -32,13 +28,10 @@ export const styles = StyleSheet.create({
         paddingTop: 16,
     },
     title: {
-        fontSize: 28,
-        fontWeight: "700",
         marginBottom: 8,
         textAlign: "center",
     },
     subtitle: {
-        fontSize: 15,
         textAlign: "center",
         lineHeight: 22,
     },

package/src/presentation/components/AuthBottomSheet.tsx

@@ -4,14 +4,14 @@
  */
 
 import React, { useEffect, useCallback, useRef, useState, useMemo } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
 import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
@@ -138,19 +138,19 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
           style={styles.closeButton}
           onPress={handleClose}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          accessibilityLabel={t("common.close") || "Close"}
+          accessibilityRole="button"
         >
-          <Text style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
-            ✕
-          </Text>
+          <AtomicIcon name="close" size="md" color="secondary" />
         </TouchableOpacity>
 
         <View style={styles.header}>
-          <Text style={[styles.title, { color: tokens.colors.textPrimary }]}>
+          <AtomicText type="headlineLarge" color="primary" style={styles.title}>
             {mode === "login" ? t("auth.signIn") : t("auth.createAccount")}
-          </Text>
-          <Text style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+          </AtomicText>
+          <AtomicText type="bodyLarge" color="secondary" style={styles.subtitle}>
             {mode === "login" ? t("auth.signInSubtitle") : t("auth.createAccountSubtitle")}
-          </Text>
+          </AtomicText>
         </View>
 
         <View style={styles.formContainer}>

package/src/presentation/components/AuthDivider.tsx

@@ -4,34 +4,38 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 export const AuthDivider: React.FC = () => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const { t } = useLocalization();
 
   return (
-    <View style={styles.divider}>
+    <View style={[styles.divider, { marginVertical: tokens.spacing.md }]}>
       <View
         style={[
           styles.dividerLine,
-          { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+          { backgroundColor: tokens.colors.borderLight },
         ]}
       />
-      <Text
-        style={[
-          styles.dividerText,
-          { color: tokens.colors.textSecondary || "#999999" },
-        ]}
+      <AtomicText
+        type="caption"
+        style={{
+          color: tokens.colors.textSecondary,
+          marginHorizontal: tokens.spacing.sm,
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+        }}
+        responsive
       >
         {t("general.or")}
-      </Text>
+      </AtomicText>
       <View
         style={[
           styles.dividerLine,
-          { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+          { backgroundColor: tokens.colors.borderLight },
         ]}
       />
     </View>
@@ -42,19 +46,11 @@ const styles = StyleSheet.create({
   divider: {
     flexDirection: "row",
     alignItems: "center",
-    marginVertical: 20,
   },
   dividerLine: {
     flex: 1,
     height: 1,
   },
-  dividerText: {
-    marginHorizontal: 16,
-    fontSize: 13,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-  },
 });
 
 

package/src/presentation/components/AuthFormCard.tsx

@@ -5,20 +5,24 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 
 interface AuthFormCardProps {
   children: React.ReactNode;
 }
 
 export const AuthFormCard: React.FC<AuthFormCardProps> = ({ children }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
 
   return (
     <View
       style={[
         styles.formCard,
-        { backgroundColor: tokens.colors.surface || "#FFFFFF" },
+        {
+          backgroundColor: tokens.colors.surface,
+          borderRadius: tokens.borderRadius.xl,
+          padding: tokens.spacing.lg,
+        },
       ]}
     >
       <View style={styles.form}>{children}</View>
@@ -28,8 +32,7 @@ export const AuthFormCard: React.FC<AuthFormCardProps> = ({ children }) => {
 
 const styles = StyleSheet.create({
   formCard: {
-    borderRadius: 24,
-    padding: 24,
+    width: "100%",
   },
   form: {
     width: "100%",

package/src/presentation/components/AuthHeader.tsx

@@ -4,8 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 interface AuthHeaderProps {
@@ -14,31 +14,30 @@ interface AuthHeaderProps {
 }
 
 export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
   const { t } = useLocalization();
 
   return (
-    <View style={styles.header}>
-      <Text
-        style={[
-          styles.title,
-          { color: tokens.colors.onPrimary || "#FFFFFF" },
-        ]}
+    <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: tokens.spacing.md }]}>
+      <AtomicText
+        type="heading1"
+        style={{ color: tokens.colors.onPrimary, textAlign: "center" }}
+        responsive
       >
         {title}
-      </Text>
+      </AtomicText>
       {(subtitle || t("auth.subtitle")) && (
-        <Text
-          style={[
-            styles.subtitle,
-            {
-              color:
-                tokens.colors.textInverse || "rgba(255, 255, 255, 0.9)",
-            },
-          ]}
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            color: tokens.colors.textInverse,
+            textAlign: "center",
+            marginTop: tokens.spacing.xs,
+          }}
+          responsive
         >
           {subtitle || t("auth.subtitle")}
-        </Text>
+        </AtomicText>
       )}
     </View>
   );
@@ -46,23 +45,7 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
 
 const styles = StyleSheet.create({
   header: {
-    marginBottom: 28,
     alignItems: "center",
-    paddingHorizontal: 20,
-  },
-  title: {
-    fontSize: 36,
-    fontWeight: "700",
-    marginBottom: 8,
-    textAlign: "center",
-    letterSpacing: -0.5,
-  },
-  subtitle: {
-    fontSize: 16,
-    textAlign: "center",
-    lineHeight: 22,
-    fontWeight: "400",
-    marginTop: 4,
   },
 });
 

package/src/presentation/components/AuthLink.tsx

@@ -4,9 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { AtomicButton } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 
 interface AuthLinkProps {
   text: string;
@@ -21,23 +20,22 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
   onPress,
   disabled = false,
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useResponsiveDesignTokens();
 
   return (
-    <View style={styles.container}>
-      <Text
-        style={[
-          styles.text,
-          { color: tokens.colors.textSecondary || "#666666" },
-        ]}
+    <View style={[styles.container, { marginTop: tokens.spacing.xs, paddingTop: tokens.spacing.xs }]}>
+      <AtomicText
+        type="bodyMedium"
+        style={{ color: tokens.colors.textSecondary }}
+        responsive
       >
         {text}{" "}
-      </Text>
+      </AtomicText>
       <AtomicButton
         variant="text"
         onPress={onPress}
         disabled={disabled}
-        style={styles.button}
+        style={{ paddingHorizontal: tokens.spacing.xxs }}
       >
         {linkText}
       </AtomicButton>
@@ -50,15 +48,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    marginTop: 8,
-    paddingTop: 8,
-  },
-  text: {
-    fontSize: 15,
-    fontWeight: "400",
-  },
-  button: {
-    paddingHorizontal: 4,
   },
 });
 

package/src/presentation/hooks/useAuthState.ts

@@ -115,22 +115,6 @@ export function useAuthState(): UseAuthStateResult {
     };
   }, []);
 
-  // Debug logging in development
-  if (typeof __DEV__ !== "undefined" && __DEV__) {
-    console.log("[useAuthState] Current state:", {
-      hasUser: !!user,
-      userUid: user?.uid,
-      userEmail: user?.email,
-      userIsAnonymous: user?.isAnonymous,
-      isAuthenticated,
-      isGuest,
-      loading,
-      firebaseLoading,
-      hasFirebaseUser: !!firebaseUser,
-      firebaseUserUid: firebaseUser?.uid,
-    });
-  }
-
   return {
     user,
     isAuthenticated,