@truworth/twc-auth 1.2.12-beta.0 → 1.2.12-beta.2

package/build/src/screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index.js

@@ -1,59 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
 import { Flex, Typography } from '@truworth/twc-web-design';
 import { useSSOCallback } from '../../hooks/internal/useSSOCallback';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import redirectAnimation from '../../../../../../assets/animation/redirect-home.json';
+import { useNavigator } from '../../../../../hooks/useNavigator';
+import { LoadingAnimation } from '../../../../../components/LoadingAnimation';
 import { RegistrationMethod } from '../../../../../enums';
-import dynamic from 'next/dynamic';
-const Lottie = dynamic(() => import('react-lottie'), { ssr: false });
-const SSOCallbackComponents = () => {
-    const router = useRouter();
+const SSOCallbackComponents = ({ authMethodOverride } = {}) => {
+    const navigator = useNavigator();
     const [clientId, setClientId] = useState('');
     const [code, setCode] = useState('');
-    // Resolve code/token from query (preferred) or localStorage; clientId/authMethod from localStorage only
+    const [authMethod, setAuthMethod] = useState(authMethodOverride ?? null);
+    const [isReady, setIsReady] = useState(false);
+    // Resolve code from query params; clientId from localStorage (only needed for OIDC)
     useEffect(() => {
-        const { code } = router.query;
+        const query = navigator.query;
+        const codeFromQuery = query.code;
         if (typeof window !== 'undefined') {
             try {
+                // clientId only needed for OIDC, not SAML
                 const storedClientId = localStorage.getItem('clientId') || '';
+                const storedAuthMethod = localStorage.getItem('authMethod') || 'oidc';
                 setClientId(storedClientId);
-                setCode(typeof code === 'string' ? code : '');
+                if (!authMethodOverride) {
+                    setAuthMethod(storedAuthMethod);
+                }
+                setCode(typeof codeFromQuery === 'string' ? codeFromQuery : '');
+                setIsReady(true);
             }
             catch (error) {
                 console.log('Failed to read from localStorage:', error);
-                setCode(typeof code === 'string' ? code : '');
-                // Fallback: proceed without stored values
+                setCode(typeof codeFromQuery === 'string' ? codeFromQuery : '');
+                setIsReady(true);
             }
         }
-    }, [router.query]);
-    const { result, error } = useSSOCallback({ clientId, code });
+    }, [navigator.query, authMethodOverride]);
+    const { result, error } = useSSOCallback({
+        clientId,
+        code,
+        authMethod: authMethod ?? 'oidc',
+        isReady,
+    });
     useEffect(() => {
         if (result?.registrationToken) {
-            router.push({
-                pathname: '/registration',
+            navigator.pushAbsolute('/registration', {
                 query: {
                     registrationMethod: RegistrationMethod.SSO,
                     ...result,
                 }
             });
         }
-    }, [result, router]);
+    }, [result, navigator]);
     useEffect(() => {
         if (error) {
             setTimeout(() => {
-                router.back();
+                navigator.back();
             }, 1500);
         }
-    }, [error, router]);
-    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { children: [_jsx(Lottie
-                //@ts-ignore
-                , { 
-                    //@ts-ignore
-                    options: {
-                        animationData: redirectAnimation,
-                        loop: true,
-                        autoplay: true
-                    }, height: 230, width: 250 }), _jsx(Typography, { size: 'h6', type: 'heading', color: 'gray-400', children: "Authenticating and Redirecting ..." })] }) }));
+    }, [error, navigator]);
+    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { children: [_jsx(LoadingAnimation, { height: 230, width: 250 }), _jsx(Typography, { size: 'h6', type: 'heading', color: 'gray-400', children: "Authenticating and Redirecting ..." })] }) }));
 };
 export { SSOCallbackComponents };

package/build/src/screens/SSOLogin/SSOCallback/hooks/internal/useSSOCallback.js

@@ -7,17 +7,27 @@ import { RegistrationMethod } from "../../../../../enums";
  * @internal
  * Hook for managing SSOCallback screen state and auth context integration.
  * This hook is not exposed to package consumers.
+ *
+ * Supports both OIDC and SAML flows:
+ * - OIDC: Calls /callback endpoint with authorization code
+ * - SAML: Calls /saml-sso-complete endpoint with exchange code
  */
-const useSSOCallback = ({ clientId, code }) => {
+const useSSOCallback = ({ clientId, code, authMethod, isReady = true }) => {
     const [error, setError] = useState(null);
     const [result, setResult] = useState(null);
+    const [hasProcessed, setHasProcessed] = useState(false);
     const { onLogin, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
-    const processOAuthCallback = useCallback((code) => {
+    const processSSOCallback = useCallback((codeToProcess) => {
         setError(null);
+        // SAML: Use simplified endpoint that doesn't require clientId
+        // OIDC: Use legacy endpoint with clientId
+        const endpoint = authMethod === 'saml'
+            ? `/auth/saml/complete`
+            : `/auth/login-sso/${clientId}/callback`;
         axiosClient({
-            url: `/auth/login-sso/${clientId}/callback`,
+            url: endpoint,
             method: 'POST',
-            data: { code },
+            data: { code: codeToProcess },
         }).then((res) => {
             if (res?.data?.registrationToken) {
                 onRegistrationMethodChange(RegistrationMethod.SSO);
@@ -32,12 +42,17 @@ const useSSOCallback = ({ clientId, code }) => {
             setError(errorMessage);
             return showMessage({ message: errorMessage });
         });
-    }, [clientId, code]);
+    }, [clientId, authMethod, onLogin, onRegistrationMethodChange, onTokenChange]);
     useEffect(() => {
-        if (code && clientId) {
-            processOAuthCallback(code);
+        if (!isReady || !code || hasProcessed)
+            return;
+        // SAML only needs code; OIDC needs both code and clientId
+        const canProcess = authMethod === 'saml' || clientId;
+        if (canProcess) {
+            setHasProcessed(true);
+            processSSOCallback(code);
         }
-    }, [code, clientId]);
+    }, [isReady, code, clientId, authMethod, hasProcessed, processSSOCallback]);
     return { result, error };
 };
 export { useSSOCallback };

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

@@ -8,8 +8,8 @@ import loadingSpinner from '../../../../assets/loading-spinner.json';
 import Lottie from 'lottie-react-native';
 const { gray } = Colors;
 const SSOCallback = ({ navigation, route }) => {
-    const { clientId, code } = route.params;
-    const { result, error } = useSSOCallback({ clientId, code });
+    const { clientId, code, authMethod } = route.params;
+    const { result, error } = useSSOCallback({ clientId, code, authMethod });
     useEffect(() => {
         if (result?.registrationToken) {
             navigation.replace('SignUp', { ...result });

package/build/src/screens/SignUp/components/SignUpForm/index.js

@@ -7,7 +7,7 @@ import { SupportDetails } from "../../../../components/SupportDetails";
 import { ScreenLayout } from "../../../../components/ScreenLayout";
 import { CountryCodeDropdown } from "../../../CountryCode/components/CountryCodeDropdown";
 import { useSignUp } from "../../hooks/internal/useSignUp";
-import { useRouter } from "next/router";
+import { useNavigator } from "../../../../hooks/useNavigator";
 import ReCAPTCHA from 'react-google-recaptcha';
 import moment from "moment";
 import dayjs from 'dayjs';
@@ -23,12 +23,13 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
     const [isHuman, setIsHuman] = useState(isProduction ? false : true);
     const [termsAndConditions, setTermsAndConditions] = useState(false);
     const [selectedCountry, setSelectedCountry] = useState({ countryCode: "in", phoneCode: "91", name: "INDIA" });
-    const router = useRouter();
+    const navigator = useNavigator();
+    const routerQuery = navigator.query;
     const form = useForm({
         liveValidation: true,
         defaultValues: {
-            firstName: userDetails.firstName ?? getQueryParam(router.query.firstName),
-            lastName: userDetails.lastName ?? getQueryParam(router.query.lastName),
+            firstName: userDetails.firstName ?? getQueryParam(routerQuery.firstName),
+            lastName: userDetails.lastName ?? getQueryParam(routerQuery.lastName),
             dateOfBirth: userDetails.selectedDOB,
             email: userDetails.email ?? "",
             phone: userDetails.phone ?? "",
@@ -38,7 +39,7 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
     });
     const values = form.watch();
     useEffect(() => {
-        const rawMethod = router.query.registrationMethod;
+        const rawMethod = routerQuery.registrationMethod;
         const registrationMethodFromQuery = Array.isArray(rawMethod) ? rawMethod[0] : rawMethod;
         if (typeof registrationMethodFromQuery === 'string') {
             const method = registrationMethodFromQuery.toLowerCase();
@@ -50,11 +51,11 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
             }
             onRegistrationMethodChange(method);
         }
-    }, [router.query.registrationMethod]);
+    }, [routerQuery.registrationMethod]);
     const { loading, setGender, setSelectedDOB, phone, setPhone, email, setEmail, setReferralCode, setCountryCode, countryCode, linkedAccounts, registrationMethod, onRegistrationMethodChange, linkedAccountsSheet, showLinkedAccountsSheet, handleFirstNameChange, handleLastNameChange, handleEmailChange, handleMobileChange, handleSubmit, getLoginTypeText, appName, termsAndConditionsUrl } = useSignUp();
     useEffect(() => {
         if (!registrationMethod) {
-            const registrationMethodFromQuery = router.query.registrationMethod;
+            const registrationMethodFromQuery = routerQuery.registrationMethod;
             if (typeof registrationMethodFromQuery === 'string') {
                 const method = registrationMethodFromQuery.toLowerCase();
                 onRegistrationMethodChange(method);
@@ -63,10 +64,10 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
         ;
     }, [registrationMethod]);
     useEffect(() => {
-        if (router.query.registrationToken) {
+        if (routerQuery.registrationToken) {
             form.reset({
-                firstName: getQueryParam(router.query.firstName) ?? userDetails.firstName,
-                lastName: getQueryParam(router.query.lastName) ?? userDetails.lastName,
+                firstName: getQueryParam(routerQuery.firstName) ?? userDetails.firstName,
+                lastName: getQueryParam(routerQuery.lastName) ?? userDetails.lastName,
             });
         }
     }, []);
@@ -93,7 +94,7 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
         setIsHuman(Boolean(value));
     };
     const onGoToLogin = () => {
-        router.push('/login');
+        navigator.pushAbsolute('/login');
     };
     const onProceed = () => {
         const params = {
@@ -102,8 +103,8 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
             gender: values.gender,
             selectedDOB: values.dateOfBirth,
             referralCode: values.referralCode,
-            email: email.length > 0 ? email : getQueryParam(router.query.email) || '',
-            phone: phone.length > 0 ? phone : getQueryParam(router.query.phone) || '',
+            email: email.length > 0 ? email : getQueryParam(routerQuery.email) || '',
+            phone: phone.length > 0 ? phone : getQueryParam(routerQuery.phone) || '',
             countryCode,
         };
         onContinue(params);
@@ -197,12 +198,11 @@ const SignUpFormComponent = ({ userDetails, onContinue }) => {
                             : _jsx(Typography, { type: "utility", size: "small", color: "red-600", children: "reCAPTCHA misconfigured. Set NEXT_PUBLIC_RECAPTCHA_SITE_KEY." })), _jsx(Row, { className: "py-0 my-5", children: _jsx(Col, { children: _jsx(CustomCheckbox, { checked: termsAndConditions, onClick: (e) => {
                                         setTermsAndConditions(prev => !prev);
                                     }, className: "mt-4", label: _jsxs(Typography, { type: "body", size: "medium", children: ["I accept the", _jsx("a", { target: "_blank", rel: "noopener noreferrer", href: termsAndConditionsUrl, className: "px-1 text-primary", children: "Terms & Conditions" }), "listed on ", appName] }) }) }) })] }) }), _jsxs(Flex, { align: 'center', className: 'p-0 mt-4', children: [_jsx(Typography, { type: "body", size: "large", className: "text-gray-700", children: "Already have an account?" }), _jsx(Button, { label: "Sign-In", variant: "link", size: "medium", className: "ml-2 h-auto px-0", onClick: onGoToLogin })] }), linkedAccountsSheet &&
-                _jsx(LinkedAccountsSheet, { phone: phone, countryCode: countryCode, visible: linkedAccountsSheet, hide: () => showLinkedAccountsSheet(false), linkedAccounts: linkedAccounts, getLoginTypeText: getLoginTypeText })] }));
+                _jsx(LinkedAccountsSheet, { phone: phone, countryCode: countryCode, visible: linkedAccountsSheet, hide: () => showLinkedAccountsSheet(false), linkedAccounts: linkedAccounts, getLoginTypeText: getLoginTypeText, onGoToLogin: onGoToLogin })] }));
 };
-const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, countryCode, phone, getLoginTypeText }) => {
-    const router = useRouter();
+const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, countryCode, phone, getLoginTypeText, onGoToLogin }) => {
     return (_jsxs(ResponsiveModal, { open: visible, onClose: hide, onOpenChange: hide, title: _jsxs(_Fragment, { children: [_jsx(Typography, { type: "heading", size: "h6", children: "Mobile Number Already Linked" }), _jsxs(Typography, { type: "utility", size: "medium", color: "gray-600", className: "mt-2 mb-3", children: ["The mobile number +", countryCode, " ", String(phone).replace(/\d(?=\d{2})/g, 'X'), " is linked to the following ", linkedAccounts.length === 1 ? 'account' : `${linkedAccounts.length} accounts`, "."] }), _jsx("hr", {})] }), centered: true, showCloseButton: false, className: "px-0", footer: _jsxs(Flex, { direction: "column", children: [_jsx(Button, { isFullWidth: true, variant: "primary", label: "Go to Login", onClick: () => {
-                        router.push('/login');
+                        onGoToLogin();
                         hide();
                     }, className: "!ml-0 mb-[-4px]" }), _jsx(SupportDetails, {})] }), children: [_jsx(Typography, { type: "utility", size: "medium", children: "Please login through any of the below account or contact our support team for assistance" }), linkedAccounts.map((item) => {
                 const key = item.memberId ?? item.email ?? `${item.loginType}-${item.createdOn}`;

package/build/src/screens/SignUp/components/SignUpWebComponent/index.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from "@truworth/twc-web-design";
-import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { AdvancedTransitionWrapper } from "../../../../components/AdvancedTransitionWrapper";
 import { SignUpFormComponent } from "../SignUpForm";
 import CreatePassword from "../../../CreatePassword";
 import UserConsent from "../../../UserConsent";
+import { useNavigator } from "../../../../hooks/useNavigator";
 const SignUpWebComponent = () => {
-    const router = useRouter();
+    const navigator = useNavigator();
     const [signUpStep, setSignUpStep] = useState('registration');
     const [userDetails, setUserDetails] = useState({});
     const [registrationToken, setRegistrationToken] = useState('');
     const [fbUserId, setFbUserId] = useState('');
     const [googleUserId, setGoogleUserId] = useState('');
     useEffect(() => {
-        const rawRegistrationToken = router.query.registrationToken;
-        const rawFbUserId = router.query.fbUserId;
-        const rawGoogleUserId = router.query.googleUserId;
+        const query = navigator.query;
+        const rawRegistrationToken = query.registrationToken;
+        const rawFbUserId = query.fbUserId;
+        const rawGoogleUserId = query.googleUserId;
         if (typeof rawRegistrationToken === 'string') {
             setRegistrationToken(rawRegistrationToken);
         }
@@ -26,7 +27,7 @@ const SignUpWebComponent = () => {
         if (typeof rawGoogleUserId === 'string') {
             setGoogleUserId(rawGoogleUserId);
         }
-    }, [router.query.registrationToken]);
+    }, [navigator.query.registrationToken]);
     const renderStep = () => {
         switch (signUpStep) {
             case 'registration':

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

@@ -1,19 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import dynamic from 'next/dynamic';
 import React from 'react';
-import Image from 'next/image';
 import { useEffect, useState } from "react";
 import { Info } from 'lucide-react';
-import { useRouter } from "next/router";
 import { Flex, Typography, ResponsiveModal as Modal, Button, ResponsiveModal } from '@truworth/twc-web-design';
 import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContext';
 import { CDN_IMAGES_URL } from '../../constants/cdn-url';
 import { useConsent } from './hooks/internal/useConsent';
 import { ScreenLayout } from "../../components/ScreenLayout";
+import { LoadingAnimation } from '../../components/LoadingAnimation';
 import VerifyMobile from "../VerifyMobile";
 import VerifyEmail from "../VerifyEmail";
-import redirectHome from '../../../assets/animation/redirect-home.json';
-const Lottie = dynamic(() => import('react-lottie'), { ssr: false });
 const UserConsent = ({ userDetails, handleBack }) => {
     const { email, phone } = userDetails || {};
     const [redirectModal, setRedirectModal] = useState(false);
@@ -54,7 +50,7 @@ const UserConsent = ({ userDetails, handleBack }) => {
                             : typeof LogoComponent === 'function'
                                 ? React.createElement(LogoComponent)
                                 :
-                                    _jsx(Image, { src: `${CDN_IMAGES_URL ?? ''}/new-twc_logo.svg`, alt: "logo", priority: true, width: 176, height: 40, className: "mb-9 h-auto" }), _jsx(Flex, { className: 'p-0 lg:gap-8 flex-col-reverse lg:flex-row', children: _jsxs(Flex, { direction: 'column', className: 'p-0', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'mb-3 text-gray-900', children: "Thank you for your trust & sharing your personal information with us." }), _jsx(Typography, { type: 'heading', size: 'h6', className: "mb-6 text-gray-600", children: "User Consent" }), _jsxs(Typography, { type: 'body', size: 'medium', className: 'lg:text-sm text-gray-800', children: ["I provide ", appName, " with the consent to collect, use, store, share, and/or otherwise process my personal information including but not limited to Name, Gender (biological sex at the time of birth), Date of Birth and Email Address, Mobile Number, and other health vital & lifestyle information). The information is collected for the specified, explicit and legitimate purposes only - which is to assess me or my family's Health Risk, schedule Investigations, Health Check-ups, Doctor Consultations, Procedure, Treatment, provide Health & Wellness Coaching and Payments and ensure that the same is not excessive in relation to the purposes for which it is being collected, and also ensure that such personal information is retained only as long as the user is registered on the platform. I, also agree to receive Email / SMS/WhatsApp alerts and calls in connection with me or my family's health & wellness services."] }), _jsxs(Typography, { type: 'body', size: 'medium', className: "lg:text-sm mt-5 text-gray-800", children: ["Please refer to the 'Terms & Conditions', Privacy & Data Protection Policy listed on ", _jsxs("a", { href: privacyPolicyUrl, target: '_blank', rel: "noopener noreferrer", className: "text-primary block font-semibold", children: [appName, "'s Privacy & Data Protection Policy"] })] }), _jsxs(Flex, { className: '!px-0 flex-col lg:flex-row mt-8', children: [_jsx(Button, { label: "Yes, I Agree", variant: "primary", loading: loading, onClick: () => onAgree({
+                                    _jsx("img", { src: `${CDN_IMAGES_URL ?? ''}/new-twc_logo.svg`, alt: "logo", width: 176, height: 40, className: "mb-9 h-auto w-[176px]" }), _jsx(Flex, { className: 'p-0 lg:gap-8 flex-col-reverse lg:flex-row', children: _jsxs(Flex, { direction: 'column', className: 'p-0', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'mb-3 text-gray-900', children: "Thank you for your trust & sharing your personal information with us." }), _jsx(Typography, { type: 'heading', size: 'h6', className: "mb-6 text-gray-600", children: "User Consent" }), _jsxs(Typography, { type: 'body', size: 'medium', className: 'lg:text-sm text-gray-800', children: ["I provide ", appName, " with the consent to collect, use, store, share, and/or otherwise process my personal information including but not limited to Name, Gender (biological sex at the time of birth), Date of Birth and Email Address, Mobile Number, and other health vital & lifestyle information). The information is collected for the specified, explicit and legitimate purposes only - which is to assess me or my family's Health Risk, schedule Investigations, Health Check-ups, Doctor Consultations, Procedure, Treatment, provide Health & Wellness Coaching and Payments and ensure that the same is not excessive in relation to the purposes for which it is being collected, and also ensure that such personal information is retained only as long as the user is registered on the platform. I, also agree to receive Email / SMS/WhatsApp alerts and calls in connection with me or my family's health & wellness services."] }), _jsxs(Typography, { type: 'body', size: 'medium', className: "lg:text-sm mt-5 text-gray-800", children: ["Please refer to the 'Terms & Conditions', Privacy & Data Protection Policy listed on ", _jsxs("a", { href: privacyPolicyUrl, target: '_blank', rel: "noopener noreferrer", className: "text-primary block font-semibold", children: [appName, "'s Privacy & Data Protection Policy"] })] }), _jsxs(Flex, { className: '!px-0 flex-col lg:flex-row mt-8', children: [_jsx(Button, { label: "Yes, I Agree", variant: "primary", loading: loading, onClick: () => onAgree({
                                                     userDetails,
                                                     source: 'web',
                                                     onResult: onAgreeHandler
@@ -67,19 +63,17 @@ const UserConsent = ({ userDetails, handleBack }) => {
                     } })] }));
 };
 const RedirectToHomeModal = ({ redirectModal }) => {
-    const router = useRouter();
+    const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
-        router.push('/login');
+        setIsMounted(true);
+        // Redirect after a short delay to show the modal
+        const timer = setTimeout(() => {
+            // Use window.location for full page navigation to avoid context issues
+            window.location.href = '/login';
+        }, 2000);
+        return () => clearTimeout(timer);
     }, []);
-    return (_jsxs(Modal, { title: "", open: redirectModal, showCloseButton: false, footer: null, children: [_jsx(Lottie
-            /* @ts-ignore */
-            , { 
-                /* @ts-ignore */
-                options: {
-                    animationData: redirectHome,
-                    loop: true,
-                    autoplay: true
-                }, height: 150, width: 250 }), _jsxs(Flex, { direction: 'column', style: { marginTop: "-30px" }, children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center mb-6', color: "text-gray-800", children: "Redirecting to the website homepage" }), _jsxs(Flex, { children: [_jsx(Info, { color: 'blue' }), _jsx(Typography, { type: 'body', size: 'small', className: 'text-center mb-6', color: "text-gray-800", children: "We have not stored any information you shared during registration." })] })] })] }));
+    return (_jsxs(Modal, { title: "", open: redirectModal, showCloseButton: false, footer: null, children: [isMounted && (_jsx(LoadingAnimation, { height: 150, width: 250 })), _jsxs(Flex, { direction: 'column', style: { marginTop: isMounted ? "-30px" : "0" }, children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center mb-6', color: "text-gray-800", children: "Redirecting to the website homepage" }), _jsxs(Flex, { children: [_jsx(Info, { color: 'blue' }), _jsx(Typography, { type: 'body', size: 'small', className: 'text-center mb-6', color: "text-gray-800", children: "We have not stored any information you shared during registration." })] })] })] }));
 };
 const VerifyMobileModal = ({ visible, hide, sessionToken, phone }) => {
     return (_jsx(ResponsiveModal, { title: 'Verify Mobile', open: visible, onClose: hide, onOpenChange: hide, maskClosable: false, showCloseButton: false, children: _jsx(VerifyMobile, { sessionToken: sessionToken, phone: phone }) }));

package/build/src/screens/Welcome/SocialAuth/hooks/web/useFacebookAuth.web.js

@@ -1,13 +1,13 @@
 import { useEffect, useCallback, useState } from "react";
-import { useRouter } from "next/router";
 import { useAuthPackageContext } from "../../../../../hooks/internal/useAuthPackageContext";
 import { RegistrationMethod } from "../../../../../enums";
 import { handleFacebookAuth } from "../../commonSocialAuth";
 import { showMessage } from "../../../../../helpers/show-message";
+import { useNavigator } from "../../../../../hooks/useNavigator";
 export const useFacebookAuth = () => {
     const [error, setError] = useState(null);
     const { onLogin, socialLoginConfig, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
-    const router = useRouter();
+    const navigator = useNavigator();
     const facebookAppId = socialLoginConfig?.facebook?.webClientId;
     // Load Facebook SDK once
     useEffect(() => {
@@ -79,8 +79,7 @@ export const useFacebookAuth = () => {
                     switch (result.status) {
                         case "REGISTER":
                             onRegistrationMethodChange(RegistrationMethod.SOCIAL);
-                            return router.push({
-                                pathname: "/registration",
+                            return navigator.pushAbsolute("/registration", {
                                 query: {
                                     email,
                                     firstName: nameParts[0],

package/build/src/screens/Welcome/SocialAuth/hooks/web/useGoogleAuth.web.js

@@ -3,10 +3,10 @@ import { useGoogleLogin } from "react-google-login";
 import { useAuthPackageContext } from "../../../../../hooks/internal/useAuthPackageContext";
 import { showMessage } from "../../../../../helpers/show-message";
 import { RegistrationMethod } from "../../../../../enums";
-import { useRouter } from "next/router";
+import { useNavigator } from "../../../../../hooks/useNavigator";
 import { handleGoogleAuth } from "../../commonSocialAuth";
 export const useGoogleAuth = () => {
-    const router = useRouter();
+    const navigator = useNavigator();
     const { onLogin, socialLoginConfig, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     const googleAppId = socialLoginConfig?.google?.webClientId;
     const onSuccess = async (response) => {
@@ -20,8 +20,7 @@ export const useGoogleAuth = () => {
         switch (result.status) {
             case "REGISTER":
                 onRegistrationMethodChange(RegistrationMethod.SOCIAL);
-                return router.push({
-                    pathname: "/registration",
+                return navigator.pushAbsolute("/registration", {
                     query: {
                         email,
                         firstName: givenName,

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

@@ -23,6 +23,6 @@ const Welcome = ({ onClickEnterEmail }) => {
         // 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` }));
     };
-    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.3, children: _jsxs(Flex, { justify: 'center', align: "center", direction: 'column', className: 'h-screen w-[80%] mx-auto gap-6', children: [renderLogo(), _jsxs(Flex, { justify: "center", align: "center", direction: "column", className: 'gap-2', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center text-[#1A1A1A] font-semibold', children: "Welcome!" }), _jsx(Typography, { type: 'utility', size: 'large', color: "gray-400", className: 'text-center font-semibold', children: "Select an option to proceed" })] }), _jsx(Button, { label: "Enter Your Email", variant: "secondary", onClick: onClickEnterEmail, leftIcon: _jsx(Mail, { size: 20 }), isFullWidth: true })] }) }));
+    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.3, children: _jsxs(Flex, { justify: 'center', align: "center", direction: 'column', className: 'h-screen w-[80%] mx-auto gap-6', children: [renderLogo(), _jsxs(Flex, { justify: "center", align: "center", direction: "column", className: 'gap-2', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center text-gray-900 font-semibold', children: "Welcome!" }), _jsx(Typography, { type: 'utility', size: 'large', color: "gray-400", className: 'text-center font-semibold', children: "Select an option to proceed" })] }), _jsx(Button, { label: "Enter Your Email", variant: "secondary", onClick: onClickEnterEmail, leftIcon: _jsx(Mail, { size: 20 }), isFullWidth: true })] }) }));
 };
 export default Welcome;

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

@@ -1,3 +1,3 @@
 import type { ConfirmationModalProps } from './types';
-declare const ConfirmationModal: ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName, iconColor, description }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName, iconClassName, description }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export { ConfirmationModal };

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

@@ -4,7 +4,10 @@ type ConfirmationModalProps = {
     primaryLabel: string;
     secondaryLabel?: string;
     iconName?: string;
+    /** @deprecated Use iconClassName instead for Tailwind classes */
     iconColor?: string;
+    /** Tailwind classes for icon styling, e.g. "text-primary" or "text-utility-warning-main" */
+    iconClassName?: string;
     onClose: () => void;
     onProceed?: () => void;
     onDismiss?: () => void;

package/build/types/components/LoadingAnimation/index.d.ts

@@ -0,0 +1,6 @@
+interface LoadingAnimationProps {
+    height?: number;
+    width?: number;
+}
+declare const LoadingAnimation: ({ height, width, }: LoadingAnimationProps) => import("react/jsx-runtime").JSX.Element;
+export { LoadingAnimation };

package/build/types/constants/password-requirements.d.ts

@@ -0,0 +1,4 @@
+export declare const strongPasswordRequirements: {
+    regex: RegExp;
+    text: string;
+}[];

package/build/types/contexts/AuthContext.d.ts

@@ -21,6 +21,8 @@ declare const AuthPackageContext: React.Context<AuthPackageContextValue | null>;
  * Wraps both AuthContext (public) and AuthPackageContext (internal).
  *
  * @param children - React children to be rendered inside the provider
+ * @param router - Router adapter for navigation in web apps only
+ * @param basePath - Base path for web routes where the auth module is mounted (default: '')
  * @param LogoComponent - Optional component for branding/logo in auth flows
  * @param session - Initial session containing token & sessionTimeout (if available)
  * @param supportEmail - Optional support email for auth flows
@@ -32,7 +34,7 @@ declare const AuthPackageContext: React.Context<AuthPackageContextValue | null>;
  * @param openChatSupport - Optional callback to open chat support
  * @param socialLoginConfig - Optional social login configuration
  */
-declare const AuthProvider: ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }: AuthContextProps) => import("react/jsx-runtime").JSX.Element;
+declare const AuthProvider: ({ children, router, basePath, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }: AuthContextProps) => import("react/jsx-runtime").JSX.Element;
 export { AuthProvider };
 export default AuthContext;
 export { AuthPackageContext };

package/build/types/contexts/type.d.ts

@@ -1,6 +1,21 @@
 import type React from 'react';
 import type { ClientProfile, MemberProfile, Profile, Partner, RegistrationMethod } from '../types/types';
 import type { SocialLoginsEnum } from '../enums';
+/**
+ * Router adapter interface that host apps must implement.
+ * This allows the package to be framework-agnostic.
+ */
+type RouterAdapter = {
+    push: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    replace: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    back: () => void;
+    getQuery: () => Record<string, string | string[] | undefined>;
+    getPathname: () => string;
+};
 interface LoginResponse {
     token: string;
     member?: MemberProfile;
@@ -17,6 +32,10 @@ interface AppConfig {
 }
 interface AuthContextProps {
     children: React.ReactNode;
+    /** Router adapter for navigation - must be provided by web host app */
+    router?: RouterAdapter;
+    /** Base path where the auth module is mounted (e.g., '' for root or '/auth') */
+    basePath?: string;
     LogoComponent?: React.ComponentType | React.ReactElement;
     session: {
         token: string;
@@ -45,6 +64,10 @@ interface AuthContextValue {
 }
 interface AuthPackageContextValue {
     token: string;
+    /** Router adapter for navigation */
+    router?: RouterAdapter;
+    /** Base path where the auth module is mounted */
+    basePath?: string;
     LogoComponent?: React.ComponentType | React.ReactElement;
     appConfig: AppConfig;
     socialLoginConfig?: Partial<Record<SocialLoginsEnum, {
@@ -68,4 +91,4 @@ interface AuthConfigResponse {
     isInternational: boolean;
     defaultCircle: any;
 }
-export type { LoginResponse, AuthContextProps, AuthContextValue, MemberProfile, ClientProfile, AuthConfigResponse, Profile, Partner, AuthPackageContextValue, RefreshSessionResponse };
+export type { LoginResponse, AuthContextProps, AuthContextValue, MemberProfile, ClientProfile, AuthConfigResponse, Profile, Partner, AuthPackageContextValue, RefreshSessionResponse, RouterAdapter };

package/build/types/hooks/useNavigator.d.ts

@@ -0,0 +1,66 @@
+/**
+ * useNavigator Hook
+ *
+ * Provides framework-agnostic navigation capabilities.
+ * Uses the RouterAdapter provided by the host app through AuthProvider.
+ *
+ * @example
+ * ```tsx
+ * const navigator = useNavigator();
+ *
+ * // Relative navigation (uses basePath)
+ * navigator.push('/registration');
+ *
+ * // Absolute navigation (ignores basePath)
+ * navigator.pushAbsolute('/dashboard');
+ *
+ * // With query params
+ * navigator.push('/registration', { query: { email: 'test@example.com' } });
+ *
+ * // Access query params
+ * const { email } = navigator.query;
+ * ```
+ */
+declare const useNavigator: () => {
+    /**
+     * Navigate to a path relative to basePath
+     */
+    push: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    /**
+     * Replace current path with a path relative to basePath
+     */
+    replace: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    /**
+     * Navigate to an absolute path (ignores basePath)
+     */
+    pushAbsolute: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    /**
+     * Replace with an absolute path (ignores basePath)
+     */
+    replaceAbsolute: (path: string, options?: {
+        query?: Record<string, string | string[] | undefined>;
+    }) => void;
+    /**
+     * Go back to the previous page
+     */
+    back: () => void;
+    /**
+     * Get current query parameters
+     */
+    readonly query: Record<string, string | string[] | undefined>;
+    /**
+     * Get current pathname
+     */
+    readonly pathname: string;
+    /**
+     * The base path where the auth module is mounted
+     */
+    basePath: string;
+};
+export { useNavigator };

package/build/types/index.d.ts

@@ -3,8 +3,13 @@ export { default as AuthContext } from './contexts/AuthContext';
 export * from './contexts/type';
 export * from './hooks/useAuthContext';
 export * from './hooks/useRequest';
+export * from './hooks/useNavigator';
 export * from './api/axiosClient';
 export * from './navigator';
 export * from './screens/Login/components/LoginWebComponent/index';
 export * from './screens/SignUp/components/SignUpWebComponent/index';
 export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';
+export * from './screens/PartnerSSO/PartnerLogin/components/PartnerLoginWebComponent';
+export * from './screens/PartnerSSO/PartnerRegistration/components/PartnerRegistrationWebComponent';
+export * from './screens/Profile';
+export { strongPasswordRequirements } from './constants/password-requirements';