@authhero/widget 0.2.2 → 0.4.0

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-Doiemx6o.js';
+export { s as setNonce } from './index-Doiemx6o.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4]}]]],["authhero-widget",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"_screen":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/types/components/authhero-node/authhero-node.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import type { FormComponent, RuntimeComponent } from "../../types/components";
+export declare class AuthheroNode {
+    /**
+     * The component configuration to render.
+     * Follows Auth0 Forms component schema.
+     */
+    component: FormComponent | RuntimeComponent;
+    /**
+     * Current value for field components.
+     */
+    value?: string;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Emitted when a field value changes.
+     */
+    fieldChange: EventEmitter<{
+        id: string;
+        value: string;
+    }>;
+    /**
+     * Emitted when a button is clicked.
+     */
+    buttonClick: EventEmitter<{
+        id: string;
+        type: string;
+        value?: string;
+    }>;
+    private handleInput;
+    private handleCheckbox;
+    private handleButtonClick;
+    /**
+     * Get error messages from the component.
+     */
+    private getErrors;
+    /**
+     * Render a label for a field.
+     */
+    private renderLabel;
+    /**
+     * Render error messages.
+     */
+    private renderErrors;
+    /**
+     * Render hint text.
+     */
+    private renderHint;
+    private renderDivider;
+    private renderHtml;
+    private renderImage;
+    private renderRichText;
+    private renderNextButton;
+    private renderPreviousButton;
+    private renderJumpButton;
+    private renderResendButton;
+    private renderTextField;
+    private renderEmailField;
+    private renderPasswordField;
+    private renderNumberField;
+    private renderTelField;
+    private renderUrlField;
+    private renderDateField;
+    private renderBooleanField;
+    private renderLegalField;
+    private renderDropdownField;
+    private renderChoiceField;
+    private renderSocialField;
+    render(): any;
+}

package/dist/types/components/authhero-widget/authhero-widget.d.ts

@@ -0,0 +1,172 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { UiScreen } from '../../types/components';
+import type { WidgetBranding, WidgetTheme } from '../../utils/branding';
+/**
+ * Submit event detail - emitted when a form is submitted
+ */
+export interface SubmitEventDetail {
+    /** The current screen configuration */
+    screen: UiScreen;
+    /** Form field values keyed by component ID */
+    data: Record<string, string>;
+}
+/**
+ * Button click event detail - emitted when a non-submit button is clicked
+ */
+export interface ButtonClickEventDetail {
+    /** Component ID */
+    id: string;
+    /** Component type (e.g., 'SOCIAL', 'BACK_BUTTON') */
+    type: string;
+    /** Optional value (e.g., connection name for social buttons) */
+    value?: string;
+}
+/**
+ * Link click event detail - emitted when a link is clicked
+ */
+export interface LinkClickEventDetail {
+    /** Link ID */
+    id?: string;
+    /** Link href */
+    href: string;
+    /** Link text */
+    text: string;
+}
+/**
+ * Navigate event detail - emitted when the widget wants to navigate
+ */
+export interface NavigateEventDetail {
+    /** URL to navigate to */
+    url: string;
+    /** Whether to replace the current history entry */
+    replace?: boolean;
+}
+/**
+ * Complete event detail - emitted when auth flow completes
+ */
+export interface CompleteEventDetail {
+    /** Redirect URL (contains code for authorization code flow) */
+    redirectUrl?: string;
+}
+/**
+ * Error event detail - emitted on errors
+ */
+export interface ErrorEventDetail {
+    /** Error message */
+    message: string;
+    /** Error code */
+    code?: string;
+}
+export declare class AuthheroWidget {
+    el: HTMLElement;
+    /**
+     * The UI screen configuration from the server.
+     * Can be passed as a JSON string or object.
+     * Follows Auth0 Forms component schema.
+     */
+    screen?: UiScreen | string;
+    /**
+     * API endpoint to fetch the initial screen from.
+     * If provided, the widget will fetch the screen on load.
+     */
+    apiUrl?: string;
+    /**
+     * Branding configuration from AuthHero API.
+     * Controls logo, primary color, and page background.
+     * Can be passed as a JSON string or object.
+     */
+    branding?: WidgetBranding | string;
+    /**
+     * Theme configuration from AuthHero API.
+     * Controls colors, borders, fonts, and layout.
+     * Can be passed as a JSON string or object.
+     */
+    theme?: WidgetTheme | string;
+    /**
+     * Whether the widget is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Whether the widget should automatically submit forms to the action URL.
+     * When false (default), the widget only emits events and the consuming
+     * application handles all HTTP requests.
+     * When true, the widget handles form submission and screen updates.
+     * @default false
+     */
+    autoSubmit: boolean;
+    /**
+     * Internal parsed screen state.
+     */
+    _screen?: UiScreen;
+    /**
+     * Internal parsed branding state.
+     */
+    _branding?: WidgetBranding;
+    /**
+     * Internal parsed theme state.
+     */
+    _theme?: WidgetTheme;
+    /**
+     * Form data collected from inputs.
+     */
+    formData: Record<string, string>;
+    /**
+     * Emitted when the form is submitted.
+     * The consuming application should handle the submission unless autoSubmit is true.
+     */
+    formSubmit: EventEmitter<SubmitEventDetail>;
+    /**
+     * Emitted when a non-submit button is clicked (social login, back, etc.).
+     * The consuming application decides what to do based on id/type/value.
+     */
+    buttonClick: EventEmitter<ButtonClickEventDetail>;
+    /**
+     * Emitted when a link is clicked.
+     * The consuming application decides how to handle navigation.
+     */
+    linkClick: EventEmitter<LinkClickEventDetail>;
+    /**
+     * Emitted when the widget wants to navigate (e.g., after successful auth).
+     * The consuming application decides how to handle navigation.
+     */
+    navigate: EventEmitter<NavigateEventDetail>;
+    /**
+     * Emitted when auth flow completes with a redirect URL.
+     * The consuming application can redirect or extract the code.
+     */
+    flowComplete: EventEmitter<CompleteEventDetail>;
+    /**
+     * Emitted when an error occurs.
+     */
+    flowError: EventEmitter<ErrorEventDetail>;
+    /**
+     * Emitted when the screen changes.
+     */
+    screenChange: EventEmitter<UiScreen>;
+    watchScreen(newValue: UiScreen | string | undefined): void;
+    watchBranding(newValue: WidgetBranding | string | undefined): void;
+    watchTheme(newValue: WidgetTheme | string | undefined): void;
+    /**
+     * Apply branding and theme as CSS custom properties
+     */
+    private applyThemeStyles;
+    componentWillLoad(): Promise<void>;
+    private fetchScreen;
+    private handleInputChange;
+    private handleSubmit;
+    private handleButtonClick;
+    private handleLinkClick;
+    /**
+     * Get error messages from the screen-level messages array.
+     */
+    private getScreenErrors;
+    /**
+     * Get success messages from the screen-level messages array.
+     */
+    private getScreenSuccesses;
+    /**
+     * Sort components by order.
+     */
+    private getOrderedComponents;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,215 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { FormComponent, RuntimeComponent, UiScreen } from "./types/components";
+import { WidgetBranding, WidgetTheme } from "./utils/branding";
+import { ButtonClickEventDetail, CompleteEventDetail, ErrorEventDetail, LinkClickEventDetail, NavigateEventDetail, SubmitEventDetail } from "./components/authhero-widget/authhero-widget";
+export { FormComponent, RuntimeComponent, UiScreen } from "./types/components";
+export { WidgetBranding, WidgetTheme } from "./utils/branding";
+export { ButtonClickEventDetail, CompleteEventDetail, ErrorEventDetail, LinkClickEventDetail, NavigateEventDetail, SubmitEventDetail } from "./components/authhero-widget/authhero-widget";
+export namespace Components {
+    interface AuthheroNode {
+        /**
+          * The component configuration to render. Follows Auth0 Forms component schema.
+         */
+        "component": FormComponent | RuntimeComponent;
+        /**
+          * Whether the component is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Current value for field components.
+         */
+        "value"?: string;
+    }
+    interface AuthheroWidget {
+        /**
+          * API endpoint to fetch the initial screen from. If provided, the widget will fetch the screen on load.
+         */
+        "apiUrl"?: string;
+        /**
+          * Whether the widget should automatically submit forms to the action URL. When false (default), the widget only emits events and the consuming application handles all HTTP requests. When true, the widget handles form submission and screen updates.
+          * @default false
+         */
+        "autoSubmit": boolean;
+        /**
+          * Branding configuration from AuthHero API. Controls logo, primary color, and page background. Can be passed as a JSON string or object.
+         */
+        "branding"?: WidgetBranding | string;
+        /**
+          * Whether the widget is in a loading state.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * The UI screen configuration from the server. Can be passed as a JSON string or object. Follows Auth0 Forms component schema.
+         */
+        "screen"?: UiScreen | string;
+        /**
+          * Theme configuration from AuthHero API. Controls colors, borders, fonts, and layout. Can be passed as a JSON string or object.
+         */
+        "theme"?: WidgetTheme | string;
+    }
+}
+export interface AuthheroNodeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAuthheroNodeElement;
+}
+export interface AuthheroWidgetCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAuthheroWidgetElement;
+}
+declare global {
+    interface HTMLAuthheroNodeElementEventMap {
+        "fieldChange": { id: string; value: string };
+        "buttonClick": {
+    id: string;
+    type: string;
+    value?: string;
+  };
+    }
+    interface HTMLAuthheroNodeElement extends Components.AuthheroNode, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAuthheroNodeElementEventMap>(type: K, listener: (this: HTMLAuthheroNodeElement, ev: AuthheroNodeCustomEvent<HTMLAuthheroNodeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAuthheroNodeElementEventMap>(type: K, listener: (this: HTMLAuthheroNodeElement, ev: AuthheroNodeCustomEvent<HTMLAuthheroNodeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAuthheroNodeElement: {
+        prototype: HTMLAuthheroNodeElement;
+        new (): HTMLAuthheroNodeElement;
+    };
+    interface HTMLAuthheroWidgetElementEventMap {
+        "formSubmit": SubmitEventDetail;
+        "buttonClick": ButtonClickEventDetail;
+        "linkClick": LinkClickEventDetail;
+        "navigate": NavigateEventDetail;
+        "flowComplete": CompleteEventDetail;
+        "flowError": ErrorEventDetail;
+        "screenChange": UiScreen;
+    }
+    interface HTMLAuthheroWidgetElement extends Components.AuthheroWidget, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAuthheroWidgetElementEventMap>(type: K, listener: (this: HTMLAuthheroWidgetElement, ev: AuthheroWidgetCustomEvent<HTMLAuthheroWidgetElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAuthheroWidgetElementEventMap>(type: K, listener: (this: HTMLAuthheroWidgetElement, ev: AuthheroWidgetCustomEvent<HTMLAuthheroWidgetElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAuthheroWidgetElement: {
+        prototype: HTMLAuthheroWidgetElement;
+        new (): HTMLAuthheroWidgetElement;
+    };
+    interface HTMLElementTagNameMap {
+        "authhero-node": HTMLAuthheroNodeElement;
+        "authhero-widget": HTMLAuthheroWidgetElement;
+    }
+}
+declare namespace LocalJSX {
+    interface AuthheroNode {
+        /**
+          * The component configuration to render. Follows Auth0 Forms component schema.
+         */
+        "component": FormComponent | RuntimeComponent;
+        /**
+          * Whether the component is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when a button is clicked.
+         */
+        "onButtonClick"?: (event: AuthheroNodeCustomEvent<{
+    id: string;
+    type: string;
+    value?: string;
+  }>) => void;
+        /**
+          * Emitted when a field value changes.
+         */
+        "onFieldChange"?: (event: AuthheroNodeCustomEvent<{ id: string; value: string }>) => void;
+        /**
+          * Current value for field components.
+         */
+        "value"?: string;
+    }
+    interface AuthheroWidget {
+        /**
+          * API endpoint to fetch the initial screen from. If provided, the widget will fetch the screen on load.
+         */
+        "apiUrl"?: string;
+        /**
+          * Whether the widget should automatically submit forms to the action URL. When false (default), the widget only emits events and the consuming application handles all HTTP requests. When true, the widget handles form submission and screen updates.
+          * @default false
+         */
+        "autoSubmit"?: boolean;
+        /**
+          * Branding configuration from AuthHero API. Controls logo, primary color, and page background. Can be passed as a JSON string or object.
+         */
+        "branding"?: WidgetBranding | string;
+        /**
+          * Whether the widget is in a loading state.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * Emitted when a non-submit button is clicked (social login, back, etc.). The consuming application decides what to do based on id/type/value.
+         */
+        "onButtonClick"?: (event: AuthheroWidgetCustomEvent<ButtonClickEventDetail>) => void;
+        /**
+          * Emitted when auth flow completes with a redirect URL. The consuming application can redirect or extract the code.
+         */
+        "onFlowComplete"?: (event: AuthheroWidgetCustomEvent<CompleteEventDetail>) => void;
+        /**
+          * Emitted when an error occurs.
+         */
+        "onFlowError"?: (event: AuthheroWidgetCustomEvent<ErrorEventDetail>) => void;
+        /**
+          * Emitted when the form is submitted. The consuming application should handle the submission unless autoSubmit is true.
+         */
+        "onFormSubmit"?: (event: AuthheroWidgetCustomEvent<SubmitEventDetail>) => void;
+        /**
+          * Emitted when a link is clicked. The consuming application decides how to handle navigation.
+         */
+        "onLinkClick"?: (event: AuthheroWidgetCustomEvent<LinkClickEventDetail>) => void;
+        /**
+          * Emitted when the widget wants to navigate (e.g., after successful auth). The consuming application decides how to handle navigation.
+         */
+        "onNavigate"?: (event: AuthheroWidgetCustomEvent<NavigateEventDetail>) => void;
+        /**
+          * Emitted when the screen changes.
+         */
+        "onScreenChange"?: (event: AuthheroWidgetCustomEvent<UiScreen>) => void;
+        /**
+          * The UI screen configuration from the server. Can be passed as a JSON string or object. Follows Auth0 Forms component schema.
+         */
+        "screen"?: UiScreen | string;
+        /**
+          * Theme configuration from AuthHero API. Controls colors, borders, fonts, and layout. Can be passed as a JSON string or object.
+         */
+        "theme"?: WidgetTheme | string;
+    }
+    interface IntrinsicElements {
+        "authhero-node": AuthheroNode;
+        "authhero-widget": AuthheroWidget;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "authhero-node": LocalJSX.AuthheroNode & JSXBase.HTMLAttributes<HTMLAuthheroNodeElement>;
+            "authhero-widget": LocalJSX.AuthheroWidget & JSXBase.HTMLAttributes<HTMLAuthheroWidgetElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './types/components';

package/dist/types/server/index.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Hono SSR Helper for AuthHero Widget
+ *
+ * This module provides utilities for server-side rendering
+ * the AuthHero widget in Hono applications.
+ */
+import type { UiScreen, FormComponent, ScreenLink, ComponentMessage } from "../types/components";
+export type { UiScreen, FormComponent, ScreenLink, ComponentMessage };
+type ScreenBranding = {
+    logo_url?: string;
+    primaryColor?: string;
+    backgroundColor?: string;
+};
+/**
+ * Creates a basic login screen configuration using the new UiScreen format.
+ */
+export declare function createLoginScreen(options: {
+    action: string;
+    title?: string;
+    showSocialProviders?: string[];
+    showForgotPassword?: boolean;
+    showSignUp?: boolean;
+    branding?: ScreenBranding;
+}): UiScreen;
+/**
+ * Creates an identifier-first screen (email first, then password or social)
+ */
+export declare function createIdentifierScreen(options: {
+    action: string;
+    title?: string;
+    tenantName?: string;
+    logoUrl?: string;
+    showSocialProviders?: string[];
+    showSignUp?: boolean;
+    signUpUrl?: string;
+    branding?: ScreenBranding;
+}): UiScreen;
+/**
+ * Creates a registration screen configuration
+ */
+export declare function createSignupScreen(options: {
+    action: string;
+    title?: string;
+    fields?: Array<{
+        name: string;
+        type?: "email" | "password" | "text" | "tel" | "url" | "number" | "date";
+        label: string;
+        required?: boolean;
+        placeholder?: string;
+    }>;
+    showSocialProviders?: string[];
+    showLogin?: boolean;
+    branding?: ScreenBranding;
+}): UiScreen;
+/**
+ * Creates an MFA verification screen
+ */
+export declare function createMfaScreen(options: {
+    action: string;
+    title?: string;
+    codeLength?: number;
+    method?: "totp" | "sms" | "email";
+    branding?: ScreenBranding;
+}): UiScreen;
+/**
+ * Creates a password reset request screen
+ */
+export declare function createForgotPasswordScreen(options: {
+    action: string;
+    title?: string;
+    branding?: ScreenBranding;
+}): UiScreen;
+/**
+ * Adds an error message to a screen
+ */
+export declare function withError(screen: UiScreen, error: string): UiScreen;
+/**
+ * Adds a success message to a screen
+ */
+export declare function withSuccess(screen: UiScreen, success: string): UiScreen;
+/**
+ * Adds a field-level error to a specific component.
+ * Recursively searches nested components/children.
+ */
+export declare function withFieldError(screen: UiScreen, componentId: string, error: string): UiScreen;