@authhero/widget 0.2.2 → 0.4.0

package/dist/collection/server/index.js

@@ -0,0 +1,453 @@
+/**
+ * Hono SSR Helper for AuthHero Widget
+ *
+ * This module provides utilities for server-side rendering
+ * the AuthHero widget in Hono applications.
+ */
+/**
+ * Creates a basic login screen configuration using the new UiScreen format.
+ */
+export function createLoginScreen(options) {
+    const components = [];
+    let order = 0;
+    // Email field
+    components.push({
+        id: "email",
+        category: "FIELD",
+        type: "EMAIL",
+        order: order++,
+        label: "Email address",
+        required: true,
+        visible: true,
+        config: {
+            placeholder: "you@example.com",
+        },
+    });
+    // Password field
+    components.push({
+        id: "password",
+        category: "FIELD",
+        type: "PASSWORD",
+        order: order++,
+        label: "Password",
+        required: true,
+        visible: true,
+        config: {
+            placeholder: "Enter your password",
+        },
+    });
+    // Submit button
+    components.push({
+        id: "submit",
+        category: "BLOCK",
+        type: "NEXT_BUTTON",
+        order: order++,
+        visible: true,
+        config: {
+            text: "Sign in",
+        },
+    });
+    // Add social providers if specified
+    if (options.showSocialProviders?.length) {
+        components.push({
+            id: "divider",
+            category: "BLOCK",
+            type: "DIVIDER",
+            order: order++,
+            visible: true,
+        });
+        components.push({
+            id: "social",
+            category: "FIELD",
+            type: "SOCIAL",
+            order: order++,
+            visible: true,
+            config: {
+                providers: options.showSocialProviders,
+            },
+        });
+    }
+    const links = [];
+    if (options.showForgotPassword !== false) {
+        links.push({
+            text: "Forgot your password?",
+            href: "/forgot-password",
+        });
+    }
+    if (options.showSignUp !== false) {
+        links.push({
+            text: "Don't have an account?",
+            href: "/signup",
+            linkText: "Sign up",
+        });
+    }
+    return {
+        title: options.title || "Sign in to your account",
+        action: options.action,
+        method: "POST",
+        components,
+        links,
+    };
+}
+/**
+ * Creates an identifier-first screen (email first, then password or social)
+ */
+export function createIdentifierScreen(options) {
+    const components = [];
+    let order = 0;
+    // Add logo if provided
+    if (options.logoUrl) {
+        components.push({
+            id: "logo",
+            category: "BLOCK",
+            type: "IMAGE",
+            order: order++,
+            visible: true,
+            config: {
+                src: options.logoUrl,
+                alt: `${options.tenantName || "Company"} Logo`,
+            },
+        });
+    }
+    // Email input
+    components.push({
+        id: "email",
+        category: "FIELD",
+        type: "EMAIL",
+        order: order++,
+        label: "Email",
+        required: true,
+        visible: true,
+        config: {
+            placeholder: "Your email address",
+        },
+    });
+    // Continue button
+    components.push({
+        id: "submit",
+        category: "BLOCK",
+        type: "NEXT_BUTTON",
+        order: order++,
+        visible: true,
+        config: {
+            text: "Continue",
+        },
+    });
+    // Add social providers if specified
+    if (options.showSocialProviders?.length) {
+        components.push({
+            id: "divider",
+            category: "BLOCK",
+            type: "DIVIDER",
+            order: order++,
+            visible: true,
+        });
+        components.push({
+            id: "social",
+            category: "FIELD",
+            type: "SOCIAL",
+            order: order++,
+            visible: true,
+            config: {
+                providers: options.showSocialProviders,
+            },
+        });
+    }
+    const links = [];
+    if (options.showSignUp !== false) {
+        links.push({
+            text: "Don't have an account?",
+            href: options.signUpUrl || "/signup",
+            linkText: "Get started",
+        });
+    }
+    return {
+        title: options.title || `Sign in to ${options.tenantName || "your account"}`,
+        action: options.action,
+        method: "POST",
+        components,
+        links,
+    };
+}
+/**
+ * Creates a registration screen configuration
+ */
+export function createSignupScreen(options) {
+    const defaultFields = [
+        { name: "email", type: "email", label: "Email address", required: true },
+        { name: "password", type: "password", label: "Password", required: true },
+        {
+            name: "password_confirm",
+            type: "password",
+            label: "Confirm password",
+            required: true,
+        },
+    ];
+    const fields = options.fields || defaultFields;
+    const components = [];
+    let order = 0;
+    // Map fields to components
+    fields.forEach((field) => {
+        const fieldType = field.type || "text";
+        if (fieldType === "email") {
+            components.push({
+                id: field.name,
+                category: "FIELD",
+                type: "EMAIL",
+                order: order++,
+                label: field.label,
+                required: field.required ?? true,
+                visible: true,
+                config: {
+                    placeholder: field.placeholder,
+                },
+            });
+        }
+        else if (fieldType === "password") {
+            components.push({
+                id: field.name,
+                category: "FIELD",
+                type: "PASSWORD",
+                order: order++,
+                label: field.label,
+                required: field.required ?? true,
+                visible: true,
+                config: {
+                    placeholder: field.placeholder,
+                },
+            });
+        }
+        else {
+            components.push({
+                id: field.name,
+                category: "FIELD",
+                type: "TEXT",
+                order: order++,
+                label: field.label,
+                required: field.required ?? true,
+                visible: true,
+                config: {
+                    placeholder: field.placeholder,
+                },
+            });
+        }
+    });
+    // Submit button
+    components.push({
+        id: "submit",
+        category: "BLOCK",
+        type: "NEXT_BUTTON",
+        order: order++,
+        visible: true,
+        config: {
+            text: "Create account",
+        },
+    });
+    // Add social providers if specified
+    if (options.showSocialProviders?.length) {
+        components.push({
+            id: "divider",
+            category: "BLOCK",
+            type: "DIVIDER",
+            order: order++,
+            visible: true,
+        });
+        components.push({
+            id: "social",
+            category: "FIELD",
+            type: "SOCIAL",
+            order: order++,
+            visible: true,
+            config: {
+                providers: options.showSocialProviders,
+            },
+        });
+    }
+    const links = [];
+    if (options.showLogin !== false) {
+        links.push({
+            text: "Already have an account?",
+            href: "/login",
+            linkText: "Sign in",
+        });
+    }
+    return {
+        title: options.title || "Create your account",
+        action: options.action,
+        method: "POST",
+        components,
+        links,
+    };
+}
+/**
+ * Creates an MFA verification screen
+ */
+export function createMfaScreen(options) {
+    const components = [];
+    let order = 0;
+    const description = options.method === "sms"
+        ? "Enter the code sent to your phone"
+        : options.method === "email"
+            ? "Enter the code sent to your email"
+            : "Enter the code from your authenticator app";
+    // Description text
+    components.push({
+        id: "description",
+        category: "BLOCK",
+        type: "RICH_TEXT",
+        order: order++,
+        visible: true,
+        config: {
+            content: `<p>${description}</p>`,
+        },
+    });
+    // Code input
+    components.push({
+        id: "code",
+        category: "FIELD",
+        type: "TEXT",
+        order: order++,
+        label: "Verification code",
+        required: true,
+        visible: true,
+        config: {
+            placeholder: "000000",
+            max_length: options.codeLength || 6,
+        },
+    });
+    // Submit button
+    components.push({
+        id: "submit",
+        category: "BLOCK",
+        type: "NEXT_BUTTON",
+        order: order++,
+        visible: true,
+        config: {
+            text: "Verify",
+        },
+    });
+    return {
+        title: options.title || "Two-factor authentication",
+        action: options.action,
+        method: "POST",
+        components,
+        links: [
+            {
+                text: "Back to login",
+                href: "/login",
+            },
+        ],
+    };
+}
+/**
+ * Creates a password reset request screen
+ */
+export function createForgotPasswordScreen(options) {
+    const components = [];
+    let order = 0;
+    // Description text
+    components.push({
+        id: "description",
+        category: "BLOCK",
+        type: "RICH_TEXT",
+        order: order++,
+        visible: true,
+        config: {
+            content: "<p>Enter your email address and we'll send you a link to reset your password.</p>",
+        },
+    });
+    // Email input
+    components.push({
+        id: "email",
+        category: "FIELD",
+        type: "EMAIL",
+        order: order++,
+        label: "Email address",
+        required: true,
+        visible: true,
+    });
+    // Submit button
+    components.push({
+        id: "submit",
+        category: "BLOCK",
+        type: "NEXT_BUTTON",
+        order: order++,
+        visible: true,
+        config: {
+            text: "Send reset link",
+        },
+    });
+    return {
+        title: options.title || "Reset your password",
+        action: options.action,
+        method: "POST",
+        components,
+        links: [
+            {
+                text: "Back to login",
+                href: "/login",
+            },
+        ],
+    };
+}
+/**
+ * Adds an error message to a screen
+ */
+export function withError(screen, error) {
+    return {
+        ...screen,
+        messages: [...(screen.messages || []), { text: error, type: "error" }],
+    };
+}
+/**
+ * Adds a success message to a screen
+ */
+export function withSuccess(screen, success) {
+    return {
+        ...screen,
+        messages: [...(screen.messages || []), { text: success, type: "success" }],
+    };
+}
+/**
+ * Recursively add an error message to a component by ID.
+ * Handles nested components if they have a 'components' or 'children' property.
+ */
+function addErrorToComponent(component, componentId, error) {
+    // Check if this is the target component
+    if (component.id === componentId) {
+        return {
+            ...component,
+            messages: [
+                ...(component.messages ||
+                    []),
+                { text: error, type: "error" },
+            ],
+        };
+    }
+    // Check for nested components (new format might use 'components')
+    const componentWithChildren = component;
+    if (componentWithChildren.components?.length) {
+        return {
+            ...component,
+            components: componentWithChildren.components.map((child) => addErrorToComponent(child, componentId, error)),
+        };
+    }
+    // Check for nested children (deprecated UINode format)
+    if (componentWithChildren.children?.length) {
+        return {
+            ...component,
+            children: componentWithChildren.children.map((child) => addErrorToComponent(child, componentId, error)),
+        };
+    }
+    return component;
+}
+/**
+ * Adds a field-level error to a specific component.
+ * Recursively searches nested components/children.
+ */
+export function withFieldError(screen, componentId, error) {
+    return {
+        ...screen,
+        components: screen.components.map((component) => addErrorToComponent(component, componentId, error)),
+    };
+}

package/dist/collection/themes/index.js

@@ -0,0 +1,71 @@
+/**
+ * AuthHero Widget - Theming System
+ *
+ * The widget supports theming via branding/theme props from AuthHero API,
+ * CSS custom properties, or CSS classes for quick prototyping.
+ *
+ * ## 1. Branding & Theme Props (Recommended)
+ *
+ * Pass AuthHero branding and theme configuration directly:
+ *
+ * ```html
+ * <authhero-widget
+ *   branding='{"colors":{"primary":"#7D68F4"},"logo_url":"..."}'
+ *   theme='{"borders":{"widget_corner_radius":16}}'
+ * ></authhero-widget>
+ * ```
+ *
+ * ## 2. CSS Custom Properties
+ *
+ * Override individual variables:
+ *
+ * ```css
+ * authhero-widget {
+ *   --ah-color-primary: #7D68F4;
+ *   --ah-widget-radius: 16px;
+ * }
+ * ```
+ *
+ * ## 3. Theme Preset Classes
+ *
+ * Quick styling via CSS classes (for demos/prototyping):
+ *
+ * ```html
+ * <authhero-widget class="ah-theme-dark"></authhero-widget>
+ * ```
+ */
+// Re-export branding utilities
+export { brandingToCssVars, themeToCssVars, mergeThemeVars, applyCssVars, } from '../utils/branding';
+// Theme preset class names
+export const themePresets = ['ah-theme-minimal', 'ah-theme-rounded', 'ah-theme-dark'];
+// CSS part names for ::part() styling
+export const cssParts = [
+    'container',
+    'logo',
+    'title',
+    'form',
+    'links',
+    'link',
+    'link-wrapper',
+    'divider',
+    'divider-text',
+    'message',
+    'message-error',
+    'message-success',
+    'input-wrapper',
+    'label',
+    'input',
+    'helper-text',
+    'error-text',
+    'button',
+    'button-primary',
+    'button-secondary',
+    'checkbox-wrapper',
+    'checkbox',
+    'checkbox-label',
+    'image',
+    'text-title',
+    'text-description',
+    'text-error',
+    'text-success',
+];

package/dist/collection/types/components.js

@@ -0,0 +1,8 @@
+/**
+ * Auth0 Forms Component Types for Widget Rendering
+ *
+ * Re-exported from @authhero/adapter-interfaces for consistency.
+ * @see https://auth0.com/docs/customize/forms/forms-schema
+ */
+// Re-export type guards
+export { isBlockComponent, isWidgetComponent, isFieldComponent, } from "@authhero/adapter-interfaces";