@truworth/twc-auth 3.0.7 → 3.0.9

package/build/src/screens/EnterMobile/index.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Form, ResponsiveModal, TextInput, Typography, useForm } from '@truworth/twc-web-design';
+import { ScreenLayout } from "../../components/ScreenLayout";
+import { useEnterMobile } from "./hooks/internal/useEnterMobile";
+import { CountryCodeDropdown } from '../CountryCode/components/CountryCodeDropdown';
+import { useNavigator } from '../../hooks/useNavigator';
+import { useState } from 'react';
+import { ExistingAccountsSheet } from './components/ExistingAccountsSheet';
+import LoginWithMobileOTP from '../LoginWithMobileOTP';
+import VerifyLinkPrimaryAccountEmailOTP from '../VerifyLinkPrimaryAccountEmailOTP';
+import VerifyLinkPrimaryAccountMobileOTP from '../VerifyLinkPrimaryAccountMobileOTP';
+import { RegistrationMethod } from '../../enums';
+const EnterMobile = ({ onPressBack }) => {
+    const [showLoginWithMobileOTPModal, setShowLoginWithMobileOTPModal] = useState(false);
+    const [showVerifyLinkPrimaryEmailModal, setShowVerifyLinkPrimaryEmailModal] = useState(false);
+    const [showVerifyLinkPrimaryMobileModal, setShowVerifyLinkPrimaryMobileModal] = useState(false);
+    const [email, setEmail] = useState('');
+    const [memberId, setMemberId] = useState('');
+    const [sessionToken, setSessionToken] = useState('');
+    const [selectedCountry, setSelectedCountry] = useState({
+        countryCode: "in",
+        phoneCode: "91",
+        name: "INDIA",
+    });
+    const form = useForm();
+    const navigator = useNavigator();
+    const { loading, phone, isValidPhone, countryCode, setCountryCode, existingAccounts, showExistingAccountsSheet, setShowExistingAccountsSheet, handleValidatePhone, handleEnterMobile, } = useEnterMobile();
+    const handleSubmit = () => {
+        handleValidatePhone({
+            onValidate: ({ mobileExist, memberId }) => {
+                if (mobileExist && memberId) {
+                    setMemberId(memberId);
+                    setShowLoginWithMobileOTPModal(true);
+                }
+                else {
+                    navigator.pushAbsolute('/registration', {
+                        query: { phone, registrationMethod: RegistrationMethod.MOBILE }
+                    });
+                }
+            }
+        });
+    };
+    return (_jsxs(ScreenLayout, { title: "Enter Your Mobile Number", buttonProps: {
+            loading,
+            label: 'Continue',
+            onClick: handleSubmit,
+            disabled: !isValidPhone,
+        }, onPressBack: onPressBack, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: handleSubmit, children: _jsx(Form.Item, { label: "Mobile Number", className: "my-6", rules: [
+                        {
+                            required: true,
+                            message: 'Please enter your mobile number'
+                        }
+                    ], ...form.register("phone", {
+                        onChange: (e) => handleEnterMobile(e.target.value)
+                    }), children: _jsx(Flex, { className: "border border-gray-400 rounded-md", children: _jsx(TextInput, { type: "tel", value: phone, placeholder: "Mobile number", maxLength: countryCode === "91" ? 10 : 14, className: "py-4 border-0 md:text-base", addonBefore: _jsx(CountryCodeDropdown, { selectedCountry: selectedCountry, handleSelect: (country) => {
+                                    setCountryCode(country.phoneCode);
+                                    setSelectedCountry(country);
+                                } }) }) }) }) }), showLoginWithMobileOTPModal &&
+                _jsx(LoginWithMobileOTPModal, { memberId: memberId, phone: phone, show: showLoginWithMobileOTPModal, hide: () => setShowLoginWithMobileOTPModal(false) }), showExistingAccountsSheet &&
+                _jsx(ExistingAccountsSheet, { phone: phone, visible: showExistingAccountsSheet, existingAccounts: existingAccounts, onInitiateAccountLinking: ({ sessionToken, email }) => {
+                        setSessionToken(sessionToken);
+                        setEmail(email);
+                        setShowExistingAccountsSheet(false);
+                        setShowVerifyLinkPrimaryEmailModal(true);
+                    }, hide: () => setShowExistingAccountsSheet(false) }), showVerifyLinkPrimaryEmailModal &&
+                _jsx(VerifyLinkPrimaryAccountEmailOTPModal, { email: email, sessionToken: sessionToken, show: showVerifyLinkPrimaryEmailModal, hide: () => setShowVerifyLinkPrimaryEmailModal(false), onVerifiedOTP: ({ sessionToken }) => {
+                        setSessionToken(sessionToken);
+                        setShowVerifyLinkPrimaryEmailModal(false);
+                        setShowVerifyLinkPrimaryMobileModal(true);
+                    } }), showVerifyLinkPrimaryMobileModal &&
+                _jsx(VerifyLinkPrimaryAccountMobileOTPModal, { phone: phone, sessionToken: sessionToken, show: showVerifyLinkPrimaryMobileModal, hide: () => setShowVerifyLinkPrimaryMobileModal(false) })] }));
+};
+const VerifyLinkPrimaryAccountEmailOTPModal = ({ show, hide, email, sessionToken, onVerifiedOTP }) => {
+    return (_jsx(ResponsiveModal, { title: "Verify Email", open: show, onClose: hide, maskClosable: false, showCloseButton: false, size: 'sm', children: _jsx(VerifyLinkPrimaryAccountEmailOTP, { email: email, sessionToken: sessionToken, onVerifiedOTP: onVerifiedOTP }) }));
+};
+const VerifyLinkPrimaryAccountMobileOTPModal = ({ show, hide, phone, sessionToken }) => {
+    return (_jsx(ResponsiveModal, { title: "Verify Mobile Number", open: show, onClose: hide, maskClosable: false, showCloseButton: false, size: 'sm', children: _jsx(VerifyLinkPrimaryAccountMobileOTP, { phone: phone, sessionToken: sessionToken }) }));
+};
+const LoginWithMobileOTPModal = ({ show, hide, memberId, phone }) => {
+    return (_jsx(ResponsiveModal, { open: show, onClose: hide, title: _jsx(Typography, { type: "heading", size: "h6", className: "text-center mb-0", children: "Verify Mobile Number" }), showCloseButton: false, maskClosable: false, size: 'sm', children: _jsx(LoginWithMobileOTP, { phone: phone, memberId: memberId }) }));
+};
+export default EnterMobile;

package/build/src/screens/EnterMobile/index.native.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRoute } from '@react-navigation/native';
+import { Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Colors } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { useEffect } from 'react';
+import IonIcons from 'react-native-vector-icons/Ionicons';
+import { ScreenLayout } from '../../components/ScreenLayout';
+import { useEnterMobile } from './hooks/internal/useEnterMobile';
+import { ExistingAccountsSheet } from './components/ExistingAccountsSheet/index.native';
+const { gray, primary } = Colors;
+const EnterMobile = ({ navigation }) => {
+    const route = useRoute();
+    const { loading, phone, isValidPhone, countryCode, setCountryCode, existingAccounts, showExistingAccountsSheet, setShowExistingAccountsSheet, handleValidatePhone, handleEnterMobile, handleClearPhoneInput } = useEnterMobile();
+    useEffect(() => {
+        if (route.params?.countryCode) {
+            setCountryCode(route.params?.countryCode);
+        }
+    }, [route.params?.countryCode]);
+    const changeCountryCode = () => {
+        navigation.navigate('CountryCode', { prevRoute: 'EnterMobile' });
+    };
+    const handleSubmit = () => {
+        Keyboard.dismiss();
+        handleValidatePhone({
+            onValidate: ({ mobileExist, memberId }) => {
+                if (mobileExist && memberId) {
+                    navigation.navigate('LoginWithMobileOTP', {
+                        phone,
+                        memberId
+                    });
+                }
+                else {
+                    navigation.navigate('SignUp', { phone });
+                }
+            }
+        });
+    };
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(ScreenLayout, { title: "Enter Your Mobile Number", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onPress: handleSubmit,
+                    disabled: !isValidPhone,
+                }, children: _jsxs(View, { style: {
+                        flexDirection: 'row', alignItems: 'center',
+                        borderWidth: 1, borderRadius: 8,
+                        paddingHorizontal: 12, height: 56,
+                        backgroundColor: primary.white, marginTop: 4,
+                    }, children: [_jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: changeCountryCode, style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { style: { fontSize: 14, color: primary.black, fontWeight: '500' }, children: `+${countryCode}` }), _jsx(IonIcons, { name: 'caret-down', size: 14, color: gray.gray_900 })] }), _jsx(TextInput, { style: {
+                                flex: 1, fontSize: 14, fontWeight: '500',
+                                color: primary.black, marginLeft: 2,
+                            }, onChangeText: text => handleEnterMobile(text), value: phone, keyboardType: "numeric", maxLength: countryCode === '91' ? 10 : 14, autoFocus: true }), phone.length > 0 &&
+                            _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearPhoneInput, children: _jsx(IonIcons, { name: 'close', size: 24, color: gray.gray_900 }) })] }) }), showExistingAccountsSheet &&
+                _jsx(ExistingAccountsSheet, { phone: phone, visible: showExistingAccountsSheet, existingAccounts: existingAccounts, hide: () => setShowExistingAccountsSheet(false) })] }));
+};
+export default EnterMobile;

package/build/src/screens/EnterMobile/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/screens/EnterPassword/hooks/internal/useEnterPassword.js

@@ -0,0 +1,79 @@
+import { useState, useCallback, useMemo } from "react";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+import { showMessage } from "../../../../helpers/show-message";
+/**
+ * @internal
+ * Hook for managing Enter Password screen logic and authentication integration.
+ */
+const useEnterPassword = () => {
+    const [password, setPassword] = useState("");
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [invalidPassword, setInvalidPassword] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { onTokenChange, onLogin, appConfig } = useAuthPackageContext();
+    const togglePasswordVisibility = useCallback(() => {
+        setIsPasswordVisible((prev) => !prev);
+    }, []);
+    const handlePasswordChange = useCallback((value) => {
+        setInvalidPassword(false);
+        setPassword(value);
+    }, []);
+    const handleSubmit = useCallback(async ({ email, source, verifyEmailOTP }) => {
+        setLoading(true);
+        try {
+            const response = await axiosClient.post("/auth/login/v2", {
+                email,
+                password,
+                source,
+            });
+            // Check if MFA is enabled
+            if (response.data.mfaEnabled && response.data.sessionToken) {
+                // Navigate to LoginWithEmailOTP screen with sessionToken
+                if (verifyEmailOTP) {
+                    verifyEmailOTP({
+                        mfaEnabled: response.data.mfaEnabled,
+                        sessionToken: response.data.sessionToken
+                    });
+                }
+                setLoading(false);
+                return;
+            }
+            // Normal login flow (no MFA)
+            if (response.data.token) {
+                onTokenChange(response.data.token);
+                onLogin(response.data);
+            }
+        }
+        catch (error) {
+            const errorMessage = error?.response?.data?.errors?.[0]?.message;
+            if (error?.response?.status === 400) {
+                setInvalidPassword(true);
+                if (source === 'web') {
+                    showMessage({ message: errorMessage ?? 'Email and password do not match!' });
+                }
+                return;
+            }
+            showMessage({ message: errorMessage ?? 'Something went wrong. Please try again.' });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [password, onTokenChange, onLogin]);
+    const isDisabled = useMemo(() => {
+        return password?.length === 0 || loading;
+    }, [password, loading]);
+    return {
+        loading,
+        password,
+        setPassword,
+        isPasswordVisible,
+        togglePasswordVisibility,
+        handleSubmit,
+        isDisabled,
+        handlePasswordChange,
+        appName: appConfig.appName,
+        invalidPassword
+    };
+};
+export { useEnterPassword };

package/build/src/screens/EnterPassword/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex, Form, PasswordInput, ResponsiveModal, Typography, useForm } from '@truworth/twc-web-design';
+import { ScreenLayout } from "../../components/ScreenLayout";
+import { useEnterPassword } from './hooks/internal/useEnterPassword';
+import { SupportDetails } from '../../components/SupportDetails';
+import LoginWithEmailOTP from '../LoginWithEmailOTP';
+import VerifyResetPasswordOTP from '../VerifyResetPasswordOTP';
+const EnterPassword = ({ email, onPressBack, onVerifiedResetPasswordOTP }) => {
+    const [showResetPasswordOTPModal, setShowResetPasswordOTPModal] = useState(false);
+    const [showLoginWithEmailOTPModal, setShowLoginWithEmailOTPModal] = useState(false);
+    const [mfaSessionToken, setMfaSessionToken] = useState(undefined);
+    const [mfaEnabled, setMfaEnabled] = useState(false);
+    const { loading, password, handlePasswordChange, handleSubmit, appName } = useEnterPassword();
+    const form = useForm({ defaultValues: { password } });
+    return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onClick: () => {
+                        if (email)
+                            handleSubmit({
+                                email,
+                                source: 'web',
+                                verifyEmailOTP: ({ mfaEnabled, sessionToken }) => {
+                                    setMfaSessionToken(sessionToken);
+                                    setMfaEnabled(mfaEnabled);
+                                    setShowLoginWithEmailOTPModal(true);
+                                }
+                            });
+                    },
+                    disabled: !password || !email || loading,
+                }, onPressBack: onPressBack, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: () => {
+                            if (email)
+                                handleSubmit({
+                                    email,
+                                    source: 'web',
+                                    verifyEmailOTP: ({ mfaEnabled, sessionToken }) => {
+                                        setMfaSessionToken(sessionToken);
+                                        setMfaEnabled(mfaEnabled);
+                                        setShowLoginWithEmailOTPModal(true);
+                                    }
+                                });
+                        }, children: _jsx(Form.Item, { name: "password", label: "Password", children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 border-gray-300`, ...form.register('password', {
+                                    onChange: (e) => {
+                                        handlePasswordChange(e.target.value);
+                                    }
+                                }) }) }) }), _jsx(Button, { type: "button", size: 'small', variant: 'link', label: "Forgot Password?", className: "px-0 h-auto ml-auto block mt-4", onClick: () => setShowResetPasswordOTPModal(true) })] }), _jsxs(Flex, { align: "center", className: "mt-6 mb-6", children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300" }), _jsx(Typography, { type: 'body', size: 'small', className: "text-gray-500 px-4", children: "OR" }), _jsx(Flex, { className: "flex-1 border-t border-gray-300" })] }), _jsx(Button, { label: 'Sign In with Email OTP', variant: 'secondary', className: 'flex-none', isFullWidth: true, type: "button", onClick: () => {
+                    setMfaSessionToken(undefined);
+                    setMfaEnabled(false);
+                    setShowLoginWithEmailOTPModal(true);
+                } }), _jsx(SupportDetails, {}), showResetPasswordOTPModal &&
+                _jsx(VerifyResetPasswordOTPModal, { email: email, show: showResetPasswordOTPModal, hide: () => setShowResetPasswordOTPModal(false), onVerifiedOTP: (sessionToken) => {
+                        setShowResetPasswordOTPModal(false);
+                        onVerifiedResetPasswordOTP(sessionToken);
+                    } }), showLoginWithEmailOTPModal &&
+                _jsx(LoginWithEmailOTPModal, { email: email, password: password, sessionToken: mfaSessionToken, mfaEnabled: mfaEnabled, show: showLoginWithEmailOTPModal, hide: () => {
+                        setShowLoginWithEmailOTPModal(false);
+                        setMfaSessionToken(undefined);
+                        setMfaEnabled(false);
+                    } })] }));
+};
+const LoginWithEmailOTPModal = ({ show, hide, email, password, sessionToken, mfaEnabled }) => {
+    return (_jsx(ResponsiveModal, { open: show, onClose: hide, title: _jsx(Typography, { type: "heading", size: "h6", className: "text-center mb-0", children: "Verify Your Email" }), showCloseButton: false, maskClosable: false, size: 'sm', children: _jsx(LoginWithEmailOTP, { email: email, password: password, sessionToken: sessionToken, mfaEnabled: mfaEnabled }) }));
+};
+const VerifyResetPasswordOTPModal = ({ show, hide, email, onVerifiedOTP }) => {
+    return (_jsx(ResponsiveModal, { title: "Reset Your Password", open: show, onClose: hide, maskClosable: false, showCloseButton: false, size: 'sm', children: _jsx(VerifyResetPasswordOTP, { email: email, onVerifiedOTP: onVerifiedOTP }) }));
+};
+export default EnterPassword;

package/build/src/screens/EnterPassword/index.native.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
+import { RoundedButton, TextInputField, Colors } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { ScreenLayout } from '../../components/ScreenLayout/index.native';
+import { useEnterPassword } from './hooks/internal/useEnterPassword';
+const { primary } = Colors;
+const EnterPassword = ({ navigation, route }) => {
+    const { email } = route.params;
+    const { loading, password, isPasswordVisible, togglePasswordVisibility, handlePasswordChange, isDisabled, handleSubmit, invalidPassword } = useEnterPassword();
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: primary.white }, children: [_jsxs(ScreenLayout, { title: "Enter Your Password", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onPress: () => {
+                        if (email)
+                            handleSubmit({
+                                email,
+                                source: Platform.OS,
+                                verifyEmailOTP: ({ mfaEnabled, sessionToken }) => {
+                                    navigation.navigate('LoginWithEmailOTP', { email, password, mfaEnabled, sessionToken });
+                                }
+                            });
+                    },
+                    disabled: isDisabled,
+                }, children: [_jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: handlePasswordChange, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible ? 'eye-outline' : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
+                                show: invalidPassword,
+                                message: 'Email and password do not match!'
+                            }, autoFocus: true }) }), _jsx(TouchableOpacity, { activeOpacity: 0.8, style: { marginTop: 10, alignSelf: 'flex-end' }, onPress: () => navigation.navigate('VerifyResetPasswordOTP', { email }), children: _jsx(Text, { style: {
+                                fontSize: 12, fontWeight: '600',
+                                color: primary.primary_main, lineHeight: 20,
+                            }, children: "Forgot Password?" }) })] }), _jsxs(View, { style: { paddingHorizontal: 16 }, children: [_jsxs(View, { style: {
+                            flexDirection: 'row', justifyContent: 'center',
+                            alignItems: 'center', marginBottom: 14, marginTop: 14,
+                        }, children: [_jsx(View, { style: { width: 12, height: 1, backgroundColor: '#7F7F7F' } }), _jsx(Text, { style: {
+                                    fontSize: 12, fontWeight: '600', color: '#7F7F7F',
+                                    lineHeight: 20, textAlign: 'center',
+                                    marginHorizontal: 6,
+                                }, children: "OR" }), _jsx(View, { style: { width: 12, height: 1, backgroundColor: '#7F7F7F' } })] }), email &&
+                        _jsx(RoundedButton, { type: "text", size: "medium", label: "Sign In with Email OTP", onPress: () => navigation.navigate('LoginWithEmailOTP', { email }) })] })] }));
+};
+export default EnterPassword;

package/build/src/screens/EnterPassword/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/screens/Login/components/LoginWebComponent/index.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Flex } from '@truworth/twc-web-design';
+import { AdvancedTransitionWrapper } from '../../../../components/AdvancedTransitionWrapper';
+import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
+import { useNavigator } from '../../../../hooks/useNavigator';
+import EnterEmail from '../../../EnterEmail/index';
+import EnterPassword from '../../../EnterPassword/index';
+import ResetPassword from '../../../ResetPassword/index';
+import SSOSearchOrganization from '../../../SSOLogin/SearchOrganization/index';
+import SSOAuthenticationMethods from '../../../SSOLogin/AuthenticationMethods/index';
+import EnterMobile from '../../../../screens/EnterMobile/index';
+const LoginWebComponent = () => {
+    const [email, setEmail] = useState('');
+    const [loginState, setLoginState] = useState('EnterEmail');
+    const [sessionToken, setSessionToken] = useState('');
+    const [selectedClient, setSelectedClient] = useState(null);
+    const { LogoComponent } = useAuthPackageContext();
+    const navigator = useNavigator();
+    const onRedirectToPassword = (email) => {
+        setEmail(email);
+        setLoginState('EnterPassword');
+    };
+    const onRedirectToSignUp = (email) => {
+        navigator.pushAbsolute('/registration', {
+            query: { email, registrationMethod: 'email' }
+        });
+    };
+    const renderStep = () => {
+        switch (loginState) {
+            case 'EnterEmail':
+                return (_jsx(EnterEmail, { onContinue: (params) => {
+                        if (params.emailExist) {
+                            onRedirectToPassword(params.email);
+                        }
+                        else {
+                            onRedirectToSignUp(params.email);
+                        }
+                    }, onPressSignInWithSSO: () => setLoginState('SSOSearchOrganization') }));
+            case 'EnterPassword':
+                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail'), onVerifiedResetPasswordOTP: ({ sessionToken }) => {
+                        setSessionToken(sessionToken);
+                        setLoginState('ResetPassword');
+                    } }));
+            case 'ResetPassword':
+                return (_jsx(ResetPassword, { email: email, sessionToken: sessionToken, onContinue: () => setLoginState('EnterEmail'), onPressBack: () => setLoginState('EnterPassword') }));
+            case 'SSOSearchOrganization':
+                return (_jsx(SSOSearchOrganization, { onPressBack: () => setLoginState('EnterEmail'), onContinue: (client) => {
+                        setSelectedClient(client);
+                        setLoginState('SSOAuthenticationMethods');
+                    } }));
+            case 'SSOAuthenticationMethods':
+                return selectedClient && (_jsx(SSOAuthenticationMethods, { client: selectedClient, onPressBack: () => setLoginState('EnterEmail'), handleMobileLogin: () => setLoginState('EnterMobile') }));
+            case 'EnterMobile':
+                return (_jsx(EnterMobile, { onPressBack: () => setLoginState('SSOAuthenticationMethods') }));
+            default:
+                return null;
+        }
+    };
+    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsxs(Flex, { direction: 'column', justify: 'center', className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: [React.isValidElement(LogoComponent)
+                    && LogoComponent, renderStep()] }) }));
+};
+export { LoginWebComponent };

package/build/src/screens/Login/components/LoginWebComponent/index.native.js

@@ -0,0 +1,6 @@
+const LoginWebComponent = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] LoginWebComponent is web-only");
+    return null;
+};
+export { LoginWebComponent };

package/build/src/screens/Login/index.js

@@ -0,0 +1,10 @@
+'use client';
+const Login = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] We use only LoginWebComponent for login");
+        }
+    }
+    return null;
+};
+export default Login;

package/build/src/screens/Login/index.native.js

@@ -0,0 +1,6 @@
+const Login = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] we use only LoginWebComponent for login");
+    return null;
+};
+export default Login;

package/build/src/screens/LoginWithEmailOTP/hooks/internal/useLoginWithEmailOTP.js

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { showMessage } from "../../../../helpers/show-message";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+/**
+ * @internal
+ * Hook for handling Email OTP Login flow.
+ */
+const useLoginWithEmailOTP = ({ email, password, source, sessionToken, mfaEnabled }) => {
+    const [resendOTPCounter, setResendOTPCounter] = useState(0);
+    const [status, setStatus] = useState("idle");
+    const sessionTokenRef = useRef(sessionToken || "");
+    const { onLogin, onTokenChange } = useAuthPackageContext();
+    /**
+     * Sends an OTP to the provided email.
+     */
+    const sendOtp = useCallback(() => {
+        setStatus("loading");
+        const payload = { email, source };
+        if (password && mfaEnabled) {
+            payload.password = password;
+        }
+        axiosClient({
+            url: mfaEnabled ? '/auth/login/v2' : '/auth/login/email',
+            method: 'POST',
+            data: payload
+        }).then((res) => {
+            setResendOTPCounter(prevCounter => prevCounter + 1);
+            sessionTokenRef.current = res.data.sessionToken;
+        }).catch((error) => {
+            console.log('Failed to send OTP:', error);
+            const message = error?.response?.data?.errors?.[0]?.message || "Failed to send OTP. Please try again.";
+            showMessage({ message });
+        }).finally(() => setStatus("idle"));
+    }, [email, source, password, mfaEnabled]);
+    /**
+     * Verifies the entered OTP and logs the user in.
+     */
+    const verifyOtp = useCallback((otp) => {
+        setStatus("loading");
+        axiosClient({
+            url: '/auth/login/email/verify-otp',
+            method: 'POST',
+            data: { otp, sessionToken: sessionTokenRef.current },
+        }).then((res) => {
+            setStatus('valid');
+            const { token, member } = res.data;
+            onTokenChange(token);
+            onLogin({ token, member });
+        }).catch((error) => {
+            const errorCode = error?.response?.status;
+            const isInvalidOtp = errorCode === 400;
+            const message = error?.response?.data?.errors?.[0]?.message ||
+                (isInvalidOtp
+                    ? "Invalid OTP. Please try again."
+                    : "Verification failed. Please try again.");
+            showMessage({ message });
+            setStatus(isInvalidOtp ? "invalid" : "idle");
+            if (isInvalidOtp) {
+                const timeoutId = setTimeout(() => setStatus("idle"), 5000);
+                return () => clearTimeout(timeoutId);
+            }
+        });
+    }, [onLogin, onTokenChange]);
+    /**
+     * Automatically sends OTP when email and source are provided.
+     * Skip if mfaEnabled & sessionToken is already provided (from MFA flow).
+     */
+    useEffect(() => {
+        if (email && source && !mfaEnabled) {
+            sendOtp();
+        }
+        else if (mfaEnabled && sessionToken) {
+            // If sessionToken is provided, we already have a session, just initialize
+            sessionTokenRef.current = sessionToken;
+        }
+    }, [email, source, sessionToken, sendOtp]);
+    return {
+        sendOtp,
+        verifyOtp,
+        resendOTPCounter,
+        status,
+    };
+};
+export { useLoginWithEmailOTP };

package/build/src/screens/LoginWithEmailOTP/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLoginWithEmailOTP } from "./hooks/internal/useLoginWithEmailOTP";
+import { VerifyEmailOTP } from "../../components/VerifyEmailOTP";
+const LoginWithEmailOTP = ({ email, password, sessionToken, mfaEnabled }) => {
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, password, source: 'web', sessionToken, mfaEnabled });
+    return (_jsx(VerifyEmailOTP, { email: email, validateOTP: verifyOtp, resendOTP: sendOtp, status: status, resendOTPCounter: resendOTPCounter }));
+};
+export default LoginWithEmailOTP;

package/build/src/screens/LoginWithEmailOTP/index.native.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { VerifyEmailOTP } from '../../components/VerifyEmailOTP';
+import { useLoginWithEmailOTP } from './hooks/internal/useLoginWithEmailOTP';
+const LoginWithEmailOTP = ({ route }) => {
+    const { email, sessionToken, mfaEnabled, password } = route.params;
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, password, source: Platform.OS, sessionToken, mfaEnabled });
+    return (_jsx(VerifyEmailOTP, { email: email, status: status, validateOTP: verifyOtp, resendOTP: sendOtp, resendOTPCounter: resendOTPCounter }));
+};
+export default LoginWithEmailOTP;

package/build/src/screens/LoginWithMobileOTP/hooks/internal/useLoginWithMobileOTP.js

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from "react";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+import { useInterval } from "../../../../hooks/internal/useTimer";
+import { showMessage } from "../../../../helpers/show-message";
+const useLoginWithMobileOTP = ({ phone, source, memberId }) => {
+    const [timer, setTimer] = useState(180);
+    const [status, setStatus] = useState('timer');
+    const [sessionToken, setSessionToken] = useState('');
+    const { onLogin, onTokenChange } = useAuthPackageContext();
+    useInterval(() => {
+        if (!timer) {
+            return;
+        }
+        setTimer(timer - 1);
+    }, 1000);
+    const sendOtp = useCallback(() => {
+        setStatus('loading');
+        axiosClient({
+            url: '/auth/login/mobile/v2',
+            method: 'POST',
+            data: { phone, source, memberId },
+        }).then((res) => {
+            setSessionToken(res.data.sessionToken);
+            setStatus('timer');
+            setTimer(180);
+        }).catch((err) => {
+            console.log(err);
+            showMessage({ message: err.response.data.errors[0].message || "Verification failed" });
+        });
+    }, [phone, source, memberId]);
+    const verifyOtp = useCallback((otp) => {
+        if (!sessionToken) {
+            showMessage({ message: "Session expired. Please resend OTP." });
+            return;
+        }
+        setStatus('loading');
+        axiosClient({
+            url: '/auth/login/mobile/v2/verify-otp',
+            method: 'POST',
+            data: { otp, sessionToken },
+        }).then((res) => {
+            setStatus('valid');
+            const { token, member } = res.data;
+            onTokenChange(token);
+            onLogin({ token, member });
+        }).catch((error) => {
+            const errorCode = error?.response?.status;
+            const isInvalidOtp = errorCode === 400;
+            const message = error?.response?.data?.errors?.[0]?.message ||
+                (isInvalidOtp
+                    ? "Invalid OTP. Please try again."
+                    : "Verification failed. Please try again.");
+            showMessage({ message });
+            setStatus(isInvalidOtp ? "invalid" : "idle");
+            if (isInvalidOtp)
+                setTimeout(() => setStatus("idle"), 5000);
+        });
+    }, [sessionToken]);
+    useEffect(() => {
+        if (memberId && phone && source) {
+            sendOtp();
+        }
+    }, [memberId, phone, source, sendOtp]);
+    return {
+        timer,
+        status,
+        verifyOtp,
+        sendOtp,
+    };
+};
+export { useLoginWithMobileOTP };

package/build/src/screens/LoginWithMobileOTP/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VerifyMobileOTP } from '../../components/VerifyMobileOTP';
+import { useLoginWithMobileOTP } from './hooks/internal/useLoginWithMobileOTP';
+const LoginWithMobileOTP = ({ phone, memberId }) => {
+    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, memberId, source: 'web' });
+    return (_jsx(VerifyMobileOTP, { timer: timer, phone: phone, status: status, validateOTP: verifyOtp, resendOTP: sendOtp }));
+};
+export default LoginWithMobileOTP;

package/build/src/screens/LoginWithMobileOTP/index.native.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VerifyMobileOTP } from '../../components/VerifyMobileOTP';
+import { useLoginWithMobileOTP } from './hooks/internal/useLoginWithMobileOTP';
+import { Platform } from 'react-native';
+const LoginWithMobileOTP = ({ route }) => {
+    const { phone, memberId } = route.params;
+    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, memberId, source: Platform.OS });
+    return (_jsx(VerifyMobileOTP, { timer: timer, phone: phone, status: status, validateOTP: verifyOtp, resendOTP: sendOtp }));
+};
+export default LoginWithMobileOTP;