@nibssplc/cams-sdk-react 0.0.1-beta.63 → 0.0.1-beta.64

package/dist/hooks/useOTPHandler.d.ts

@@ -1,10 +1,10 @@
-export declare const useOTPHandler: ({ provider, accessToken, idToken, appCode, authenticationType, apiEndpoint, onAuthComplete, }: {
+export declare const useOTPHandler: ({ provider, accessToken, idToken, appCode, authenticationType, MFAEndpoint, onAuthComplete, }: {
     provider: string;
     accessToken: string;
     idToken: string;
     appCode: string;
     authenticationType: "AuthenticatorCode" | "EmailOTP" | null;
-    apiEndpoint?: string;
+    MFAEndpoint?: string;
     onAuthComplete: (state: boolean, data: UserValidatedResponse | null) => void;
 }) => {
     handleSubmitOTP: (authenticationValue: string) => Promise<boolean>;

package/dist/index.cjs.js

@@ -1592,8 +1592,48 @@ var AuthSuccessAnimation = function (_a) {
     return (jsxRuntimeExports.jsxs(framerMotion.motion.div, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, transition: { duration: 0.5, ease: "easeOut" }, className: "flex flex-col items-center justify-center space-y-6 p-8", onAnimationComplete: onComplete, children: [jsxRuntimeExports.jsx(framerMotion.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.2, duration: 0.6, type: "spring", stiffness: 200 }, children: jsxRuntimeExports.jsx(lucideReact.CheckCircle, { className: "w-20 h-20 text-green-500" }) }), jsxRuntimeExports.jsxs(framerMotion.motion.div, { initial: { y: 20, opacity: 0 }, animate: { y: 0, opacity: 1 }, transition: { delay: 0.4, duration: 0.5 }, className: "text-center space-y-2", children: [jsxRuntimeExports.jsx("h2", { className: "text-2xl font-bold text-green-600", children: "Authentication Successful!" }), jsxRuntimeExports.jsx("p", { className: "text-gray-600", children: "Redirecting you to the application..." })] }), jsxRuntimeExports.jsx(framerMotion.motion.div, { initial: { width: 0 }, animate: { width: "100%" }, transition: { delay: 0.8, duration: 2 }, className: "h-1 bg-green-500 rounded-full max-w-xs" })] }));
 };
 
+// Function to parse userAgent and generate a device ID
+var GenerateDeviceId = function () {
+    var _a;
+    if (typeof window === "undefined" || !window.navigator) {
+        return "unknown-device";
+    }
+    var userAgent = window.navigator.userAgent;
+    var deviceId = "";
+    // Parse browser, version, OS, and device type
+    var browserMatch = Array.from(userAgent.matchAll(/(Chrome|Firefox|Safari|Edge|Opera)\/([\d.]+)/ig));
+    var osMatch = Array.from(userAgent.matchAll(/\(([^)]+)\)/g));
+    var isMobile = /Mobile|Android|iPhone|iPad/i.test(userAgent);
+    // Browser info
+    if (browserMatch.length > 0) {
+        var _b = browserMatch[0], browserName = _b[1], browserVersion = _b[2];
+        var majorVersion = browserVersion.split(".")[0];
+        deviceId += "".concat(browserName, "-").concat(majorVersion);
+    }
+    else {
+        deviceId += "UnknownBrowser";
+    }
+    // OS info
+    if (osMatch.length > 0) {
+        var osInfo = osMatch[0][1]
+            .split(";")[0]
+            .trim()
+            .replace(/[\s/()]/g, "_");
+        deviceId += "_".concat(osInfo);
+    }
+    else {
+        deviceId += "_UnknownOS";
+    }
+    // Device type
+    deviceId += isMobile ? "_Mobile" : "_Desktop";
+    // Add a simple hash of userAgent for uniqueness
+    var hash = btoa(userAgent).slice(0, 8);
+    deviceId += "_".concat(hash);
+    return (_a = deviceId.replace(/[^a-zA-Z0-9-_]/g, "_")) !== null && _a !== void 0 ? _a : "unknown-device";
+};
+
 var useOTPHandler = function (_a) {
-    var provider = _a.provider, accessToken = _a.accessToken, idToken = _a.idToken, appCode = _a.appCode, authenticationType = _a.authenticationType, apiEndpoint = _a.apiEndpoint, onAuthComplete = _a.onAuthComplete;
+    var provider = _a.provider, accessToken = _a.accessToken, idToken = _a.idToken, appCode = _a.appCode, authenticationType = _a.authenticationType, MFAEndpoint = _a.MFAEndpoint, onAuthComplete = _a.onAuthComplete;
     var _b = React.useState(false), loading = _b[0], setLoading = _b[1];
     var _c = React.useState(0), attemptCount = _c[0], setAttemptCount = _c[1];
     var _d = React.useState(false), isMaxAttemptsReached = _d[0], setIsMaxAttemptsReached = _d[1];
@@ -1617,13 +1657,18 @@ var useOTPHandler = function (_a) {
                     setAttemptCount(currentAttempt);
                     if (authenticationType === null)
                         return [2 /*return*/, false];
-                    return [4 /*yield*/, axios.post(apiEndpoint || '/api/auth/verify-mfa', {
+                    return [4 /*yield*/, axios.post(MFAEndpoint || "/api/auth/verify-mfa", {
                             provider: provider,
                             accessToken: accessToken,
                             idToken: idToken,
                             authenticationType: authenticationType,
                             MFACode: authenticationValue,
                             appCode: appCode,
+                        }, {
+                            headers: {
+                                "X-Device-ID": GenerateDeviceId(),
+                            },
+                            timeout: 605000,
                         })];
                 case 2:
                     response = (_a.sent()).data;
@@ -1667,7 +1712,7 @@ var useOTPHandler = function (_a) {
         idToken,
         authenticationType,
         onAuthComplete,
-        apiEndpoint,
+        MFAEndpoint,
         attemptCount,
         isMaxAttemptsReached,
     ]);
@@ -1704,7 +1749,7 @@ var MFAOptions = function (_a) {
         provider: "MSAL",
         appCode: context.appCode || "",
         authenticationType: authType,
-        apiEndpoint: MFAEndpoint,
+        MFAEndpoint: MFAEndpoint,
         onAuthComplete: function (state, data) {
             if (state) {
                 setShowSuccessAnimation(true);
@@ -1770,7 +1815,7 @@ var MFAOptions = function (_a) {
     else if (authType === "AuthenticatorCode") {
         content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: handleGoBack, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Authenticator App" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: loading ? (jsxRuntimeExports.jsx("div", { className: "p-3 flex justify-center items-center", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 text-center", children: "Enter the 6-digit Code from your Authenticator app" }), jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: handleSubmitOTP, fieldName: "AuthenticatorCode", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached })] })) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("div", { className: "flex justify-center items", children: jsxRuntimeExports.jsx("img", { src: OTPAuthenticationImg, alt: "NIBSS Logo", width: 365, height: 365 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold mb-6 text-center", children: "Two-Factor Authentication" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-300 text-base -tracking-wide text-center", children: "Your Microsoft account has been validated. Please complete two-factor authentication to continue." })] }), jsxRuntimeExports.jsx(CardContent, { children: content }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("div", { className: "flex justify-center items", children: jsxRuntimeExports.jsx("img", { src: OTPAuthenticationImg, alt: "NIBSS Logo", width: 365, height: 365 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold mb-6 text-center", children: "Two-Factor Authentication" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-300 text-base -tracking-wide text-center", children: "Your Microsoft account has been validated. Please complete two-factor authentication to continue." })] }), jsxRuntimeExports.jsx(CardContent, { className: "max-w-[80%]", children: content }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }));
 };
 
 var LoginButton = function () {