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

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './hooks/useCAMSAuth';
 export * from './hooks/useCAMSMSALAuth';
+export { useWebAuthn } from './hooks/useFIDOAuth';
 export * from './components/ProtectedRoute';
 export { CAMSMSALProvider, useCAMSMSALContext } from './components/CAMSMSALProvider';
 export * from './components/ClientOnly';
@@ -8,5 +9,6 @@ export { default as MFAOptions } from './components/MFAOptions';
 export { default as MFAGate } from './components/MFAGate';
 export { default as LoginButton } from './components/DefaultLoginPage';
 export { default as ClientOnly } from './components/ClientOnly';
+export { register, authenticate } from './components/CoreFIDO';
 export { useCAMSContext } from './context/CAMSContext';
 export * from '@nibssplc/cams-sdk';

package/dist/index.esm.js

@@ -514,6 +514,128 @@ function useCAMSMSALAuth(options) {
     };
 }
 
+/**
+ * Converts a base64url-encoded string to an ArrayBuffer.
+ * @param base64url The base64url-encoded string
+ */
+function base64urlToArrayBuffer(base64url) {
+    var base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+    var padLength = (4 - (base64.length % 4)) % 4;
+    var padded = base64 + "=".repeat(padLength);
+    var binaryStr = atob(padded);
+    var buffer = new ArrayBuffer(binaryStr.length);
+    var bytes = new Uint8Array(buffer);
+    for (var i = 0; i < binaryStr.length; i++) {
+        bytes[i] = binaryStr.charCodeAt(i);
+    }
+    return buffer;
+}
+/**
+ * Converts an ArrayBuffer to a base64url-encoded string.
+ * @param buffer The ArrayBuffer to convert
+ */
+function arrayBufferToBase64url(buffer) {
+    var bytes = new Uint8Array(buffer);
+    var binaryStr = String.fromCharCode.apply(null, bytes);
+    return btoa(binaryStr)
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_")
+        .replace(/=/g, "");
+}
+
+/**
+ * Initiates the WebAuthn registration process.
+ * It takes server-provided options, converts them for the browser API,
+ * calls navigator.credentials.create(), and then converts the result
+ * back into a JSON-friendly format.
+ *
+ * @param options - The PublicKeyCredentialCreationOptions from the server.
+ * @returns A promise that resolves to a JSON-serializable representation of the PublicKeyCredential.
+ */
+function register(options) {
+    return __awaiter(this, void 0, void 0, function () {
+        var createOptions, credential, publicKeyCredential, attestationResponse;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    createOptions = __assign(__assign({}, options), { challenge: base64urlToArrayBuffer(options.challenge), user: __assign(__assign({}, options.user), { id: base64urlToArrayBuffer(options.user.id) }) });
+                    return [4 /*yield*/, navigator.credentials.create({
+                            publicKey: createOptions,
+                        })];
+                case 1:
+                    credential = _a.sent();
+                    if (!credential) {
+                        throw new Error("Failed to create credential.");
+                    }
+                    publicKeyCredential = credential;
+                    attestationResponse = publicKeyCredential.response;
+                    return [2 /*return*/, {
+                            id: publicKeyCredential.id,
+                            rawId: arrayBufferToBase64url(publicKeyCredential.rawId),
+                            type: credential.type,
+                            response: {
+                                clientDataJSON: arrayBufferToBase64url(attestationResponse.clientDataJSON),
+                                attestationObject: arrayBufferToBase64url(attestationResponse.attestationObject),
+                            },
+                        }];
+            }
+        });
+    });
+}
+/**
+ * Initiates the WebAuthn authentication process.
+ * It takes server-provided options, converts them for the browser API,
+ * calls navigator.credentials.get(), and then converts the result
+ * back into a JSON-friendly format.
+ *
+ * @param options - The PublicKeyCredentialRequestOptions from the server.
+ * @returns A promise that resolves to a JSON-serializable representation of the PublicKeyCredential.
+ */
+function authenticate(options) {
+    return __awaiter(this, void 0, void 0, function () {
+        var getOptions, credential, publicKeyCredential, assertionResponse;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    getOptions = __assign(__assign({}, options), { challenge: base64urlToArrayBuffer(options.challenge), allowCredentials: (_a = options.allowCredentials) === null || _a === void 0 ? void 0 : _a.map(function (cred) { return (__assign(__assign({}, cred), { id: base64urlToArrayBuffer(cred.id) })); }) });
+                    return [4 /*yield*/, navigator.credentials.get({ publicKey: getOptions })];
+                case 1:
+                    credential = _b.sent();
+                    if (!credential) {
+                        throw new Error("Failed to get credential.");
+                    }
+                    publicKeyCredential = credential;
+                    assertionResponse = publicKeyCredential.response;
+                    return [2 /*return*/, {
+                            id: publicKeyCredential.id,
+                            rawId: arrayBufferToBase64url(publicKeyCredential.rawId),
+                            type: credential.type,
+                            response: {
+                                clientDataJSON: arrayBufferToBase64url(assertionResponse.clientDataJSON),
+                                authenticatorData: arrayBufferToBase64url(assertionResponse.authenticatorData),
+                                signature: arrayBufferToBase64url(assertionResponse.signature),
+                                userHandle: assertionResponse.userHandle
+                                    ? arrayBufferToBase64url(assertionResponse.userHandle)
+                                    : null,
+                            },
+                        }];
+            }
+        });
+    });
+}
+
+/**
+ * A React hook that provides access to the WebAuthn `register` and `authenticate` functions.
+ * @returns An object containing the `register` and `authenticate` functions.
+ */
+var useWebAuthn = function () {
+    return {
+        register: register,
+        authenticate: authenticate,
+    };
+};
+
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production = {};
@@ -1894,7 +2016,8 @@ var DefaultLoginPage = function () {
     var context = useCAMSContext();
     var login = context.login, isLoading = context.isLoading, authMode = context.authMode;
     var _a = useState(false), showADModal = _a[0], setShowADModal = _a[1];
-    var handleLogin = function () {
+    var _b = useWebAuthn(), register = _b.register, authenticate = _b.authenticate;
+    var handleMSALLogin = function () {
         if (authMode === "MSAL") {
             login();
         }
@@ -1913,15 +2036,105 @@ var DefaultLoginPage = function () {
         },
         exit: { opacity: 0, scale: 0.8, y: -50, transition: { duration: 0.3 } },
     };
-    return (jsxRuntimeExports.jsxs("main", { className: "min-h-screen bg-gray-50", children: [jsxRuntimeExports.jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntimeExports.jsxs(motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 bg-gray-50 rounded-2xl shadow-2xl --dark:bg-gray-800", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntimeExports.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntimeExports.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 265, height: 265 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold --text-gray-900 --dark:text-white", children: "NIBSS CAMS" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntimeExports.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-4", children: [jsxRuntimeExports.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Kindly use the below identity providers to authenticate"] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs(Button
+    var handleRegister = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, options, attestationResponse, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, , 6]);
+                    // 1. Fetch challenge from your server
+                    console.log("Requesting registration challenge from server...");
+                    return [4 /*yield*/, fetch("/api/webauthn/register-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 creation UI
+                    console.log("Calling SDK register function...");
+                    return [4 /*yield*/, register(options)];
+                case 3:
+                    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",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify(attestationResponse),
+                        })];
+                case 4:
+                    _a.sent();
+                    alert("✅ Registration successful! Passkey created.");
+                    return [3 /*break*/, 6];
+                case 5:
+                    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*/];
+            }
+        });
+    }); };
+    return (jsxRuntimeExports.jsxs("main", { className: "min-h-screen bg-gray-50", children: [jsxRuntimeExports.jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntimeExports.jsxs(motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 bg-gray-50 rounded-2xl shadow-2xl --dark:bg-gray-800", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntimeExports.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntimeExports.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 265, height: 265 }) }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold --text-gray-900 --dark:text-white", children: "NIBSS CAMS" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntimeExports.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-6", children: [jsxRuntimeExports.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Kindly use the below identity providers to authenticate"] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [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: 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: handleLogin, 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
+                                        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 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(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: 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) {
                     var username = _b.username, password = _b.password, MFACode = _b.MFACode;
                     return __generator(this, function (_c) {
                         // Implement your AD login logic here
@@ -1980,5 +2193,5 @@ var MFAGate = function (_a) {
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
 };
 
-export { CAMSMSALProvider, CAMSProvider, ClientOnly, DefaultLoginPage as LoginButton, MFAGate, MFAOptions, ProtectedRoute, UnifiedCAMSProvider, useCAMSAuth, useCAMSContext, useCAMSMSALAuth, useCAMSMSALContext };
+export { CAMSMSALProvider, CAMSProvider, ClientOnly, DefaultLoginPage as LoginButton, MFAGate, MFAOptions, ProtectedRoute, UnifiedCAMSProvider, authenticate, register, useCAMSAuth, useCAMSContext, useCAMSMSALAuth, useCAMSMSALContext, useWebAuthn };
 //# sourceMappingURL=index.esm.js.map