@umituz/react-native-auth 1.1.2 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Firebase Authentication wrapper for React Native apps - Secure, type-safe, and production-ready",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,7 +33,16 @@
   "peerDependencies": {
     "firebase": ">=11.0.0",
     "react": ">=18.2.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "@react-navigation/stack": "^6.0.0",
+    "@react-navigation/native": "^6.0.0",
+    "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-theme": "*",
+    "@umituz/react-native-localization": "*",
+    "@umituz/react-native-validation": "*",
+    "@umituz/react-native-storage": "*",
+    "expo-linear-gradient": "^13.0.0",
+    "react-native-safe-area-context": "^4.0.0"
   },
   "devDependencies": {
     "firebase": "^11.10.0",

package/src/application/ports/IAuthService.ts

@@ -9,7 +9,6 @@ export interface SignUpParams {
   email: string;
   password: string;
   displayName?: string;
-  username?: string;
 }
 
 export interface SignInParams {

package/src/domain/errors/AuthError.ts

@@ -83,11 +83,3 @@ export class AuthInvalidEmailError extends AuthError {
   }
 }
 
-export class AuthInvalidCredentialError extends AuthError {
-  constructor(message: string = "Invalid email or password") {
-    super(message, "AUTH_INVALID_CREDENTIAL");
-    this.name = "AuthInvalidCredentialError";
-    Object.setPrototypeOf(this, AuthInvalidCredentialError.prototype);
-  }
-}
-

package/src/domain/value-objects/AuthConfig.ts

@@ -15,15 +15,11 @@ export interface AuthConfig {
   /** Require special characters in password */
   requireSpecialChars?: boolean;
   /** Callback for user profile creation after signup */
-  onUserCreated?: (user: any, context?: { username?: string; displayName?: string }) => Promise<void> | void;
+  onUserCreated?: (user: any) => Promise<void> | void;
   /** Callback for user profile update */
   onUserUpdated?: (user: any) => Promise<void> | void;
-  /** Callback after successful sign in */
-  onSignIn?: (user: any) => Promise<void> | void;
   /** Callback for sign out cleanup */
   onSignOut?: () => Promise<void> | void;
-  /** Callback when guest mode is enabled */
-  onGuestModeEnabled?: () => Promise<void> | void;
 }
 
 export const DEFAULT_AUTH_CONFIG: Required<Omit<AuthConfig, 'onUserCreated' | 'onUserUpdated' | 'onSignOut'>> = {

package/src/index.ts

@@ -31,7 +31,6 @@ export {
   AuthEmailAlreadyInUseError,
   AuthWeakPasswordError,
   AuthInvalidEmailError,
-  AuthInvalidCredentialError,
 } from './domain/errors/AuthError';
 
 export type { AuthConfig } from './domain/value-objects/AuthConfig';
@@ -61,3 +60,12 @@ export {
 export { useAuth } from './presentation/hooks/useAuth';
 export type { UseAuthResult } from './presentation/hooks/useAuth';
 
+// =============================================================================
+// PRESENTATION LAYER - Screens & Navigation
+// =============================================================================
+
+export { LoginScreen } from './presentation/screens/LoginScreen';
+export { RegisterScreen } from './presentation/screens/RegisterScreen';
+export { AuthNavigator } from './presentation/navigation/AuthNavigator';
+export type { AuthStackParamList } from './presentation/navigation/AuthNavigator';
+

package/src/infrastructure/services/AuthService.ts

@@ -14,7 +14,6 @@ import {
 } from "firebase/auth";
 import type { IAuthService, SignUpParams, SignInParams } from "../../application/ports/IAuthService";
 import {
-  AuthError,
   AuthInitializationError,
   AuthConfigurationError,
   AuthValidationError,
@@ -24,7 +23,6 @@ import {
   AuthWrongPasswordError,
   AuthUserNotFoundError,
   AuthNetworkError,
-  AuthInvalidCredentialError,
 } from "../../domain/errors/AuthError";
 import type { AuthConfig } from "../../domain/value-objects/AuthConfig";
 import { DEFAULT_AUTH_CONFIG } from "../../domain/value-objects/AuthConfig";
@@ -117,10 +115,6 @@ function mapFirebaseAuthError(error: any): Error {
   if (code === "auth/too-many-requests") {
     return new AuthError("Too many requests. Please try again later.", "AUTH_TOO_MANY_REQUESTS");
   }
-  // Firebase v9+ uses auth/invalid-credential for both wrong email and wrong password
-  if (code === "auth/invalid-credential") {
-    return new AuthInvalidCredentialError();
-  }
 
   return new AuthError(message, code);
 }
@@ -207,10 +201,7 @@ export class AuthService implements IAuthService {
       // Call user created callback if provided
       if (this.config.onUserCreated) {
         try {
-          await this.config.onUserCreated(userCredential.user, {
-            username: params.username,
-            displayName: params.displayName,
-          });
+          await this.config.onUserCreated(userCredential.user);
         } catch (callbackError) {
           // Don't fail signup if callback fails
         }
@@ -249,16 +240,6 @@ export class AuthService implements IAuthService {
       );
 
       this.isGuestMode = false;
-
-      // Call sign in callback if provided
-      if (this.config.onSignIn) {
-        try {
-          await this.config.onSignIn(userCredential.user);
-        } catch (callbackError) {
-          // Don't fail signin if callback fails
-        }
-      }
-
       return userCredential.user;
     } catch (error: any) {
       throw mapFirebaseAuthError(error);
@@ -309,15 +290,6 @@ export class AuthService implements IAuthService {
     }
 
     this.isGuestMode = true;
-
-    // Call guest mode enabled callback if provided
-    if (this.config.onGuestModeEnabled) {
-      try {
-        await this.config.onGuestModeEnabled();
-      } catch (callbackError) {
-        // Don't fail guest mode if callback fails
-      }
-    }
   }
 
   /**

package/src/presentation/components/AuthContainer.tsx

@@ -0,0 +1,61 @@
+/**
+ * Auth Container Component
+ * Main container for auth screens with gradient and scroll
+ */
+
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AuthGradientBackground } from "./AuthGradientBackground";
+
+interface AuthContainerProps {
+  children: React.ReactNode;
+}
+
+export const AuthContainer: React.FC<AuthContainerProps> = ({ children }) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 20}
+    >
+      <AuthGradientBackground />
+      <ScrollView
+        contentContainerStyle={[
+          styles.scrollContent,
+          { paddingTop: insets.top + 40, paddingBottom: insets.bottom + 40 },
+        ]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.content}>{children}</View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 20,
+  },
+  content: {
+    flex: 1,
+    justifyContent: "center",
+    maxWidth: 440,
+    alignSelf: "center",
+    width: "100%",
+  },
+});
+

package/src/presentation/components/AuthDivider.tsx

@@ -0,0 +1,59 @@
+/**
+ * Auth Divider Component
+ * Divider with "OR" text for auth screens
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export const AuthDivider: React.FC = () => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View style={styles.divider}>
+      <View
+        style={[
+          styles.dividerLine,
+          { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+        ]}
+      />
+      <Text
+        style={[
+          styles.dividerText,
+          { color: tokens.colors.textSecondary || "#999999" },
+        ]}
+      >
+        {t("general.or")}
+      </Text>
+      <View
+        style={[
+          styles.dividerLine,
+          { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+        ]}
+      />
+    </View>
+  );
+};
+
+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/AuthErrorDisplay.tsx

@@ -0,0 +1,43 @@
+/**
+ * Auth Error Display Component
+ * Displays authentication errors
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+interface AuthErrorDisplayProps {
+  error: string | null;
+}
+
+export const AuthErrorDisplay: React.FC<AuthErrorDisplayProps> = ({
+  error,
+}) => {
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <View style={styles.errorContainer}>
+      <Text style={styles.errorText}>{error}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  errorContainer: {
+    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/components/AuthFormCard.tsx

@@ -0,0 +1,38 @@
+/**
+ * Auth Form Card Component
+ * Reusable card container for auth forms
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+
+interface AuthFormCardProps {
+  children: React.ReactNode;
+}
+
+export const AuthFormCard: React.FC<AuthFormCardProps> = ({ children }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        styles.formCard,
+        { backgroundColor: tokens.colors.surface || "#FFFFFF" },
+      ]}
+    >
+      <View style={styles.form}>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  formCard: {
+    borderRadius: 24,
+    padding: 24,
+  },
+  form: {
+    width: "100%",
+  },
+});
+

package/src/presentation/components/AuthGradientBackground.tsx

@@ -0,0 +1,23 @@
+/**
+ * Auth Gradient Background Component
+ * Gradient background for auth screens
+ */
+
+import React from "react";
+import { StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+
+export const AuthGradientBackground: React.FC = () => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <LinearGradient
+      colors={[tokens.colors.primary, tokens.colors.secondary]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={StyleSheet.absoluteFill}
+    />
+  );
+};
+

package/src/presentation/components/AuthHeader.tsx

@@ -0,0 +1,68 @@
+/**
+ * Auth Header Component
+ * Reusable header for auth screens
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+
+interface AuthHeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  return (
+    <View style={styles.header}>
+      <Text
+        style={[
+          styles.title,
+          { color: tokens.colors.onPrimary || "#FFFFFF" },
+        ]}
+      >
+        {title}
+      </Text>
+      {(subtitle || t("auth.subtitle")) && (
+        <Text
+          style={[
+            styles.subtitle,
+            {
+              color:
+                tokens.colors.textInverse || "rgba(255, 255, 255, 0.9)",
+            },
+          ]}
+        >
+          {subtitle || t("auth.subtitle")}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+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

@@ -0,0 +1,64 @@
+/**
+ * Auth Link Component
+ * Link text with button for navigation between auth screens
+ */
+
+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-theme";
+
+interface AuthLinkProps {
+  text: string;
+  linkText: string;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+export const AuthLink: React.FC<AuthLinkProps> = ({
+  text,
+  linkText,
+  onPress,
+  disabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[
+          styles.text,
+          { color: tokens.colors.textSecondary || "#666666" },
+        ]}
+      >
+        {text}{" "}
+      </Text>
+      <AtomicButton
+        variant="text"
+        onPress={onPress}
+        disabled={disabled}
+        style={styles.button}
+      >
+        {linkText}
+      </AtomicButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 8,
+    paddingTop: 8,
+  },
+  text: {
+    fontSize: 15,
+    fontWeight: "400",
+  },
+  button: {
+    paddingHorizontal: 4,
+  },
+});
+

package/src/presentation/components/LoginForm.tsx

@@ -0,0 +1,174 @@
+/**
+ * Login Form Component
+ * Form fields and actions for login
+ */
+
+import React, { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useAuth } from "../hooks/useAuth";
+import { AuthErrorDisplay } from "./AuthErrorDisplay";
+import { AuthDivider } from "./AuthDivider";
+import { AuthLink } from "./AuthLink";
+
+interface LoginFormProps {
+  onNavigateToRegister: () => void;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({
+  onNavigateToRegister,
+}) => {
+  const { t } = useLocalization();
+  const { signIn, loading, error, continueAsGuest } = useAuth();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState<string | null>(null);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const validateEmail = (emailValue: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(emailValue);
+  };
+
+  const handleEmailChange = (text: string) => {
+    setEmail(text);
+    if (emailError) setEmailError(null);
+    if (localError) setLocalError(null);
+  };
+
+  const handlePasswordChange = (text: string) => {
+    setPassword(text);
+    if (passwordError) setPasswordError(null);
+    if (localError) setLocalError(null);
+  };
+
+  const handleSignIn = async () => {
+    setEmailError(null);
+    setPasswordError(null);
+    setLocalError(null);
+
+    let hasError = false;
+
+    if (!email.trim()) {
+      setEmailError(t("auth.errors.invalidEmail"));
+      hasError = true;
+    } else if (!validateEmail(email.trim())) {
+      setEmailError(t("auth.errors.invalidEmail"));
+      hasError = true;
+    }
+
+    if (!password.trim()) {
+      setPasswordError(t("auth.errors.weakPassword"));
+      hasError = true;
+    } else if (password.length < 6) {
+      setPasswordError(t("auth.errors.weakPassword"));
+      hasError = true;
+    }
+
+    if (hasError) return;
+
+    try {
+      await signIn(email.trim(), password);
+    } catch (err: any) {
+      const errorMessage = err.message || t("auth.errors.unknownError");
+      setLocalError(errorMessage);
+    }
+  };
+
+  const handleContinueAsGuest = async () => {
+    try {
+      await continueAsGuest();
+    } catch (err) {
+      // Error handling is done in the hook
+    }
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <>
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.email")}
+          value={email}
+          onChangeText={handleEmailChange}
+          placeholder={t("auth.emailPlaceholder")}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!loading}
+          state={emailError ? "error" : "default"}
+          helperText={emailError || undefined}
+        />
+      </View>
+
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.password")}
+          value={password}
+          onChangeText={handlePasswordChange}
+          placeholder={t("auth.passwordPlaceholder")}
+          secureTextEntry
+          autoCapitalize="none"
+          editable={!loading}
+          state={passwordError ? "error" : "default"}
+          helperText={passwordError || undefined}
+        />
+      </View>
+
+      <AuthErrorDisplay error={displayError} />
+
+      <View style={styles.buttonContainer}>
+        <AtomicButton
+          variant="primary"
+          onPress={handleSignIn}
+          disabled={loading || !email.trim() || !password.trim()}
+          fullWidth
+          loading={loading}
+          style={styles.signInButton}
+        >
+          {t("auth.signIn")}
+        </AtomicButton>
+      </View>
+
+      <AuthDivider />
+
+      <View style={styles.buttonContainer}>
+        <AtomicButton
+          variant="outline"
+          onPress={handleContinueAsGuest}
+          disabled={loading}
+          fullWidth
+          style={styles.guestButton}
+        >
+          {t("auth.continueAsGuest")}
+        </AtomicButton>
+      </View>
+
+      <AuthLink
+        text={t("auth.dontHaveAccount")}
+        linkText={t("auth.createAccount")}
+        onPress={onNavigateToRegister}
+        disabled={loading}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    marginBottom: 16,
+  },
+  signInButton: {
+    minHeight: 52,
+  },
+  guestButton: {
+    minHeight: 52,
+  },
+});
+

package/src/presentation/components/RegisterForm.tsx

@@ -0,0 +1,225 @@
+/**
+ * Register Form Component
+ * Form fields and actions for registration
+ */
+
+import React, { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  validateEmail,
+  validatePassword,
+  validatePasswordConfirmation,
+  batchValidate,
+} from "@umituz/react-native-validation";
+import { useAuth } from "../hooks/useAuth";
+import { AuthErrorDisplay } from "./AuthErrorDisplay";
+import { AuthLink } from "./AuthLink";
+
+interface RegisterFormProps {
+  onNavigateToLogin: () => void;
+}
+
+export const RegisterForm: React.FC<RegisterFormProps> = ({
+  onNavigateToLogin,
+}) => {
+  const { t } = useLocalization();
+  const { signUp, loading, error } = useAuth();
+
+  const [displayName, setDisplayName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<{
+    displayName?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+
+  const handleDisplayNameChange = (text: string) => {
+    setDisplayName(text);
+    if (fieldErrors.displayName) {
+      setFieldErrors({ ...fieldErrors, displayName: undefined });
+    }
+    if (localError) setLocalError(null);
+  };
+
+  const handleEmailChange = (text: string) => {
+    setEmail(text);
+    if (fieldErrors.email) {
+      setFieldErrors({ ...fieldErrors, email: undefined });
+    }
+    if (localError) setLocalError(null);
+  };
+
+  const handlePasswordChange = (text: string) => {
+    setPassword(text);
+    if (fieldErrors.password) {
+      setFieldErrors({ ...fieldErrors, password: undefined });
+    }
+    if (fieldErrors.confirmPassword) {
+      setFieldErrors({ ...fieldErrors, confirmPassword: undefined });
+    }
+    if (localError) setLocalError(null);
+  };
+
+  const handleConfirmPasswordChange = (text: string) => {
+    setConfirmPassword(text);
+    if (fieldErrors.confirmPassword) {
+      setFieldErrors({ ...fieldErrors, confirmPassword: undefined });
+    }
+    if (localError) setLocalError(null);
+  };
+
+  const handleSignUp = async () => {
+    setLocalError(null);
+    setFieldErrors({});
+
+    const validationResult = batchValidate([
+      {
+        field: "email",
+        validator: () => validateEmail(email.trim()),
+      },
+      {
+        field: "password",
+        validator: () =>
+          validatePassword(password, {
+            minLength: 6,
+            requireUppercase: false,
+            requireLowercase: false,
+            requireNumber: false,
+          }),
+      },
+      {
+        field: "confirmPassword",
+        validator: () =>
+          validatePasswordConfirmation(password, confirmPassword),
+      },
+    ]);
+
+    if (!validationResult.isValid) {
+      setFieldErrors(validationResult.errors);
+      return;
+    }
+
+    try {
+      await signUp(
+        email.trim(),
+        password,
+        displayName.trim() || undefined,
+      );
+    } catch (err: any) {
+      const errorMessage = err.message || t("auth.errors.unknownError");
+      setLocalError(errorMessage);
+    }
+  };
+
+  const displayError = localError || error;
+
+  return (
+    <>
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.displayName") || "Full Name"}
+          value={displayName}
+          onChangeText={handleDisplayNameChange}
+          placeholder={
+            t("auth.displayNamePlaceholder") || "Enter your full name"
+          }
+          autoCapitalize="words"
+          editable={!loading}
+          state={fieldErrors.displayName ? "error" : "default"}
+          helperText={fieldErrors.displayName || undefined}
+        />
+      </View>
+
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.email")}
+          value={email}
+          onChangeText={handleEmailChange}
+          placeholder={t("auth.emailPlaceholder")}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!loading}
+          state={fieldErrors.email ? "error" : "default"}
+          helperText={fieldErrors.email || undefined}
+        />
+      </View>
+
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.password")}
+          value={password}
+          onChangeText={handlePasswordChange}
+          placeholder={t("auth.passwordPlaceholder")}
+          secureTextEntry
+          autoCapitalize="none"
+          editable={!loading}
+          state={fieldErrors.password ? "error" : "default"}
+          helperText={fieldErrors.password || undefined}
+        />
+      </View>
+
+      <View style={styles.inputContainer}>
+        <AtomicInput
+          label={t("auth.confirmPassword") || "Confirm Password"}
+          value={confirmPassword}
+          onChangeText={handleConfirmPasswordChange}
+          placeholder={
+            t("auth.confirmPasswordPlaceholder") || "Confirm your password"
+          }
+          secureTextEntry
+          autoCapitalize="none"
+          editable={!loading}
+          state={fieldErrors.confirmPassword ? "error" : "default"}
+          helperText={fieldErrors.confirmPassword || undefined}
+        />
+      </View>
+
+      <AuthErrorDisplay error={displayError} />
+
+      <View style={styles.buttonContainer}>
+        <AtomicButton
+          variant="primary"
+          onPress={handleSignUp}
+          disabled={
+            loading ||
+            !email.trim() ||
+            !password.trim() ||
+            !confirmPassword.trim()
+          }
+          fullWidth
+          loading={loading}
+          style={styles.signUpButton}
+        >
+          {t("auth.signUp")}
+        </AtomicButton>
+      </View>
+
+      <AuthLink
+        text={t("auth.alreadyHaveAccount")}
+        linkText={t("auth.signIn")}
+        onPress={onNavigateToLogin}
+        disabled={loading}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    marginBottom: 16,
+    marginTop: 8,
+  },
+  signUpButton: {
+    minHeight: 52,
+  },
+});
+

package/src/presentation/hooks/useAuth.ts

@@ -16,6 +16,8 @@ export interface UseAuthResult {
   isGuest: boolean;
   /** Whether user is authenticated */
   isAuthenticated: boolean;
+  /** Current error message */
+  error: string | null;
   /** Sign up function */
   signUp: (email: string, password: string, displayName?: string) => Promise<void>;
   /** Sign in function */
@@ -38,6 +40,7 @@ export function useAuth(): UseAuthResult {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [isGuest, setIsGuest] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const service = getAuthService();
@@ -77,19 +80,37 @@ export function useAuth(): UseAuthResult {
   const signUp = useCallback(async (email: string, password: string, displayName?: string) => {
     const service = getAuthService();
     if (!service) {
-      throw new Error("Auth service is not initialized");
+      const err = "Auth service is not initialized";
+      setError(err);
+      throw new Error(err);
+    }
+    try {
+      setError(null);
+      await service.signUp({ email, password, displayName });
+      // State will be updated via onAuthStateChange
+    } catch (err: any) {
+      const errorMessage = err.message || "Sign up failed";
+      setError(errorMessage);
+      throw err;
     }
-    await service.signUp({ email, password, displayName });
-    // State will be updated via onAuthStateChange
   }, []);
 
   const signIn = useCallback(async (email: string, password: string) => {
     const service = getAuthService();
     if (!service) {
-      throw new Error("Auth service is not initialized");
+      const err = "Auth service is not initialized";
+      setError(err);
+      throw new Error(err);
+    }
+    try {
+      setError(null);
+      await service.signIn({ email, password });
+      // State will be updated via onAuthStateChange
+    } catch (err: any) {
+      const errorMessage = err.message || "Sign in failed";
+      setError(errorMessage);
+      throw err;
     }
-    await service.signIn({ email, password });
-    // State will be updated via onAuthStateChange
   }, []);
 
   const signOut = useCallback(async () => {
@@ -118,6 +139,7 @@ export function useAuth(): UseAuthResult {
     loading,
     isGuest,
     isAuthenticated: !!user && !isGuest,
+    error,
     signUp,
     signIn,
     signOut,

package/src/presentation/navigation/AuthNavigator.tsx

@@ -0,0 +1,58 @@
+/**
+ * Auth Navigator
+ * Stack navigator for authentication screens (Login, Register)
+ */
+
+import React, { useEffect, useState } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { storageRepository } from "@umituz/react-native-storage";
+import { unwrap } from "@umituz/react-native-storage";
+import { LoginScreen } from "../screens/LoginScreen";
+import { RegisterScreen } from "../screens/RegisterScreen";
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Register: undefined;
+};
+
+const AuthStack = createStackNavigator<AuthStackParamList>();
+
+const SHOW_REGISTER_KEY = "auth_show_register";
+
+export const AuthNavigator: React.FC = () => {
+  const tokens = useAppDesignTokens();
+  const [initialRouteName, setInitialRouteName] = useState<
+    "Login" | "Register" | undefined
+  >(undefined);
+
+  useEffect(() => {
+    storageRepository.getString(SHOW_REGISTER_KEY, "false").then((result) => {
+      const value = unwrap(result, "false");
+      if (value === "true") {
+        setInitialRouteName("Register");
+        storageRepository.removeItem(SHOW_REGISTER_KEY);
+      } else {
+        setInitialRouteName("Login");
+      }
+    });
+  }, []);
+
+  if (initialRouteName === undefined) {
+    return null;
+  }
+
+  return (
+    <AuthStack.Navigator
+      initialRouteName={initialRouteName}
+      screenOptions={{
+        headerShown: false,
+        cardStyle: { backgroundColor: tokens.colors.backgroundPrimary },
+      }}
+    >
+      <AuthStack.Screen name="Login" component={LoginScreen} />
+      <AuthStack.Screen name="Register" component={RegisterScreen} />
+    </AuthStack.Navigator>
+  );
+};
+

package/src/presentation/screens/LoginScreen.tsx

@@ -0,0 +1,37 @@
+/**
+ * Login Screen
+ * Beautiful, production-ready login screen with email/password and guest mode
+ */
+
+import React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { AuthStackParamList } from "../navigation/AuthNavigator";
+import type { StackNavigationProp } from "@react-navigation/stack";
+import { AuthContainer } from "../components/AuthContainer";
+import { AuthHeader } from "../components/AuthHeader";
+import { AuthFormCard } from "../components/AuthFormCard";
+import { LoginForm } from "../components/LoginForm";
+
+type LoginScreenNavigationProp = StackNavigationProp<
+  AuthStackParamList,
+  "Login"
+>;
+
+export const LoginScreen: React.FC = () => {
+  const { t } = useLocalization();
+  const navigation = useNavigation<LoginScreenNavigationProp>();
+
+  const handleNavigateToRegister = () => {
+    navigation.navigate("Register");
+  };
+
+  return (
+    <AuthContainer>
+      <AuthHeader title={t("auth.title")} />
+      <AuthFormCard>
+        <LoginForm onNavigateToRegister={handleNavigateToRegister} />
+      </AuthFormCard>
+    </AuthContainer>
+  );
+};

package/src/presentation/screens/RegisterScreen.tsx

@@ -0,0 +1,37 @@
+/**
+ * Register Screen
+ * Beautiful, production-ready registration screen with validation
+ */
+
+import React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { AuthStackParamList } from "../navigation/AuthNavigator";
+import type { StackNavigationProp } from "@react-navigation/stack";
+import { AuthContainer } from "../components/AuthContainer";
+import { AuthHeader } from "../components/AuthHeader";
+import { AuthFormCard } from "../components/AuthFormCard";
+import { RegisterForm } from "../components/RegisterForm";
+
+type RegisterScreenNavigationProp = StackNavigationProp<
+  AuthStackParamList,
+  "Register"
+>;
+
+export const RegisterScreen: React.FC = () => {
+  const { t } = useLocalization();
+  const navigation = useNavigation<RegisterScreenNavigationProp>();
+
+  const handleNavigateToLogin = () => {
+    navigation.navigate("Login");
+  };
+
+  return (
+    <AuthContainer>
+      <AuthHeader title={t("auth.createAccount")} />
+      <AuthFormCard>
+        <RegisterForm onNavigateToLogin={handleNavigateToLogin} />
+      </AuthFormCard>
+    </AuthContainer>
+  );
+};