@umituz/react-native-auth 1.11.0 → 2.0.1

package/lib/presentation/components/AuthDivider.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+export const AuthDivider = () => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+    return (_jsxs(View, { style: styles.divider, children: [_jsx(View, { style: [
+                    styles.dividerLine,
+                    { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+                ] }), _jsx(Text, { style: [
+                    styles.dividerText,
+                    { color: tokens.colors.textSecondary || "#999999" },
+                ], children: t("general.or") }), _jsx(View, { style: [
+                    styles.dividerLine,
+                    { backgroundColor: tokens.colors.borderLight || "#E5E5E5" },
+                ] })] }));
+};
+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/lib/presentation/components/AuthErrorDisplay.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Auth Error Display Component
+ * Displays authentication errors
+ */
+import React from "react";
+interface AuthErrorDisplayProps {
+    error: string | null;
+}
+export declare const AuthErrorDisplay: React.FC<AuthErrorDisplayProps>;
+export {};

package/lib/presentation/components/AuthErrorDisplay.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+export const AuthErrorDisplay = ({ error, }) => {
+    if (!error) {
+        return null;
+    }
+    return (_jsx(View, { style: styles.errorContainer, children: _jsx(Text, { style: styles.errorText, children: error }) }));
+};
+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/lib/presentation/components/AuthFormCard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Auth Form Card Component
+ * Reusable card container for auth forms
+ */
+import React from "react";
+interface AuthFormCardProps {
+    children: React.ReactNode;
+}
+export declare const AuthFormCard: React.FC<AuthFormCardProps>;
+export {};

package/lib/presentation/components/AuthFormCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+export const AuthFormCard = ({ children }) => {
+    const tokens = useAppDesignTokens();
+    return (_jsx(View, { style: [
+            styles.formCard,
+            { backgroundColor: tokens.colors.surface || "#FFFFFF" },
+        ], children: _jsx(View, { style: styles.form, children: children }) }));
+};
+const styles = StyleSheet.create({
+    formCard: {
+        borderRadius: 24,
+        padding: 24,
+    },
+    form: {
+        width: "100%",
+    },
+});

package/lib/presentation/components/AuthGradientBackground.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Auth Gradient Background Component
+ * Gradient background for auth screens
+ */
+import React from "react";
+export declare const AuthGradientBackground: React.FC;

package/lib/presentation/components/AuthGradientBackground.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+export const AuthGradientBackground = () => {
+    const tokens = useAppDesignTokens();
+    return (_jsx(LinearGradient, { colors: [tokens.colors.primary, tokens.colors.secondary], start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, style: StyleSheet.absoluteFill }));
+};

package/lib/presentation/components/AuthHeader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Auth Header Component
+ * Reusable header for auth screens
+ */
+import React from "react";
+interface AuthHeaderProps {
+    title: string;
+    subtitle?: string;
+}
+export declare const AuthHeader: React.FC<AuthHeaderProps>;
+export {};

package/lib/presentation/components/AuthHeader.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+export const AuthHeader = ({ title, subtitle }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+    return (_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [
+                    styles.title,
+                    { color: tokens.colors.onPrimary || "#FFFFFF" },
+                ], children: title }), (subtitle || t("auth.subtitle")) && (_jsx(Text, { style: [
+                    styles.subtitle,
+                    {
+                        color: tokens.colors.textInverse || "rgba(255, 255, 255, 0.9)",
+                    },
+                ], children: subtitle || t("auth.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/lib/presentation/components/AuthLegalLinks.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Auth Legal Links Component
+ * Display Terms of Service and Privacy Policy links
+ */
+import React from "react";
+export interface AuthLegalLinksProps {
+    /**
+     * Terms of Service URL
+     */
+    termsUrl?: string;
+    /**
+     * Privacy Policy URL
+     */
+    privacyUrl?: string;
+    /**
+     * Callback when Terms of Service is pressed
+     */
+    onTermsPress?: () => void;
+    /**
+     * Callback when Privacy Policy is pressed
+     */
+    onPrivacyPress?: () => void;
+    /**
+     * Custom text before links
+     */
+    prefixText?: string;
+}
+export declare const AuthLegalLinks: React.FC<AuthLegalLinksProps>;

package/lib/presentation/components/AuthLegalLinks.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet, Linking } from "react-native";
+import { AtomicButton, AtomicText } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+export const AuthLegalLinks = ({ termsUrl, privacyUrl, onTermsPress, onPrivacyPress, prefixText, }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+    const handleTermsPress = async () => {
+        if (onTermsPress) {
+            onTermsPress();
+        }
+        else if (termsUrl) {
+            await Linking.openURL(termsUrl);
+        }
+    };
+    const handlePrivacyPress = async () => {
+        if (onPrivacyPress) {
+            onPrivacyPress();
+        }
+        else if (privacyUrl) {
+            await Linking.openURL(privacyUrl);
+        }
+    };
+    const hasTerms = termsUrl || onTermsPress;
+    const hasPrivacy = privacyUrl || onPrivacyPress;
+    if (!hasTerms && !hasPrivacy) {
+        return null;
+    }
+    return (_jsxs(View, { style: styles.container, children: [prefixText && (_jsx(AtomicText, { type: "bodySmall", color: "secondary", style: styles.prefixText, children: prefixText })), _jsxs(View, { style: styles.linksContainer, children: [hasTerms && (_jsx(AtomicButton, { variant: "text", onPress: handleTermsPress, style: styles.linkButton, children: _jsx(AtomicText, { type: "bodySmall", color: "primary", children: t("auth.termsOfService") || "Terms of Service" }) })), hasTerms && hasPrivacy && (_jsx(AtomicText, { type: "bodySmall", color: "secondary", style: styles.separator, children: " • " })), hasPrivacy && (_jsx(AtomicButton, { variant: "text", onPress: handlePrivacyPress, style: styles.linkButton, children: _jsx(AtomicText, { type: "bodySmall", color: "primary", children: t("auth.privacyPolicy") || "Privacy Policy" }) }))] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 16,
+        alignItems: "center",
+    },
+    prefixText: {
+        marginBottom: 8,
+        textAlign: "center",
+    },
+    linksContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        flexWrap: "wrap",
+    },
+    linkButton: {
+        paddingHorizontal: 4,
+        paddingVertical: 4,
+    },
+    separator: {
+        marginHorizontal: 4,
+    },
+});

package/lib/presentation/components/AuthLink.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Auth Link Component
+ * Link text with button for navigation between auth screens
+ */
+import React from "react";
+interface AuthLinkProps {
+    text: string;
+    linkText: string;
+    onPress: () => void;
+    disabled?: boolean;
+}
+export declare const AuthLink: React.FC<AuthLinkProps>;
+export {};

package/lib/presentation/components/AuthLink.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+export const AuthLink = ({ text, linkText, onPress, disabled = false, }) => {
+    const tokens = useAppDesignTokens();
+    return (_jsxs(View, { style: styles.container, children: [_jsxs(Text, { style: [
+                    styles.text,
+                    { color: tokens.colors.textSecondary || "#666666" },
+                ], children: [text, " "] }), _jsx(AtomicButton, { variant: "text", onPress: onPress, disabled: disabled, style: styles.button, children: linkText })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: 8,
+        paddingTop: 8,
+    },
+    text: {
+        fontSize: 15,
+        fontWeight: "400",
+    },
+    button: {
+        paddingHorizontal: 4,
+    },
+});

package/lib/presentation/components/LoginForm.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Login Form Component
+ * Single Responsibility: Render login form UI
+ */
+import React from "react";
+interface LoginFormProps {
+    onNavigateToRegister: () => void;
+}
+export declare const LoginForm: React.FC<LoginFormProps>;
+export {};

package/lib/presentation/components/LoginForm.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useLoginForm } from "../hooks/useLoginForm";
+import { AuthErrorDisplay } from "./AuthErrorDisplay";
+import { AuthDivider } from "./AuthDivider";
+import { AuthLink } from "./AuthLink";
+export const LoginForm = ({ onNavigateToRegister, }) => {
+    const { t } = useLocalization();
+    const { email, password, emailError, passwordError, loading, handleEmailChange, handlePasswordChange, handleSignIn, handleContinueAsGuest, displayError, } = useLoginForm();
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.inputContainer, children: _jsx(AtomicInput, { label: t("auth.email"), value: email, onChangeText: handleEmailChange, placeholder: t("auth.emailPlaceholder"), keyboardType: "email-address", autoCapitalize: "none", disabled: loading, state: emailError ? "error" : "default", helperText: emailError || undefined }) }), _jsx(View, { style: styles.inputContainer, children: _jsx(AtomicInput, { label: t("auth.password"), value: password, onChangeText: handlePasswordChange, placeholder: t("auth.passwordPlaceholder"), secureTextEntry: true, autoCapitalize: "none", disabled: loading, state: passwordError ? "error" : "default", helperText: passwordError || undefined }) }), _jsx(AuthErrorDisplay, { error: displayError }), _jsx(View, { style: styles.buttonContainer, children: _jsx(AtomicButton, { variant: "primary", onPress: handleSignIn, disabled: loading || !email.trim() || !password.trim(), fullWidth: true, style: styles.signInButton, children: t("auth.signIn") }) }), _jsx(AuthDivider, {}), _jsx(View, { style: styles.buttonContainer, children: _jsx(AtomicButton, { variant: "outline", onPress: handleContinueAsGuest, disabled: loading, fullWidth: true, style: styles.guestButton, testID: "continue-as-guest-button", children: t("auth.continueAsGuest") }) }), _jsx(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/lib/presentation/components/PasswordMatchIndicator.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Password Match Indicator Component
+ * Shows whether passwords match
+ */
+import React from "react";
+export interface PasswordMatchIndicatorProps {
+    isMatch: boolean;
+}
+export declare const PasswordMatchIndicator: React.FC<PasswordMatchIndicatorProps>;

package/lib/presentation/components/PasswordMatchIndicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+export const PasswordMatchIndicator = ({ isMatch, }) => {
+    const tokens = useAppDesignTokens();
+    const { t } = useLocalization();
+    const color = isMatch ? tokens.colors.success : tokens.colors.error;
+    const text = isMatch
+        ? t("auth.passwordsMatch", { defaultValue: "Passwords match" })
+        : t("auth.passwordsDontMatch", { defaultValue: "Passwords don't match" });
+    return (_jsxs(View, { style: styles.container, children: [_jsx(View, { style: [styles.dot, { backgroundColor: color }] }), _jsx(Text, { style: [styles.text, { color }], children: text })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        marginTop: 8,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: "500",
+    },
+});

package/lib/presentation/components/PasswordStrengthIndicator.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Password Strength Indicator Component
+ * Shows password requirements with visual feedback
+ */
+import React from "react";
+import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
+export interface PasswordStrengthIndicatorProps {
+    requirements: PasswordRequirements;
+    showLabels?: boolean;
+}
+export declare const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>;

package/lib/presentation/components/PasswordStrengthIndicator.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+const RequirementDot = ({ label, isValid, successColor, pendingColor, }) => {
+    const color = isValid ? successColor : pendingColor;
+    return (_jsxs(View, { style: styles.requirement, children: [_jsx(View, { style: [styles.dot, { backgroundColor: color }] }), _jsx(Text, { style: [styles.label, { color }], children: label })] }));
+};
+export const PasswordStrengthIndicator = ({ requirements, showLabels = true }) => {
+    const tokens = useAppDesignTokens();
+    const successColor = tokens.colors.success;
+    const pendingColor = tokens.colors.textTertiary;
+    const items = [
+        { key: "minLength", label: "8+", isValid: requirements.hasMinLength },
+        { key: "uppercase", label: "A-Z", isValid: requirements.hasUppercase },
+        { key: "lowercase", label: "a-z", isValid: requirements.hasLowercase },
+        { key: "number", label: "0-9", isValid: requirements.hasNumber },
+        { key: "special", label: "!@#", isValid: requirements.hasSpecialChar },
+    ];
+    if (!showLabels) {
+        return (_jsx(View, { style: styles.dotsOnly, children: items.map((item) => (_jsx(View, { style: [
+                    styles.dotOnly,
+                    {
+                        backgroundColor: item.isValid ? successColor : pendingColor,
+                    },
+                ] }, item.key))) }));
+    }
+    return (_jsx(View, { style: styles.container, children: items.map((item) => (_jsx(RequirementDot, { label: item.label, isValid: item.isValid, successColor: successColor, pendingColor: pendingColor }, item.key))) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 12,
+        marginTop: 8,
+    },
+    dotsOnly: {
+        flexDirection: "row",
+        gap: 6,
+        marginTop: 8,
+    },
+    requirement: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    dotOnly: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    label: {
+        fontSize: 11,
+        fontWeight: "500",
+    },
+});

package/lib/presentation/components/RegisterForm.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Register Form Component
+ * Single Responsibility: Render register form UI
+ */
+import React from "react";
+interface RegisterFormProps {
+    onNavigateToLogin: () => void;
+    termsUrl?: string;
+    privacyUrl?: string;
+    onTermsPress?: () => void;
+    onPrivacyPress?: () => void;
+}
+export declare const RegisterForm: React.FC<RegisterFormProps>;
+export {};

package/lib/presentation/components/RegisterForm.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system-atoms";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useRegisterForm } from "../hooks/useRegisterForm";
+import { AuthErrorDisplay } from "./AuthErrorDisplay";
+import { AuthLink } from "./AuthLink";
+import { AuthLegalLinks } from "./AuthLegalLinks";
+import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
+import { PasswordMatchIndicator } from "./PasswordMatchIndicator";
+export const RegisterForm = ({ onNavigateToLogin, termsUrl, privacyUrl, onTermsPress, onPrivacyPress, }) => {
+    const { t } = useLocalization();
+    const { displayName, email, password, confirmPassword, fieldErrors, loading, passwordRequirements, passwordsMatch, handleDisplayNameChange, handleEmailChange, handlePasswordChange, handleConfirmPasswordChange, handleSignUp, displayError, } = useRegisterForm();
+    return (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.inputContainer, children: _jsx(AtomicInput, { label: t("auth.displayName") || "Full Name", value: displayName, onChangeText: handleDisplayNameChange, placeholder: t("auth.displayNamePlaceholder") || "Enter your full name", autoCapitalize: "words", disabled: loading, state: fieldErrors.displayName ? "error" : "default", helperText: fieldErrors.displayName || undefined }) }), _jsx(View, { style: styles.inputContainer, children: _jsx(AtomicInput, { label: t("auth.email"), value: email, onChangeText: handleEmailChange, placeholder: t("auth.emailPlaceholder"), keyboardType: "email-address", autoCapitalize: "none", disabled: loading, state: fieldErrors.email ? "error" : "default", helperText: fieldErrors.email || undefined }) }), _jsxs(View, { style: styles.inputContainer, children: [_jsx(AtomicInput, { label: t("auth.password"), value: password, onChangeText: handlePasswordChange, placeholder: t("auth.passwordPlaceholder"), secureTextEntry: true, autoCapitalize: "none", disabled: loading, state: fieldErrors.password ? "error" : "default", helperText: fieldErrors.password || undefined }), password.length > 0 && (_jsx(PasswordStrengthIndicator, { requirements: passwordRequirements }))] }), _jsxs(View, { style: styles.inputContainer, children: [_jsx(AtomicInput, { label: t("auth.confirmPassword") || "Confirm Password", value: confirmPassword, onChangeText: handleConfirmPasswordChange, placeholder: t("auth.confirmPasswordPlaceholder") || "Confirm your password", secureTextEntry: true, autoCapitalize: "none", disabled: loading, state: fieldErrors.confirmPassword ? "error" : "default", helperText: fieldErrors.confirmPassword || undefined }), confirmPassword.length > 0 && (_jsx(PasswordMatchIndicator, { isMatch: passwordsMatch }))] }), _jsx(AuthErrorDisplay, { error: displayError }), _jsx(View, { style: styles.buttonContainer, children: _jsx(AtomicButton, { variant: "primary", onPress: handleSignUp, disabled: loading ||
+                        !email.trim() ||
+                        !password.trim() ||
+                        !confirmPassword.trim(), fullWidth: true, style: styles.signUpButton, children: t("auth.signUp") }) }), _jsx(AuthLink, { text: t("auth.alreadyHaveAccount"), linkText: t("auth.signIn"), onPress: onNavigateToLogin, disabled: loading }), _jsx(AuthLegalLinks, { termsUrl: termsUrl, privacyUrl: privacyUrl, onTermsPress: onTermsPress, onPrivacyPress: onPrivacyPress, prefixText: t("auth.bySigningUp") || "By signing up, you agree to our" })] }));
+};
+const styles = StyleSheet.create({
+    inputContainer: {
+        marginBottom: 20,
+    },
+    buttonContainer: {
+        marginBottom: 16,
+        marginTop: 8,
+    },
+    signUpButton: {
+        minHeight: 52,
+    },
+});

package/lib/presentation/hooks/useAuth.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useAuth Hook
+ * React hook for authentication state management
+ *
+ * Uses provider-agnostic AuthUser type.
+ * Adds app-specific state (guest mode, error handling) on top of provider auth.
+ */
+import type { AuthUser } from "../../domain/entities/AuthUser";
+export interface UseAuthResult {
+    /** Current authenticated user */
+    user: AuthUser | null;
+    /** Whether auth state is loading */
+    loading: boolean;
+    /** Whether user is in guest mode */
+    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 */
+    signIn: (email: string, password: string) => Promise<void>;
+    /** Sign out function */
+    signOut: () => Promise<void>;
+    /** Continue as guest function */
+    continueAsGuest: () => Promise<void>;
+    /** Set error manually (for form validation, etc.) */
+    setError: (error: string | null) => void;
+}
+/**
+ * Hook for authentication state management
+ *
+ * Uses Firebase Auth's built-in state management and adds app-specific features:
+ * - Guest mode support
+ * - Error handling
+ * - Loading states
+ *
+ * @example
+ * ```typescript
+ * const { user, isAuthenticated, signIn, signUp, signOut } = useAuth();
+ * ```
+ */
+export declare function useAuth(): UseAuthResult;

package/lib/presentation/hooks/useAuth.js

@@ -0,0 +1,38 @@
+/**
+ * useAuth Hook
+ * React hook for authentication state management
+ *
+ * Uses provider-agnostic AuthUser type.
+ * Adds app-specific state (guest mode, error handling) on top of provider auth.
+ */
+import { useAuthState } from "./useAuthState";
+import { useAuthActions } from "./useAuthActions";
+/**
+ * Hook for authentication state management
+ *
+ * Uses Firebase Auth's built-in state management and adds app-specific features:
+ * - Guest mode support
+ * - Error handling
+ * - Loading states
+ *
+ * @example
+ * ```typescript
+ * const { user, isAuthenticated, signIn, signUp, signOut } = useAuth();
+ * ```
+ */
+export function useAuth() {
+    const state = useAuthState();
+    const actions = useAuthActions(state);
+    return {
+        user: state.user,
+        loading: state.loading,
+        isGuest: state.isGuest,
+        isAuthenticated: state.isAuthenticated,
+        error: state.error,
+        signUp: actions.signUp,
+        signIn: actions.signIn,
+        signOut: actions.signOut,
+        continueAsGuest: actions.continueAsGuest,
+        setError: state.setError,
+    };
+}

package/lib/presentation/hooks/useAuthActions.d.ts

@@ -0,0 +1,15 @@
+/**
+ * useAuthActions Hook
+ * Single Responsibility: Handle authentication actions
+ */
+import type { UseAuthStateResult } from "./useAuthState";
+export interface UseAuthActionsResult {
+    signUp: (email: string, password: string, displayName?: string) => Promise<void>;
+    signIn: (email: string, password: string) => Promise<void>;
+    signOut: () => Promise<void>;
+    continueAsGuest: () => Promise<void>;
+}
+/**
+ * Hook for authentication actions
+ */
+export declare function useAuthActions(state: UseAuthStateResult): UseAuthActionsResult;