@authhero/widget 0.7.2 → 0.8.0

package/hydrate/index.js

@@ -5616,8 +5616,43 @@ 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.
@@ -5642,10 +5677,21 @@ 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.
      */
@@ -5692,12 +5738,12 @@ 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 {
@@ -5708,12 +5754,12 @@ 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 {
@@ -5722,12 +5768,12 @@ 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 {
@@ -5735,6 +5781,19 @@ 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
      */
@@ -5742,36 +5801,164 @@ 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;
@@ -5799,17 +5986,17 @@ 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) {
@@ -5817,17 +6004,31 @@ 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
@@ -5841,9 +6042,9 @@ 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 {
@@ -5852,14 +6053,79 @@ 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({
@@ -5867,9 +6133,9 @@ 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();
         }
     };
@@ -5877,13 +6143,13 @@ 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.
@@ -5901,13 +6167,13 @@ 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) {
@@ -5920,12 +6186,22 @@ 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 (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 && 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, href: link.href, text: link.linkText || link.text }) }, link.linkText))) : (hAsync("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 (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 &&
+            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,
+                href: link.href,
+                text: link.linkText || link.text,
+            }) }, link.linkText))) : (hAsync("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 watchers() { return {
         "screen": [{
@@ -5936,6 +6212,9 @@ class AuthheroWidget {
             }],
         "theme": [{
                 "watchTheme": 0
+            }],
+        "authParams": [{
+                "watchAuthParams": 0
             }]
     }; }
     static get style() { return authheroWidgetCss(); }
@@ -5945,11 +6224,19 @@ class AuthheroWidget {
         "$members$": {
             "screen": [1],
             "apiUrl": [1, "api-url"],
+            "baseUrl": [1, "base-url"],
+            "state": [1025],
+            "screenId": [1025, "screen-id"],
+            "authParams": [1, "auth-params"],
+            "statePersistence": [1, "state-persistence"],
+            "storageKey": [1, "storage-key"],
             "branding": [1],
             "theme": [1],
             "loading": [1028],
             "autoSubmit": [4, "auto-submit"],
+            "autoNavigate": [4, "auto-navigate"],
             "_screen": [32],
+            "_authParams": [32],
             "_branding": [32],
             "_theme": [32],
             "formData": [32]