@nibssplc/cams-sdk-react 0.0.1-beta.90 → 0.0.1-beta.92

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import { useMsal, useAccount, MsalProvider } from '@azure/msal-react';
 import { InteractionStatus, PublicClientApplication } from '@azure/msal-browser';
 import z$1, { z } from 'zod';
 import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from 'input-otp';
-import { RectangleEllipsis, XIcon, CheckCircle, Mail, Shield, ShieldCheck, ShieldClose, KeyIcon, Loader2 } from 'lucide-react';
+import { RectangleEllipsis, XIcon, CheckCircle, Mail, Shield, KeyIcon, ShieldCheck, ShieldClose, Loader2 } from 'lucide-react';
 import { appendErrors, FormProvider, Controller, useFormContext, useFormState, useForm } from 'react-hook-form';
 import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
 import { clsx } from 'clsx';
@@ -1828,26 +1828,61 @@ var useOTPHandler = function (_a) {
 };
 
 var MFAOptions = function (_a) {
-    var _b = _a === void 0 ? {} : _a, onComplete = _b.onComplete, onAuthFailed = _b.onAuthFailed, MFAEndpoint = _b.MFAEndpoint;
-    var _c = useState(""), value = _c[0], setValue = _c[1];
-    var _d = useState(false), otpVisible = _d[0], setOtpVisible = _d[1];
-    var _e = useState(false), showSuccessAnimation = _e[0], setShowSuccessAnimation = _e[1];
-    var _f = useState(null), authType = _f[0], setAuthType = _f[1];
+    var onComplete = _a.onComplete, onAuthFailed = _a.onAuthFailed, MFAEndpoints = _a.MFAEndpoints, usePassKey = _a.usePassKey;
+    var _b = useState(""), value = _b[0], setValue = _b[1];
+    var _c = useState(false), otpVisible = _c[0], setOtpVisible = _c[1];
+    var _d = useState(false), showSuccessAnimation = _d[0], setShowSuccessAnimation = _d[1];
+    var _e = useState(null), authType = _e[0], setAuthType = _e[1];
     var context = useCAMSContext();
-    var _g = context.authMode === "MSAL" && "sendEmailOTP" in context
+    var _f = context.authMode === "MSAL" && "sendEmailOTP" in context
         ? context
         : { sendEmailOTP: null, completeMFA: null, logout: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
                 return [2 /*return*/];
-            }); }); } }, sendEmailOTP = _g.sendEmailOTP, completeMFA = _g.completeMFA, logout = _g.logout;
+            }); }); } }, sendEmailOTP = _f.sendEmailOTP, completeMFA = _f.completeMFA, logout = _f.logout;
     var accessToken = context.authMode === "MSAL" ? context.accessToken : "";
     var idToken = context.authMode === "MSAL" ? context.idToken : "";
-    var _h = useOTPHandler({
+    var authenticate = useWebAuthn().authenticate;
+    var handleFIDOLogin = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var options, assertionResponse, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 4, , 5]);
+                    // 1. Fetch authentication challenge from your server
+                    console.log("Requesting authentication challenge from server...");
+                    return [4 /*yield*/, axios.get(MFAEndpoints.RetrieveAuthChallenge)];
+                case 1:
+                    options = (_a.sent()).data;
+                    console.log("Received challenge:", options);
+                    // 2. Call the SDK to trigger the browser's passkey authentication UI
+                    console.log("Calling SDK authenticate function...");
+                    return [4 /*yield*/, authenticate(options)];
+                case 2:
+                    assertionResponse = _a.sent();
+                    console.log("Authentication assertion received from client:", assertionResponse);
+                    // 3. Send the assertion back to the server for verification
+                    console.log("Sending assertion to server for verification...");
+                    return [4 /*yield*/, axios.post("/api/webauthn/auth-verify", assertionResponse)];
+                case 3:
+                    _a.sent();
+                    toast.success("🔑 Sign-in successful!");
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    console.error("Authentication failed:", error_1);
+                    toast.error("❌ Could not sign in.");
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var _g = useOTPHandler({
         accessToken: accessToken || "",
         idToken: idToken || "",
         provider: "MSAL",
         appCode: context.appCode || "",
         authenticationType: authType,
-        MFAEndpoint: MFAEndpoint,
+        MFAEndpoint: MFAEndpoints.ValidateMFA,
         onAuthComplete: function (state, data) {
             console.log("Completed Auth. Handling MFA", state);
             if (state) {
@@ -1874,7 +1909,7 @@ var MFAOptions = function (_a) {
                 }
             }
         },
-    }), handleSubmitOTP = _h.handleSubmitOTP, loading = _h.loading, setLoading = _h.setLoading, attemptCount = _h.attemptCount, remainingAttempts = _h.remainingAttempts, isMaxAttemptsReached = _h.isMaxAttemptsReached, resetAttempts = _h.resetAttempts;
+    }), handleSubmitOTP = _g.handleSubmitOTP, loading = _g.loading, setLoading = _g.setLoading, attemptCount = _g.attemptCount, remainingAttempts = _g.remainingAttempts, isMaxAttemptsReached = _g.isMaxAttemptsReached, resetAttempts = _g.resetAttempts;
     var handleGoBack = function () {
         setAuthType(null);
         setOtpVisible(false);
@@ -1914,7 +1949,13 @@ var MFAOptions = function (_a) {
                                 resetAttempts();
                                 setAuthType("AuthenticatorCode");
                                 setOtpVisible(true);
-                            }, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftAuthenticatorImg, alt: "Authenticator", className: "rounded-full", width: 24, height: 24, onError: function () { return jsxRuntimeExports.jsx(Shield, {}); } }), 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, onError: function () { return jsxRuntimeExports.jsx(Shield, {}); } }), 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" })] })] }), usePassKey && (jsxRuntimeExports.jsxs(Button, { variant: "outline", className: "w-full flex items-center justify-start gap-3 p-4 h-auto border-2 hover:border-[#506f4a] hover:bg-[#506f4a]/5 transition-all", 
+                            // onClick={() => {
+                            //   resetAttempts();
+                            //   setAuthType("AuthenticatorCode");
+                            //   setOtpVisible(true);
+                            // }}
+                            onClick: handleFIDOLogin, disabled: context.isLoading, children: [jsxRuntimeExports.jsx(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", children: jsxRuntimeExports.jsx("span", { children: "Sign In " }) }), jsxRuntimeExports.jsx(KeyIcon, { className: "w-16 h-16 text-[#506f4a]" }), jsxRuntimeExports.jsxs("div", { className: "text-left", children: [jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Continue with Passkey" }), jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "Passkey" })] })] }))] })] }));
     }
     else if (authType === "EmailOTP") {
         content = (jsxRuntimeExports.jsx(Dialog, { open: otpVisible, onOpenChange: function () {
@@ -2012,11 +2053,12 @@ var ADLoginModal = function (_a) {
                                 } }), jsxRuntimeExports.jsx(Button, { type: "submit", className: "w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx(GenericOTPVerifier, { value: mfaCode, setValue: setMfaCode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntimeExports.jsx(Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntimeExports.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
 };
 
-var DefaultLoginPage = function () {
+var DefaultLoginPage = function (_a) {
+    var usePassKey = _a.usePassKey, MFAEndpoints = _a.MFAEndpoints;
     var context = useCAMSContext();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
-    var _a = useState(false), showADModal = _a[0], setShowADModal = _a[1];
-    var _b = useWebAuthn(), register = _b.register, authenticate = _b.authenticate;
+    var _b = useState(false), showADModal = _b[0], setShowADModal = _b[1];
+    var register = useWebAuthn().register;
     var handleMSALLogin = function () {
         if (authMode === "MSAL") {
             login();
@@ -2037,84 +2079,39 @@ var DefaultLoginPage = function () {
         exit: { opacity: 0, scale: 0.8, y: -50, transition: { duration: 0.3 } },
     };
     var handleRegister = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, options, attestationResponse, error_1;
+        var options, attestationResponse, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 5, , 6]);
+                    _a.trys.push([0, 4, , 5]);
                     // 1. Fetch challenge from your server
                     console.log("Requesting registration challenge from server...");
-                    return [4 /*yield*/, fetch("/api/webauthn/register-challenge")];
+                    return [4 /*yield*/, axios.get(MFAEndpoints.RegisterNewChallenge)];
                 case 1:
-                    res = _a.sent();
-                    return [4 /*yield*/, res.json()];
-                case 2:
-                    options = _a.sent();
+                    options = (_a.sent()).data;
                     console.log("Received challenge:", options);
                     // 2. Call the SDK to trigger the browser's passkey creation UI
                     console.log("Calling SDK register function...");
                     return [4 /*yield*/, register(options)];
-                case 3:
+                case 2:
                     attestationResponse = _a.sent();
                     console.log("Passkey created on client:", attestationResponse);
                     // 3. Send the response back to the server for verification
                     console.log("Sending attestation to server for verification...");
-                    return [4 /*yield*/, fetch("/api/webauthn/register-verify", {
-                            method: "POST",
+                    return [4 /*yield*/, axios.post(MFAEndpoints.RegisterVerify, attestationResponse, {
                             headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify(attestationResponse),
+                            withCredentials: true, // credentials: 'include'
                         })];
-                case 4:
+                case 3:
                     _a.sent();
-                    alert("✅ Registration successful! Passkey created.");
-                    return [3 /*break*/, 6];
-                case 5:
+                    toast.success("✅ Registration successful! Passkey created.");
+                    return [3 /*break*/, 5];
+                case 4:
                     error_1 = _a.sent();
                     console.error("Registration failed:", error_1);
-                    alert("❌ Could not create passkey.");
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleFIDOLogin = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, options, assertionResponse, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 5, , 6]);
-                    // 1. Fetch authentication challenge from your server
-                    console.log("Requesting authentication challenge from server...");
-                    return [4 /*yield*/, fetch("/api/webauthn/auth-challenge")];
-                case 1:
-                    res = _a.sent();
-                    return [4 /*yield*/, res.json()];
-                case 2:
-                    options = _a.sent();
-                    console.log("Received challenge:", options);
-                    // 2. Call the SDK to trigger the browser's passkey authentication UI
-                    console.log("Calling SDK authenticate function...");
-                    return [4 /*yield*/, authenticate(options)];
-                case 3:
-                    assertionResponse = _a.sent();
-                    console.log("Authentication assertion received from client:", assertionResponse);
-                    // 3. Send the assertion back to the server for verification
-                    console.log("Sending assertion to server for verification...");
-                    return [4 /*yield*/, fetch("/api/webauthn/auth-verify", {
-                            method: "POST",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify(assertionResponse),
-                        })];
-                case 4:
-                    _a.sent();
-                    alert("🔑 Sign-in successful!");
-                    return [3 /*break*/, 6];
-                case 5:
-                    error_2 = _a.sent();
-                    console.error("Authentication failed:", error_2);
-                    alert("❌ Could not sign in.");
-                    return [3 /*break*/, 6];
-                case 6: return [2 /*return*/];
+                    toast.error("❌ Could not create passkey.");
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
@@ -2122,19 +2119,7 @@ var DefaultLoginPage = function () {
                                     // variant="outline"
                                     , { 
                                         // variant="outline"
-                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: handleMSALLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), jsxRuntimeExports.jsxs(Button
-                                    // variant="outline"
-                                    , { 
-                                        // variant="outline"
-                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return setShowADModal(true); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: isLoading ? "Logging in..." : "Sign in with ActiveDirectory" })] }), jsxRuntimeExports.jsxs(Button
-                                    // variant="outline"
-                                    , { 
-                                        // variant="outline"
-                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return handleRegister; }, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: "Create a Passkey" })] }), jsxRuntimeExports.jsxs(Button
-                                    // variant="outline"
-                                    , { 
-                                        // variant="outline"
-                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return handleFIDOLogin; }, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: "Sign In with Passkey" })] })] }), 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" })] })] }) }) }, "landing"), jsxRuntimeExports.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, onLogin: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: handleMSALLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntimeExports.jsx("span", { className: "ml-2", children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), jsxRuntimeExports.jsxs(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return setShowADModal(true); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: isLoading ? "Logging in..." : "Sign in with ActiveDirectory" })] }), usePassKey && (jsxRuntimeExports.jsxs(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: handleRegister, disabled: isLoading, children: [jsxRuntimeExports.jsx(KeyIcon, { className: "w-12 h-12 text-[#506f4a]" }), jsxRuntimeExports.jsx("span", { children: "Create a Passkey" })] }))] }), 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" })] })] }) }) }, "landing"), jsxRuntimeExports.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, onLogin: function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
                     var username = _b.username, password = _b.password, MFACode = _b.MFACode;
                     return __generator(this, function (_c) {
                         // Implement your AD login logic here
@@ -2149,20 +2134,28 @@ var ErrorFallback = function (_a) {
     return (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center min-h-screen bg-gray-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white p-6 rounded-lg shadow-lg border border-red-200 max-w-md", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [jsxRuntimeExports.jsx("svg", { className: "w-6 h-6 text-red-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Configuration Error" })] }), jsxRuntimeExports.jsx("p", { className: "text-red-600", children: message })] }) }));
 };
 
-var MFAEndpointUrlSchema = z$1.url("MFAEndpoint must be a valid URL");
+var MFAEndpointsSchema = z$1.object({
+    ValidateMFA: z$1.url("MFAEndpoint must be a valid URL"),
+    RegisterNewChallenge: z$1.url("MFA RegisterNewChallenge must be a valid URL"),
+    RegisterVerify: z$1.url("MFA RegisterVerify must be a valid URL"),
+    RetrieveAuthChallenge: z$1.url("MFA RetrieveAuthChallenge must be a valid URL"),
+    AuthChallengeVerify: z$1.url("MFA AuthChallengeVerify must be a valid URL"),
+});
 var MFAGate = function (_a) {
     var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? jsxRuntimeExports.jsx(LoadingSpinner, {}) : _b, 
     // loginComponent: LoginComponent = DefaultLoginPage,
-    MFAEndpoint = _a.MFAEndpoint;
+    _c = _a.usePassKey, 
+    // loginComponent: LoginComponent = DefaultLoginPage,
+    usePassKey = _c === void 0 ? false : _c, MFAEndpoints = _a.MFAEndpoints;
     var context = useCAMSContext();
-    var validatedMFAEndpoint = useMemo(function () {
-        var parsed = MFAEndpointUrlSchema.safeParse(MFAEndpoint);
+    var validatedMFAEndpoints = useMemo(function () {
+        var parsed = MFAEndpointsSchema.safeParse(MFAEndpoints);
         if (!parsed.success) {
             Logger.error("Invalid MFAEndpoint", parsed.error);
             return null;
         }
         return parsed.data;
-    }, [MFAEndpoint]);
+    }, [MFAEndpoints]);
     var handleComplete = useCallback(function (success) {
         if (!success)
             Logger.error("MFA authentication failed");
@@ -2177,18 +2170,18 @@ var MFAGate = function (_a) {
             }
         });
     }); }, [context.logout]);
-    Logger.debug("MFA Endpoint >>>", { MFAEndpoint: MFAEndpoint });
-    if (!validatedMFAEndpoint)
+    Logger.debug("MFA Endpoint >>>", { MFAEndpoints: MFAEndpoints });
+    if (!validatedMFAEndpoints)
         return jsxRuntimeExports.jsx(ErrorFallback, { message: "Invalid MFA configuration." });
     if (context.authMode !== "MSAL")
         return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
     if (context.isLoading)
         return fallback;
     if (context.requiresMFA) {
-        return (jsxRuntimeExports.jsx(MFAOptions, { MFAEndpoint: validatedMFAEndpoint, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
+        return (jsxRuntimeExports.jsx(MFAOptions, { MFAEndpoints: validatedMFAEndpoints, usePassKey: usePassKey, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
     }
     if (!context.isAuthenticated) {
-        return jsxRuntimeExports.jsx(DefaultLoginPage, {});
+        return jsxRuntimeExports.jsx(DefaultLoginPage, { usePassKey: usePassKey, MFAEndpoints: MFAEndpoints });
     }
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
 };