@truworth/twc-auth 1.2.3 → 1.2.4

package/build/assets/loading-spinner.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":30,"ip":0,"op":60,"w":300,"h":300,"nm":"loading_6","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":60,"s":[360]}],"ix":10},"p":{"a":0,"k":[150.00000000000003,150.00000000000003,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[30.000000000000004,30.000000000000004,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[300,300],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.12941176470588237,0.7411764705882353,0.7764705882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[0]},{"t":60,"s":[99]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[1]},{"t":50,"s":[100]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":60,"s":[3]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":30,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150.00000000000003,150.00000000000003,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[30.000000000000004,30.000000000000004,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[300,300],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.7450980392156863,0.9254901960784314,0.9372549019607843,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}

package/build/src/api/auth.js

@@ -0,0 +1,36 @@
+import { axiosClient } from "./axiosClient";
+/** Check if mobile exists */
+const checkMobileExists = async (phone) => {
+    try {
+        const { data } = await axiosClient({
+            url: '/auth/mobile-exists',
+            method: 'POST',
+            data: { phone },
+        });
+        return { mobileExist: data?.exists, linkedAccounts: data?.memberDetails };
+    }
+    catch (err) {
+        if (err?.response?.status == 404) {
+            return { mobileExist: false };
+        }
+        throw err;
+    }
+};
+/** Check if email exists */
+const checkEmailExists = async (email) => {
+    try {
+        const { data } = await axiosClient({
+            url: '/auth/email-exists',
+            method: 'POST',
+            data: { email },
+        });
+        return { emailExist: data?.exists, loginType: data?.loginType };
+    }
+    catch (err) {
+        if (err?.response?.status === 404) {
+            return { emailExist: false };
+        }
+        throw err;
+    }
+};
+export { checkMobileExists, checkEmailExists };

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { View, Text } from 'react-native';
 import { Colors, Header, RoundedButton } from '@truworth/twc-rn-common';
 const { gray } = Colors;
-const ScreenLayout = ({ children, title, subTitle, hideHeader, buttonProps, containerStyle, accessoryRight }) => {
+const ScreenLayout = ({ children, headerTitle, title, subTitle, hideHeader, buttonProps, containerStyle, accessoryRight }) => {
     return (_jsxs(_Fragment, { children: [!hideHeader &&
-                _jsx(Header, { accessoryRight: accessoryRight }), _jsxs(View, { style: [{ paddingVertical: 32, paddingHorizontal: 16 }, containerStyle], children: [Boolean(title) &&
+                _jsx(Header, { title: headerTitle, accessoryRight: accessoryRight }), _jsxs(View, { style: [{ paddingVertical: 32, paddingHorizontal: 16 }, containerStyle], children: [Boolean(title) &&
                         _jsx(Text, { textBreakStrategy: 'simple', style: {
                                 fontSize: 20, fontWeight: '600', color: gray.gray_900,
                                 lineHeight: 32, marginBottom: 32,

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

@@ -1,19 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { gray } = Colors;
 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,
-                                            borderWidth: 0, borderBottomWidth: 1,
-                                        }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
-                                            height: 50,
-                                            width: Dimensions.get('window').width - 100,
-                                        }, 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 }) })] })] }));
+    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 }, showsVerticalScrollIndicator: false, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
+                                    fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                    lineHeight: 32, marginBottom: 32,
+                                }, children: ["OTP sent to ", '\n', email] }), _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,
+                                        borderWidth: 0, borderBottomWidth: 1,
+                                    }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
+                                        height: 50,
+                                        width: Dimensions.get('window').width - 100,
+                                    }, onCodeFilled: code => validateOTP(code) }) }), resendOTPCounter < 3 &&
+                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 14, fontWeight: '500', color: 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 { VerifyEmailOTP };

package/build/src/contexts/AuthContext.js

@@ -119,8 +119,8 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
     const clearSession = useCallback(() => {
         setToken('');
         setClient(null);
-        setProfile(null);
         setRegistrationMethod(null);
+        setProfile(null);
     }, []);
     /**
    * Helper to normalize and format user profile data

package/build/src/enums/index.js

@@ -0,0 +1,2 @@
+export * from './registrationMethod.enum';
+export * from './loginMethod.enum';

package/build/src/enums/loginMethod.enum.js

@@ -0,0 +1,8 @@
+export var LoginMethodCode;
+(function (LoginMethodCode) {
+    LoginMethodCode[LoginMethodCode["EmailPassword"] = 1] = "EmailPassword";
+    LoginMethodCode[LoginMethodCode["Facebook"] = 2] = "Facebook";
+    LoginMethodCode[LoginMethodCode["Google"] = 3] = "Google";
+    LoginMethodCode[LoginMethodCode["Apple"] = 4] = "Apple";
+    LoginMethodCode[LoginMethodCode["SSO"] = 5] = "SSO";
+})(LoginMethodCode || (LoginMethodCode = {}));

package/build/src/enums/registrationMethod.enum.js

@@ -0,0 +1,7 @@
+export var RegistrationMethod;
+(function (RegistrationMethod) {
+    RegistrationMethod["EMAIL"] = "email";
+    RegistrationMethod["SSO"] = "sso";
+    RegistrationMethod["MOBILE"] = "mobile";
+    RegistrationMethod["SOCIAL"] = "social";
+})(RegistrationMethod || (RegistrationMethod = {}));

package/build/src/index.js

@@ -10,5 +10,6 @@ export * from './api/axiosClient';
 // export navigator/router
 export * from './navigator';
 // export components
-export * from './screens/Login/components/LoginWebComponent';
-export * from './screens/SignUp/components/SignUpWebComponent';
+export * from './screens/Login/components/LoginWebComponent/index';
+export * from './screens/SignUp/components/SignUpWebComponent/index';
+export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';

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

@@ -12,8 +12,12 @@ 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';
+import SSOSearchOrganization from '../screens/SSOLogin/SearchOrganization/index.native';
+import SSOAuthenticationMethods from '../screens/SSOLogin/AuthenticationMethods/index.native';
+import SSOAuthWebView from '../screens/SSOLogin/AuthWebView/index.native';
+import SSOCallback from '../screens/SSOLogin/SSOCallback/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 }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword })] }));
+    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 }), _jsx(Screen, { name: "SSOSearchOrganization", component: SSOSearchOrganization }), _jsx(Screen, { name: "SSOAuthenticationMethods", component: SSOAuthenticationMethods }), _jsx(Screen, { name: "SSOAuthWebView", component: SSOAuthWebView }), _jsx(Screen, { name: "SSOCallback", component: SSOCallback })] }));
 };
 export { AuthNavigator };

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

@@ -1,7 +1,8 @@
 import { useCallback, useState } from "react";
 import { showMessage } from "../../../../helpers/show-message";
 import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
-import { axiosClient } from "../../../../api/axiosClient";
+import { checkEmailExists } from "../../../../api/auth";
+import { LoginMethodCode } from "../../../../enums";
 const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 /**
  * @internal
@@ -19,50 +20,31 @@ const useEnterEmail = () => {
         setInvalidEmail(!emailRegex.test(value));
         setEmail(value);
     }, [emailRegex]);
-    const handleValidateEmail = ({ onResult }) => {
-        if (loading || isInvalidEmail || !email)
-            return;
+    const handleValidateEmail = async ({ onContinue }) => {
         setLoading(true);
-        axiosClient({
-            url: '/auth/email-exists',
-            method: 'post',
-            data: { email }
-        }).then((res) => {
-            setLoading(false);
-            const code = Number(res.data.loginType);
-            const isKnown = code === 1 || code === 2 || code === 3 || code === 4;
-            if (!isKnown) {
-                showMessage({ message: 'Unsupported login method. Please try again later.' });
-                return;
-            }
-            if (code !== 1) {
-                let providerName = 'your social account';
-                switch (code) {
-                    case 2:
-                        providerName = 'Facebook';
-                        break;
-                    case 3:
-                        providerName = 'Google';
-                        break;
-                    case 4:
-                        providerName = 'Apple';
-                        break;
-                }
-                setLoginType(providerName);
+        try {
+            const { emailExist, loginType } = await checkEmailExists(email);
+            const code = Number(loginType);
+            if (emailExist && code !== LoginMethodCode.EmailPassword) {
+                const loginTypesMap = {
+                    [LoginMethodCode.Facebook]: 'Facebook',
+                    [LoginMethodCode.Google]: 'Google',
+                    [LoginMethodCode.Apple]: 'Apple',
+                    [LoginMethodCode.SSO]: 'SSO',
+                };
+                setLoginType(loginTypesMap[code] || 'your social account');
                 setLoginConflictModalVisible(true);
                 return;
             }
-            onResult({ email, emailExist: true });
-        }).catch(err => {
-            console.log(err);
+            onContinue({ emailExist });
+        }
+        catch (err) {
+            const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';
+            showMessage({ message: errorMessage });
+        }
+        finally {
             setLoading(false);
-            if (err?.response?.status === 404) {
-                onResult({ email, emailExist: false });
-            }
-            if (err?.response?.status >= 500) {
-                showMessage({ message: 'Something went wrong' });
-            }
-        });
+        }
     };
     const clearText = useCallback(() => {
         setEmail('');

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Form, TextInput, useForm } from '@truworth/twc-web-design';
+import { Button, Form, TextInput, useForm } from '@truworth/twc-web-design';
 import { ConfirmationModal as LoginConflictModal } from '../../components/ConfirmationModal';
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterEmail } from "./hooks/internal/useEnterEmail";
 import { SupportDetails } from '../../components/SupportDetails';
-const EnterEmail = ({ onResult }) => {
+const EnterEmail = ({ onContinue, onPressSignInWithSSO }) => {
     const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, appName, handleValidateEmail, setLoginConflictModalVisible, } = useEnterEmail();
     const form = useForm({ defaultValues: { email } });
     return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: "Please enter email to get started.", buttonProps: {
@@ -12,19 +12,17 @@ const EnterEmail = ({ onResult }) => {
                     label: 'Continue',
                     onClick: () => {
                         if (!loading && !isInvalidEmail) {
-                            handleValidateEmail({ onResult });
+                            handleValidateEmail({
+                                onContinue: (params) => onContinue({ email, emailExist: params.emailExist })
+                            });
                         }
                     },
                     disabled: isInvalidEmail || loading,
-                }, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: () => {
-                            if (!loading && !isInvalidEmail) {
-                                handleValidateEmail({ onResult });
-                            }
-                        }, children: _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(TextInput, { type: "email", value: email, size: "medium", placeholder: "example@domain", ...form.register('email', {
+                }, children: [_jsx(Form, { className: "w-full", form: form, children: _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(TextInput, { type: "email", value: email, size: "medium", placeholder: "example@domain", ...form.register('email', {
                                     onChange: (e) => {
                                         enterEmail(e.target.value);
                                     }
                                 }) }) }) }), loginConflictModalVisible &&
-                        _jsx(LoginConflictModal, { title: loginConflictErrorTitle, primaryLabel: 'Okay', description: loginConflictErrorDescription, visible: loginConflictModalVisible, onProceed: () => setLoginConflictModalVisible(false), onClose: () => setLoginConflictModalVisible(false) })] }), _jsx(SupportDetails, {})] }));
+                        _jsx(LoginConflictModal, { title: loginConflictErrorTitle, primaryLabel: 'Okay', description: loginConflictErrorDescription, visible: loginConflictModalVisible, onProceed: () => setLoginConflictModalVisible(false), onClose: () => setLoginConflictModalVisible(false) })] }), _jsx(Button, { isFullWidth: true, type: "button", label: 'Sign In with SSO', variant: 'secondary', className: 'flex-none mt-6', onClick: onPressSignInWithSSO }), _jsx(SupportDetails, {})] }));
 };
 export default EnterEmail;

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

@@ -5,26 +5,26 @@ 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 { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, clearText, handleValidateEmail, onRegistrationMethodChange, setLoginConflictModalVisible, } = useEnterEmail();
+    const onContinue = (params) => {
+        if (params.emailExist) {
+            navigation.navigate('EnterPassword', { email });
+        }
+        else {
+            onRegistrationMethodChange(RegistrationMethod.EMAIL);
+            navigation.navigate('SignUp', { email });
+        }
+    };
     return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(ScreenLayout, { title: "Enter Your Email", buttonProps: {
                     loading,
                     label: 'Continue',
                     onPress: () => {
                         Keyboard.dismiss();
                         if (!loading && !isInvalidEmail) {
-                            handleValidateEmail({
-                                onResult: (params) => {
-                                    if (params.emailExist) {
-                                        navigation.navigate('EnterPassword', { email });
-                                    }
-                                    else {
-                                        onRegistrationMethodChange('email');
-                                        navigation.navigate('SignUp', { email });
-                                    }
-                                }
-                            });
+                            handleValidateEmail({ onContinue });
                         }
                     },
                     disabled: isInvalidEmail || loading,

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

@@ -4,9 +4,11 @@ import { Button, Flex, Form, PasswordInput, ResponsiveModal, Typography, useForm
 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, onSignInWithEmailOTP, onVerifiedResetPasswordOTP }) => {
+const EnterPassword = ({ email, onPressBack, onVerifiedResetPasswordOTP }) => {
     const [showResetPasswordOTPModal, setShowResetPasswordOTPModal] = useState(false);
+    const [showLoginWithEmailOTPModal, setShowLoginWithEmailOTPModal] = useState(false);
     const { loading, password, isInvalidPassword, handleSubmit, onPassword, appName } = useEnterPassword();
     const form = useForm({ defaultValues: { password } });
     return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
@@ -20,8 +22,15 @@ const EnterPassword = ({ email, onPressBack, onSignInWithEmailOTP, onVerifiedRes
                                 _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(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, {})] }));
+                                }) }) }) }), _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 OTP', variant: 'secondary', className: 'flex-none', isFullWidth: true, type: "button", onClick: () => 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, show: showLoginWithEmailOTPModal, hide: () => setShowLoginWithEmailOTPModal(false) })] }));
+};
+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 }) }));
 };
 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 }) }));

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

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { Flex, ResponsiveModal, Typography } from '@truworth/twc-web-design';
+import { Flex } 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';
+import SSOSearchOrganization from '../../../SSOLogin/SearchOrganization/index';
+import SSOAuthenticationMethods from '../../../SSOLogin/AuthenticationMethods/index';
 const LoginWebComponent = () => {
     const [email, setEmail] = useState('');
     const [loginState, setLoginState] = useState('EnterEmail');
-    const [showLoginWithEmailOTPModal, setShowLoginWithEmailOTPModal] = useState(false);
     const [sessionToken, setSessionToken] = useState('');
+    const [selectedClient, setSelectedClient] = useState(null);
     const { LogoComponent } = useAuthPackageContext();
     const router = useRouter();
     const onRedirectToPassword = (email) => {
@@ -28,33 +29,33 @@ const LoginWebComponent = () => {
     const renderStep = () => {
         switch (loginState) {
             case 'EnterEmail':
-                return (_jsx(EnterEmail, { onResult: (params) => {
+                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'), onSignInWithEmailOTP: () => {
-                        if (email) {
-                            setShowLoginWithEmailOTPModal(true);
-                        }
-                    }, onVerifiedResetPasswordOTP: ({ sessionToken }) => {
+                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, { onPressBack: () => setLoginState('EnterEmail'), client: selectedClient }));
             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(), _jsx(LoginWithEmailOTPModal, { show: showLoginWithEmailOTPModal, hide: () => setShowLoginWithEmailOTPModal(false), email: email })] }) }));
+    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 };
-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/SSOLogin/AuthWebView/index.js

@@ -0,0 +1,9 @@
+const SSOAuthWebView = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] SSOAuthWebView is only available for native app screens");
+        }
+    }
+    return null;
+};
+export default SSOAuthWebView;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WebView } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { Text } from 'react-native';
+import parse from 'url-parse';
+import { useState } from 'react';
+const SSOAuthWebView = ({ navigation, route }) => {
+    const { clientId, authenticationUrl, redirectUri } = route.params;
+    const [error, setError] = useState(null);
+    return (_jsxs(Layout, { style: { flex: 1 }, children: [error && (_jsx(Layout, { style: { padding: 16, backgroundColor: '#fee' }, children: _jsx(Text, { style: { color: 'red' }, children: error }) })), _jsx(WebView, { source: { uri: authenticationUrl }, style: { flex: 1 }, onError: (syntheticEvent) => {
+                    const { nativeEvent } = syntheticEvent;
+                    setError(`Failed to load authentication page: ${nativeEvent.description}`);
+                }, onHttpError: (syntheticEvent) => {
+                    const { nativeEvent } = syntheticEvent;
+                    setError(`Authentication provider error: ${nativeEvent.statusCode}`);
+                }, onNavigationStateChange: (navState) => {
+                    setError(null);
+                    const currentUrl = parse(navState.url, true).href;
+                    const authUrl = parse(authenticationUrl, true).href;
+                    if (currentUrl != authUrl && navState.url.includes(redirectUri)) {
+                        const query = parse(navState.url, true).query;
+                        const { code } = query;
+                        navigation.replace('SSOCallback', { clientId, code });
+                    }
+                } })] }));
+};
+export default SSOAuthWebView;

package/build/src/screens/SSOLogin/AuthWebView/types.js

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

package/build/src/screens/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from "react";
+import { axiosClient } from "../../../../../api/axiosClient";
+import { showMessage } from "../../../../../helpers/show-message";
+const useSSOAuthenticationMethods = () => {
+    const [loading, setLoading] = useState(false);
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const initiateSSOLogin = ({ clientId, onSSOLoginInitiated }) => {
+        setLoading(true);
+        axiosClient({
+            url: `/auth/login-sso/${clientId}/initiate`,
+            method: 'POST',
+        }).then((res) => {
+            if (!isMountedRef.current)
+                return;
+            const { authenticationUrl, redirectUri } = res.data;
+            onSSOLoginInitiated({ clientId, authenticationUrl, redirectUri });
+        }).catch((error) => {
+            if (!isMountedRef.current)
+                return;
+            const message = error?.response?.data?.errors?.[0]?.message ??
+                error?.response?.data?.message ??
+                error?.message ??
+                'Something went wrong';
+            showMessage({ message });
+        }).finally(() => {
+            if (isMountedRef.current) {
+                setLoading(false);
+            }
+        });
+    };
+    return { loading, initiateSSOLogin };
+};
+export { useSSOAuthenticationMethods };

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Flex, Typography } from "@truworth/twc-web-design";
+import { useSSOAuthenticationMethods } from "./hooks/internal/useSSOAuthenticationMethods";
+import { useAuthPackageContext } from "../../../hooks/internal/useAuthPackageContext";
+import { ScreenLayout } from "../../../components/ScreenLayout";
+import { CDN_IMAGES_URL } from "@truworth/twc-web-common";
+import { showMessage } from "../../../helpers/show-message";
+import React from "react";
+const SSOAuthenticationMethods = ({ client, onPressBack }) => {
+    const { loading, initiateSSOLogin } = useSSOAuthenticationMethods();
+    const { LogoComponent } = useAuthPackageContext();
+    const renderLogo = () => {
+        if (!LogoComponent) {
+            return (_jsx("img", { width: 160, height: 35, className: 'md:mt-0 mt-6 md:h-[40px] h-[30px]', src: `${CDN_IMAGES_URL ?? ''}/new-twc_logo.svg` }));
+        }
+        // If it's already a React element, return it as is
+        if (React.isValidElement(LogoComponent)) {
+            return LogoComponent;
+        }
+        // If it's a function component, render it
+        if (typeof LogoComponent === 'function') {
+            const Component = LogoComponent;
+            return _jsx(Component, {});
+        }
+        // Fallback to default logo
+        return (_jsx("img", { width: 160, height: 35, className: 'md:mt-0 mt-6 md:h-[40px] h-[30px]', src: `${CDN_IMAGES_URL ?? ''}/new-twc_logo.svg` }));
+    };
+    const onSSOLoginInitiated = (result) => {
+        try {
+            localStorage.setItem('clientId', String(result.clientId));
+            const u = new URL(result.authenticationUrl);
+            window.location.href = u.toString();
+        }
+        catch (error) {
+            showMessage({ message: 'Failed to initialize SSO login. Please try again.' });
+            return;
+        }
+    };
+    return (_jsx(ScreenLayout, { 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", onClick: () => initiateSSOLogin({ clientId: client.id, onSSOLoginInitiated }), loading: loading }), _jsx(Typography, { type: "body", size: "large", className: "mt-6 text-gray-600", children: "The above option is 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" })] })] })] }), onPressBack: onPressBack, buttonProps: {
+            label: "Login with Email & Password",
+            variant: "secondary",
+            onClick: onPressBack,
+        } }));
+};
+export default SSOAuthenticationMethods;