@umituz/react-native-auth 4.3.71 → 4.3.73

package/.agents/workflows/setup-auth.md

@@ -0,0 +1,49 @@
+---
+description: Sets up or updates the @umituz/react-native-auth package in a React Native app.
+---
+
+# Auth Module Setup Skill
+
+When this workflow/skill is invoked, follow these explicit instructions to configure `@umituz/react-native-auth`.
+
+## Step 1: Check and Update `package.json`
+- Locate the project's `package.json`.
+- Check if `@umituz/react-native-auth` is installed.
+  - If missing: Install with `npm install @umituz/react-native-auth`.
+  - If outdated: Update it to the latest version.
+
+## Step 2: Ensure Peer Dependencies
+This module strictly requires the Firebase package and other navigation/UI primitives. Check and install missing peer dependencies (use `npx expo install` for Expo):
+- `@umituz/react-native-firebase`
+- `@umituz/react-native-design-system`
+- `@tanstack/react-query` & `zustand`
+- `firebase`
+- `expo-apple-authentication`, `expo-auth-session`, `expo-web-browser`, `expo-crypto`
+- `@react-navigation/native` & `@react-navigation/stack`
+
+// turbo
+## Step 3: Run Pod Install (If bare React Native)
+If targeting iOS and `ios/` folder is present, run:
+```bash
+cd ios && pod install
+```
+
+## Step 4: Inject Global Auth Provider
+- Locate the main entry file (`App.tsx`, `app/_layout.tsx`, etc.).
+- Import `AuthProvider` and `initializeAuth` (or `createAuthInitModule`) from `@umituz/react-native-auth`.
+- Ensure the app component tree is wrapped in `<AuthProvider>`.
+- Make sure that Firebase has been initialized first or initialized simultaneously, and then `initializeAuth` is called to bind the auth store to the Firebase driver.
+  ```tsx
+  import { AuthProvider } from '@umituz/react-native-auth';
+
+  export default function App() {
+    return (
+      <AuthProvider>
+        <RootNavigation />
+      </AuthProvider>
+    );
+  }
+  ```
+
+## Step 5: Summary
+Summarize the action: list which packages were upgraded/installed and the entry files modified to inject the `<AuthProvider>`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "4.3.71",
+  "version": "4.3.73",
   "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",
@@ -115,6 +115,7 @@
   },
   "files": [
     "src",
+    ".agents",
     "README.md",
     "LICENSE"
   ]

package/src/presentation/components/AccountActions.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Account Actions Component
+ * Logout and delete account actions
+ * PERFORMANCE: Memoized with useCallback for stable alert action handlers
+ */
+
+import React, { memo, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -26,7 +32,7 @@ interface AccountActionsProps {
   config: AccountActionsConfig;
 }
 
-export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
+export const AccountActions = memo<AccountActionsProps>(({ config }) => {
   const tokens = useAppDesignTokens();
   const alert = useAlert();
   const {
@@ -46,7 +52,8 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
     showChangePassword = false,
   } = config;
 
-  const handleLogout = () => {
+  // PERFORMANCE: Stable callback references prevent unnecessary re-renders
+  const handleLogout = useCallback(() => {
     alert.show(AlertType.WARNING, AlertMode.MODAL, logoutConfirmTitle, logoutConfirmMessage, {
       actions: [
         { id: "cancel", label: cancelText, style: "secondary", onPress: () => {} },
@@ -66,9 +73,9 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
         },
       ],
     });
-  };
+  }, [alert, logoutText, logoutConfirmTitle, logoutConfirmMessage, cancelText, onLogout]);
 
-  const handleDeleteAccount = () => {
+  const handleDeleteAccount = useCallback(() => {
     alert.show(AlertType.ERROR, AlertMode.MODAL, deleteConfirmTitle, deleteConfirmMessage, {
       actions: [
         { id: "cancel", label: cancelText, style: "secondary", onPress: () => {} },
@@ -86,7 +93,7 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
         },
       ],
     });
-  };
+  }, [alert, deleteAccountText, deleteConfirmTitle, deleteConfirmMessage, deleteErrorTitle, deleteErrorMessage, cancelText, onDeleteAccount]);
 
   return (
     <View style={styles.container}>
@@ -111,7 +118,9 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
       </TouchableOpacity>
     </View>
   );
-};
+});
+
+AccountActions.displayName = 'AccountActions';
 
 const styles = StyleSheet.create({
   container: { gap: 12 },

package/src/presentation/components/AuthHeader.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Auth Header Component
+ * Displays auth screen title and optional subtitle
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -8,7 +14,7 @@ interface AuthHeaderProps {
   subtitle?: string;
 }
 
-export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
+export const AuthHeader = memo<AuthHeaderProps>(({ title, subtitle }) => {
   const tokens = useAppDesignTokens();
 
   return (
@@ -34,7 +40,9 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
       )}
     </View>
   );
-};
+});
+
+AuthHeader.displayName = 'AuthHeader';
 
 const styles = StyleSheet.create({
   header: {

package/src/presentation/components/AuthLink.tsx

@@ -1,9 +1,10 @@
 /**
  * Auth Link Component
  * Link text with button for navigation between auth screens
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React from "react";
+import React, { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
@@ -15,20 +16,12 @@ interface AuthLinkProps {
   disabled?: boolean;
 }
 
-export const AuthLink: React.FC<AuthLinkProps> = ({
-  text,
-  linkText,
-  onPress,
-  disabled = false,
-}) => {
+export const AuthLink = memo<AuthLinkProps>(({ text, linkText, onPress, disabled = false }) => {
   const tokens = useAppDesignTokens();
 
   return (
     <View style={[styles.container, { marginTop: tokens.spacing.xs, paddingTop: tokens.spacing.xs }]}>
-      <AtomicText
-        type="bodyMedium"
-        color="textSecondary"
-      >
+      <AtomicText type="bodyMedium" color="textSecondary">
         {text}{" "}
       </AtomicText>
       <AtomicButton
@@ -41,7 +34,9 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
       </AtomicButton>
     </View>
   );
-};
+});
+
+AuthLink.displayName = 'AuthLink';
 
 const styles = StyleSheet.create({
   container: {

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Social Login Buttons Component
+ * Google and Apple sign-in buttons
+ * PERFORMANCE: Memoized and provider checks memoized to prevent re-renders
+ */
+
+import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
@@ -19,17 +25,14 @@ interface SocialLoginButtonsProps {
   appleLoading?: boolean;
 }
 
-export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
-  translations,
-  enabledProviders,
-  onGooglePress,
-  onApplePress,
-  googleLoading = false,
-  appleLoading = false,
-}) => {
+export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations, enabledProviders, onGooglePress, onApplePress, googleLoading = false, appleLoading = false }) => {
   const tokens = useAppDesignTokens();
-  const hasGoogle = enabledProviders.includes("google");
-  const hasApple = enabledProviders.includes("apple");
+
+  // PERFORMANCE: Memoize provider checks to prevent recalculation on every render
+  const { hasGoogle, hasApple } = useMemo(() => ({
+    hasGoogle: enabledProviders.includes("google"),
+    hasApple: enabledProviders.includes("apple"),
+  }), [enabledProviders]);
 
   if (!hasGoogle && !hasApple) {
     return null;
@@ -74,7 +77,9 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
       </View>
     </View>
   );
-};
+});
+
+SocialLoginButtons.displayName = 'SocialLoginButtons';
 
 const styles = StyleSheet.create({
   container: {},

package/src/presentation/screens/AccountScreen.tsx

@@ -2,9 +2,10 @@
  * Account Screen
  * Pure UI component for account management
  * Business logic provided via props from app layer
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React from "react";
+import React, { memo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -29,7 +30,7 @@ export interface AccountScreenProps {
     config: AccountScreenConfig;
 }
 
-export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
+export const AccountScreen = memo<AccountScreenProps>(({ config }) => {
     const tokens = useAppDesignTokens();
 
     return (
@@ -74,7 +75,9 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
             {config.PasswordPromptComponent}
         </>
     );
-};
+});
+
+AccountScreen.displayName = 'AccountScreen';
 
 const styles = StyleSheet.create({
     content: {

package/src/presentation/screens/LoginScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Login Screen Component
+ * Login form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -16,13 +22,14 @@ export interface LoginScreenProps {
   translations: LoginScreenTranslations;
 }
 
-export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
+export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToRegister = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToRegister = useCallback(() => {
     navigation.navigate("Register");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -41,4 +48,6 @@ export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+LoginScreen.displayName = 'LoginScreen';

package/src/presentation/screens/RegisterScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Register Screen Component
+ * Registration form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -20,19 +26,14 @@ export interface RegisterScreenProps {
   onPrivacyPress?: () => void;
 }
 
-export const RegisterScreen: React.FC<RegisterScreenProps> = ({
-  translations,
-  termsUrl,
-  privacyUrl,
-  onTermsPress,
-  onPrivacyPress,
-}) => {
+export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToLogin = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToLogin = useCallback(() => {
     navigation.navigate("Login");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -55,4 +56,6 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+RegisterScreen.displayName = 'RegisterScreen';