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

package/README.md

@@ -5,11 +5,11 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 ## Table of Contents
 
 - [Installation](#installation)
-  - [React Native](#react-native)
-  - [Web](#web)
+  - [Mobile ( React Native )](#react-native)
+  - [Web ( Next.js )](#web)
 - [Development](#development-configure-hot-reloading)
-  - [React Native Setup for Hot Reloading](#react-native-setup-for-hot-reloading)
-  - [Next.js Setup for Hot Reloading](#nextjs-setup-for-hot-reloading)
+  - [Mobile ( React Native Setup for Hot Reloading )](#react-native-setup-for-hot-reloading)
+  - [Web ( Next.js Setup for Hot Reloading )](#nextjs-setup-for-hot-reloading)
 - [Usage](#usage)
 - [API Reference](#api-reference)
 - [Troubleshooting](#troubleshooting)
@@ -115,6 +115,79 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
      react-dom@^18.2.0
    ```
 
+## Running the Example Applications of the TWC-Auth Package
+
+This repository includes example applications for both mobile (React Native) and web (Next.js).
+
+### Running the Mobile App
+
+1.  **Navigate to the mobile app directory:**
+    ```bash
+    cd apps/mobile
+    ```
+
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+3.  **Run on Android:**
+    ```bash
+    npm run android
+    ```
+
+4.  **Run on iOS:**
+
+    First, install the pods and build the application:
+    ```bash
+    cd ios && pod install && cd ..
+    npm run build:ios
+    ```
+
+    Then, run the application:
+    ```bash
+    npm run ios
+    ```
+
+### Running the Web App
+
+1.  **Navigate to the web app directory:**
+    ```bash
+    cd apps/web
+    ```
+
+2.  **Create a `.env` file:**
+
+    Copy the example environment variables below into a new file named `.env` in the `apps/web` directory.
+
+    ```shell
+    NEXT_PUBLIC_ENVIRONMENT=development/production
+
+    NODE_ENV=development/production
+
+    NEXT_PUBLIC_MEMBER_IMAGES_URL=<value>
+
+    NEXT_PUBLIC_TWC_API_BASE_URL=<value>
+
+    NEXT_PUBLIC_CDN_IMAGES_URL=<value>
+
+    NEXT_PUBLIC_GTM_ID=<value>
+
+    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=<value>
+    ```
+
+3.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+4.  **Run the development server:**
+    ```bash
+    npm run dev
+    ```
+
+    Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
 ## Development: Configure Hot Reloading
 
 ### React Native Setup for Hot Reloading
@@ -195,30 +268,68 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
+> **Note on CSS Imports:**
+> When hot reloading the `@truworth/twc-web-design` package locally, you need to import the CSS from the `dist` folder in your `_app.tsx` file:
+> ```typescript
+> import "@truworth/twc-web-design/dist/main.css";
+> ```
+> When using the published version of the package, import the styles directly:
+> ```typescript
+> import "@truworth/twc-web-design/style.css";
+> ```
+
 ## Usage
 
+Below are examples of how to integrate and use the `AuthProvider` in your application.
+
 ### React Native
 
 ```tsx
-import React, { useEffect } from "react";
+import React from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { NavigationContainer } from "@react-navigation/native";
 import { AuthNavigator, AuthProvider } from "@truworth/twc-auth";
 import type { LoginResponse } from "@truworth/twc-auth";
-import Home from "./screens/Home";
+import { Image, Text } from 'react-native';
 
 const { Navigator, Screen } = createNativeStackNavigator();
 
+// A custom component to display your brand's logo on the auth screens.
+const CustomLogo = () => <Image source={require('./path/to/your/logo.png')} style={{ width: 100, height: 50 }} />;
+
 const ExampleAppNavigator = () => {
-  const onLogin = async (result: LoginResponse) => {
-    //TODO: Store token in secure storage & redirect to home screen
+
+  // Callback for when the user successfully logs in.
+  const onLogin = (result: LoginResponse) => {
+    console.log("Login successful:", result.token);
+    // TODO: Store token in secure storage & navigate to the main app screen.
+  };
+
+  // Callback for when the user logs out.
+  const onLogout = () => {
+    console.log("User logged out");
+    // TODO: Clear token from storage & navigate to the login screen.
+  };
+
+  // Configuration for your app's branding and support details.
+  const appConfig = {
+    appName: 'Your App Name',
+    supportEmail: 'support@yourapp.com',
+    privacyPolicyUrl: 'https://yourapp.com/privacy',
+    termsAndConditionsUrl: 'https://yourapp.com/terms'
   };
 
   return (
     <NavigationContainer>
-      <AuthProvider onLogin={onLogin}>
+      <AuthProvider
+        onLogin={onLogin}
+        onLogout={onLogout}
+        appConfig={appConfig}
+        LogoComponent={CustomLogo}
+      >
         <Navigator screenOptions={{ headerShown: false }}>
           <Screen name="AuthNavigator" component={AuthNavigator} />
+          {/* Add your main app screens here after the auth flow */}
         </Navigator>
       </AuthProvider>
     </NavigationContainer>
@@ -237,12 +348,33 @@ import type { LoginResponse } from "@truworth/twc-auth";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
+
+  // Callback for when the user successfully logs in.
   const onLogin = (result: LoginResponse) => {
-    //TODO: Store token in secure storage & redirect to home screen
+    console.log("Login successful:", result.token);
+    // TODO: Store token (e.g., in an HTTP-only cookie) & redirect.
+  };
+
+  // Callback for when the user logs out.
+  const onLogout = () => {
+    console.log("User logged out");
+    // TODO: Clear token and redirect to the login page.
+  };
+
+  // Configuration for your app's branding and support details.
+  const appConfig = {
+    appName: 'Your Web App',
+    supportEmail: 'support@yourwebapp.com',
+    privacyPolicyUrl: 'https://yourwebapp.com/privacy',
+    termsAndConditionsUrl: 'https://yourwebapp.com/terms'
   };
 
   return (
-    <AuthProvider onLogin={onLogin}>
+    <AuthProvider
+      onLogin={onLogin}
+      onLogout={onLogout}
+      appConfig={appConfig}
+    >
       <Component {...pageProps} />
     </AuthProvider>
   );
@@ -256,9 +388,39 @@ export default function App({ Component, pageProps }: AppProps) {
 #### `useAuthContext()`
 
 ```typescript
-const { onLogin, logout, onLaunchAuthSession, LogoComponent } = useAuthContext();
+const {
+  token,
+  profile,
+  client,
+  isLoadingProfile,
+  logout,
+  onLaunchAuthSession,
+  getUserProfile,
+  onOtpReceived,
+} = useAuthContext();
 ```
 
+### Components
+
+#### `<AuthProvider>`
+
+The `AuthProvider` component provides authentication state and actions to its children. It should wrap the root of your application or the part of your app that requires authentication.
+
+**Props**
+
+| Prop                  | Type                               | Description                                                                                                                                                           |
+| --------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`            | `React.ReactNode`                  | React children to be rendered inside the provider.                                                                                                                    |
+| `LogoComponent`       | `React.ComponentType`              | Optional component for branding/logo in auth flows.                                                                                                                   |
+| `session`             | `{ token: string }`                | Initial session containing the auth token.                                                                                                                            |
+| `appConfig`           | `AppConfig`                        | Optional app configuration for auth flows (appName, supportEmail, privacyPolicyUrl, termsAndConditionsUrl).                                                           |
+| `onLogin`             | `(result: LoginResponse) => void`  | Optional callback after a successful login.                                                                                                                           |
+| `onLogout`            | `() => void`                       | Optional callback after a successful logout.                                                                                                                          |
+| `onLaunchAuthSession` | `() => void`                       | Optional callback after successfully launching the auth session. Can be used to set a Firebase notification token or request Android permissions, for example.         |
+| `onRefreshSession`    | `(session: { token: string }) => void` | Optional handler for refreshing the user session.                                                                                                                     |
+| `openChatSupport`     | `() => void`                       | Optional callback to open chat support.                                                                                                                               |
+| `socialLoginConfig`   | `SocialLoginConfig`                | Optional social login configuration.                                                                                                                                  |
+
 ## Troubleshooting
 
 ### Common Issues
@@ -270,4 +432,4 @@ const { onLogin, logout, onLaunchAuthSession, LogoComponent } = useAuthContext()
    - For Next.js, remove `.next` and restart: `rm -rf .next && next dev`
    - For React Native: Ensure `babel.config.js` includes `plugins: ['react-native-reanimated/plugin']` as the last plugin
    - For Next.js with Babel: Add `plugins: ['react-native-reanimated/plugin']` to your Babel config if using Babel (not needed with default SWC)
-   - For iOS CocoaPods issues: First try `cd ios && pod install` or clean the build folder in Xcode. Only use `pod deintegrate` as a last resort if other steps fail.
+   - For iOS CocoaPods issues: First try `cd ios && pod install` or clean the build folder in Xcode. Only use `pod deintegrate` as a last resort if other steps fail.

package/build/src/contexts/AuthContext.js

@@ -39,7 +39,7 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
     const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
     const [registrationMethod, setRegistrationMethod] = useState(null);
-    const [token, setToken] = useState('');
+    const [token, setToken] = useState(session?.token || '');
     const [otpValue, setOtpValue] = useState('');
     const { request } = useMemo(() => createHttpClient({
         token,

package/build/src/hooks/useRequest.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { showMessage } from '../helpers/show-message';
 import { useAuthPackageContext } from './internal/useAuthPackageContext';
 import { createHttpClient } from '../helpers/network';
@@ -10,9 +10,6 @@ const useRequest = () => {
         onLogout: async () => logout(),
     }), [token]);
     const makeRequest = async ({ url, method, body, onSuccess, onFailure, ...axiosOptions }) => {
-        if (!token) {
-            return;
-        }
         try {
             const response = await request({
                 url,

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

@@ -13,7 +13,7 @@ const CountryCode = () => {
     const navigation = useNavigation();
     const { countryCodes, searchCountry, onSearch } = useCountryCode();
     const onSelect = (countryCode, iconCode) => {
-        navigation.navigate(route.params?.prevRoute, {
+        navigation.popTo(route.params?.prevRoute, {
             ...route.params,
             countryCode,
             iconCode,

package/build/src/screens/EnterPassword/hooks/internal/useEnterPassword.js

@@ -49,7 +49,9 @@ const useEnterPassword = () => {
             const errorMessage = error?.response?.data?.errors?.[0]?.message;
             if (error?.response?.status === 400) {
                 setInvalidPassword(true);
-                showMessage({ message: errorMessage ?? 'Email and password do not match!' });
+                if (source === 'web') {
+                    showMessage({ message: errorMessage ?? 'Email and password do not match!' });
+                }
                 return;
             }
             showMessage({ message: errorMessage ?? 'Something went wrong. Please try again.' });

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

@@ -45,9 +45,7 @@ const useLoginWithEmailOTP = ({ email, password, source, sessionToken, mfaEnable
         }).then((res) => {
             setStatus('valid');
             const { token, member } = res.data;
-            if (token) {
-                onTokenChange(token);
-            }
+            onTokenChange(token);
             onLogin({ token, member });
         }).catch((error) => {
             const errorCode = error?.response?.status;

package/build/src/screens/LoginWithMobileOTP/hooks/internal/useLoginWithMobileOTP.js

@@ -7,7 +7,7 @@ const useLoginWithMobileOTP = ({ phone, email, source }) => {
     const [timer, setTimer] = useState(180);
     const [status, setStatus] = useState('timer');
     const [sessionToken, setSessionToken] = useState('');
-    const { onLogin } = useAuthPackageContext();
+    const { onLogin, onTokenChange } = useAuthPackageContext();
     useInterval(() => {
         if (!timer) {
             return;
@@ -42,6 +42,7 @@ const useLoginWithMobileOTP = ({ phone, email, source }) => {
         }).then((res) => {
             setStatus('valid');
             const { token, member } = res.data;
+            onTokenChange(token);
             onLogin({ token, member });
         }).catch((error) => {
             const errorCode = error?.response?.status;

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

@@ -13,7 +13,7 @@ const ResetPassword = ({ navigation, route }) => {
                 label: 'Continue',
                 onPress: () => {
                     handleContinue({
-                        onResult: () => navigation.navigate('EnterEmail')
+                        onResult: () => navigation.popTo('EnterEmail')
                     });
                 },
                 disabled: isContinueDisabled

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

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

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

@@ -11,7 +11,7 @@ import { RegistrationMethod } from "../../../../../enums";
 const useSSOCallback = ({ clientId, code }) => {
     const [error, setError] = useState(null);
     const [result, setResult] = useState(null);
-    const { onLogin, onRegistrationMethodChange } = useAuthPackageContext();
+    const { onLogin, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     const processOAuthCallback = useCallback((code) => {
         setError(null);
         axiosClient({
@@ -24,6 +24,7 @@ const useSSOCallback = ({ clientId, code }) => {
                 setResult(res.data);
             }
             else {
+                onTokenChange(res?.data?.token);
                 return onLogin({ token: res?.data?.token, member: res?.data?.member });
             }
         }).catch((error) => {

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

@@ -171,7 +171,7 @@ const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, countryCode, phone
                 shadowOpacity: 0.5,
                 shadowRadius: 3,
                 elevation: 3
-            }, children: [_jsx(RoundedButton, { label: "Go to Login", size: "large", onPress: () => navigation.navigate('EnterEmail'), containerStyle: { marginBottom: 8 } }), openChatSupport &&
+            }, children: [_jsx(RoundedButton, { label: "Go to Login", size: "large", onPress: () => navigation.popTo('EnterEmail'), containerStyle: { marginBottom: 8 } }), openChatSupport &&
                     _jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: openChatSupport, style: {
                             flexDirection: 'row',
                             alignItems: 'center',

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

@@ -20,11 +20,12 @@ const UserConsent = ({ userDetails, handleBack }) => {
     const [showVerifyMobileModal, setShowVerifyMobileModal] = useState(false);
     const [showVerifyEmailModal, setShowVerifyEmailModal] = useState(false);
     const [sessionToken, setSessionToken] = useState('');
-    const { onLogin, appConfig: { appName, privacyPolicyUrl }, LogoComponent } = useAuthPackageContext();
+    const { onLogin, appConfig: { appName, privacyPolicyUrl }, LogoComponent, onTokenChange } = useAuthPackageContext();
     const { loading, onAgree } = useConsent();
     const onAgreeHandler = (res) => {
         const { token, member, emailVerificationRequired, mobileVerificationRequired, sessionToken } = res;
         if (token && member) {
+            onTokenChange(token);
             return onLogin({ token, member });
         }
         if (emailVerificationRequired) {

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

@@ -8,11 +8,12 @@ import { useConsent } from './hooks/internal/useConsent';
 const { primary, gray } = Colors;
 const UserConsent = ({ navigation, route }) => {
     const { email, phone } = route.params || {};
-    const { onLogin, appConfig: { appName, privacyPolicyUrl } } = useAuthPackageContext();
+    const { onLogin, appConfig: { appName, privacyPolicyUrl }, onTokenChange } = useAuthPackageContext();
     const { loading, onAgree } = useConsent();
     const onAgreeHandler = (res) => {
         const { token, member, emailVerificationRequired, mobileVerificationRequired, sessionToken } = res;
         if (token && member) {
+            onTokenChange(token);
             return onLogin({ token, member });
         }
         if (emailVerificationRequired) {

package/build/src/screens/VerifyLinkPrimaryAccountMobileOTP/hooks/internal/useVerifyLinkPrimaryAccountMobileOTP.js

@@ -12,7 +12,7 @@ const initialTimer = 180;
 const useVerifyLinkPrimaryAccountMobileOTP = ({ sessionToken }) => {
     const [status, setStatus] = useState('timer');
     const [timer, setTimer] = useState(initialTimer);
-    const { onLogin } = useAuthPackageContext();
+    const { onLogin, onTokenChange } = useAuthPackageContext();
     const invalidTimerRef = useRef(null);
     const sessionTokenRef = useRef(sessionToken);
     useInterval(() => {
@@ -47,6 +47,7 @@ const useVerifyLinkPrimaryAccountMobileOTP = ({ sessionToken }) => {
         }).then((res) => {
             const { token, member } = res.data;
             setStatus('valid');
+            onTokenChange(token);
             onLogin({ token, member });
         }).catch((err) => {
             if (err?.response?.status === 400) {

package/build/src/screens/VerifyMobile/hooks/internal/useVerifyMobile.js

@@ -13,7 +13,7 @@ const useVerifyMobile = ({ sessionToken }) => {
     const [sessionTokenState, setSessionToken] = useState(sessionToken || '');
     const [timer, setTimer] = useState(initialTimer);
     const [status, setStatus] = useState('timer');
-    const { onLogin } = useAuthPackageContext();
+    const { onLogin, onTokenChange } = useAuthPackageContext();
     useEffect(() => {
         resendOTP();
     }, []);
@@ -48,6 +48,7 @@ const useVerifyMobile = ({ sessionToken }) => {
             data: { otp, sessionToken: sessionTokenState },
         }).then((res) => {
             const { token, member } = res.data;
+            onTokenChange(token);
             onLogin({ token, member });
             setStatus('valid');
         }).catch((err) => {

package/build/src/screens/Welcome/SocialAuth/hooks/useSocialAuth.native.js

@@ -11,7 +11,7 @@ import appleAuth from '@invertase/react-native-apple-authentication';
 import { axiosClient } from "../../../../api/axiosClient";
 const useSocialAuth = () => {
     const [loading, setLoading] = useState(false);
-    const { onLogin, socialLoginConfig, onRegistrationMethodChange } = useAuthPackageContext();
+    const { onLogin, socialLoginConfig, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     const navigation = useNavigation();
     const googleAppId = socialLoginConfig?.google?.webClientId;
     const loginWithGoogle = useCallback(async () => {
@@ -107,10 +107,8 @@ const useSocialAuth = () => {
                         token: appleAuthResponse.identityToken,
                         source: Platform.OS,
                     });
-                    onLogin({
-                        token: data.token,
-                        member: data.member
-                    });
+                    onTokenChange(data.token);
+                    onLogin({ token: data.token, member: data.member });
                     return;
                 }
                 catch (error) {
@@ -174,10 +172,8 @@ const useSocialAuth = () => {
                     type: 'error'
                 });
             case SocialAuthStatus.SUCCESS:
-                onLogin({
-                    token: result.data.token,
-                    member: result.data.member
-                });
+                onTokenChange(result.data.token);
+                onLogin({ token: result.data.token, member: result.data.member });
                 break;
         }
     };

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

@@ -6,7 +6,7 @@ import { handleFacebookAuth } from "../../commonSocialAuth";
 import { showMessage } from "../../../../../helpers/show-message";
 export const useFacebookAuth = () => {
     const [error, setError] = useState(null);
-    const { onLogin, socialLoginConfig, onRegistrationMethodChange } = useAuthPackageContext();
+    const { onLogin, socialLoginConfig, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     const router = useRouter();
     const facebookAppId = socialLoginConfig?.facebook?.webClientId;
     // Load Facebook SDK once
@@ -95,10 +95,8 @@ export const useFacebookAuth = () => {
                                 type: "error",
                             });
                         case "SUCCESS":
-                            onLogin({
-                                token: result.data.token,
-                                member: result.data.member
-                            });
+                            onTokenChange(result.data.token);
+                            onLogin({ token: result.data.token, member: result.data.member });
                             break;
                     }
                 });

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

@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 import { handleGoogleAuth } from "../../commonSocialAuth";
 export const useGoogleAuth = () => {
     const router = useRouter();
-    const { onLogin, socialLoginConfig, onRegistrationMethodChange } = useAuthPackageContext();
+    const { onLogin, socialLoginConfig, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     const googleAppId = socialLoginConfig?.google?.webClientId;
     const onSuccess = async (response) => {
         const { tokenId, profileObj, googleId } = response;
@@ -36,10 +36,8 @@ export const useGoogleAuth = () => {
                     type: "error",
                 });
             case "SUCCESS":
-                onLogin({
-                    token: result.data.token,
-                    member: result.data.member
-                });
+                onTokenChange(result.data.token);
+                onLogin({ token: result.data.token, member: result.data.member });
                 break;
         }
     };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "1.2.10",
+  "version": "1.2.12-beta.0",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [
@@ -24,13 +24,11 @@
     "@react-native-clipboard/clipboard": "1.16.3",
     "@react-native-community/datetimepicker": "8.1.1",
     "@react-native-google-signin/google-signin": "12.2.1",
-    "@react-navigation/native": "6.1.17",
-    "@react-navigation/native-stack": "6.10.0",
-    "@truworth/twc-rn-common": "1.1.2",
+    "@react-navigation/native": "7.1.17",
+    "@react-navigation/native-stack": "7.3.26",
+    "@truworth/twc-rn-common": "1.1.3-beta.4",
     "@truworth/twc-web-design": "1.11.0",
     "@twotalltotems/react-native-otp-input": "1.3.11",
-    "@types/crypto-js": "^4.2.2",
-    "@types/fbemitter": "^2.0.35",
     "@types/lodash": "^4.17.15",
     "@types/react": "^18.2.0",
     "@types/react-google-recaptcha": "^2.1.9",
@@ -41,28 +39,26 @@
     "copyfiles": "^2.4.1",
     "crypto-js": "^4.2.0",
     "del-cli": "^6.0.0",
-    "fbemitter": "^3.0.0",
-    "js-crypto-rsa": "^1.0.7",
     "lottie-react": "^2.4.1",
-    "lottie-react-native": "6.7.2",
+    "lottie-react-native": "7.2.4",
     "moment": "^2.30.1",
-    "next": "15.5.9",
-    "react": "18.3.1",
-    "react-dom": "^18.2.0",
+    "next": "15.5.10",
+    "react": "19.1.0",
+    "react-native": "0.80.2",
+    "react-dom": "^19.1.0",
     "react-google-login": "^5.2.2",
     "react-google-recaptcha": "^3.1.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-lottie": "^1.2.3",
-    "react-native": "0.76.1",
     "react-native-fast-image": "8.6.3",
     "react-native-fbsdk-next": "13.4.1",
     "react-native-linear-gradient": "2.8.3",
     "react-native-modalize": "2.1.1",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-reanimated": "3.16.1",
+    "react-native-reanimated": "4.1.0",
     "react-native-rsa-native": "2.0.5",
-    "react-native-safe-area-context": "4.14.0",
-    "react-native-svg": "15.8.0",
+    "react-native-safe-area-context": "5.6.1",
+    "react-native-svg": "15.12.0",
     "react-native-vector-icons": "9.2.0",
     "react-redux": "^9.2.0",
     "sweetalert2": "^11.23.0",
@@ -93,5 +89,8 @@
     "react-native-safe-area-context": ">=5.3.0",
     "react-native-svg": ">=15.8.0",
     "react-native-vector-icons": ">=9.2.0"
+  },
+  "overrides": {
+    "prismjs": "1.30.0"
   }
 }