@truworth/twc-auth 1.2.1 → 1.2.3

package/build/src/components/OTPStatusLabel/index.native.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isIphoneX } from "@truworth/twc-rn-common";
-import { ActivityIndicator, Text, View } from "react-native";
+import { ActivityIndicator, Platform, Text, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import OkayIcon from '../../../assets/okay_icon.svg';
 import CrossIcon from '../../../assets/cross_icon.svg';
 const OTPStatusLabel = ({ status, timer }) => {
     switch (status) {
         case 'timer':
-            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center' }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, justifyContent: 'center', alignItems: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#FFFFFF', textTransform: 'uppercase' }, children: timer && timer > 0 ? `${timer} seconds` : 'OTP expired' }) }) }));
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, justifyContent: 'center', alignItems: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#FFFFFF', textTransform: 'uppercase' }, children: timer && timer > 0 ? `${timer} seconds` : 'OTP expired' }) }) }));
         case 'valid':
-            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center' }, children: _jsx(LinearGradient, { colors: ['#44cfb9', '#1EC2C9'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(OkayIcon, {}) }) }) }));
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#44cfb9', '#1EC2C9'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(OkayIcon, {}) }) }) }));
         case 'invalid':
-            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center' }, children: _jsx(LinearGradient, { colors: ['#F3698B', '#F18A8A'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(CrossIcon, {}) }) }) }));
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#F3698B', '#F18A8A'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(CrossIcon, {}) }) }) }));
         case 'loading':
-            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center' }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(View, { style: { alignItems: 'center' }, children: _jsx(ActivityIndicator, { color: 'black' }) }) }) }));
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(View, { style: { alignItems: 'center' }, children: _jsx(ActivityIndicator, { color: 'black' }) }) }) }));
         default:
             return null;
     }

package/build/src/components/PasswordCriteria/hooks/usePasswordCriteria.js

@@ -1,13 +1,6 @@
 import { useEffect, useState } from "react";
 import { axiosClient } from "../../../api/axiosClient";
-const defaultPolicy = {
-    minLength: 6,
-    maxLength: 30,
-    numbers: true,
-    uppercase: true,
-    lowercase: true,
-    specialCharacters: true,
-};
+import { defaultPolicy } from "../../../constants/defaultPolicy";
 const usePasswordCriteria = ({ email, password, onCriteriaChange, onMaxLengthChange }) => {
     const { maxLength: defaultMaxLength, ...restDefaultPolicy } = defaultPolicy;
     const [loading, setLoading] = useState(false);

package/build/src/components/PasswordCriteria/index.native.js

@@ -4,16 +4,19 @@ import { Text, View } from 'react-native';
 import { usePasswordCriteria } from './hooks/usePasswordCriteria';
 const { gray, utility } = Colors;
 const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
-    const { passwordPolicy, loading, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const { loading, passwordPolicy, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
     const getCriteriaColor = (isValid) => (isValid ? utility.success_main : gray.gray_600);
     const getCriteriaBackground = (isValid) => (isValid ? utility.success_bg : gray.gray_100);
     return (_jsx(View, { style: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', alignContent: 'space-between', marginTop: 8 }, children: Object.keys(passwordPolicy).map((item, index) => (loading
             ? _jsx(LoadingPlaceholder, { height: 24, width: renderLabel(item).length * 8, borderRadius: 12, containerStyle: { marginRight: 8, marginTop: 8 } }, index)
-            : _jsx(Text, { style: {
-                    fontSize: 12, fontWeight: '500', marginRight: 8, marginTop: 8, borderRadius: 32,
-                    paddingVertical: 4, paddingHorizontal: 12,
-                    backgroundColor: getCriteriaBackground(criteria[item]),
-                    color: getCriteriaColor(criteria[item]),
-                }, children: renderLabel(item) }, index))) }));
+            :
+                _jsx(View, { style: {
+                        marginRight: 8, marginTop: 8, borderRadius: 32,
+                        paddingVertical: 4, paddingHorizontal: 12,
+                        backgroundColor: getCriteriaBackground(Boolean(criteria[item])),
+                    }, children: _jsx(Text, { style: {
+                            fontSize: 12, fontWeight: '500',
+                            color: getCriteriaColor(Boolean(criteria[item])),
+                        }, children: renderLabel(item) }) }, index))) }));
 };
 export { PasswordCriteria };

package/build/src/components/{EmailOTPVerify → VerifyEmailOTP}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
 import { useEffect, useState } from "react";
-const EmailOTPVerify = ({ validateOTP, resendOTP, resendOTPCounter, email, status }) => {
+const VerifyEmailOTP = ({ validateOTP, resendOTP, resendOTPCounter, email, status }) => {
     const [otp, setOtp] = useState('');
     const [otpError, setOtpError] = useState(false);
     useEffect(() => {
@@ -17,4 +17,4 @@ const EmailOTPVerify = ({ validateOTP, resendOTP, resendOTPCounter, email, statu
                 _jsx(Typography, { type: "utility", size: "medium", className: "mt-1", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), (resendOTPCounter < 3) &&
                 _jsxs(Flex, { align: "center", justify: "between", className: 'mt-7', children: [_jsx(Typography, { type: "body", size: "medium", className: "font-semibold", color: "text-gray-400", children: "Didn't receive OTP?" }), _jsx(Button, { variant: 'link', size: 'small', className: "p-0 h-auto", onClick: resendOTP, children: "Resend Code" })] }), _jsx(Button, { label: "Continue", isFullWidth: true, variant: 'primary', className: "mt-7", onClick: () => validateOTP?.(otp), disabled: (otp?.length ?? 0) < 6 })] }));
 };
-export { EmailOTPVerify };
+export { VerifyEmailOTP };

package/build/src/components/{EmailOTPVerify → VerifyEmailOTP}/index.native.js

@@ -1,18 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Layout } from "@ui-kitten/components";
 import { Header, Colors, CustomKeyboardAvoidingView } from "@truworth/twc-rn-common";
 import { ScreenLayout } from "../ScreenLayout";
 import { OTPStatusLabel } from "../OTPStatusLabel/index.native";
 import OTPInputView from "@twotalltotems/react-native-otp-input";
-const EmailOTPVerify = ({ status, validateOTP, resendOTP, resendOTPCounter, email }) => {
-    const [otp, setOTP] = useState('');
-    useEffect(() => {
-        if (otp && otp.length === 6) {
-            validateOTP?.(otp);
-        }
-    }, [otp]);
+const VerifyEmailOTP = ({ email, status, validateOTP, resendOTP, resendOTPCounter }) => {
     return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#fff' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? 100 : 0, children: [_jsx(ScrollView, { showsVerticalScrollIndicator: false, children: _jsxs(ScreenLayout, { hideHeader: true, title: _jsxs(_Fragment, { children: ["OTP sent to ", '\n', _jsx(Text, { style: { fontSize: 20 }, children: email })] }), children: [_jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, codeInputFieldStyle: {
                                             fontSize: 20, color: 'black',
                                             height: 45, width: 30,
@@ -20,7 +13,7 @@ const EmailOTPVerify = ({ status, validateOTP, resendOTP, resendOTPCounter, emai
                                         }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
                                             height: 50,
                                             width: Dimensions.get('window').width - 100,
-                                        }, onCodeFilled: code => setOTP(code) }) }), resendOTPCounter < 3 &&
+                                        }, onCodeFilled: code => validateOTP(code) }) }), resendOTPCounter < 3 &&
                                     _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 14, fontWeight: '500', color: Colors.gray.gray_400, lineHeight: 20 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: resendOTP, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '500', color: '#2cbaa4', lineHeight: 20 }, children: "Re-send OTP" }) })] })] }) }), _jsx(View, { style: { alignSelf: 'flex-end', width: '100%' }, children: _jsx(OTPStatusLabel, { status: status }) })] })] }));
 };
-export { EmailOTPVerify };
+export { VerifyEmailOTP };

package/build/src/components/{VerifyOTP → VerifyMobileOTP}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
-const OTPVerify = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
+const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
     const [otp, setOtp] = useState('');
     const [otpError, setOtpError] = useState(false);
     useEffect(() => {
@@ -20,4 +20,4 @@ const OTPVerify = ({ validateOTP, timer, resendOTP, phone, status, resendTextCla
                 :
                     _jsxs(Typography, { type: 'utility', size: 'medium', className: `mt-3 ${resendTextClassName}`, children: ["Resend Code in ", timer > 0 ? `${timer} seconds` : 'OTP expired'] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
 };
-export { OTPVerify };
+export { VerifyMobileOTP };

package/build/src/components/{VerifyOTP → VerifyMobileOTP}/index.native.js

@@ -7,7 +7,7 @@ import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContex
 import { OTPStatusLabel } from '../OTPStatusLabel/index.native';
 import OTPInputView from '@twotalltotems/react-native-otp-input';
 const { gray } = Colors;
-const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
+const VerifyMobileOTP = ({ validateOTP, timer, status, resendOTP, phone }) => {
     const [otp, setOTP] = useState('');
     const { otpValue } = useAuthPackageContext();
     useEffect(() => {
@@ -20,7 +20,7 @@ const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
             setOTP(otpValue);
         }
     }, [otpValue]);
-    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? 100 : 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
                                     fontSize: 20, fontWeight: '600', color: gray.gray_900,
                                     lineHeight: 32, marginBottom: 32,
                                 }, children: ["OTP sent to ", '\n', phone ? phone.replace(/\d(?=\d{4})/g, 'x') : ''] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, onCodeChanged: text => setOTP(text), codeInputFieldStyle: {
@@ -35,4 +35,4 @@ const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
                                                 resendOTP();
                                             }, children: _jsx(Text, { style: { fontSize: 14, color: '#2cbaa4', fontWeight: '400', opacity: 1 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { width: '100%' }, children: _jsx(OTPStatusLabel, { status: status, timer: timer }) })] })] }));
 };
-export { OTPVerify };
+export { VerifyMobileOTP };

package/build/src/constants/defaultPolicy.js

@@ -0,0 +1,9 @@
+const defaultPolicy = {
+    minLength: 6,
+    maxLength: 30,
+    numbers: true,
+    uppercase: true,
+    lowercase: true,
+    specialCharacters: true,
+};
+export { defaultPolicy };

package/build/src/contexts/AuthContext.js

@@ -34,7 +34,7 @@ const AuthPackageContext = React.createContext(null);
  */
 const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession }) => {
     const [isLoadingProfile, setIsLoadingProfile] = useState(false);
-    const [member, setMember] = useState(null);
+    const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
     const [registrationMethod, setRegistrationMethod] = useState(null);
     const [token, setToken] = useState('');
@@ -61,10 +61,10 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
      * fetch user profile if not already loaded.
      */
     useEffect(() => {
-        if (token && !member) {
+        if (token && !profile) {
             getUserProfile();
         }
-    }, [token, member]);
+    }, [token, profile]);
     /**
      * Logout user and clear authentication state.
      * Falls back to default /auth/logout request
@@ -106,7 +106,7 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
                     return resolve(data);
                 }
                 const formatted = formatUserData(data);
-                setMember(formatted.profile);
+                setProfile(formatted.profile);
                 setClient(formatted.client);
                 resolve(data);
             }).catch((err) => {
@@ -119,7 +119,7 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
     const clearSession = useCallback(() => {
         setToken('');
         setClient(null);
-        setMember(null);
+        setProfile(null);
         setRegistrationMethod(null);
     }, []);
     /**
@@ -150,9 +150,10 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
         setTimeout(() => setOtpValue(''), 0);
     };
     const AuthContextValues = {
-        isLoadingProfile,
-        member,
+        token,
+        profile,
         client,
+        isLoadingProfile,
         logout,
         onLaunchAuthSession,
         getUserProfile,

package/build/src/helpers/Network.js

@@ -77,7 +77,7 @@ export const createHttpClient = ({ token, onRefreshSession, onLogout }) => {
     const handleInvalidSession = async () => {
         try {
             await onLogout?.();
-            showMessage('Your session has expired. Please login again.');
+            showMessage({ message: 'Your session has expired. Please login again.' });
         }
         catch (err) {
             console.error('Error logging out:', err);

package/build/src/helpers/show-message/index.js

@@ -1,5 +1,5 @@
 import { showNotification } from "@truworth/twc-web-design";
-const showMessage = (message) => {
+const showMessage = ({ message, type }) => {
     if (message == null)
         return;
     const text = typeof message === 'string'
@@ -10,7 +10,7 @@ const showMessage = (message) => {
                 ? String(message.message)
                 : String(message);
     showNotification({
-        type: 'error',
+        type: type ?? 'error',
         title: text,
         showIcon: false,
         duration: 3000,

package/build/src/helpers/show-message/index.native.js

@@ -1,5 +1,5 @@
 import { Snackbar } from "@truworth/twc-rn-common";
-const showMessage = (message, leftIcon = 'warning') => {
+const showMessage = ({ message, leftIcon = 'warning' }) => {
     if (message == null)
         return;
     const text = typeof message === 'string'

package/build/src/hooks/useRequest.js

@@ -14,6 +14,9 @@ const useRequest = () => {
         onLogout: async () => logout(),
     }), [token, logout, refreshSession]);
     const makeRequest = async ({ url, method, body, onSuccess, onFailure, ...axiosOptions }) => {
+        if (!token) {
+            return;
+        }
         try {
             const response = await request({
                 url,
@@ -29,7 +32,7 @@ const useRequest = () => {
                 onFailure(err);
             }
             if (err?.response?.status >= 500) {
-                showMessage("Something went wrong");
+                showMessage({ message: "Something went wrong" });
             }
         }
     };

package/build/src/index.js

@@ -5,6 +5,8 @@ export * from './contexts/type';
 // export hooks
 export * from './hooks/useAuthContext';
 export * from './hooks/useRequest';
+// export axiosClient
+export * from './api/axiosClient';
 // export navigator/router
 export * from './navigator';
 // export components

package/build/src/navigator/index.native.js

@@ -9,8 +9,11 @@ import CreatePassword from '../screens/CreatePassword/index.native';
 import UserConsent from '../screens/UserConsent/index.native';
 import VerifyMobile from '../screens/VerifyMobile/index.native';
 import VerifyEmail from '../screens/VerifyEmail/index.native';
+import LoginWithEmailOTP from '../screens/LoginWithEmailOTP/index.native';
+import VerifyResetPasswordOTP from '../screens/VerifyResetPasswordOTP/index.native';
+import ResetPassword from '../screens/ResetPassword/index.native';
 const { Navigator, Screen } = createNativeStackNavigator();
 const AuthNavigator = () => {
-    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail })] }));
+    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword })] }));
 };
 export { AuthNavigator };

package/build/src/screens/CreatePassword/hooks/internal/useCreatePassword.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { defaultPolicy } from "../../../../constants/defaultPolicy";
 /**
  * @internal
  * Internal hook for managing CreatePassword screen state and auth context integration.
@@ -10,13 +11,7 @@ const useCreatePassword = () => {
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [maxLength, setMaxLength] = useState(defaultPolicy.maxLength);
-    const [criteria, setCriteria] = useState({
-        numbers: false,
-        minLength: false,
-        uppercase: false,
-        lowercase: false,
-        specialCharacters: false,
-    });
+    const [criteria, setCriteria] = useState({});
     const handlePassword = (text) => {
         setPassword(text.replace(/\s/g, ''));
     };
@@ -42,11 +37,3 @@ const useCreatePassword = () => {
     };
 };
 export { useCreatePassword };
-const defaultPolicy = {
-    minLength: 6,
-    maxLength: 30,
-    numbers: true,
-    uppercase: true,
-    lowercase: true,
-    specialCharacters: true,
-};

package/build/src/screens/EnterEmail/hooks/internal/useEnterEmail.js

@@ -32,7 +32,7 @@ const useEnterEmail = () => {
             const code = Number(res.data.loginType);
             const isKnown = code === 1 || code === 2 || code === 3 || code === 4;
             if (!isKnown) {
-                showMessage('Unsupported login method. Please try again later.');
+                showMessage({ message: 'Unsupported login method. Please try again later.' });
                 return;
             }
             if (code !== 1) {
@@ -60,7 +60,7 @@ const useEnterEmail = () => {
                 onResult({ email, emailExist: false });
             }
             if (err?.response?.status >= 500) {
-                showMessage('Something went wrong');
+                showMessage({ message: 'Something went wrong' });
             }
         });
     };

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

@@ -1,22 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form, PasswordInput, Typography, useForm } from '@truworth/twc-web-design';
+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';
-const EnterPassword = ({ email, onPressBack }) => {
+import VerifyResetPasswordOTP from '../VerifyResetPasswordOTP';
+const EnterPassword = ({ email, onPressBack, onSignInWithEmailOTP, onVerifiedResetPasswordOTP }) => {
+    const [showResetPasswordOTPModal, setShowResetPasswordOTPModal] = useState(false);
     const { loading, password, isInvalidPassword, handleSubmit, onPassword, appName } = useEnterPassword();
     const form = useForm({ defaultValues: { password } });
-    return (_jsxs(_Fragment, { children: [_jsx(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
+    return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
                     loading,
                     label: 'Continue',
                     onClick: () => { if (email)
                         handleSubmit({ email, source: 'web' }); },
                     disabled: !password || !email || loading,
-                }, onPressBack: onPressBack, children: _jsx(Form, { className: "w-full", form: form, onSubmit: () => { if (email)
-                        handleSubmit({ email, source: 'web' }); }, children: _jsx(Form.Item, { name: "password", label: "Password", description: isInvalidPassword &&
-                            _jsx(Typography, { type: "body", size: "small", className: "h-1", color: "text-utility-danger-main", children: "Email and password do not match!" }), children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 
+                }, onPressBack: onPressBack, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: () => { if (email)
+                            handleSubmit({ email, source: 'web' }); }, children: _jsx(Form.Item, { name: "password", label: "Password", description: isInvalidPassword &&
+                                _jsx(Typography, { type: "body", size: "small", className: "h-1", color: "text-utility-danger-main", children: "Email and password do not match!" }), children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 
                                 ${isInvalidPassword ? "border-red-500" : "border-gray-300"}`, ...form.register('password', {
-                                onChange: (e) => onPassword(e.target.value)
-                            }) }) }) }) }), _jsx(SupportDetails, {})] }));
+                                    onChange: (e) => onPassword(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) }), showResetPasswordOTPModal &&
+                        _jsx(VerifyResetPasswordOTPModal, { email: email, show: showResetPasswordOTPModal, hide: () => setShowResetPasswordOTPModal(false), onVerifiedOTP: onVerifiedResetPasswordOTP })] }), onSignInWithEmailOTP && (_jsxs(_Fragment, { children: [_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 OTP', variant: 'secondary', className: 'flex-none', isFullWidth: true, type: "button", onClick: onSignInWithEmailOTP })] })), _jsx(SupportDetails, {})] }));
+};
+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

@@ -1,23 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { TextInputField } from '@truworth/twc-rn-common';
+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 EnterPassword = ({ route }) => {
+const { primary } = Colors;
+const EnterPassword = ({ navigation, route }) => {
     const { email } = route.params;
     const { loading, password, isPasswordVisible, togglePasswordVisibility, isInvalidPassword, handleSubmit, onPassword } = useEnterPassword();
-    return (_jsx(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: _jsx(ScreenLayout, { title: "Enter Your Password", buttonProps: {
-                loading,
-                label: 'Continue',
-                onPress: () => { if (email)
-                    handleSubmit({ email, source: 'web' }); },
-                disabled: password.length == 0 || isInvalidPassword || loading,
-            }, children: _jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: onPassword, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible
-                        ? 'eye-outline'
-                        : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
-                        show: isInvalidPassword,
-                        message: isInvalidPassword ? 'Email and password do not match!' : ''
-                    }, autoFocus: true }) }) }) }));
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsxs(ScreenLayout, { title: "Enter Your Password", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onPress: () => { if (email)
+                        handleSubmit({ email, source: Platform.OS }); },
+                    disabled: password.length == 0 || isInvalidPassword || loading,
+                }, children: [_jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: onPassword, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible
+                                ? 'eye-outline'
+                                : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
+                                show: isInvalidPassword,
+                                message: isInvalidPassword ? 'Email and password do not match!' : ''
+                            }, autoFocus: true }) }), _jsx(TouchableOpacity, { activeOpacity: 0.8, style: { marginTop: isInvalidPassword ? 0 : 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 OTP", onPress: () => navigation.navigate('LoginWithEmailOTP', { email }) })] })] }));
 };
 export default EnterPassword;

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

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { Flex } from '@truworth/twc-web-design';
+import { Flex, ResponsiveModal, Typography } from '@truworth/twc-web-design';
 import { useRouter } from 'next/router';
 import { AdvancedTransitionWrapper } from '../../../../components/AdvancedTransitionWrapper';
 import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
 import EnterEmail from '../../../EnterEmail/index';
 import EnterPassword from '../../../EnterPassword/index';
+import LoginWithEmailOTP from '../../../LoginWithEmailOTP/index';
+import ResetPassword from '../../../ResetPassword/index';
 const LoginWebComponent = () => {
     const [email, setEmail] = useState('');
     const [loginState, setLoginState] = useState('EnterEmail');
+    const [showLoginWithEmailOTPModal, setShowLoginWithEmailOTPModal] = useState(false);
+    const [sessionToken, setSessionToken] = useState('');
     const { LogoComponent } = useAuthPackageContext();
     const router = useRouter();
     const onRedirectToPassword = (email) => {
@@ -33,12 +37,24 @@ const LoginWebComponent = () => {
                         }
                     } }));
             case 'EnterPassword':
-                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail') }));
+                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail'), onSignInWithEmailOTP: () => {
+                        if (email) {
+                            setShowLoginWithEmailOTPModal(true);
+                        }
+                    }, onVerifiedResetPasswordOTP: ({ sessionToken }) => {
+                        setSessionToken(sessionToken);
+                        setLoginState('ResetPassword');
+                    } }));
+            case 'ResetPassword':
+                return (_jsx(ResetPassword, { email: email, sessionToken: sessionToken, onContinue: () => setLoginState('EnterEmail'), onPressBack: () => setLoginState('EnterPassword') }));
             default:
                 return null;
         }
     };
     return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsxs(Flex, { direction: 'column', justify: 'center', style: { width: '70%' }, className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: [React.isValidElement(LogoComponent)
-                    && LogoComponent, renderStep()] }) }));
+                    && LogoComponent, renderStep(), _jsx(LoginWithEmailOTPModal, { show: showLoginWithEmailOTPModal, hide: () => setShowLoginWithEmailOTPModal(false), email: email })] }) }));
 };
 export { LoginWebComponent };
+const LoginWithEmailOTPModal = ({ show, hide, email }) => {
+    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 }) }));
+};

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

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

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

@@ -0,0 +1,72 @@
+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, source }) => {
+    const [resendOTPCounter, setResendOTPCounter] = useState(0);
+    const [status, setStatus] = useState("idle");
+    const sessionTokenRef = useRef("");
+    const { onLogin } = useAuthPackageContext();
+    /**
+     * Sends an OTP to the provided email.
+     */
+    const sendOtp = useCallback(() => {
+        setStatus("loading");
+        axiosClient({
+            url: '/auth/login/email',
+            method: 'POST',
+            data: { email, source },
+        }).then((res) => {
+            setResendOTPCounter(prevCounter => prevCounter + 1);
+            sessionTokenRef.current = res.data.sessionToken;
+        }).catch((error) => {
+            console.error('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]);
+    /**
+     * Verifies the entered OTP and logs the user in.
+     */
+    const verifyOtp = useCallback(async (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;
+            onLogin({ token, member });
+        }).catch((error) => {
+            const message = error?.response?.data?.errors?.[0]?.message ||
+                (error?.response?.status === 400
+                    ? "Invalid OTP. Please try again."
+                    : "Verification failed. Please try again.");
+            showMessage({ message });
+            setStatus(error?.response?.status === 400 ? "invalid" : "idle");
+            if (error?.response?.status === 400) {
+                setTimeout(() => setStatus("idle"), 5000);
+            }
+        });
+    }, [sessionTokenRef.current]);
+    /**
+     * Automatically sends OTP when email and source are provided.
+     */
+    useEffect(() => {
+        if (email && source) {
+            sendOtp();
+        }
+    }, [email, source, 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 }) => {
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, source: 'web' });
+    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 } = route.params;
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, source: Platform.OS });
+    return (_jsx(VerifyEmailOTP, { email: email, status: status, validateOTP: verifyOtp, resendOTP: sendOtp, resendOTPCounter: resendOTPCounter }));
+};
+export default LoginWithEmailOTP;