@nibssplc/cams-sdk-react 0.0.1-beta.59 → 0.0.1-beta.61

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, CAMSError, CAMSErrorType, Logger, CAMSMFAAuthenticator } from '@nibssplc/cams-sdk';
+import { isPopupWindow, initializePopupAuth, CAMSSessionManager, Logger, CAMSError, CAMSErrorType, CAMSMFAAuthenticator } 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;
@@ -310,74 +310,67 @@ function useCAMSMSALAuth(options) {
     //   handleRedirect();
     // }, []);
     var login = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var err_1, camsError_1, camsError;
-        var _a, _b, _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
+        var response, mfaConfig, authenticator, err_1, camsError_1, camsError;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     setError(null);
-                    _d.label = 1;
+                    _e.label = 1;
                 case 1:
-                    _d.trys.push([1, 3, , 4]);
-                    // await instance.loginR edirect({
-                    //   scopes,
-                    //   prompt: options.prompt || "login",
-                    // });
-                    return [4 /*yield*/, instance
-                            .loginPopup({
+                    _e.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, instance.loginPopup({
                             scopes: scopes,
                             prompt: options.prompt || "login",
-                        })
-                            .then(function (response) {
-                            var _a;
-                            Logger.debug("Login Token response:", {
-                                accessToken: response.accessToken,
-                                idToken: response.idToken,
-                            });
-                            setAccessToken(response.accessToken);
-                            setIdToken(response.idToken);
-                            // Initialize MFA authenticator
-                            var mfaConfig = {
-                                accessToken: response.accessToken,
-                                idToken: response.idToken,
-                                appCode: options.appCode,
-                                provider: "MSAL",
-                                apiEndpoint: options.mfaApiEndpoint,
-                            };
-                            var authenticator = new CAMSMFAAuthenticator(mfaConfig);
-                            setMfaAuthenticator(authenticator);
-                            setRequiresMFA(true);
-                            // Don't persist as authenticated until MFA is complete
-                            if (typeof window !== "undefined") {
-                                localStorage.setItem(options.storageKey, JSON.stringify({
-                                    isAuthenticated: false,
-                                    requiresMFA: true,
-                                    accessToken: response.accessToken,
-                                    idToken: response.idToken,
-                                }));
-                            }
-                            (_a = options.onAuthSuccess) === null || _a === void 0 ? void 0 : _a.call(options, response.accessToken);
                         })];
                 case 2:
-                    // await instance.loginR edirect({
-                    //   scopes,
-                    //   prompt: options.prompt || "login",
-                    // });
-                    _d.sent();
+                    response = _e.sent();
+                    Logger.debug("Login Token response:", {
+                        accessToken: response.accessToken,
+                        idToken: response.idToken,
+                    });
+                    setAccessToken(response.accessToken);
+                    setIdToken(response.idToken);
+                    mfaConfig = {
+                        accessToken: response.accessToken,
+                        idToken: response.idToken,
+                        appCode: options.appCode,
+                        provider: "MSAL",
+                        apiEndpoint: options.MFAEndpoint,
+                    };
+                    authenticator = new CAMSMFAAuthenticator(mfaConfig);
+                    setMfaAuthenticator(authenticator);
+                    setRequiresMFA(true);
+                    // Don't persist as authenticated until MFA is complete
+                    if (typeof window !== "undefined") {
+                        localStorage.setItem(options.storageKey, JSON.stringify({
+                            isAuthenticated: false,
+                            requiresMFA: true,
+                            accessToken: response.accessToken,
+                            idToken: response.idToken,
+                        }));
+                    }
+                    (_a = options.onAuthSuccess) === null || _a === void 0 ? void 0 : _a.call(options, response.accessToken);
                     return [3 /*break*/, 4];
                 case 3:
-                    err_1 = _d.sent();
+                    err_1 = _e.sent();
+                    // Handle user cancellation gracefully
+                    if (err_1.errorCode === "user_cancelled") {
+                        Logger.info("User cancelled login");
+                        setError(null); // Don't treat cancellation as an error
+                        return [2 /*return*/];
+                    }
                     // If popup is blocked
                     if (err_1.errorCode === "popup_window_error" ||
-                        ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("popup"))) {
-                        camsError_1 = new CAMSError(CAMSErrorType.POPUP_BLOCKED, "Both popup and redirect failed: " + err_1);
+                        ((_b = err_1.message) === null || _b === void 0 ? void 0 : _b.includes("popup"))) {
+                        camsError_1 = new CAMSError(CAMSErrorType.POPUP_BLOCKED, "Popup blocked by browser. Please allow popups and try again.");
                         setError(camsError_1);
-                        (_b = options.onAuthError) === null || _b === void 0 ? void 0 : _b.call(options, camsError_1);
+                        (_c = options.onAuthError) === null || _c === void 0 ? void 0 : _c.call(options, camsError_1);
                         return [2 /*return*/];
                     }
-                    camsError = new CAMSError(CAMSErrorType.API_VALIDATION_ERROR, "Login failed: " + err_1);
+                    camsError = new CAMSError(CAMSErrorType.API_VALIDATION_ERROR, "Login failed: " + err_1.message || err_1);
                     setError(camsError);
-                    (_c = options.onAuthError) === null || _c === void 0 ? void 0 : _c.call(options, camsError);
+                    (_d = options.onAuthError) === null || _d === void 0 ? void 0 : _d.call(options, camsError);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -1125,14 +1118,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 () {
@@ -1146,7 +1139,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);
@@ -1184,7 +1177,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) {
@@ -1199,8 +1196,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) {
@@ -1209,11 +1206,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") {
@@ -1667,18 +1664,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
+    var sendEmailOTP = (isSDKMode
         ? context
-        : { completeMFA: null, sendEmailOTP: null }; _g.completeMFA; var sendEmailOTP = _g.sendEmailOTP;
+        : { 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);
@@ -1692,7 +1689,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);
@@ -1730,7 +1727,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: "/images/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" })] })] })] })] }));
     }
     else if (authType === "EmailOTP") {
         content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: function () {
@@ -1742,7 +1739,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", 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: "/images/OTPAuthentication.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" })] })] }) }));
 };
 
 var LoginButton = function () {