@nibssplc/cams-sdk-react 0.0.1-beta.91 → 0.0.1-beta.93

package/dist/components/DefaultLoginPage.d.ts

@@ -1,2 +1,8 @@
-declare const DefaultLoginPage: () => import("react/jsx-runtime").JSX.Element;
+import { MFAEndpoints } from "./MFAGate";
+interface LoginPageProps {
+    usePassKey?: boolean;
+    MFAEndpoints: MFAEndpoints;
+    PassKeysRegisterProps?: Record<string, unknown>;
+}
+declare const DefaultLoginPage: ({ usePassKey, MFAEndpoints, PassKeysRegisterProps, }: LoginPageProps) => import("react/jsx-runtime").JSX.Element;
 export default DefaultLoginPage;

package/dist/components/MFAGate.d.ts

@@ -1,12 +1,17 @@
 import z from "zod";
 declare const MFAEndpointsSchema: z.ZodObject<{
     ValidateMFA: z.ZodURL;
+    RegisterNewChallenge: z.ZodURL;
+    RegisterVerify: z.ZodURL;
+    RetrieveAuthChallenge: z.ZodURL;
+    AuthChallengeVerify: z.ZodURL;
 }, z.core.$strip>;
 export type MFAEndpoints = z.infer<typeof MFAEndpointsSchema>;
 interface MFAGateProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
+    usePassKey?: boolean;
     MFAEndpoints?: MFAEndpoints;
 }
-declare const MFAGate: ({ children, fallback, MFAEndpoints, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+declare const MFAGate: ({ children, fallback, usePassKey, MFAEndpoints, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
 export default MFAGate;

package/dist/components/MFAOptions.d.ts

@@ -1,7 +1,9 @@
+import { MFAEndpoints } from "./MFAGate";
 interface MFAOptionsProps {
     onComplete?: (success: boolean) => void;
     onAuthFailed?: () => void;
-    MFAEndpoint?: string;
+    MFAEndpoints: MFAEndpoints;
+    usePassKey?: boolean;
 }
-declare const MFAOptions: ({ onComplete, onAuthFailed, MFAEndpoint, }?: MFAOptionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const MFAOptions: ({ onComplete, onAuthFailed, MFAEndpoints, usePassKey, }: MFAOptionsProps) => import("react/jsx-runtime").JSX.Element;
 export default MFAOptions;

package/dist/index.cjs.js

@@ -1849,26 +1849,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 = React.useState(""), value = _c[0], setValue = _c[1];
-    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 onComplete = _a.onComplete, onAuthFailed = _a.onAuthFailed, MFAEndpoints = _a.MFAEndpoints, usePassKey = _a.usePassKey;
+    var _b = React.useState(""), value = _b[0], setValue = _b[1];
+    var _c = React.useState(false), otpVisible = _c[0], setOtpVisible = _c[1];
+    var _d = React.useState(false), showSuccessAnimation = _d[0], setShowSuccessAnimation = _d[1];
+    var _e = React.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.post(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(MFAEndpoints.AuthChallengeVerify, assertionResponse)];
+                case 3:
+                    _a.sent();
+                    sonner.toast.success("🔑 Sign-in successful!");
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    console.error("Authentication failed:", error_1);
+                    sonner.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) {
@@ -1895,7 +1930,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);
@@ -1935,7 +1970,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(lucideReact.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(lucideReact.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(lucideReact.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 () {
@@ -2033,11 +2074,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(lucideReact.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, PassKeysRegisterProps = _a.PassKeysRegisterProps;
     var context = useCAMSContext();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
-    var _a = React.useState(false), showADModal = _a[0], setShowADModal = _a[1];
-    var _b = useWebAuthn(), register = _b.register, authenticate = _b.authenticate;
+    var _b = React.useState(false), showADModal = _b[0], setShowADModal = _b[1];
+    var register = useWebAuthn().register;
     var handleMSALLogin = function () {
         if (authMode === "MSAL") {
             login();
@@ -2057,85 +2099,40 @@ 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 handleRegister = function (data) { return __awaiter(void 0, void 0, void 0, function () {
+        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.post(MFAEndpoints.RegisterNewChallenge, __assign({}, data))];
                 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:
+                    sonner.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*/];
+                    sonner.toast.error("❌ Could not create passkey.");
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
         });
     }); };
@@ -2143,19 +2140,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(lucideReact.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: handleRegister, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.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: handleFIDOLogin, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.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(lucideReact.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(lucideReact.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: function () { return handleRegister(PassKeysRegisterProps); }, disabled: isLoading, children: [jsxRuntimeExports.jsx(lucideReact.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(lucideReact.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
@@ -2172,11 +2157,17 @@ var ErrorFallback = function (_a) {
 
 var MFAEndpointsSchema = z.object({
     ValidateMFA: z.url("MFAEndpoint must be a valid URL"),
+    RegisterNewChallenge: z.url("MFA RegisterNewChallenge must be a valid URL"),
+    RegisterVerify: z.url("MFA RegisterVerify must be a valid URL"),
+    RetrieveAuthChallenge: z.url("MFA RetrieveAuthChallenge must be a valid URL"),
+    AuthChallengeVerify: z.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,
-    MFAEndpoints = _a.MFAEndpoints;
+    _c = _a.usePassKey, 
+    // loginComponent: LoginComponent = DefaultLoginPage,
+    usePassKey = _c === void 0 ? false : _c, MFAEndpoints = _a.MFAEndpoints;
     var context = useCAMSContext();
     var validatedMFAEndpoints = React.useMemo(function () {
         var parsed = MFAEndpointsSchema.safeParse(MFAEndpoints);
@@ -2208,10 +2199,10 @@ var MFAGate = function (_a) {
     if (context.isLoading)
         return fallback;
     if (context.requiresMFA) {
-        return (jsxRuntimeExports.jsx(MFAOptions, { MFAEndpoint: validatedMFAEndpoints.ValidateMFA, 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 });
 };