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

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

@@ -1230,7 +1230,7 @@ function CAMSProviderCore(props) {
     }, [mode, auth, userProfile]);
     var value = React.useMemo(function () {
         return (__assign(__assign({}, auth), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode }));
-    }, [auth, userProfile, mode]);
+    }, [auth, userProfile, mode, mode === "MSAL" && "requiresMFA" in auth ? auth.requiresMFA : null]);
     return jsxRuntimeExports.jsx(CAMSContext.Provider, { value: value, children: children });
 }
 function UnifiedCAMSProvider(props) {
@@ -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,
     ]);
@@ -1692,33 +1737,54 @@ var MFAOptions = function (_a) {
     var _d = React.useState(false), otpVisible = _d[0], setOtpVisible = _d[1];
     var _e = React.useState(false), showSuccessAnimation = _e[0], setShowSuccessAnimation = _e[1];
     var _f = React.useState(null), authType = _f[0], setAuthType = _f[1];
+    var _g = React.useState(""), lastOTPCode = _g[0], setLastOTPCode = _g[1];
     var context = useCAMSContext();
-    var sendEmailOTP = (context.authMode === "MSAL" && "sendEmailOTP" in context
+    var _h = context.authMode === "MSAL" && "sendEmailOTP" in context
         ? context
-        : { sendEmailOTP: null }).sendEmailOTP;
+        : { sendEmailOTP: null, completeMFA: null }, sendEmailOTP = _h.sendEmailOTP, completeMFA = _h.completeMFA;
     var accessToken = context.authMode === "MSAL" ? context.accessToken : "";
     var idToken = context.authMode === "MSAL" ? context.idToken : "";
-    var _g = useOTPHandler({
+    var _j = useOTPHandler({
         accessToken: accessToken || "",
         idToken: idToken || "",
         provider: "MSAL",
         appCode: context.appCode || "",
         authenticationType: authType,
-        apiEndpoint: MFAEndpoint,
-        onAuthComplete: function (state, data) {
-            if (state) {
-                setShowSuccessAnimation(true);
-                sonner.toast.success(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600 bg-green-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: "Multi-Factor Authentication Successful" })] }));
-                setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(true); }, 2000);
-            }
-            else {
-                sonner.toast.error(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldClose, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: (data === null || data === void 0 ? void 0 : data.message) || "Invalid code. Please try again." })] }));
-                if (isMaxAttemptsReached) {
-                    setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(false); }, 1000);
+        MFAEndpoint: MFAEndpoint,
+        onAuthComplete: function (state, data) { return __awaiter(void 0, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!state) return [3 /*break*/, 5];
+                        if (!(completeMFA && authType && lastOTPCode)) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, completeMFA(lastOTPCode, authType)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error("Failed to complete MFA:", error_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        setShowSuccessAnimation(true);
+                        sonner.toast.success(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600 bg-green-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: "Multi-Factor Authentication Successful" })] }));
+                        setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(true); }, 2000);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        sonner.toast.error(jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm text-red-600 bg-red-50 p-3 rounded-lg", children: [jsxRuntimeExports.jsx(lucideReact.ShieldClose, { className: "w-4 h-4" }), jsxRuntimeExports.jsx("span", { children: (data === null || data === void 0 ? void 0 : data.message) || "Invalid code. Please try again." })] }));
+                        if (isMaxAttemptsReached) {
+                            setTimeout(function () { return onComplete === null || onComplete === void 0 ? void 0 : onComplete(false); }, 1000);
+                        }
+                        _a.label = 6;
+                    case 6: return [2 /*return*/];
                 }
-            }
-        },
-    }), handleSubmitOTP = _g.handleSubmitOTP, loading = _g.loading, setLoading = _g.setLoading, attemptCount = _g.attemptCount, remainingAttempts = _g.remainingAttempts, isMaxAttemptsReached = _g.isMaxAttemptsReached, resetAttempts = _g.resetAttempts;
+            });
+        }); },
+    }), handleSubmitOTP = _j.handleSubmitOTP, loading = _j.loading, setLoading = _j.setLoading, attemptCount = _j.attemptCount, remainingAttempts = _j.remainingAttempts, isMaxAttemptsReached = _j.isMaxAttemptsReached, resetAttempts = _j.resetAttempts;
     var handleGoBack = function () {
         setAuthType(null);
         setOtpVisible(false);
@@ -1727,9 +1793,9 @@ var MFAOptions = function (_a) {
     };
     // Show success animation if authentication is successful
     if (showSuccessAnimation) {
-        return (jsxRuntimeExports.jsx(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: jsxRuntimeExports.jsx(AuthSuccessAnimation, { onComplete: function () {
-                    // Animation completed, can add additional logic here if needed
-                } }) }));
+        return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsx(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: jsxRuntimeExports.jsx(AuthSuccessAnimation, { onComplete: function () {
+                        // Animation completed, can add additional logic here if needed
+                    } }) }) }));
     }
     var content = jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
     if (!authType) {
@@ -1765,12 +1831,18 @@ var MFAOptions = function (_a) {
                 setAuthType(null);
                 setOtpVisible(false);
                 setValue("");
-            }, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Email OTP" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: handleSubmitOTP, fieldName: "EmailOTP", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached }), jsxRuntimeExports.jsx(Button, { variant: "ghost", className: "w-full text-sm", onClick: handleGoBack, children: "\u2190 Choose different method" })] }) })] }));
+            }, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Email OTP" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: function (code) {
+                                    setLastOTPCode(code);
+                                    return handleSubmitOTP(code);
+                                }, fieldName: "EmailOTP", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached }), jsxRuntimeExports.jsx(Button, { variant: "ghost", className: "w-full text-sm", onClick: handleGoBack, children: "\u2190 Choose different method" })] }) })] }));
     }
     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 })] })) })] }));
+        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: function (code) {
+                                    setLastOTPCode(code);
+                                    return handleSubmitOTP(code);
+                                }, 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 () {