@truworth/twc-auth 1.2.11 → 2.0.0

package/build/src/components/AdvancedTransitionWrapper/index.js

@@ -37,8 +37,8 @@ const AdvancedTransitionWrapper = ({ children, isVisible = true, direction = 'ri
 export { AdvancedTransitionWrapper };
 const getAdvancedVariants = (direction, type, duration, delay, options) => {
     // Extract options with defaults
-    const { bounce = 0.25, damping = 10, mass = 1, velocity = 0, depth = 100, perspective = 1000, intensity = 1 } = options;
-    // Base variants 
+    const { bounce = 0.25, damping = 10, mass = 1, velocity = 0, depth = 100, intensity = 1 } = options;
+    // Base variants - using Record type to allow dynamic property assignment
     const baseVariants = {
         initial: { opacity: 0 },
         enter: {
@@ -104,17 +104,14 @@ const getAdvancedVariants = (direction, type, duration, delay, options) => {
             baseVariants.initial = {
                 ...baseVariants.initial,
                 [flipAxis]: direction === 'up' || direction === 'left' ? flipAmount : -flipAmount,
-                transformPerspective: perspective
             };
             baseVariants.enter = {
                 ...baseVariants.enter,
                 [flipAxis]: 0,
-                transformPerspective: perspective
             };
             baseVariants.exit = {
                 ...baseVariants.exit,
                 [flipAxis]: direction === 'up' || direction === 'left' ? -flipAmount : flipAmount,
-                transformPerspective: perspective
             };
             break;
         }
@@ -281,21 +278,18 @@ const getAdvancedVariants = (direction, type, duration, delay, options) => {
                 scale: direction === 'up' || direction === 'left' ? 1.5 * intensity : 0.6 / Math.max(0.1, intensity),
                 opacity: 0,
                 z: direction === 'up' || direction === 'left' ? -depth : depth,
-                transformPerspective: perspective
             };
             baseVariants.enter = {
                 ...baseVariants.enter,
                 scale: 1,
                 opacity: 1,
                 z: 0,
-                transformPerspective: perspective
             };
             baseVariants.exit = {
                 ...baseVariants.exit,
                 scale: direction === 'up' || direction === 'left' ? 0.6 / Math.max(0.1, intensity) : 1.5 * intensity,
                 opacity: 0,
                 z: direction === 'up' || direction === 'left' ? depth : -depth,
-                transformPerspective: perspective
             };
             break;
         }

package/build/src/contexts/AuthContext.js

@@ -34,7 +34,7 @@ const AuthPackageContext = React.createContext(null);
  * @param openChatSupport - Optional callback to open chat support
  * @param socialLoginConfig - Optional social login configuration
  */
-const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
+const AuthProvider = ({ children, router, basePath = '', LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
     const [isLoadingProfile, setIsLoadingProfile] = useState(false);
     const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
@@ -168,6 +168,8 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
     };
     const AuthPackageContextValues = {
         token,
+        router,
+        basePath,
         LogoComponent,
         appConfig: appConfigValue,
         registrationMethod,

package/build/src/hooks/useNavigator.js

@@ -0,0 +1,83 @@
+import { useContext, useMemo } from 'react';
+import { AuthPackageContext } from '../contexts/AuthContext';
+/**
+ * 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;
+ * ```
+ */
+const useNavigator = () => {
+    const context = useContext(AuthPackageContext);
+    if (!context?.router) {
+        throw new Error('useNavigator: router not found in context. ' +
+            'Make sure to wrap your component with AuthProvider and pass a router adapter.');
+    }
+    const { router, basePath = '' } = context;
+    const navigator = useMemo(() => ({
+        /**
+         * Navigate to a path relative to basePath
+         */
+        push: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.push(fullPath, options);
+        },
+        /**
+         * Replace current path with a path relative to basePath
+         */
+        replace: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.replace(fullPath, options);
+        },
+        /**
+         * Navigate to an absolute path (ignores basePath)
+         */
+        pushAbsolute: (path, options) => {
+            router.push(path, options);
+        },
+        /**
+         * Replace with an absolute path (ignores basePath)
+         */
+        replaceAbsolute: (path, options) => {
+            router.replace(path, options);
+        },
+        /**
+         * Go back to the previous page
+         */
+        back: () => router.back(),
+        /**
+         * Get current query parameters
+         */
+        get query() {
+            return router.getQuery();
+        },
+        /**
+         * Get current pathname
+         */
+        get pathname() {
+            return router.getPathname();
+        },
+        /**
+         * The base path where the auth module is mounted
+         */
+        basePath,
+    }), [router, basePath]);
+    return navigator;
+};
+export { useNavigator };

package/build/src/index.js

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

package/build/src/screens/CountryCode/components/CountryCodeDropdown/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
 import React, { useMemo } from "react";
 import { Typography, SelectField, Flex } from '@truworth/twc-web-design';
 import { useCountryCode } from '../../hooks/internal/useCountryCode';
@@ -22,10 +21,10 @@ export const CountryCodeDropdown = React.memo(({ selectedCountry, handleSelect }
             const code = item.countryCode.toLowerCase();
             const flagUrl = `https://cdn.thewellnesscorner.com/country-flags/${code}.png`;
             return {
-                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
+                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
                 label: (_jsxs(Typography, { type: "body", size: "small", children: [item.name, " (+", item.phoneCode, ")"] })),
                 value: code,
-                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
+                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
             };
         });
     }, [countries]);

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

@@ -3,7 +3,7 @@ import { Flex, Form, ResponsiveModal, TextInput, Typography, useForm } from '@tr
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterMobile } from "./hooks/internal/useEnterMobile";
 import { CountryCodeDropdown } from '../CountryCode/components/CountryCodeDropdown';
-import { useRouter } from 'next/router';
+import { useNavigator } from '../../hooks/useNavigator';
 import { useState } from 'react';
 import { ExistingAccountsSheet } from './components/ExistingAccountsSheet';
 import LoginWithMobileOTP from '../LoginWithMobileOTP';
@@ -22,7 +22,7 @@ const EnterMobile = ({ onPressBack }) => {
         name: "INDIA",
     });
     const form = useForm();
-    const router = useRouter();
+    const navigator = useNavigator();
     const { loading, phone, isValidPhone, countryCode, setCountryCode, existingAccounts, showExistingAccountsSheet, setShowExistingAccountsSheet, handleValidatePhone, handleEnterMobile, } = useEnterMobile();
     const handleSubmit = () => {
         handleValidatePhone({
@@ -32,8 +32,7 @@ const EnterMobile = ({ onPressBack }) => {
                     setShowLoginWithMobileOTPModal(true);
                 }
                 else {
-                    router.push({
-                        pathname: '/registration',
+                    navigator.pushAbsolute('/registration', {
                         query: { phone, registrationMethod: RegistrationMethod.MOBILE }
                     });
                 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Flex } from '@truworth/twc-web-design';
-import { useRouter } from 'next/router';
 import { AdvancedTransitionWrapper } from '../../../../components/AdvancedTransitionWrapper';
 import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
+import { useNavigator } from '../../../../hooks/useNavigator';
 import EnterEmail from '../../../EnterEmail/index';
 import EnterPassword from '../../../EnterPassword/index';
 import ResetPassword from '../../../ResetPassword/index';
@@ -16,14 +16,13 @@ const LoginWebComponent = () => {
     const [sessionToken, setSessionToken] = useState('');
     const [selectedClient, setSelectedClient] = useState(null);
     const { LogoComponent } = useAuthPackageContext();
-    const router = useRouter();
+    const navigator = useNavigator();
     const onRedirectToPassword = (email) => {
         setEmail(email);
         setLoginState('EnterPassword');
     };
     const onRedirectToSignUp = (email) => {
-        router.push({
-            pathname: '/registration',
+        navigator.pushAbsolute('/registration', {
             query: { email, registrationMethod: 'email' }
         });
     };

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

@@ -1,59 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, lazy, 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 { useNavigator } from '../../../../../hooks/useNavigator';
 import redirectAnimation from '../../../../../../assets/animation/redirect-home.json';
 import { RegistrationMethod } from '../../../../../enums';
-import dynamic from 'next/dynamic';
-const Lottie = dynamic(() => import('react-lottie'), { ssr: false });
+const Lottie = lazy(() => import('react-lottie'));
 const SSOCallbackComponents = () => {
-    const router = useRouter();
+    const navigator = useNavigator();
     const [clientId, setClientId] = useState('');
     const [code, setCode] = useState('');
     // Resolve code/token from query (preferred) or localStorage; clientId/authMethod from localStorage only
     useEffect(() => {
-        const { code } = router.query;
+        const query = navigator.query;
+        const codeFromQuery = query.code;
         if (typeof window !== 'undefined') {
             try {
                 const storedClientId = localStorage.getItem('clientId') || '';
                 setClientId(storedClientId);
-                setCode(typeof code === 'string' ? code : '');
+                setCode(typeof codeFromQuery === 'string' ? codeFromQuery : '');
             }
             catch (error) {
                 console.log('Failed to read from localStorage:', error);
-                setCode(typeof code === 'string' ? code : '');
+                setCode(typeof codeFromQuery === 'string' ? codeFromQuery : '');
                 // Fallback: proceed without stored values
             }
         }
-    }, [router.query]);
+    }, [navigator.query]);
     const { result, error } = useSSOCallback({ clientId, code });
     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
-                , { 
+    }, [error, navigator]);
+    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { children: [_jsx(Suspense, { fallback: _jsx("div", { className: "h-[230px] w-[250px]" }), children: _jsx(Lottie
                     //@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 ..." })] }) }));
+                    , { 
+                        //@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 ..." })] }) }));
 };
 export { SSOCallbackComponents };

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,17 @@
 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 React, { Suspense, lazy } from 'react';
 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 { useNavigator } from '../../hooks/useNavigator';
 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 Lottie = lazy(() => import('react-lottie'));
 const UserConsent = ({ userDetails, handleBack }) => {
     const { email, phone } = userDetails || {};
     const [redirectModal, setRedirectModal] = useState(false);
@@ -22,6 +20,7 @@ const UserConsent = ({ userDetails, handleBack }) => {
     const [sessionToken, setSessionToken] = useState('');
     const { onLogin, appConfig: { appName, privacyPolicyUrl }, LogoComponent, onTokenChange } = useAuthPackageContext();
     const { loading, onAgree } = useConsent();
+    const navigator = useNavigator();
     const onAgreeHandler = (res) => {
         const { token, member, emailVerificationRequired, mobileVerificationRequired, sessionToken } = res;
         if (token && member) {
@@ -54,32 +53,31 @@ 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
                                                 }), className: "w-full lg:!w-auto lg:!mt-0" }), _jsx(Button, { label: "Not Now, I Will Register Later", variant: "link", onClick: () => setRedirectModal(true), className: "w-full lg:!w-auto lg:!mt-0" })] })] }) })] }), subTitle: "", onPressBack: handleBack }), redirectModal &&
-                _jsx(RedirectToHomeModal, { redirectModal: redirectModal }), showVerifyMobileModal &&
+                _jsx(RedirectToHomeModal, { redirectModal: redirectModal, navigator: navigator }), showVerifyMobileModal &&
                 _jsx(VerifyMobileModal, { phone: phone, visible: showVerifyMobileModal, hide: () => setShowVerifyMobileModal(false), sessionToken: sessionToken }), showVerifyEmailModal &&
                 _jsx(VerifyEmailModal, { email: email, visible: showVerifyEmailModal, hide: () => setShowVerifyEmailModal(false), sessionToken: sessionToken, onVerifiedOTP: () => {
                         setShowVerifyEmailModal(false);
                         setShowVerifyMobileModal(true);
                     } })] }));
 };
-const RedirectToHomeModal = ({ redirectModal }) => {
-    const router = useRouter();
+const RedirectToHomeModal = ({ redirectModal, navigator }) => {
     useEffect(() => {
-        router.push('/login');
+        navigator.pushAbsolute('/login');
     }, []);
-    return (_jsxs(Modal, { title: "", open: redirectModal, showCloseButton: false, footer: null, children: [_jsx(Lottie
-            /* @ts-ignore */
-            , { 
+    return (_jsxs(Modal, { title: "", open: redirectModal, showCloseButton: false, footer: null, children: [_jsx(Suspense, { fallback: _jsx("div", { className: "h-[150px] w-[250px]" }), children: _jsx(Lottie
                 /* @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." })] })] })] }));
+                , { 
+                    /* @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." })] })] })] }));
 };
 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/types/contexts/AuthContext.d.ts

@@ -32,7 +32,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 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,6 +3,7 @@ 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';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "1.2.11",
+  "version": "2.0.0",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [
@@ -82,7 +82,6 @@
     "lodash": ">=4.17.21",
     "lottie-react-native": ">=6.7.2",
     "lucide-react": ">=0.483.0",
-    "next": ">=13.4.19",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "react-native": ">=0.74.5",