@authhero/widget 0.8.6 → 0.10.0

package/hydrate/index.js

@@ -5015,6 +5015,17 @@ class AuthheroNode {
             value: target.checked ? "true" : "false",
         });
     };
+    /**
+     * Sanitize a string for use in CSS class names and part tokens.
+     * Replaces spaces and special characters with hyphens, converts to lowercase.
+     */
+    sanitizeForCssToken(value) {
+        return value
+            .toLowerCase()
+            .replace(/[^a-z0-9-]/g, "-") // Replace non-alphanumeric chars with hyphen
+            .replace(/-+/g, "-") // Collapse multiple hyphens
+            .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
+    }
     handleButtonClick = (e, type, value) => {
         if (type !== "submit") {
             e.preventDefault();
@@ -5174,8 +5185,48 @@ class AuthheroNode {
     }
     renderSocialField(component) {
         const providers = component.config?.providers ?? [];
+        const providerDetails = component.config?.provider_details;
+        // Create a map of provider details for quick lookup
+        const detailsMap = new Map(providerDetails?.map((d) => [d.name, d]) ?? []);
+        // Known provider identifiers for icon matching
+        const knownProviders = [
+            "google-oauth2",
+            "google",
+            "facebook",
+            "apple",
+            "github",
+            "microsoft",
+            "windowslive",
+            "linkedin",
+            "vipps",
+        ];
+        // Find matching known provider from name or strategy
+        const findKnownProvider = (name, strategy) => {
+            const nameLower = name.toLowerCase();
+            const strategyLower = strategy?.toLowerCase();
+            // First check exact match on strategy
+            if (strategyLower && knownProviders.includes(strategyLower)) {
+                return strategyLower;
+            }
+            // Then check exact match on name
+            if (knownProviders.includes(nameLower)) {
+                return nameLower;
+            }
+            // Check if name contains a known provider (e.g., "Vipps Login" contains "vipps")
+            for (const known of knownProviders) {
+                if (nameLower.includes(known)) {
+                    return known;
+                }
+            }
+            return null;
+        };
         // Map provider IDs to display names
         const getProviderDisplayName = (provider) => {
+            // First check provider_details
+            const details = detailsMap.get(provider);
+            if (details?.display_name) {
+                return details.display_name;
+            }
             const displayNames = {
                 "google-oauth2": "Google",
                 facebook: "Facebook",
@@ -5201,6 +5252,7 @@ class AuthheroNode {
                 "salesforce-sandbox": "Salesforce",
                 yahoo: "Yahoo",
                 auth0: "Auth0",
+                vipps: "Vipps",
             };
             return (displayNames[provider.toLowerCase()] ||
                 provider
@@ -5208,9 +5260,16 @@ class AuthheroNode {
                     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                     .join(" "));
         };
-        // Get provider icon SVG
+        // Get provider icon - either from provider_details or built-in SVG
         const getProviderIcon = (provider) => {
-            const p = provider.toLowerCase();
+            // First check if we have a custom icon URL from provider_details
+            const details = detailsMap.get(provider);
+            if (details?.icon_url) {
+                return (hAsync("img", { class: "social-icon", src: details.icon_url, alt: details.display_name || provider }));
+            }
+            // Try to find a known provider from name or strategy
+            const knownProvider = findKnownProvider(provider, details?.strategy);
+            const p = knownProvider || provider.toLowerCase();
             if (p === "google-oauth2" || p === "google") {
                 return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), hAsync("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), hAsync("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), hAsync("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })));
             }
@@ -5229,10 +5288,16 @@ class AuthheroNode {
             if (p === "linkedin") {
                 return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", fill: "#0A66C2" })));
             }
-            // Default: no icon
-            return null;
+            if (p === "vipps") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { fill: "#FF5B24", d: "M3.5,8h41c1.9,0,3.5,1.6,3.5,3.5v25c0,1.9-1.6,3.5-3.5,3.5h-41C1.6,40,0,38.4,0,36.5v-25C0,9.6,1.6,8,3.5,8z" }), hAsync("path", { fill: "#FFFFFF", d: "M27.9,20.3c1.4,0,2.6-1,2.6-2.5c0-1.5-1.2-2.5-2.6-2.5c-1.4,0-2.6,1-2.6,2.5C25.3,19.2,26.5,20.3,27.9,20.3z" }), hAsync("path", { fill: "#FFFFFF", d: "M31.2,24.4c-1.7,2.2-3.5,3.8-6.7,3.8c-3.2,0-5.8-2-7.7-4.8c-0.8-1.2-2-1.4-2.9-0.8c-0.8,0.6-1,1.8-0.3,2.9c2.7,4.1,6.5,6.6,10.9,6.6c4,0,7.2-2,9.6-5.2c0.9-1.2,0.9-2.5,0-3.1C33.3,22.9,32.1,23.2,31.2,24.4z" })));
+            }
+            // Default: generic globe icon for unknown providers
+            return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "#666", "stroke-width": "2" }), hAsync("path", { d: "M2 12h20M12 2c-2.5 2.5-4 5.5-4 10s1.5 7.5 4 10c2.5-2.5 4-5.5 4-10s-1.5-7.5-4-10z", fill: "none", stroke: "#666", "stroke-width": "2" })));
         };
-        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (hAsync("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, getProviderIcon(provider), hAsync("span", null, "Continue with ", getProviderDisplayName(provider)))))));
+        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
+            const safeProvider = this.sanitizeForCssToken(provider);
+            return (hAsync("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, getProviderIcon(provider), hAsync("span", { part: "button-social-text" }, `Continue with ${getProviderDisplayName(provider)}`)));
+        })));
     }
     // ===========================================================================
     // Main Render
@@ -5610,6 +5675,139 @@ function applyCssVars(element, vars) {
     });
 }
 
+/**
+ * Sanitize HTML to only allow safe formatting tags
+ *
+ * Allowed tags:
+ * - <br>, <br/> - Line breaks
+ * - <em>, <i> - Italic
+ * - <strong>, <b> - Bold
+ * - <u> - Underline
+ * - <span> - Generic inline container (for styling)
+ * - <a> - Links (href attribute only, with target="_blank" and rel="noopener")
+ *
+ * All other tags and attributes are stripped.
+ */
+// Allowed tags and their allowed attributes
+const ALLOWED_TAGS = {
+    br: [],
+    em: [],
+    i: [],
+    strong: [],
+    b: [],
+    u: [],
+    span: ["class"],
+    a: ["href", "class"],
+};
+/**
+ * Sanitize HTML string to only allow safe formatting tags
+ *
+ * @param html - The HTML string to sanitize
+ * @returns Sanitized HTML string safe for innerHTML
+ */
+function sanitizeHtml(html) {
+    if (!html)
+        return "";
+    // If no < character present, return as-is (optimization)
+    // Must check for any < to prevent bypassing sanitization with malformed tags
+    // like "<img src=x onerror=..." which forgiving HTML parsers may still execute
+    if (!html.includes("<")) {
+        return html;
+    }
+    // Use a simple regex-based approach that's safe for our limited use case
+    // This avoids needing DOMParser which may not be available in all environments
+    let result = html;
+    // First, escape all HTML
+    result = result
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    // Then selectively re-enable allowed tags
+    for (const [tag, allowedAttrs] of Object.entries(ALLOWED_TAGS)) {
+        // Self-closing tags (like <br> and <br/>)
+        if (tag === "br") {
+            result = result.replace(/&lt;br\s*\/?&gt;/gi, "<br>");
+            continue;
+        }
+        // Opening tags with optional attributes
+        const openingPattern = new RegExp(`&lt;${tag}((?:\\s+[a-z-]+(?:=&quot;[^&]*&quot;|=&#39;[^&]*&#39;)?)*)\\s*&gt;`, "gi");
+        result = result.replace(openingPattern, (_match, attrsStr) => {
+            // Parse and filter attributes
+            const filteredAttrs = [];
+            if (attrsStr) {
+                // Unescape the attributes string for parsing
+                const unescapedAttrs = attrsStr
+                    .replace(/&quot;/g, '"')
+                    .replace(/&#39;/g, "'")
+                    .replace(/&amp;/g, "&")
+                    .replace(/&lt;/g, "<")
+                    .replace(/&gt;/g, ">");
+                // Extract attributes
+                const attrPattern = /([a-z-]+)=["']([^"']*)["']/gi;
+                let attrMatch;
+                while ((attrMatch = attrPattern.exec(unescapedAttrs)) !== null) {
+                    const [, attrName, attrValue] = attrMatch;
+                    if (attrName && allowedAttrs.includes(attrName.toLowerCase())) {
+                        // For href, validate it's a safe URL
+                        if (attrName.toLowerCase() === "href") {
+                            if (isSafeUrl(attrValue || "")) {
+                                filteredAttrs.push(`${attrName}="${escapeAttr(attrValue || "")}"`);
+                            }
+                        }
+                        else {
+                            filteredAttrs.push(`${attrName}="${escapeAttr(attrValue || "")}"`);
+                        }
+                    }
+                }
+            }
+            // For <a> tags, always add security attributes
+            if (tag === "a") {
+                filteredAttrs.push('target="_blank"');
+                filteredAttrs.push('rel="noopener noreferrer"');
+            }
+            const attrsOutput = filteredAttrs.length
+                ? " " + filteredAttrs.join(" ")
+                : "";
+            return `<${tag}${attrsOutput}>`;
+        });
+        // Closing tags
+        const closingPattern = new RegExp(`&lt;/${tag}&gt;`, "gi");
+        result = result.replace(closingPattern, `</${tag}>`);
+    }
+    return result;
+}
+/**
+ * Check if a URL is safe (http, https, or relative)
+ */
+function isSafeUrl(url) {
+    if (!url)
+        return false;
+    // Allow relative URLs
+    if (url.startsWith("/") || url.startsWith("#") || url.startsWith("?")) {
+        return true;
+    }
+    // Allow http and https
+    try {
+        const parsed = new URL(url, "https://example.com");
+        return parsed.protocol === "http:" || parsed.protocol === "https:";
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Escape attribute value
+ */
+function escapeAttr(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+
 const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 14px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{max-width:var(--ah-widget-max-width, 400px);width:100%;margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 8px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-description, 14px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;max-width:none;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
 
 class AuthheroWidget {
@@ -6208,7 +6406,7 @@ class AuthheroWidget {
         const hasDivider = components.some((c) => this.isDividerComponent(c));
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 &&
+        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (hAsync("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._screen.description) }))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 &&
             fieldComponents.length > 0 &&
             hasDivider && (hAsync("div", { class: "divider", part: "divider" }, hAsync("span", { class: "divider-text" }, "Or"))), hAsync("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (hAsync("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 })))))), this._screen.links && this._screen.links.length > 0 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, " ", hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                 id: link.id,

package/hydrate/index.mjs

@@ -5013,6 +5013,17 @@ class AuthheroNode {
             value: target.checked ? "true" : "false",
         });
     };
+    /**
+     * Sanitize a string for use in CSS class names and part tokens.
+     * Replaces spaces and special characters with hyphens, converts to lowercase.
+     */
+    sanitizeForCssToken(value) {
+        return value
+            .toLowerCase()
+            .replace(/[^a-z0-9-]/g, "-") // Replace non-alphanumeric chars with hyphen
+            .replace(/-+/g, "-") // Collapse multiple hyphens
+            .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
+    }
     handleButtonClick = (e, type, value) => {
         if (type !== "submit") {
             e.preventDefault();
@@ -5172,8 +5183,48 @@ class AuthheroNode {
     }
     renderSocialField(component) {
         const providers = component.config?.providers ?? [];
+        const providerDetails = component.config?.provider_details;
+        // Create a map of provider details for quick lookup
+        const detailsMap = new Map(providerDetails?.map((d) => [d.name, d]) ?? []);
+        // Known provider identifiers for icon matching
+        const knownProviders = [
+            "google-oauth2",
+            "google",
+            "facebook",
+            "apple",
+            "github",
+            "microsoft",
+            "windowslive",
+            "linkedin",
+            "vipps",
+        ];
+        // Find matching known provider from name or strategy
+        const findKnownProvider = (name, strategy) => {
+            const nameLower = name.toLowerCase();
+            const strategyLower = strategy?.toLowerCase();
+            // First check exact match on strategy
+            if (strategyLower && knownProviders.includes(strategyLower)) {
+                return strategyLower;
+            }
+            // Then check exact match on name
+            if (knownProviders.includes(nameLower)) {
+                return nameLower;
+            }
+            // Check if name contains a known provider (e.g., "Vipps Login" contains "vipps")
+            for (const known of knownProviders) {
+                if (nameLower.includes(known)) {
+                    return known;
+                }
+            }
+            return null;
+        };
         // Map provider IDs to display names
         const getProviderDisplayName = (provider) => {
+            // First check provider_details
+            const details = detailsMap.get(provider);
+            if (details?.display_name) {
+                return details.display_name;
+            }
             const displayNames = {
                 "google-oauth2": "Google",
                 facebook: "Facebook",
@@ -5199,6 +5250,7 @@ class AuthheroNode {
                 "salesforce-sandbox": "Salesforce",
                 yahoo: "Yahoo",
                 auth0: "Auth0",
+                vipps: "Vipps",
             };
             return (displayNames[provider.toLowerCase()] ||
                 provider
@@ -5206,9 +5258,16 @@ class AuthheroNode {
                     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                     .join(" "));
         };
-        // Get provider icon SVG
+        // Get provider icon - either from provider_details or built-in SVG
         const getProviderIcon = (provider) => {
-            const p = provider.toLowerCase();
+            // First check if we have a custom icon URL from provider_details
+            const details = detailsMap.get(provider);
+            if (details?.icon_url) {
+                return (hAsync("img", { class: "social-icon", src: details.icon_url, alt: details.display_name || provider }));
+            }
+            // Try to find a known provider from name or strategy
+            const knownProvider = findKnownProvider(provider, details?.strategy);
+            const p = knownProvider || provider.toLowerCase();
             if (p === "google-oauth2" || p === "google") {
                 return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), hAsync("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), hAsync("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), hAsync("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })));
             }
@@ -5227,10 +5286,16 @@ class AuthheroNode {
             if (p === "linkedin") {
                 return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", fill: "#0A66C2" })));
             }
-            // Default: no icon
-            return null;
+            if (p === "vipps") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { fill: "#FF5B24", d: "M3.5,8h41c1.9,0,3.5,1.6,3.5,3.5v25c0,1.9-1.6,3.5-3.5,3.5h-41C1.6,40,0,38.4,0,36.5v-25C0,9.6,1.6,8,3.5,8z" }), hAsync("path", { fill: "#FFFFFF", d: "M27.9,20.3c1.4,0,2.6-1,2.6-2.5c0-1.5-1.2-2.5-2.6-2.5c-1.4,0-2.6,1-2.6,2.5C25.3,19.2,26.5,20.3,27.9,20.3z" }), hAsync("path", { fill: "#FFFFFF", d: "M31.2,24.4c-1.7,2.2-3.5,3.8-6.7,3.8c-3.2,0-5.8-2-7.7-4.8c-0.8-1.2-2-1.4-2.9-0.8c-0.8,0.6-1,1.8-0.3,2.9c2.7,4.1,6.5,6.6,10.9,6.6c4,0,7.2-2,9.6-5.2c0.9-1.2,0.9-2.5,0-3.1C33.3,22.9,32.1,23.2,31.2,24.4z" })));
+            }
+            // Default: generic globe icon for unknown providers
+            return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "#666", "stroke-width": "2" }), hAsync("path", { d: "M2 12h20M12 2c-2.5 2.5-4 5.5-4 10s1.5 7.5 4 10c2.5-2.5 4-5.5 4-10s-1.5-7.5-4-10z", fill: "none", stroke: "#666", "stroke-width": "2" })));
         };
-        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (hAsync("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, getProviderIcon(provider), hAsync("span", null, "Continue with ", getProviderDisplayName(provider)))))));
+        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
+            const safeProvider = this.sanitizeForCssToken(provider);
+            return (hAsync("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, getProviderIcon(provider), hAsync("span", { part: "button-social-text" }, `Continue with ${getProviderDisplayName(provider)}`)));
+        })));
     }
     // ===========================================================================
     // Main Render
@@ -5608,6 +5673,139 @@ function applyCssVars(element, vars) {
     });
 }
 
+/**
+ * Sanitize HTML to only allow safe formatting tags
+ *
+ * Allowed tags:
+ * - <br>, <br/> - Line breaks
+ * - <em>, <i> - Italic
+ * - <strong>, <b> - Bold
+ * - <u> - Underline
+ * - <span> - Generic inline container (for styling)
+ * - <a> - Links (href attribute only, with target="_blank" and rel="noopener")
+ *
+ * All other tags and attributes are stripped.
+ */
+// Allowed tags and their allowed attributes
+const ALLOWED_TAGS = {
+    br: [],
+    em: [],
+    i: [],
+    strong: [],
+    b: [],
+    u: [],
+    span: ["class"],
+    a: ["href", "class"],
+};
+/**
+ * Sanitize HTML string to only allow safe formatting tags
+ *
+ * @param html - The HTML string to sanitize
+ * @returns Sanitized HTML string safe for innerHTML
+ */
+function sanitizeHtml(html) {
+    if (!html)
+        return "";
+    // If no < character present, return as-is (optimization)
+    // Must check for any < to prevent bypassing sanitization with malformed tags
+    // like "<img src=x onerror=..." which forgiving HTML parsers may still execute
+    if (!html.includes("<")) {
+        return html;
+    }
+    // Use a simple regex-based approach that's safe for our limited use case
+    // This avoids needing DOMParser which may not be available in all environments
+    let result = html;
+    // First, escape all HTML
+    result = result
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+    // Then selectively re-enable allowed tags
+    for (const [tag, allowedAttrs] of Object.entries(ALLOWED_TAGS)) {
+        // Self-closing tags (like <br> and <br/>)
+        if (tag === "br") {
+            result = result.replace(/&lt;br\s*\/?&gt;/gi, "<br>");
+            continue;
+        }
+        // Opening tags with optional attributes
+        const openingPattern = new RegExp(`&lt;${tag}((?:\\s+[a-z-]+(?:=&quot;[^&]*&quot;|=&#39;[^&]*&#39;)?)*)\\s*&gt;`, "gi");
+        result = result.replace(openingPattern, (_match, attrsStr) => {
+            // Parse and filter attributes
+            const filteredAttrs = [];
+            if (attrsStr) {
+                // Unescape the attributes string for parsing
+                const unescapedAttrs = attrsStr
+                    .replace(/&quot;/g, '"')
+                    .replace(/&#39;/g, "'")
+                    .replace(/&amp;/g, "&")
+                    .replace(/&lt;/g, "<")
+                    .replace(/&gt;/g, ">");
+                // Extract attributes
+                const attrPattern = /([a-z-]+)=["']([^"']*)["']/gi;
+                let attrMatch;
+                while ((attrMatch = attrPattern.exec(unescapedAttrs)) !== null) {
+                    const [, attrName, attrValue] = attrMatch;
+                    if (attrName && allowedAttrs.includes(attrName.toLowerCase())) {
+                        // For href, validate it's a safe URL
+                        if (attrName.toLowerCase() === "href") {
+                            if (isSafeUrl(attrValue || "")) {
+                                filteredAttrs.push(`${attrName}="${escapeAttr(attrValue || "")}"`);
+                            }
+                        }
+                        else {
+                            filteredAttrs.push(`${attrName}="${escapeAttr(attrValue || "")}"`);
+                        }
+                    }
+                }
+            }
+            // For <a> tags, always add security attributes
+            if (tag === "a") {
+                filteredAttrs.push('target="_blank"');
+                filteredAttrs.push('rel="noopener noreferrer"');
+            }
+            const attrsOutput = filteredAttrs.length
+                ? " " + filteredAttrs.join(" ")
+                : "";
+            return `<${tag}${attrsOutput}>`;
+        });
+        // Closing tags
+        const closingPattern = new RegExp(`&lt;/${tag}&gt;`, "gi");
+        result = result.replace(closingPattern, `</${tag}>`);
+    }
+    return result;
+}
+/**
+ * Check if a URL is safe (http, https, or relative)
+ */
+function isSafeUrl(url) {
+    if (!url)
+        return false;
+    // Allow relative URLs
+    if (url.startsWith("/") || url.startsWith("#") || url.startsWith("?")) {
+        return true;
+    }
+    // Allow http and https
+    try {
+        const parsed = new URL(url, "https://example.com");
+        return parsed.protocol === "http:" || parsed.protocol === "https:";
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Escape attribute value
+ */
+function escapeAttr(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+}
+
 const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 14px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{max-width:var(--ah-widget-max-width, 400px);width:100%;margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 8px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-description, 14px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;max-width:none;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
 
 class AuthheroWidget {
@@ -6206,7 +6404,7 @@ class AuthheroWidget {
         const hasDivider = components.some((c) => this.isDividerComponent(c));
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 &&
+        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (hAsync("p", { class: "description", part: "description", innerHTML: sanitizeHtml(this._screen.description) }))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 &&
             fieldComponents.length > 0 &&
             hasDivider && (hAsync("div", { class: "divider", part: "divider" }, hAsync("span", { class: "divider-text" }, "Or"))), hAsync("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (hAsync("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 })))))), this._screen.links && this._screen.links.length > 0 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, " ", hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                 id: link.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/widget",
-  "version": "0.8.6",
+  "version": "0.10.0",
   "description": "Server-Driven UI widget for AuthHero authentication flows",
   "repository": {
     "type": "git",
@@ -20,7 +20,11 @@
   "collection": "./dist/collection/collection-manifest.json",
   "exports": {
     ".": "./dist/index.js",
-    "./hydrate": "./hydrate/index.js",
+    "./hydrate": {
+      "types": "./hydrate/index.d.ts",
+      "import": "./hydrate/index.mjs",
+      "require": "./hydrate/index.js"
+    },
     "./loader": "./loader/index.js",
     "./dist/esm/loader.js": "./dist/esm/loader.js",
     "./server": {
@@ -33,7 +37,7 @@
     }
   },
   "dependencies": {
-    "@authhero/adapter-interfaces": "0.129.0"
+    "@authhero/adapter-interfaces": "0.130.0"
   },
   "devDependencies": {
     "@hono/node-server": "^1.14.1",