@truworth/twc-auth 3.0.11 → 3.0.13

package/README.md

@@ -37,11 +37,10 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
      react-native-gesture-handler \
      react-native-linear-gradient \
      react-native-modalize \
-     react-native-reanimated \
      react-native-screens \
      react-native-safe-area-context \
      react-native-svg \
-     react-native-vector-icons \
+     @react-native-vector-icons/ionicons \
      react@^18.2.0 \
      react-native@^0.74.5
    ```
@@ -52,9 +51,7 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
    npx pod-install
    ```
 
-4. For React Native Reanimated, follow the [installation steps](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/) if you haven't already.
-
-5. For React Navigation, wrap your app with `NavigationContainer` and ensure you've followed the [getting started guide](https://reactnavigation.org/docs/getting-started/).
+4. For React Navigation, wrap your app with `NavigationContainer` and ensure you've followed the [getting started guide](https://reactnavigation.org/docs/getting-started/).
 
 #### React Native Dependencies
 
@@ -73,11 +70,10 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 | react-native-gesture-handler           | >=2.16.0 |
 | react-native-linear-gradient           | >=2.8.3  |
 | react-native-modalize                  | >=2.1.1  |
-| react-native-reanimated                | >=3.13.0 |
 | react-native-safe-area-context         | >=5.3.0  |
 | react-native-screens                   | >=3.31.1 |
 | react-native-svg                       | >=15.8.0 |
-| react-native-vector-icons              | >=9.2.0  |
+| @react-native-vector-icons/ionicons    | >=13.0.0 |
 
 > Note: lottie-react-native, react-native-fast-image are optional and only needed if your app uses features that depend on them.
 
@@ -106,15 +102,15 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 2. Install peer dependencies:
    ```bash
    npm install \
-     next@^15.0.4 \
-     @react-google-maps/api@>=2.20.6 \
-     @truworth/twc-web-design@>=1.9.0 \
-     antd@>=5.6.3 \
-     framer-motion@>=12.6.2 \
-     lodash@>=4.17.21 \
-     lucide-react@>=0.483.0 \
-     react@>=18.2.0 \
-     react-dom@>=18.2.0
+     'next@^15.0.4' \
+     '@react-google-maps/api@>=2.20.6' \
+     '@truworth/twc-web-design@>=1.9.0' \
+     'antd@>=5.6.3' \
+     'framer-motion@>=12.6.2' \
+     'lodash@>=4.17.21' \
+     'lucide-react@>=0.483.0' \
+     'react@>=18.2.0' \
+     'react-dom@>=18.2.0'
    ```
 
 ## Running the Example Applications of the TWC-Auth Package
@@ -163,9 +159,7 @@ This repository includes example applications for both mobile (React Native) and
     Copy the example environment variables below into a new file named `.env` in the `apps/web` directory.
 
     ```shell
-    NEXT_PUBLIC_ENVIRONMENT=development/production
-
-    NODE_ENV=development/production
+    NEXT_PUBLIC_ENVIRONMENT=<ENVIRONMENT> # ENVIRONMENT can be "development" or "production"
 
     NEXT_PUBLIC_MEMBER_IMAGES_URL=<value>
 

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

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text } from 'react-native';
 import { Modal } from '@ui-kitten/components';
 import { Colors, RoundedButton } from '@truworth/twc-rn-common';
-import IonIcon from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
 const { primary, gray } = Colors;
 const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconColor = primary.primary_main, description }) => {
     return (_jsx(Modal, { visible: visible, onBackdropPress: onClose, backdropStyle: { backgroundColor: 'rgba(0, 0, 0, 0.25)' }, children: _jsxs(View, { style: { flex: 1, backgroundColor: 'white', padding: 32, marginHorizontal: 16, borderRadius: 12, marginTop: -50 }, children: [iconName &&
-                    _jsx(IonIcon, { name: iconName, size: 64, color: iconColor, style: { alignSelf: 'center', marginBottom: 12 } }), title &&
+                    _jsx(Ionicons, { name: iconName, size: 64, color: iconColor, style: { alignSelf: 'center', marginBottom: 12 } }), title &&
                     _jsx(Text, { style: { fontSize: 16, textAlign: 'center', fontWeight: '600', color: gray.gray_900, marginBottom: 24, lineHeight: 20 }, children: title }), description &&
                     _jsx(Text, { style: { fontSize: 12, textAlign: 'center', fontWeight: '600', color: gray.gray_600, marginTop: -16, marginBottom: 24, lineHeight: 16 }, children: description }), primaryLabel &&
                     _jsx(RoundedButton, { size: 'large', label: primaryLabel, onPress: () => { onClose(); onProceed?.(); } }), secondaryLabel &&

package/build/src/components/ConfirmationModal/types.js

@@ -1 +1,2 @@
-export {};
+import React from 'react';
+import { Ionicons } from '@react-native-vector-icons/ionicons';

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

@@ -16,9 +16,12 @@ const VerifyMobileOTP = ({ validateOTP, timer, status, resendOTP, phone }) => {
         }
     }, [otp]);
     useEffect(() => {
-        if (otpValue && otpValue.length == 6) {
+        if (otpValue && otpValue.length === 6) {
             setOtp(otpValue);
         }
+        else if (!otpValue) {
+            setOtp('');
+        }
     }, [otpValue]);
     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,

package/build/src/contexts/AuthContext.js

@@ -125,6 +125,7 @@ const AuthProvider = ({ children, router, basePath = '', LogoComponent, session,
         setClient(null);
         setRegistrationMethod(null);
         setProfile(null);
+        setOtpValue('');
     }, []);
     /**
    * Helper to normalize and format user profile data
@@ -152,6 +153,11 @@ const AuthProvider = ({ children, router, basePath = '', LogoComponent, session,
     const handleOtpReceived = (otp) => {
         setOtpValue(otp);
     };
+    /** Clears SMS auto-fill buffer so it does not repopulate OTP after navigating to the main app. */
+    const handleLoginSuccess = useCallback((result) => {
+        setOtpValue('');
+        onLogin(result);
+    }, [onLogin]);
     const AuthContextValues = {
         token,
         profile,
@@ -177,7 +183,7 @@ const AuthProvider = ({ children, router, basePath = '', LogoComponent, session,
         registrationMethod,
         socialLoginConfig,
         onLaunchAuthSession,
-        onLogin,
+        onLogin: handleLoginSuccess,
         logout,
         refreshSession: onRefreshSession,
         onTokenChange: (token) => setToken(token),

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

@@ -1 +1,2 @@
-export {};
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import React from "react";

package/build/src/hooks/internal/useTimer.js

@@ -19,7 +19,7 @@ const useTimer = (duration) => {
     return timer;
 };
 const useInterval = (callback, delay) => {
-    const savedCallback = useRef();
+    const savedCallback = useRef(undefined);
     // Remember the latest function.
     useEffect(() => {
         savedCallback.current = callback;

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

@@ -5,7 +5,6 @@ import { Colors, TextInputField } from '@truworth/twc-rn-common';
 import { useEnterEmail } from './hooks/internal/useEnterEmail';
 import { ScreenLayout } from '../../components/ScreenLayout/index.native';
 import { ConfirmationModal as LoginConflictModal } from '../../components/ConfirmationModal';
-import { RegistrationMethod } from '../../enums';
 const { utility } = Colors;
 const EnterEmail = ({ navigation }) => {
     const { email, isEmailValid, handleEmailChange, handleClearEmail, handleEmailExists, loading, loginConflictTitle, loginConflictDescription, isLoginConflictModalVisible, setIsLoginConflictModalVisible } = useEnterEmail();
@@ -25,7 +24,7 @@ const EnterEmail = ({ navigation }) => {
                         handleEmailExists({ onValidate });
                     },
                     disabled: !isEmailValid,
-                }, children: _jsx(TextInputField, { value: email, placeholder: 'Enter here...', onChangeValue: handleEmailChange, rightIcon2: email.length > 0 ? 'close' : '', onPressRightIcon2: handleClearEmail, autoFocus: true, autoCapitalize: 'none', keyboardType: 'email-address' }) }), isLoginConflictModalVisible &&
+                }, children: _jsx(TextInputField, { value: email, placeholder: 'Enter here...', onChangeValue: handleEmailChange, rightIcon2: email.length > 0 ? 'close' : undefined, onPressRightIcon2: handleClearEmail, autoFocus: true, autoCapitalize: 'none', keyboardType: 'email-address' }) }), isLoginConflictModalVisible &&
                 _jsx(LoginConflictModal, { title: loginConflictTitle, description: loginConflictDescription, visible: isLoginConflictModalVisible, onProceed: () => setIsLoginConflictModalVisible(false), onClose: () => setIsLoginConflictModalVisible(false), iconColor: utility.warning_main, primaryLabel: 'Okay' })] }));
 };
 export default EnterEmail;

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

@@ -9,7 +9,7 @@ import { useExistingAccountsSheet } from './hooks/internal/useExistingAccountsSh
 import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
 import { LoginMethodCode } from '../../../../enums';
 import moment from 'moment';
-import IonIcons from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
 const { primary, gray, utility } = Colors;
 const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts }) => {
     const { ref: sheetRef, open: openSheet, close: closeSheet } = useModalize();
@@ -64,10 +64,10 @@ const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts }) => {
                             marginBottom: 8,
                             flexDirection: 'row',
                             alignItems: 'center',
-                        }, children: [_jsx(IonIcons, { size: 16, name: "information-circle", style: { marginRight: 8 }, color: utility.warning_main }), _jsxs(Text, { style: {
+                        }, children: [_jsx(Ionicons, { size: 16, name: "information-circle", style: { marginRight: 8 }, color: utility.warning_main }), _jsxs(Text, { style: {
                                     flex: 1, fontSize: 12, fontWeight: '500',
                                     lineHeight: 18, color: gray.gray_500,
                                 }, children: ["Once you proceed, this phone number will be ", _jsx(Text, { style: { fontWeight: '600', color: gray.gray_900 }, children: "removed from other accounts." })] })] }), _jsx(RoundedButton, { label: 'Link and Continue', size: 'large', loading: loading, disabled: !selectedAccount, onPress: onContinue, containerStyle: { marginBottom: 8 } }), openChatSupport &&
-                    _jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: openChatSupport, style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 8 }, children: [_jsx(IonIcons, { size: 12, name: 'headset', color: primary.primary_main }), _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: primary.primary_main, marginStart: 8 }, children: "Connect with Support" })] })] }) }));
+                    _jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: openChatSupport, style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 8 }, children: [_jsx(Ionicons, { size: 12, name: 'headset', color: primary.primary_main }), _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: primary.primary_main, marginStart: 8 }, children: "Connect with Support" })] })] }) }));
 };
 export { ExistingAccountsSheet };

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

@@ -4,7 +4,7 @@ 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 { 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';
@@ -46,11 +46,11 @@ const EnterMobile = ({ navigation }) => {
                         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: {
+                    }, 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(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/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.js

@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { axiosClient } from "../../../../../api/axiosClient";
 import { showMessage } from "../../../../../helpers/show-message";
-const useSSOAuthenticationMethods = () => {
+const useSSOAuthenticationMethods = ({ client }) => {
     const [loading, setLoading] = useState(false);
     const isMountedRef = useRef(true);
     useEffect(() => {
@@ -34,6 +34,30 @@ const useSSOAuthenticationMethods = () => {
             }
         });
     };
-    return { loading, initiateSSOLogin };
+    const headingText = useMemo(() => {
+        if (client?.ssoEnabled && client?.mobileLoginEnabled) {
+            return `Choose how to sign in`;
+        }
+        if (client?.ssoEnabled) {
+            return `Sign in with your organization account`;
+        }
+        if (client?.mobileLoginEnabled) {
+            return `Sign in with your mobile number`;
+        }
+        return 'No Single Sign-On methods are available';
+    }, [client?.ssoEnabled, client?.mobileLoginEnabled]);
+    const subHeadingText = useMemo(() => {
+        if (!client?.ssoEnabled && !client?.mobileLoginEnabled) {
+            return 'Your organization has not configured any single sign-on methods yet. Please contact your administrator.';
+        }
+        return null;
+    }, [client?.ssoEnabled, client?.mobileLoginEnabled]);
+    return {
+        loading,
+        initiateSSOLogin,
+        headingText,
+        subHeadingText,
+        hasMultipleLoginOptions: client?.ssoEnabled && client?.mobileLoginEnabled,
+    };
 };
 export { useSSOAuthenticationMethods };

package/build/src/screens/SSOLogin/AuthenticationMethods/index.js

@@ -6,9 +6,9 @@ import { ScreenLayout } from "../../../components/ScreenLayout";
 import { CDN_IMAGES_URL } from "../../../constants/cdn-url";
 import { showMessage } from "../../../helpers/show-message";
 import React from "react";
-import { KeyRound, MailIcon, Smartphone } from "lucide-react";
+import { KeyRound, Smartphone } from "lucide-react";
 const SSOAuthenticationMethods = ({ client, onPressBack, handleMobileLogin }) => {
-    const { loading, initiateSSOLogin } = useSSOAuthenticationMethods();
+    const { loading, initiateSSOLogin, hasMultipleLoginOptions, headingText, subHeadingText } = useSSOAuthenticationMethods({ client });
     const { LogoComponent } = useAuthPackageContext();
     const renderLogo = () => {
         if (!LogoComponent) {
@@ -40,11 +40,13 @@ const SSOAuthenticationMethods = ({ client, onPressBack, handleMobileLogin }) =>
     };
     return (_jsx(ScreenLayout, { onPressBack: onPressBack, title: _jsxs(Flex, { direction: "column", children: [client?.image ?
                     _jsx("img", { src: client?.image, width: 175, height: 117, alt: `${client?.name ?? 'Client'} logo` })
-                    : renderLogo(), _jsx(Typography, { type: "heading", size: "h5", className: "my-6", children: "Select how to sign-in" }), client?.ssoEnabled &&
-                    _jsxs(_Fragment, { children: [_jsx(Button, { label: "Login with SSO", isFullWidth: true, variant: "primary", leftIcon: _jsx(KeyRound, {}), onClick: () => initiateSSOLogin({
-                                    clientId: client.id,
-                                    onSSOLoginInitiated
-                                }), loading: loading }), _jsx(Typography, { type: "body", size: "large", className: "mt-6 text-gray-600", children: "Recommended for quick access" }), _jsxs(Flex, { align: "center", className: "my-4", 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: "Login with Email & Password", isFullWidth: true, variant: "secondary", leftIcon: _jsx(MailIcon, {}), onClick: onPressBack }), client?.mobileLoginEnabled &&
-                    _jsx(Button, { label: "Login with Mobile Number", isFullWidth: true, className: "mt-6", leftIcon: _jsx(Smartphone, {}), variant: "text", onClick: handleMobileLogin })] }) }));
+                    : renderLogo(), _jsx(Typography, { type: "heading", size: "h5", className: "mb-4 mt-6", children: headingText }), subHeadingText &&
+                    _jsx(Typography, { type: "body", size: "large", className: "text-gray-600", children: subHeadingText }), client?.ssoEnabled &&
+                    _jsx(Button, { label: "Login with SSO", isFullWidth: true, variant: "primary", leftIcon: _jsx(KeyRound, {}), onClick: () => initiateSSOLogin({
+                            clientId: client.id,
+                            onSSOLoginInitiated
+                        }), loading: loading }), hasMultipleLoginOptions &&
+                    _jsxs(_Fragment, { children: [_jsx(Typography, { type: "body", size: "large", className: "mt-6 text-gray-600", children: "Recommended for quick access" }), _jsxs(Flex, { align: "center", className: "my-4", 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" })] })] }), client?.mobileLoginEnabled &&
+                    _jsx(Button, { label: "Login with Mobile Number", isFullWidth: true, className: "mt-6", leftIcon: _jsx(Smartphone, {}), variant: "secondary", onClick: handleMobileLogin })] }) }));
 };
 export default SSOAuthenticationMethods;

package/build/src/screens/SSOLogin/AuthenticationMethods/index.native.js

@@ -13,9 +13,9 @@ const { primary, gray } = Colors;
 const SSOAuthenticationMethods = ({ route }) => {
     const { client } = route.params;
     const [aspectRatio, setAspectRatio] = useState(1);
-    const { loading, initiateSSOLogin } = useSSOAuthenticationMethods();
-    const { LogoComponent } = useAuthPackageContext();
+    const { loading, initiateSSOLogin, hasMultipleLoginOptions, headingText, subHeadingText } = useSSOAuthenticationMethods({ client });
     const navigation = useNavigation();
+    const { LogoComponent } = useAuthPackageContext();
     useEffect(() => {
         if (client.image) {
             Image.getSize(client.image, (width, height) => {
@@ -52,8 +52,23 @@ const SSOAuthenticationMethods = ({ route }) => {
     };
     return (_jsx(ScreenLayout, { title: "", containerStyle: { flex: 1, backgroundColor: primary.white }, children: _jsxs(View, { style: { flex: 1, justifyContent: 'center' }, children: [client.image ?
                     _jsx(FastImage, { source: { uri: client.image }, resizeMode: 'contain', style: { width: 180, aspectRatio: aspectRatio, alignSelf: 'center', marginTop: -150 } })
-                    : renderLogo(), _jsx(Text, { style: { textAlign: 'center', fontSize: 24, fontWeight: '600', color: gray.gray_700, marginTop: 30 }, children: "Select how to sign-in" }), client?.ssoEnabled &&
-                    _jsxs(_Fragment, { children: [_jsx(RoundedButton, { loading: loading, type: 'primary', label: 'Login with SSO', size: 'large', containerStyle: { marginTop: 40 }, onPress: () => initiateSSOLogin({ clientId: client.id, onSSOLoginInitiated }), leftIcon: 'key-outline' }), _jsx(Text, { style: { textAlign: 'center', fontSize: 14, color: gray.gray_700, marginTop: 20 }, children: "Recommended for quick access" }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 30, marginHorizontal: 30 }, children: [_jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200 } }), _jsx(View, { children: _jsx(Text, { style: { width: 50, textAlign: 'center', color: gray.gray_500, fontSize: 16 }, children: "OR" }) }), _jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200 } })] })] }), _jsx(RoundedButton, { type: 'secondary', label: 'Login with Email & Password', size: 'large', containerStyle: { marginTop: 30 }, onPress: () => navigation.popTo('EnterEmail'), leftIcon: 'mail-outline' }), client?.mobileLoginEnabled &&
-                    _jsx(RoundedButton, { type: 'text', label: 'Login with Mobile Number', size: 'large', containerStyle: { marginHorizontal: 16, marginTop: 30 }, onPress: () => navigation.navigate('EnterMobile'), leftIcon: 'phone-portrait-outline' })] }) }));
+                    : renderLogo(), _jsx(Text, { style: { textAlign: 'center', fontSize: 18, fontWeight: '600', color: gray.gray_700, marginTop: 30, lineHeight: 32 }, children: headingText }), subHeadingText &&
+                    _jsx(Text, { style: {
+                            textAlign: 'center',
+                            fontSize: 16,
+                            lineHeight: 22,
+                            color: gray.gray_600,
+                            marginTop: 12,
+                            marginHorizontal: 32,
+                        }, children: subHeadingText }), client?.ssoEnabled &&
+                    _jsx(RoundedButton, { loading: loading, type: 'primary', label: 'Login with SSO', size: 'large', containerStyle: { marginTop: 18 }, onPress: () => initiateSSOLogin({
+                            clientId: client.id,
+                            onSSOLoginInitiated,
+                        }), leftIcon: 'key-outline' }), hasMultipleLoginOptions &&
+                    _jsxs(_Fragment, { children: [_jsx(Text, { style: { textAlign: 'center', fontSize: 14, color: gray.gray_700, marginTop: 20, }, children: "Recommended for quick access" }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 30, marginHorizontal: 30 }, children: [_jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200, } }), _jsx(Text, { style: { width: 50, textAlign: 'center', color: gray.gray_500, fontSize: 16, }, children: "OR" }), _jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200, } })] })] }), client?.mobileLoginEnabled &&
+                    _jsx(RoundedButton, { type: 'secondary', label: 'Login with Mobile Number', size: 'large', containerStyle: {
+                            marginHorizontal: 16,
+                            marginTop: 30
+                        }, onPress: () => navigation.navigate('EnterMobile'), leftIcon: 'phone-portrait-outline' })] }) }));
 };
 export default SSOAuthenticationMethods;

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

@@ -5,7 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useModalize } from 'react-native-modalize';
 import { Layout } from '@ui-kitten/components';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import IonIcon from 'react-native-vector-icons/Ionicons';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
 import moment from 'moment';
 import { BottomSheet, Chips, Colors, TextInputField, DateInputField, widthPercentageToDP as wp, isIphoneX, RoundedButton, CustomKeyboardAvoidingView } from '@truworth/twc-rn-common';
 import { ScreenLayout } from '../../components/ScreenLayout';
@@ -112,11 +112,11 @@ const MobileInputField = ({ phone, countryCode, onChangeCountryCode, onChangeMob
                     borderColor: phone.length > 0
                         ? error?.show ? utility.danger_main : gray.gray_500
                         : gray.gray_300,
-                }, children: [_jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: onChangeCountryCode, style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { style: { fontSize: 14, color: primary.black, fontWeight: '500' }, children: `+${countryCode}` }), _jsx(IonIcon, { size: 14, name: 'caret-down', color: gray.gray_900 })] }), _jsx(TextInput, { style: {
+                }, children: [_jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: onChangeCountryCode, style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { style: { fontSize: 14, color: primary.black, fontWeight: '500' }, children: `+${countryCode}` }), _jsx(Ionicons, { size: 14, name: 'caret-down', color: gray.gray_900 })] }), _jsx(TextInput, { style: {
                             flex: 1, fontSize: 14, fontWeight: '500',
                             color: primary.black, marginLeft: 2,
                         }, onChangeText: text => onChangeMobile(text), value: phone, keyboardType: "numeric", maxLength: countryCode === '91' ? 10 : 14 }), phone.length > 0 &&
-                        _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: onCross, style: { position: 'absolute', right: 10 }, children: _jsx(IonIcon, { size: 24, name: 'close', color: gray.gray_900 }) })] }), _jsx(Text, { style: { fontSize: 12, fontWeight: '500', color: utility.danger_main, marginStart: 4, marginTop: 4 }, children: error?.show ? error?.message : '' })] }));
+                        _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: onCross, style: { position: 'absolute', right: 10 }, children: _jsx(Ionicons, { size: 24, name: 'close', color: gray.gray_900 }) })] }), _jsx(Text, { style: { fontSize: 12, fontWeight: '500', color: utility.danger_main, marginStart: 4, marginTop: 4 }, children: error?.show ? error?.message : '' })] }));
 };
 const KnowMoreModal = ({ visible, hide }) => {
     const { ref: knowMoreRef, open: openKnowMoreSheet, close: closeKnowMoreSheet } = useModalize();
@@ -178,7 +178,7 @@ const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, countryCode, phone
                             justifyContent: 'center',
                             padding: 8,
                             marginTop: 8
-                        }, children: [_jsx(IonIcon, { name: 'headset', size: 12, color: primary.primary_main }), _jsx(Text, { style: {
+                        }, children: [_jsx(Ionicons, { name: 'headset', size: 12, color: primary.primary_main }), _jsx(Text, { style: {
                                     fontSize: 14,
                                     fontWeight: '600',
                                     color: primary.primary_main,

package/build/src/screens/VerifyResetPasswordOTP/hooks/internal/useVerifyResetPasswordOTP.js

@@ -9,7 +9,7 @@ import { axiosClient } from "../../../../api/axiosClient";
 const useVerifyResetPasswordOTP = ({ email }) => {
     const [resendOTPCounter, setResendOTPCounter] = useState(0);
     const [status, setStatus] = useState("idle");
-    const resetStatusTimeoutRef = useRef();
+    const resetStatusTimeoutRef = useRef(undefined);
     const sessionTokenRef = useRef('');
     const scheduleStatusReset = (delay) => {
         if (resetStatusTimeoutRef.current) {

package/build/types/components/ConfirmationModal/types.d.ts

@@ -1,11 +1,13 @@
+import React from 'react';
+import { Ionicons } from '@react-native-vector-icons/ionicons';
 type ConfirmationModalProps = {
     title: string;
     visible: boolean;
     primaryLabel: string;
     secondaryLabel?: string;
-    iconName?: string;
+    iconName?: React.ComponentProps<typeof Ionicons>['name'];
     /** @deprecated Use iconClassName instead for Tailwind classes */
-    iconColor?: string;
+    iconColor?: React.ComponentProps<typeof Ionicons>['color'];
     /** Tailwind classes for icon styling, e.g. "text-primary" or "text-utility-warning-main" */
     iconClassName?: string;
     onClose: () => void;

package/build/types/helpers/show-message/types.d.ts

@@ -1,6 +1,8 @@
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import React from "react";
 interface MessageHandlerProps {
     message: string | Error | object;
     type?: 'error' | 'info' | 'message' | 'success' | 'warning';
-    leftIcon?: string;
+    leftIcon?: React.ComponentProps<typeof Ionicons>['name'];
 }
 export type { MessageHandlerProps };

package/build/types/screens/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.d.ts

@@ -1,9 +1,15 @@
 import type { SSOInitiationData } from "../../types";
-declare const useSSOAuthenticationMethods: () => {
+import type { Client } from "../../../../../types/types";
+declare const useSSOAuthenticationMethods: ({ client }: {
+    client: Client;
+}) => {
     loading: boolean;
     initiateSSOLogin: ({ clientId, onSSOLoginInitiated }: {
         clientId: number;
         onSSOLoginInitiated: (data: SSOInitiationData) => void;
     }) => void;
+    headingText: string;
+    subHeadingText: string | null;
+    hasMultipleLoginOptions: boolean;
 };
 export { useSSOAuthenticationMethods };

package/build/types/screens/SSOLogin/SearchOrganization/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { Client } from "../../../types/types";
 interface SSOSearchOrganizationProps {
     onPressBack: () => void;
@@ -8,6 +9,6 @@ type OptionWithClient = {
     value: string;
     image: string;
     client: Client;
-    label: JSX.Element;
+    label: ReactNode;
 };
 export type { Client, SSOSearchOrganizationProps, OptionWithClient };

package/build/types/screens/Welcome/hooks/internal/useWelcome.d.ts

@@ -11,7 +11,7 @@ declare const useWelcome: () => {
     setShowSocialLoginModal: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     socialLoginType: SocialLoginsEnum | undefined;
     setSocialLoginType: import("react").Dispatch<import("react").SetStateAction<SocialLoginsEnum | undefined>>;
-    LogoComponent: import("react").ComponentType<{}> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    LogoComponent: import("react").ComponentType<{}> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     onLaunchAuthSession: (() => void) | undefined;
     socialLoginConfig: Partial<Record<SocialLoginsEnum, {
         enabled?: boolean;

package/get-metro-config.js

@@ -1,5 +1,5 @@
 const path = require("path");
-const escape = require("escape-string-regexp")
+const escapeStringRegexp = require("escape-string-regexp")
 const exclusionList = require("metro-config/src/defaults/exclusionList")
 
 const getMetroConfig = (dirPath, packagePath) => {
@@ -18,7 +18,7 @@ const getMetroConfig = (dirPath, packagePath) => {
             blacklistRE: exclusionList(
                 packagePeerDeps.map(
                     (peerDep) =>
-                        new RegExp(`^${escape(path.join(packageDir, 'node_modules', peerDep))}\\/.*$`)
+                        new RegExp(`^${escapeStringRegexp(path.join(packageDir, 'node_modules', peerDep))}\\/.*$`)
                 )
             ),
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [
@@ -27,11 +27,12 @@
     "@react-native-google-signin/google-signin": "12.2.1",
     "@react-navigation/native": "7.1.17",
     "@react-navigation/native-stack": "7.3.26",
-    "@truworth/twc-rn-common": "2.0.2",
+    "@truworth/twc-rn-common": "2.0.4",
     "@truworth/twc-web-design": "2.1.0",
     "@twotalltotems/react-native-otp-input": "1.3.11",
+    "@react-native-vector-icons/ionicons": "13.0.0",
     "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.0",
+    "@types/react": "19.2.14",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-native": "^0.72.0",
     "@types/url-parse": "^1.4.11",
@@ -54,9 +55,9 @@
     "react-native-fast-image": "8.6.3",
     "react-native-fbsdk-next": "13.4.1",
     "react-native-linear-gradient": "2.8.3",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-modalize": "2.1.1",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-reanimated": "4.1.0",
     "react-native-rsa-native": "2.0.5",
     "react-native-safe-area-context": "5.6.1",
     "react-native-svg": "15.12.0",
@@ -70,8 +71,8 @@
     "@react-google-maps/api": ">=2.20.6",
     "date-fns": ">=3.0.0",
     "@react-native-community/datetimepicker": ">=8.1.1",
-    "@react-navigation/native": ">=6.1.17",
-    "@react-navigation/native-stack": ">=6.10.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
     "@truworth/twc-rn-common": ">=1.0.12",
     "@truworth/twc-web-design": ">=1.9.0",
     "@ui-kitten/components": ">=5.1.2",
@@ -82,16 +83,11 @@
     "lucide-react": ">=0.483.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "react-native": ">=0.74.5",
+    "react-native": ">=0.78.0",
     "react-native-fast-image": ">=8.6.3",
     "react-native-linear-gradient": ">=2.8.3",
-    "react-native-modalize": ">=2.1.1",
-    "react-native-reanimated": ">=3.13.0",
     "react-native-safe-area-context": ">=5.3.0",
     "react-native-svg": ">=15.8.0",
     "react-native-vector-icons": ">=9.2.0"
-  },
-  "overrides": {
-    "prismjs": "1.30.0"
   }
 }