@authhero/widget 0.28.1 → 0.29.0

package/dist/esm/authhero-widget.entry.js

@@ -1019,7 +1019,18 @@ const AuthheroWidget = class {
         e.preventDefault();
         if (!this._screen || this.loading)
             return;
-        const submitData = overrideData || this.formData;
+        let submitData = { ...this.formData, ...(overrideData || {}) };
+        // Merge hidden input values from DOM (may have been set programmatically
+        // by inline scripts, e.g. passkey management buttons)
+        const form = this.el.shadowRoot?.querySelector("form");
+        if (form) {
+            const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
+            hiddenInputs.forEach((input) => {
+                if (input.name && input.value) {
+                    submitData[input.name] = input.value;
+                }
+            });
+        }
         // Always emit the submit event
         this.formSubmit.emit({
             screen: this._screen,
@@ -1095,6 +1106,10 @@ const AuthheroWidget = class {
                         this.state = result.state;
                         this.persistState();
                     }
+                    // Perform WebAuthn ceremony if present (structured data, not script)
+                    if (result.ceremony) {
+                        this.performWebAuthnCeremony(result.ceremony);
+                    }
                     // Focus first input on new screen
                     this.focusFirstInput();
                 }
@@ -1128,6 +1143,192 @@ const AuthheroWidget = class {
             this.loading = false;
         }
     };
+    /**
+     * Override form.submit() so that scripts (e.g. WebAuthn ceremony) that call
+     * form.submit() go through the widget's JSON fetch pipeline instead of a
+     * native form-urlencoded POST.
+     */
+    overrideFormSubmit() {
+        const shadowRoot = this.el.shadowRoot;
+        if (!shadowRoot)
+            return;
+        const form = shadowRoot.querySelector("form");
+        if (!form)
+            return;
+        form.submit = () => {
+            const formData = new FormData(form);
+            const data = {};
+            formData.forEach((value, key) => {
+                if (typeof value === "string") {
+                    data[key] = value;
+                }
+            });
+            const syntheticEvent = { preventDefault: () => { } };
+            this.handleSubmit(syntheticEvent, data);
+        };
+    }
+    /**
+     * Validate and execute a structured WebAuthn ceremony returned by the server.
+     * Instead of injecting arbitrary script content, this parses the ceremony JSON,
+     * validates the expected fields, and calls the WebAuthn API natively.
+     */
+    performWebAuthnCeremony(ceremony) {
+        if (!this.isValidWebAuthnCeremony(ceremony)) {
+            console.error("Invalid WebAuthn ceremony payload", ceremony);
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.overrideFormSubmit();
+            this.executeWebAuthnRegistration(ceremony);
+        });
+    }
+    /**
+     * Schema validation for WebAuthn ceremony payloads.
+     * Checks required fields and types before invoking browser APIs.
+     */
+    isValidWebAuthnCeremony(data) {
+        if (typeof data !== "object" || data === null)
+            return false;
+        const obj = data;
+        if (obj.type !== "webauthn-registration")
+            return false;
+        if (typeof obj.successAction !== "string")
+            return false;
+        const opts = obj.options;
+        if (typeof opts !== "object" || opts === null)
+            return false;
+        const o = opts;
+        if (typeof o.challenge !== "string")
+            return false;
+        const rp = o.rp;
+        if (typeof rp !== "object" || rp === null)
+            return false;
+        if (typeof rp.id !== "string" ||
+            typeof rp.name !== "string")
+            return false;
+        const user = o.user;
+        if (typeof user !== "object" || user === null)
+            return false;
+        const u = user;
+        if (typeof u.id !== "string" ||
+            typeof u.name !== "string" ||
+            typeof u.displayName !== "string")
+            return false;
+        if (!Array.isArray(o.pubKeyCredParams))
+            return false;
+        return true;
+    }
+    /**
+     * Perform the WebAuthn navigator.credentials.create() ceremony and submit
+     * the credential result via the form.
+     */
+    async executeWebAuthnRegistration(ceremony) {
+        const opts = ceremony.options;
+        const b64uToBuf = (s) => {
+            s = s.replace(/-/g, "+").replace(/_/g, "/");
+            while (s.length % 4)
+                s += "=";
+            const b = atob(s);
+            const a = new Uint8Array(b.length);
+            for (let i = 0; i < b.length; i++)
+                a[i] = b.charCodeAt(i);
+            return a.buffer;
+        };
+        const bufToB64u = (b) => {
+            const a = new Uint8Array(b);
+            let s = "";
+            for (let i = 0; i < a.length; i++)
+                s += String.fromCharCode(a[i]);
+            return btoa(s)
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        };
+        const findForm = () => {
+            const shadowRoot = this.el?.shadowRoot;
+            if (shadowRoot) {
+                const f = shadowRoot.querySelector("form");
+                if (f)
+                    return f;
+            }
+            return document.querySelector("form");
+        };
+        try {
+            const publicKey = {
+                challenge: b64uToBuf(opts.challenge),
+                rp: { id: opts.rp.id, name: opts.rp.name },
+                user: {
+                    id: b64uToBuf(opts.user.id),
+                    name: opts.user.name,
+                    displayName: opts.user.displayName,
+                },
+                pubKeyCredParams: opts.pubKeyCredParams.map((p) => ({
+                    alg: p.alg,
+                    type: p.type,
+                })),
+                timeout: opts.timeout,
+                attestation: (opts.attestation || "none"),
+                authenticatorSelection: opts.authenticatorSelection
+                    ? {
+                        residentKey: (opts.authenticatorSelection.residentKey ||
+                            "preferred"),
+                        userVerification: (opts.authenticatorSelection
+                            .userVerification ||
+                            "preferred"),
+                    }
+                    : undefined,
+            };
+            if (opts.excludeCredentials?.length) {
+                publicKey.excludeCredentials = opts.excludeCredentials.map((c) => ({
+                    id: b64uToBuf(c.id),
+                    type: c.type,
+                    transports: (c.transports || []),
+                }));
+            }
+            const cred = (await navigator.credentials.create({
+                publicKey,
+            }));
+            const response = cred.response;
+            const resp = {
+                id: cred.id,
+                rawId: bufToB64u(cred.rawId),
+                type: cred.type,
+                response: {
+                    attestationObject: bufToB64u(response.attestationObject),
+                    clientDataJSON: bufToB64u(response.clientDataJSON),
+                },
+                clientExtensionResults: cred.getClientExtensionResults(),
+                authenticatorAttachment: cred.authenticatorAttachment || undefined,
+            };
+            if (typeof response.getTransports === "function") {
+                resp.response.transports =
+                    response.getTransports();
+            }
+            const form = findForm();
+            if (form) {
+                const cf = form.querySelector('[name="credential-field"]') ||
+                    form.querySelector("#credential-field");
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (cf)
+                    cf.value = JSON.stringify(resp);
+                if (af)
+                    af.value = ceremony.successAction;
+                form.submit();
+            }
+        }
+        catch (e) {
+            console.error("WebAuthn registration error:", e);
+            const form = findForm();
+            if (form) {
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (af)
+                    af.value = "error";
+                form.submit();
+            }
+        }
+    }
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
         if (detail.type === "submit") {
@@ -1330,9 +1531,11 @@ const AuthheroWidget = class {
         // Use the local screen variable for all rendering
         const screenErrors = screen.messages?.filter((m) => m.type === "error") || [];
         const screenSuccesses = screen.messages?.filter((m) => m.type === "success") || [];
-        const components = [...(screen.components ?? [])]
+        const allComponents = [...(screen.components ?? [])];
+        const components = allComponents
             .filter((c) => c.visible !== false)
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        const hiddenComponents = allComponents.filter((c) => c.visible === false);
         // Separate social, divider, and field components for layout ordering
         const socialComponents = components.filter((c) => this.isSocialComponent(c));
         const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
@@ -1367,7 +1570,7 @@ const AuthheroWidget = class {
         };
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, part: "form" }, h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
+        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
             fieldComponents.length > 0 &&
             hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                 id: link.id,