@nibssplc/cams-sdk-react 0.0.1-beta.60 → 0.0.1-beta.62

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
-import { isPopupWindow, initializePopupAuth, CAMSSessionManager, Logger, CAMSError, CAMSErrorType, CAMSMFAAuthenticator } from '@nibssplc/cams-sdk';
+import { isPopupWindow, initializePopupAuth, CAMSSessionManager, CAMSMFAAuthenticator, Logger, CAMSError, CAMSErrorType } from '@nibssplc/cams-sdk';
 export * from '@nibssplc/cams-sdk';
 import { useMsal, useAccount, MsalProvider } from '@azure/msal-react';
 import { InteractionStatus, PublicClientApplication } from '@azure/msal-browser';
@@ -240,7 +240,7 @@ function useCAMSMSALAuth(options) {
     var _this = this;
     if (options === void 0) { options = {
         appCode: "",
-        mfaUrl: "/auth/multi-factor",
+        MFAEndpoint: "/auth/multi-factor",
         storageKey: "CAMS-MSAL-AUTH-SDK",
     }; }
     var _a = useMsal(), instance = _a.instance, inProgress = _a.inProgress, accounts = _a.accounts;
@@ -267,11 +267,25 @@ function useCAMSMSALAuth(options) {
             var stored = localStorage.getItem(options.storageKey);
             if (stored) {
                 try {
-                    var _a = JSON.parse(stored), accessToken_1 = _a.accessToken, idToken_1 = _a.idToken, appCode = _a.appCode;
+                    var _a = JSON.parse(stored), accessToken_1 = _a.accessToken, idToken_1 = _a.idToken, appCode = _a.appCode, storedRequiresMFA = _a.requiresMFA, storedIsAuthenticated = _a.isAuthenticated;
                     if (accessToken_1 && isTokenValid(accessToken_1)) {
                         setAccessToken(accessToken_1);
                         setIdToken(idToken_1);
+                        // Restore MFA state
+                        if (storedRequiresMFA && !storedIsAuthenticated) {
+                            var mfaConfig = {
+                                accessToken: accessToken_1,
+                                idToken: idToken_1,
+                                appCode: options.appCode,
+                                provider: "MSAL",
+                                apiEndpoint: options.MFAEndpoint,
+                            };
+                            var authenticator = new CAMSMFAAuthenticator(mfaConfig);
+                            setMfaAuthenticator(authenticator);
+                            setRequiresMFA(true);
+                        }
                         console.log("App Code >>>", appCode, options.appCode);
+                        console.log("MFA Endpoint >>>", appCode, options.MFAEndpoint);
                     }
                     else {
                         localStorage.removeItem(options.storageKey);
@@ -279,8 +293,12 @@ function useCAMSMSALAuth(options) {
                 }
                 catch (_b) { }
             }
+            else if (account) {
+                // Storage cleared but MSAL account exists - clear MSAL state
+                instance.logoutRedirect().catch(function () { });
+            }
         }
-    }, [accessToken]);
+    }, [accessToken, account, instance, options.storageKey]);
     // useEffect(() => {
     //   const handleRedirect = async () => {
     //     try {
@@ -336,7 +354,7 @@ function useCAMSMSALAuth(options) {
                         idToken: response.idToken,
                         appCode: options.appCode,
                         provider: "MSAL",
-                        apiEndpoint: options.mfaApiEndpoint,
+                        apiEndpoint: options.MFAEndpoint,
                     };
                     authenticator = new CAMSMFAAuthenticator(mfaConfig);
                     setMfaAuthenticator(authenticator);
@@ -1118,14 +1136,14 @@ var deleteCookie = function (name) {
 };
 function CAMSProviderCore(props) {
     var _this = this;
-    var _a = props, children = _a.children, mode = _a.mode, appCode = _a.appCode, validateTokenUrl = _a.validateTokenUrl;
+    var children = props.children, mode = props.mode, appCode = props.appCode;
     // Always call both hooks to satisfy Rules of Hooks
     var regularAuth = useCAMSAuth(mode === "REGULAR"
         ? __assign(__assign({}, props), { appCode: appCode })
         : { appCode: "" });
     var msalAuth = useCAMSMSALAuth(mode === "MSAL"
         ? __assign(__assign({}, props), { appCode: appCode })
-        : { appCode: "" });
+        : { appCode: "", MFAEndpoint: "/auth/multi-factor" });
     var auth = mode === "REGULAR" ? regularAuth : msalAuth;
     var profileStorageKey = "".concat(auth.storageKey, "-PROFILE");
     var getInitialProfile = function () {
@@ -1139,7 +1157,7 @@ function CAMSProviderCore(props) {
             return null;
         }
     };
-    var _b = useState(getInitialProfile), userProfile = _b[0], setUserProfile = _b[1];
+    var _a = useState(getInitialProfile), userProfile = _a[0], setUserProfile = _a[1];
     useEffect(function () {
         if (typeof window !== "undefined") {
             var storedProfile = getCookie(profileStorageKey);
@@ -1177,7 +1195,11 @@ function CAMSProviderCore(props) {
     }); };
     // Handle MFA completion for MSAL mode
     useEffect(function () {
-        if (mode === "MSAL" && "requiresMFA" in auth && !auth.requiresMFA && auth.isAuthenticated && !userProfile) {
+        if (mode === "MSAL" &&
+            "requiresMFA" in auth &&
+            !auth.requiresMFA &&
+            auth.isAuthenticated &&
+            !userProfile) {
             // MFA completed, extract profile from stored data
             var storedData = getCookie(auth.storageKey);
             if (storedData) {
@@ -1192,8 +1214,8 @@ function CAMSProviderCore(props) {
         }
     }, [mode, auth, userProfile]);
     var value = useMemo(function () {
-        return (__assign(__assign({}, auth), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode, validateTokenUrl: validateTokenUrl }));
-    }, [auth, userProfile, mode, validateTokenUrl]);
+        return (__assign(__assign({}, auth), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode }));
+    }, [auth, userProfile, mode]);
     return jsxRuntimeExports.jsx(CAMSContext.Provider, { value: value, children: children });
 }
 function UnifiedCAMSProvider(props) {
@@ -1202,11 +1224,11 @@ function UnifiedCAMSProvider(props) {
     if (!appCodeValidation.success) {
         throw new Error("Invalid appCode: ".concat(appCodeValidation.error.issues[0].message));
     }
-    // Validate validateTokenUrl if provided
-    if (props.mode === "MSAL" && props.validateTokenUrl) {
-        var urlValidation = UrlSchema.safeParse(props.validateTokenUrl);
+    // Validate apiEndpoint if provided
+    if (props.mode === "MSAL" && props.MFAEndpoint) {
+        var urlValidation = UrlSchema.safeParse(props.MFAEndpoint);
         if (!urlValidation.success) {
-            throw new Error("Invalid validateTokenUrl: ".concat(urlValidation.error.issues[0].message));
+            throw new Error("Invalid apiEndpoint: ".concat(urlValidation.error.issues[0].message));
         }
     }
     if (props.mode === "MSAL") {
@@ -1452,9 +1474,9 @@ var GenericOTPVerifier = function (_a) {
         resolver: a$1(Schema),
         defaultValues: (_c = {}, _c[fieldName] = "", _c),
     });
-    return (jsxRuntimeExports.jsxs("div", { className: "relative rounded space-y-4 p-0 m-0 py-8 space-x-6", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex items-center justify-center flex-col gap-2 mt-2 text-center mb-8", children: [jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-lime-400 via-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl mb-6 group-hover:scale-110 transition-transform duration-300", children: jsxRuntimeExports.jsx(RectangleEllipsis, {}) }), jsxRuntimeExports.jsx(CardTitle, { className: "font-bold text-emerald-700 text-2xl", children: "One-Time-Password (OTP)" }), attemptCount > 0 && (jsxRuntimeExports.jsx("div", { className: "text-sm mt-2 ".concat(isMaxAttemptsReached ? 'text-red-600' : 'text-orange-600'), children: isMaxAttemptsReached
+    return (jsxRuntimeExports.jsxs(Card, { className: "relative rounded space-y-4 p-0 m-0 py-8 space-x-6", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex items-center justify-center flex-col gap-2 mt-2 text-center mb-8", children: [jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-lime-400 via-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl mb-6 group-hover:scale-110 transition-transform duration-300", children: jsxRuntimeExports.jsx(RectangleEllipsis, {}) }), jsxRuntimeExports.jsx(CardTitle, { className: "font-bold text-emerald-700 text-2xl", children: "One-Time-Password (OTP)" }), attemptCount > 0 && (jsxRuntimeExports.jsx("div", { className: "text-sm mt-2 ".concat(isMaxAttemptsReached ? 'text-red-600' : 'text-orange-600'), children: isMaxAttemptsReached
                             ? 'Maximum attempts reached. Please try again later.'
-                            : "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx("div", { className: "space-y-6", children: jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsx("form", { className: "flex items-center justify-center my-4 ", children: jsxRuntimeExports.jsx(FormField, { control: form.control, name: fieldName, render: function () { return (jsxRuntimeExports.jsxs(FormItem, { className: "flex items-center justify-center flex-col gap-y-1 space-y-4", children: [jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(InputOTP, { maxLength: 6, value: value, disabled: isMaxAttemptsReached, onChange: function (authenticationValue) {
+                            : "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx(CardContent, { className: "space-y-6", children: jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsx("form", { className: "flex items-center justify-center my-4 ", children: jsxRuntimeExports.jsx(FormField, { control: form.control, name: fieldName, render: function () { return (jsxRuntimeExports.jsxs(FormItem, { className: "flex items-center justify-center flex-col gap-y-1 space-y-4", children: [jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(InputOTP, { maxLength: 6, value: value, disabled: isMaxAttemptsReached, onChange: function (authenticationValue) {
                                                 setValue(authenticationValue);
                                                 if (authenticationValue.length === 6 && !isMaxAttemptsReached) {
                                                     setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
@@ -1463,6 +1485,10 @@ var GenericOTPVerifier = function (_a) {
                                             }, pattern: REGEXP_ONLY_DIGITS, children: jsxRuntimeExports.jsx(InputOTPGroup, { className: "space-x-2", children: __spreadArray([], Array(6), true).map(function (_, idx) { return (jsxRuntimeExports.jsx(InputOTPSlot, { className: "border border-l-2 ".concat(isMaxAttemptsReached ? 'opacity-50 cursor-not-allowed' : ''), index: idx }, idx + 1)); }) }) }) }), jsxRuntimeExports.jsx(FormMessage, {})] })); } }) }) })) })] }));
 };
 
+var OTPAuthenticationImg = "OTPAuthentication.svg";
+
+var MicrosoftAuthenticatorImg = "microsoftauthenticator.svg";
+
 var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
@@ -1660,18 +1686,18 @@ var MFAOptions = function (_a) {
     var _f = useState(null), authType = _f[0], setAuthType = _f[1];
     var context = useCAMSContext();
     var isSDKMode = context.authMode === "MSAL" && "completeMFA" in context;
-    var _g = isSDKMode
-        ? context
-        : { completeMFA: null, sendEmailOTP: null }; _g.completeMFA; var sendEmailOTP = _g.sendEmailOTP;
+    var sendEmailOTP = (isSDKMode ? context : { sendEmailOTP: null }).sendEmailOTP;
     var accessToken = context.authMode === "MSAL" ? context.accessToken : "";
     var idToken = context.authMode === "MSAL" ? context.idToken : "";
-    var _h = useOTPHandler({
+    var _g = useOTPHandler({
         provider: "azure",
         accessToken: accessToken || "",
         idToken: idToken || "",
         appCode: context.appCode || "",
         authenticationType: authType,
-        validateTokenUrl: context.validateTokenUrl || "/api/validate-token",
+        validateTokenUrl: (context.authMode === "MSAL" && "MFAEndpoint" in context
+            ? context.MFAEndpoint || "/api/auth/verify-mfa"
+            : "/api/validate-token"),
         onAuthComplete: function (success, data) {
             if (success) {
                 setShowSuccessAnimation(true);
@@ -1685,7 +1711,7 @@ var MFAOptions = function (_a) {
                 }
             }
         },
-    }), handleSubmitOTP = _h.handleSubmitOTP, loading = _h.loading, attemptCount = _h.attemptCount, isMaxAttemptsReached = _h.isMaxAttemptsReached, remainingAttempts = _h.remainingAttempts, resetAttempts = _h.resetAttempts;
+    }), handleSubmitOTP = _g.handleSubmitOTP, loading = _g.loading, attemptCount = _g.attemptCount, isMaxAttemptsReached = _g.isMaxAttemptsReached, remainingAttempts = _g.remainingAttempts, resetAttempts = _g.resetAttempts;
     var handleGoBack = function () {
         setAuthType(null);
         setOtpVisible(false);
@@ -1723,7 +1749,7 @@ var MFAOptions = function (_a) {
                                 resetAttempts();
                                 setAuthType("AuthenticatorCode");
                                 setOtpVisible(true);
-                            }, children: [jsxRuntimeExports.jsx("img", { src: "/microsoftauthenticator.svg", alt: "Authenticator", className: "rounded-full", width: 24, height: 24 }), jsxRuntimeExports.jsxs("div", { className: "text-left", children: [jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Authenticator App" }), jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "Use Authenticator App" })] })] })] })] }));
+                            }, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftAuthenticatorImg, alt: "Authenticator", className: "rounded-full", width: 24, height: 24 }), jsxRuntimeExports.jsxs("div", { className: "text-left", children: [jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Authenticator App" }), jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "Use Authenticator App" })] })] })] })] }));
     }
     else if (authType === "EmailOTP") {
         content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: function () {
@@ -1735,7 +1761,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.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("img", { src: "/OTPAuthentication1.svg", 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-sm -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(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("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-sm -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(ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }));
 };
 
 var LoginButton = function () {