@truworth/twc-auth 3.0.4 → 3.0.6

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { motion } from 'framer-motion';
+const LoadingAnimation = ({ height = 230, width = 250, }) => {
+    return (_jsxs("div", { style: {
+            height,
+            width,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            gap: 16,
+        }, children: [_jsx(motion.div, { style: {
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [0, 1, 2].map((i) => (_jsx(motion.div, { style: {
+                        width: 12,
+                        height: 12,
+                        borderRadius: '50%',
+                        backgroundColor: '#26C6DA',
+                    }, animate: {
+                        y: [0, -16, 0],
+                        opacity: [0.5, 1, 0.5],
+                    }, transition: {
+                        duration: 0.8,
+                        repeat: Infinity,
+                        delay: i * 0.15,
+                        ease: 'easeInOut',
+                    } }, i))) }), _jsx(motion.div, { style: {
+                    width: 120,
+                    height: 4,
+                    backgroundColor: '#E0E0E0',
+                    borderRadius: 2,
+                    overflow: 'hidden',
+                }, children: _jsx(motion.div, { style: {
+                        width: '40%',
+                        height: '100%',
+                        backgroundColor: '#26C6DA',
+                        borderRadius: 2,
+                    }, animate: {
+                        x: ['-100%', '250%'],
+                    }, transition: {
+                        duration: 1.2,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                    } }) })] }));
+};
+export { LoadingAnimation };

package/build/src/screens/PartnerSSO/PartnerLogin/components/PartnerLoginWebComponent/index.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Suspense, lazy, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Flex, Typography } from '@truworth/twc-web-design';
 import { usePartnerLogin } from '../../hooks/internal/usePartnerLogin';
 import { useNavigator } from '../../../../../hooks/useNavigator';
-import redirectAnimation from '../../../../../../assets/animation/redirect-home.json';
-const Lottie = lazy(() => import('react-lottie'));
+import { LoadingAnimation } from '../../../../../components/LoadingAnimation';
 /**
  * PartnerLoginWebComponent
  *
@@ -64,14 +63,6 @@ const PartnerLoginWebComponent = ({ partner: partnerProp }) => {
             }, 2000);
         }
     }, [error, navigator]);
-    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { className: 'text-center', children: [_jsx(Suspense, { fallback: _jsx("div", { className: "h-[230px] w-[250px]" }), children: _jsx(Lottie
-                    //@ts-ignore
-                    , { 
-                        //@ts-ignore
-                        options: {
-                            animationData: redirectAnimation,
-                            loop: true,
-                            autoplay: true,
-                        }, height: 230, width: 250 }) }), error ? (_jsxs(_Fragment, { children: [_jsx(Typography, { size: 'h6', type: 'heading', color: 'error', children: error }), _jsx(Typography, { size: 'small', type: 'body', color: 'gray-400', className: 'mt-2', children: "Redirecting back..." })] })) : (_jsx(_Fragment, { children: _jsx(Typography, { size: 'h6', type: 'heading', color: 'gray-400', children: "Authenticating and Redirecting ..." }) }))] }) }));
+    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { className: 'text-center', children: [_jsx(LoadingAnimation, { height: 230, width: 250 }), error ? (_jsxs(_Fragment, { children: [_jsx(Typography, { size: 'h6', type: 'heading', color: 'error', children: error }), _jsx(Typography, { size: 'small', type: 'body', color: 'gray-400', className: 'mt-2', children: "Redirecting back..." })] })) : (_jsx(_Fragment, { children: _jsx(Typography, { size: 'h6', type: 'heading', color: 'gray-400', children: "Authenticating and Redirecting ..." }) }))] }) }));
 };
 export { PartnerLoginWebComponent };

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

@@ -1,38 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Suspense, lazy, useEffect, useState, Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Flex, Typography } from '@truworth/twc-web-design';
 import { useSSOCallback } from '../../hooks/internal/useSSOCallback';
 import { useNavigator } from '../../../../../hooks/useNavigator';
-import redirectAnimation from '../../../../../../assets/animation/redirect-home.json';
+import { LoadingAnimation } from '../../../../../components/LoadingAnimation';
 import { RegistrationMethod } from '../../../../../enums';
-const Lottie = lazy(() => import('react-lottie'));
-class LottieErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError() {
-        return { hasError: true };
-    }
-    componentDidCatch() { }
-    render() {
-        if (this.state.hasError)
-            return this.props.fallback;
-        return this.props.children;
-    }
-}
 const SSOCallbackComponents = ({ authMethodOverride } = {}) => {
     const navigator = useNavigator();
     const [clientId, setClientId] = useState('');
     const [code, setCode] = useState('');
     const [authMethod, setAuthMethod] = useState(authMethodOverride ?? null);
     const [isReady, setIsReady] = useState(false);
-    // Resolve code/token from query (preferred) or localStorage; clientId/authMethod from localStorage only
+    // Resolve code from query params; clientId from localStorage (only needed for OIDC)
     useEffect(() => {
         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);
@@ -72,15 +57,6 @@ const SSOCallbackComponents = ({ authMethodOverride } = {}) => {
             }, 1500);
         }
     }, [error, navigator]);
-    const loadingFallback = _jsx("div", { className: "h-[230px] w-[250px]" });
-    return (_jsx(Flex, { justify: 'center', align: 'center', className: 'h-[100vh]', children: _jsxs("div", { children: [_jsx(LottieErrorBoundary, { fallback: loadingFallback, children: _jsx(Suspense, { fallback: loadingFallback, 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 ..." })] }) }));
+    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

@@ -19,8 +19,10 @@ const useSSOCallback = ({ clientId, code, authMethod, isReady = true }) => {
     const { onLogin, onRegistrationMethodChange, onTokenChange } = useAuthPackageContext();
     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/login-sso/${clientId}/saml-sso-complete`
+            ? `/auth/saml/complete`
             : `/auth/login-sso/${clientId}/callback`;
         axiosClient({
             url: endpoint,
@@ -42,11 +44,15 @@ const useSSOCallback = ({ clientId, code, authMethod, isReady = true }) => {
         });
     }, [clientId, authMethod, onLogin, onRegistrationMethodChange, onTokenChange]);
     useEffect(() => {
-        if (isReady && code && clientId && !hasProcessed) {
+        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);
         }
-    }, [isReady, code, clientId, hasProcessed, processSSOCallback]);
+    }, [isReady, code, clientId, authMethod, hasProcessed, processSSOCallback]);
     return { result, error };
 };
 export { useSSOCallback };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { Suspense, lazy } from 'react';
+import React from 'react';
 import { useEffect, useState } from "react";
 import { Info } from 'lucide-react';
 import { Flex, Typography, ResponsiveModal as Modal, Button, ResponsiveModal } from '@truworth/twc-web-design';
@@ -7,10 +7,9 @@ import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContex
 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 = lazy(() => import('react-lottie'));
 const UserConsent = ({ userDetails, handleBack }) => {
     const { email, phone } = userDetails || {};
     const [redirectModal, setRedirectModal] = useState(false);
@@ -74,15 +73,7 @@ const RedirectToHomeModal = ({ redirectModal }) => {
         }, 2000);
         return () => clearTimeout(timer);
     }, []);
-    return (_jsxs(Modal, { title: "", open: redirectModal, showCloseButton: false, footer: null, children: [isMounted && (_jsx(Suspense, { fallback: _jsx("div", { className: "h-[150px] w-[250px]" }), children: _jsx(Lottie
-                /* @ts-ignore */
-                , { 
-                    /* @ts-ignore */
-                    options: {
-                        animationData: redirectHome,
-                        loop: true,
-                        autoplay: true
-                    }, 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." })] })] })] }));
+    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/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [