@authhero/widget 0.7.2 → 0.8.0

package/dist/collection/components/authhero-widget/authhero-widget.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { mergeThemeVars, applyCssVars } from "../../utils/branding";
 export class AuthheroWidget {
     el;
@@ -11,8 +11,43 @@ export class AuthheroWidget {
     /**
      * API endpoint to fetch the initial screen from.
      * If provided, the widget will fetch the screen on load.
+     * Can include {screenId} placeholder which will be replaced with the current screen.
+     * Example: "/u2/screen/{screenId}" or "https://auth.example.com/u2/screen/{screenId}"
      */
     apiUrl;
+    /**
+     * Base URL for all API calls. Used when widget is embedded on a different domain.
+     * If not provided, relative URLs are used.
+     * Example: "https://auth.example.com"
+     */
+    baseUrl;
+    /**
+     * Login session state token. Required for social login and maintaining session.
+     */
+    state;
+    /**
+     * Current screen ID. Used with apiUrl to fetch screen configuration.
+     * When statePersistence is 'url', this is synced with the URL.
+     */
+    screenId;
+    /**
+     * OAuth/OIDC parameters for social login redirects.
+     * Can be passed as a JSON string or object.
+     */
+    authParams;
+    /**
+     * Where to persist state and screen ID.
+     * - 'url': Updates URL path/query (default for standalone pages)
+     * - 'session': Uses sessionStorage (for embedded widgets)
+     * - 'memory': No persistence, state only in memory
+     * @default 'memory'
+     */
+    statePersistence = "memory";
+    /**
+     * Storage key prefix for session/local storage persistence.
+     * @default 'authhero_widget'
+     */
+    storageKey = "authhero_widget";
     /**
      * Branding configuration from AuthHero API.
      * Controls logo, primary color, and page background.
@@ -37,10 +72,21 @@ export class AuthheroWidget {
      * @default false
      */
     autoSubmit = false;
+    /**
+     * Whether the widget should handle navigation automatically.
+     * When true, social login buttons redirect, links navigate, etc.
+     * When false, only events are emitted.
+     * @default false (same as autoSubmit when not specified)
+     */
+    autoNavigate;
     /**
      * Internal parsed screen state.
      */
     _screen;
+    /**
+     * Internal parsed auth params state.
+     */
+    _authParams;
     /**
      * Internal parsed branding state.
      */
@@ -87,12 +133,12 @@ export class AuthheroWidget {
      */
     screenChange;
     watchScreen(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._screen = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse screen JSON');
+                console.error("Failed to parse screen JSON");
             }
         }
         else {
@@ -103,12 +149,12 @@ export class AuthheroWidget {
         }
     }
     watchBranding(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._branding = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse branding JSON');
+                console.error("Failed to parse branding JSON");
             }
         }
         else {
@@ -117,12 +163,12 @@ export class AuthheroWidget {
         this.applyThemeStyles();
     }
     watchTheme(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._theme = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse theme JSON');
+                console.error("Failed to parse theme JSON");
             }
         }
         else {
@@ -130,6 +176,19 @@ export class AuthheroWidget {
         }
         this.applyThemeStyles();
     }
+    watchAuthParams(newValue) {
+        if (typeof newValue === "string") {
+            try {
+                this._authParams = JSON.parse(newValue);
+            }
+            catch {
+                console.error("Failed to parse authParams JSON");
+            }
+        }
+        else {
+            this._authParams = newValue;
+        }
+    }
     /**
      * Apply branding and theme as CSS custom properties
      */
@@ -137,36 +196,164 @@ export class AuthheroWidget {
         const vars = mergeThemeVars(this._branding, this._theme);
         applyCssVars(this.el, vars);
     }
+    /**
+     * Get the effective autoNavigate value (defaults to autoSubmit if not set)
+     */
+    get shouldAutoNavigate() {
+        return this.autoNavigate ?? this.autoSubmit;
+    }
+    /**
+     * Build the full URL for API calls
+     */
+    buildUrl(path) {
+        if (this.baseUrl) {
+            return new URL(path, this.baseUrl).toString();
+        }
+        return path;
+    }
+    /**
+     * Load state from URL or storage based on statePersistence setting
+     */
+    loadPersistedState() {
+        if (this.statePersistence === "url") {
+            const url = new URL(window.location.href);
+            const stateParam = url.searchParams.get("state");
+            if (stateParam && !this.state) {
+                this.state = stateParam;
+            }
+        }
+        else if (this.statePersistence === "session") {
+            try {
+                const stored = sessionStorage.getItem(`${this.storageKey}_state`);
+                if (stored && !this.state) {
+                    this.state = stored;
+                }
+                const storedScreenId = sessionStorage.getItem(`${this.storageKey}_screenId`);
+                if (storedScreenId && !this.screenId) {
+                    this.screenId = storedScreenId;
+                }
+            }
+            catch {
+                // sessionStorage not available
+            }
+        }
+    }
+    /**
+     * Save state to URL or storage based on statePersistence setting
+     */
+    persistState() {
+        if (this.statePersistence === "url") {
+            const url = new URL(window.location.href);
+            if (this.state) {
+                url.searchParams.set("state", this.state);
+            }
+            if (this.screenId) {
+                url.searchParams.set("screen", this.screenId);
+            }
+            window.history.replaceState({}, "", url.toString());
+        }
+        else if (this.statePersistence === "session") {
+            try {
+                if (this.state) {
+                    sessionStorage.setItem(`${this.storageKey}_state`, this.state);
+                }
+                if (this.screenId) {
+                    sessionStorage.setItem(`${this.storageKey}_screenId`, this.screenId);
+                }
+            }
+            catch {
+                // sessionStorage not available
+            }
+        }
+    }
     async componentWillLoad() {
         // Parse initial props
         this.watchScreen(this.screen);
         this.watchBranding(this.branding);
         this.watchTheme(this.theme);
+        this.watchAuthParams(this.authParams);
+        // Load persisted state if available
+        this.loadPersistedState();
         // Fetch screen from API if URL provided and no screen prop
         if (this.apiUrl && !this._screen) {
-            await this.fetchScreen();
+            await this.fetchScreen(this.screenId);
         }
     }
-    async fetchScreen() {
+    /**
+     * Fetch screen configuration from the API
+     * @param screenIdOverride Optional screen ID to fetch (overrides this.screenId)
+     * @param nodeId Optional node ID for flow navigation
+     */
+    async fetchScreen(screenIdOverride, nodeId) {
         if (!this.apiUrl)
             return;
+        const currentScreenId = screenIdOverride || this.screenId;
+        // Build the API URL, replacing {screenId} placeholder if present
+        let url = this.apiUrl;
+        if (currentScreenId && url.includes("{screenId}")) {
+            url = url.replace("{screenId}", encodeURIComponent(currentScreenId));
+        }
+        // Add state and nodeId as query params
+        const urlObj = new URL(url, this.baseUrl || window.location.origin);
+        if (this.state) {
+            urlObj.searchParams.set("state", this.state);
+        }
+        if (nodeId) {
+            urlObj.searchParams.set("nodeId", nodeId);
+        }
         this.loading = true;
         try {
-            const response = await fetch(this.apiUrl, {
-                credentials: 'include',
+            const response = await fetch(this.buildUrl(urlObj.pathname + urlObj.search), {
+                credentials: "include",
                 headers: {
-                    Accept: 'application/json',
+                    Accept: "application/json",
                 },
             });
             if (response.ok) {
-                this._screen = await response.json();
+                const data = await response.json();
+                // Handle different response formats
+                if (data.screen) {
+                    this._screen = data.screen;
+                    if (data.branding) {
+                        this._branding = data.branding;
+                        this.applyThemeStyles();
+                    }
+                    // Update state if returned
+                    if (data.state) {
+                        this.state = data.state;
+                    }
+                    // Update screenId if returned in response
+                    if (data.screenId) {
+                        this.screenId = data.screenId;
+                    }
+                }
+                else {
+                    // Response is the screen itself
+                    this._screen = data;
+                }
                 if (this._screen) {
+                    // If we fetched with a screenId override, update our stored screenId
+                    if (currentScreenId && currentScreenId !== this.screenId) {
+                        this.screenId = currentScreenId;
+                    }
                     this.screenChange.emit(this._screen);
+                    this.persistState();
                 }
             }
+            else {
+                const error = await response
+                    .json()
+                    .catch(() => ({ message: "Failed to load screen" }));
+                this.flowError.emit({
+                    message: error.message || "Failed to load screen",
+                });
+            }
         }
         catch (error) {
-            console.error('Failed to fetch screen:', error);
+            console.error("Failed to fetch screen:", error);
+            this.flowError.emit({
+                message: error instanceof Error ? error.message : "Failed to fetch screen",
+            });
         }
         finally {
             this.loading = false;
@@ -194,17 +381,17 @@ export class AuthheroWidget {
         // Submit to the server
         this.loading = true;
         try {
-            const response = await fetch(this._screen.action, {
+            const response = await fetch(this.buildUrl(this._screen.action), {
                 method: this._screen.method,
-                credentials: 'include',
+                credentials: "include",
                 headers: {
-                    'Content-Type': 'application/json',
-                    Accept: 'application/json',
+                    "Content-Type": "application/json",
+                    Accept: "application/json",
                 },
                 body: JSON.stringify({ data: this.formData }),
             });
-            const contentType = response.headers.get('content-type');
-            if (contentType?.includes('application/json')) {
+            const contentType = response.headers.get("content-type");
+            if (contentType?.includes("application/json")) {
                 const result = await response.json();
                 // Handle different response types
                 if (result.redirect) {
@@ -212,17 +399,31 @@ export class AuthheroWidget {
                     this.flowComplete.emit({ redirectUrl: result.redirect });
                     // Also emit navigate for backwards compatibility
                     this.navigate.emit({ url: result.redirect });
+                    // Auto-navigate if enabled
+                    if (this.shouldAutoNavigate) {
+                        window.location.href = result.redirect;
+                    }
                 }
                 else if (result.screen) {
                     // Next screen
                     this._screen = result.screen;
                     this.formData = {};
                     this.screenChange.emit(result.screen);
+                    // Update screenId if returned in response
+                    if (result.screenId) {
+                        this.screenId = result.screenId;
+                    }
+                    this.persistState();
                     // Apply branding if included
                     if (result.branding) {
                         this._branding = result.branding;
                         this.applyThemeStyles();
                     }
+                    // Update state if returned
+                    if (result.state) {
+                        this.state = result.state;
+                        this.persistState();
+                    }
                 }
                 else if (result.complete) {
                     // Flow complete without redirect
@@ -236,9 +437,9 @@ export class AuthheroWidget {
             }
         }
         catch (err) {
-            console.error('Form submission failed:', err);
+            console.error("Form submission failed:", err);
             this.flowError.emit({
-                message: err instanceof Error ? err.message : 'Form submission failed',
+                message: err instanceof Error ? err.message : "Form submission failed",
             });
         }
         finally {
@@ -247,14 +448,79 @@ export class AuthheroWidget {
     };
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
-        if (detail.type === 'submit') {
+        if (detail.type === "submit") {
             // Create a synthetic submit event and call handleSubmit
             const syntheticEvent = { preventDefault: () => { } };
             this.handleSubmit(syntheticEvent);
             return;
         }
+        // Always emit the event
         this.buttonClick.emit(detail);
+        // Handle social login if autoNavigate is enabled
+        if (detail.type === "SOCIAL" && detail.value && this.shouldAutoNavigate) {
+            this.handleSocialLogin(detail.value);
+            return;
+        }
+        // Handle resend button
+        if (detail.type === "RESEND_BUTTON" && this.shouldAutoNavigate) {
+            this.handleResend();
+            return;
+        }
     };
+    /**
+     * Handle social login redirect
+     */
+    handleSocialLogin(connection) {
+        const params = this._authParams || {};
+        const queryParams = {
+            connection,
+        };
+        // Add state
+        if (this.state) {
+            queryParams.state = this.state;
+        }
+        else if (params.state) {
+            queryParams.state = params.state;
+        }
+        // Add client_id
+        if (params.client_id) {
+            queryParams.client_id = params.client_id;
+        }
+        // Add optional params
+        if (params.redirect_uri)
+            queryParams.redirect_uri = params.redirect_uri;
+        if (params.scope)
+            queryParams.scope = params.scope;
+        if (params.audience)
+            queryParams.audience = params.audience;
+        if (params.nonce)
+            queryParams.nonce = params.nonce;
+        if (params.response_type)
+            queryParams.response_type = params.response_type;
+        const socialUrl = this.buildUrl("/authorize?" + new URLSearchParams(queryParams).toString());
+        // Emit navigate event and redirect
+        this.navigate.emit({ url: socialUrl });
+        window.location.href = socialUrl;
+    }
+    /**
+     * Handle resend button click (e.g., resend OTP code)
+     */
+    async handleResend() {
+        if (!this._screen?.action)
+            return;
+        try {
+            const url = this._screen.action +
+                (this._screen.action.includes("?") ? "&" : "?") +
+                "action=resend";
+            await fetch(this.buildUrl(url), {
+                method: "POST",
+                credentials: "include",
+            });
+        }
+        catch (error) {
+            console.error("Resend failed:", error);
+        }
+    }
     handleLinkClick = (e, link) => {
         // Emit the event so the consuming app can handle it
         this.linkClick.emit({
@@ -262,9 +528,9 @@ export class AuthheroWidget {
             href: link.href,
             text: link.text,
         });
-        // If autoSubmit is enabled, let the browser handle the navigation
+        // If autoNavigate is enabled, let the browser handle the navigation
         // Otherwise, prevent default and let the app decide
-        if (!this.autoSubmit) {
+        if (!this.shouldAutoNavigate) {
             e.preventDefault();
         }
     };
@@ -272,13 +538,13 @@ export class AuthheroWidget {
      * Get error messages from the screen-level messages array.
      */
     getScreenErrors() {
-        return this._screen?.messages?.filter((m) => m.type === 'error') || [];
+        return this._screen?.messages?.filter((m) => m.type === "error") || [];
     }
     /**
      * Get success messages from the screen-level messages array.
      */
     getScreenSuccesses() {
-        return this._screen?.messages?.filter((m) => m.type === 'success') || [];
+        return this._screen?.messages?.filter((m) => m.type === "success") || [];
     }
     /**
      * Sort components by order.
@@ -296,13 +562,13 @@ export class AuthheroWidget {
     isSocialComponent(component) {
         // Check the type property directly - FormComponent has a 'type' field
         // SocialField has type 'SOCIAL'
-        return component.type === 'SOCIAL';
+        return component.type === "SOCIAL";
     }
     /**
      * Check if a component is a divider.
      */
     isDividerComponent(component) {
-        return component.type === 'DIVIDER';
+        return component.type === "DIVIDER";
     }
     render() {
         if (this.loading && !this._screen) {
@@ -315,12 +581,22 @@ export class AuthheroWidget {
         const screenSuccesses = this.getScreenSuccesses();
         const components = this.getOrderedComponents();
         // 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));
-        const hasDivider = components.some(c => this.isDividerComponent(c));
+        const socialComponents = components.filter((c) => this.isSocialComponent(c));
+        const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
+        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 (h("div", { class: "widget-container", part: "container" }, 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" }))), this._screen.title && (h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (h("p", { class: "description", part: "description" }, this._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 }))))), socialComponents.length > 0 && fieldComponents.length > 0 && hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, "Or"))), 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 })))))), this._screen.links && this._screen.links.length > 0 && (h("div", { class: "links", part: "links" }, this._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, href: link.href, text: link.linkText || link.text }) }, link.linkText))) : (h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.text }) }, link.text))))))))));
+        return (h("div", { class: "widget-container", part: "container" }, 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" }))), this._screen.title && (h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (h("p", { class: "description", part: "description" }, this._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 }))))), socialComponents.length > 0 &&
+            fieldComponents.length > 0 &&
+            hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, "Or"))), 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 })))))), this._screen.links && this._screen.links.length > 0 && (h("div", { class: "links", part: "links" }, this._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,
+                href: link.href,
+                text: link.linkText || link.text,
+            }) }, link.linkText))) : (h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
+                id: link.id,
+                href: link.href,
+                text: link.text,
+            }) }, link.text))))))))));
     }
     static get is() { return "authhero-widget"; }
     static get encapsulation() { return "shadow"; }
@@ -374,13 +650,147 @@ export class AuthheroWidget {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "API endpoint to fetch the initial screen from.\nIf provided, the widget will fetch the screen on load."
+                    "text": "API endpoint to fetch the initial screen from.\nIf provided, the widget will fetch the screen on load.\nCan include {screenId} placeholder which will be replaced with the current screen.\nExample: \"/u2/screen/{screenId}\" or \"https://auth.example.com/u2/screen/{screenId}\""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "api-url"
             },
+            "baseUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Base URL for all API calls. Used when widget is embedded on a different domain.\nIf not provided, relative URLs are used.\nExample: \"https://auth.example.com\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-url"
+            },
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Login session state token. Required for social login and maintaining session."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state"
+            },
+            "screenId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current screen ID. Used with apiUrl to fetch screen configuration.\nWhen statePersistence is 'url', this is synced with the URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "screen-id"
+            },
+            "authParams": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AuthParams | string",
+                    "resolved": "AuthParams | string | undefined",
+                    "references": {
+                        "AuthParams": {
+                            "location": "local",
+                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
+                            "id": "src/components/authhero-widget/authhero-widget.tsx::AuthParams"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "OAuth/OIDC parameters for social login redirects.\nCan be passed as a JSON string or object."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auth-params"
+            },
+            "statePersistence": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatePersistence",
+                    "resolved": "\"memory\" | \"session\" | \"url\"",
+                    "references": {
+                        "StatePersistence": {
+                            "location": "local",
+                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
+                            "id": "src/components/authhero-widget/authhero-widget.tsx::StatePersistence"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'memory'"
+                        }],
+                    "text": "Where to persist state and screen ID.\n- 'url': Updates URL path/query (default for standalone pages)\n- 'session': Uses sessionStorage (for embedded widgets)\n- 'memory': No persistence, state only in memory"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-persistence",
+                "defaultValue": "\"memory\""
+            },
+            "storageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'authhero_widget'"
+                        }],
+                    "text": "Storage key prefix for session/local storage persistence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "storage-key",
+                "defaultValue": "\"authhero_widget\""
+            },
             "branding": {
                 "type": "string",
                 "mutable": false,
@@ -475,12 +885,35 @@ export class AuthheroWidget {
                 "reflect": false,
                 "attribute": "auto-submit",
                 "defaultValue": "false"
+            },
+            "autoNavigate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false (same as autoSubmit when not specified)"
+                        }],
+                    "text": "Whether the widget should handle navigation automatically.\nWhen true, social login buttons redirect, links navigate, etc.\nWhen false, only events are emitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-navigate"
             }
         };
     }
     static get states() {
         return {
             "_screen": {},
+            "_authParams": {},
             "_branding": {},
             "_theme": {},
             "formData": {}
@@ -648,6 +1081,9 @@ export class AuthheroWidget {
             }, {
                 "propName": "theme",
                 "methodName": "watchTheme"
+            }, {
+                "propName": "authParams",
+                "methodName": "watchAuthParams"
             }];
     }
 }