@proveanything/smartlinks-auth-ui 0.1.3 → 0.1.5

package/dist/index.js

@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e) {
 
 var smartlinks__namespace = /*#__PURE__*/_interopNamespaceDefault(smartlinks);
 
-const AuthContainer = ({ children, theme = 'light', className = '', config, }) => {
+const AuthContainer = ({ children, theme = 'light', className = '', config, minimal = false, }) => {
     // Apply CSS variables for customization
     React.useEffect(() => {
         if (!config?.branding)
@@ -63,11 +63,21 @@ const AuthContainer = ({ children, theme = 'light', className = '', config, }) =
     }, [config]);
     const title = config?.branding?.title;
     const subtitle = config?.branding?.subtitle;
-    const logoUrl = config?.branding?.logoUrl || '/smartlinks-logo.png';
-    return (jsxRuntime.jsx("div", { className: `auth-container auth-theme-${theme} ${className}`, children: jsxRuntime.jsxs("div", { className: "auth-card", style: { borderRadius: config?.branding?.buttonStyle === 'square' ? '4px' : '12px' }, children: [(jsxRuntime.jsxs("div", { className: "auth-header", children: [(jsxRuntime.jsx("div", { className: "auth-logo", children: jsxRuntime.jsx("img", { src: logoUrl, alt: "Logo", style: { maxWidth: '200px', height: 'auto', objectFit: 'contain' } }) })), title && jsxRuntime.jsx("h1", { className: "auth-title", children: title }), subtitle && jsxRuntime.jsx("p", { className: "auth-subtitle", children: subtitle })] })), jsxRuntime.jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (jsxRuntime.jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && jsxRuntime.jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && jsxRuntime.jsx("span", { children: "\u2022" }), config.branding.privacyUrl && jsxRuntime.jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
+    // Logo URL logic:
+    // - undefined/not set: use default Smartlinks logo
+    // - null or empty string: hide logo completely
+    // - string URL: use custom logo
+    const logoUrl = config?.branding?.logoUrl === undefined
+        ? 'https://smartlinks.app/smartlinks/landscape-medium.png' // Default Smartlinks logo
+        : config?.branding?.logoUrl || null; // Custom or explicitly hidden
+    const containerClass = minimal
+        ? `auth-minimal auth-theme-${theme} ${className}`
+        : `auth-container auth-theme-${theme} ${className}`;
+    const cardClass = minimal ? 'auth-minimal-card' : 'auth-card';
+    return (jsxRuntime.jsx("div", { className: containerClass, children: jsxRuntime.jsxs("div", { className: cardClass, style: !minimal && config?.branding?.buttonStyle === 'square' ? { borderRadius: '4px' } : undefined, children: [(logoUrl || title || subtitle) && (jsxRuntime.jsxs("div", { className: "auth-header", children: [logoUrl && (jsxRuntime.jsx("div", { className: "auth-logo", children: jsxRuntime.jsx("img", { src: logoUrl, alt: "Logo", style: { maxWidth: '200px', height: 'auto', objectFit: 'contain' } }) })), title && jsxRuntime.jsx("h1", { className: "auth-title", children: title }), subtitle && jsxRuntime.jsx("p", { className: "auth-subtitle", children: subtitle })] })), jsxRuntime.jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (jsxRuntime.jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && jsxRuntime.jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && jsxRuntime.jsx("span", { children: "\u2022" }), config.branding.privacyUrl && jsxRuntime.jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
 };
 
-const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, }) => {
+const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, additionalFields = [], }) => {
     const [formData, setFormData] = React.useState({
         email: '',
         password: '',
@@ -82,7 +92,7 @@ const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading
     };
     return (jsxRuntime.jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("h2", { className: "auth-form-title", children: mode === 'login' ? 'Sign in' : 'Create account' }), jsxRuntime.jsx("p", { className: "auth-form-subtitle", children: mode === 'login'
                             ? 'Welcome back! Please enter your credentials.'
-                            : 'Get started by creating your account.' })] }), error && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), jsxRuntime.jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsxRuntime.jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'login' && (jsxRuntime.jsx("div", { className: "auth-form-footer", children: jsxRuntime.jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsxRuntime.jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxRuntime.jsxs("div", { className: "auth-divider", children: [jsxRuntime.jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), jsxRuntime.jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
+                            : 'Get started by creating your account.' })] }), error && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), jsxRuntime.jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsxRuntime.jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'register' && additionalFields.map((field) => (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsxs("label", { htmlFor: field.name, className: "auth-label", children: [field.label, field.required && jsxRuntime.jsx("span", { style: { color: 'var(--auth-error-color, #ef4444)' }, children: " *" })] }), field.type === 'select' ? (jsxRuntime.jsxs("select", { id: field.name, className: "auth-input", value: formData[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), required: field.required, disabled: loading, children: [jsxRuntime.jsx("option", { value: "", children: "Select..." }), field.options?.map((option) => (jsxRuntime.jsx("option", { value: option, children: option }, option)))] })) : field.type === 'textarea' ? (jsxRuntime.jsx("textarea", { id: field.name, className: "auth-input", value: formData[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), required: field.required, disabled: loading, placeholder: field.placeholder, rows: 3, style: { minHeight: '80px', resize: 'vertical' } })) : (jsxRuntime.jsx("input", { type: field.type, id: field.name, className: "auth-input", value: formData[field.name] || '', onChange: (e) => handleChange(field.name, e.target.value), required: field.required, disabled: loading, placeholder: field.placeholder }))] }, field.name))), mode === 'login' && (jsxRuntime.jsx("div", { className: "auth-form-footer", children: jsxRuntime.jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsxRuntime.jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxRuntime.jsxs("div", { className: "auth-divider", children: [jsxRuntime.jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), jsxRuntime.jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
 };
 
 const ProviderButtons = ({ enabledProviders, providerOrder, onEmailLogin, onGoogleLogin, onPhoneLogin, onMagicLinkLogin, loading, }) => {
@@ -10693,142 +10703,724 @@ class AuthAPI {
     }
 }
 
-const TOKEN_KEY = 'smartlinks_auth_token';
-const USER_KEY = 'smartlinks_auth_user';
-const ACCOUNT_DATA_KEY = 'smartlinks_account_data';
+/**
+ * Persistent Storage Layer for Smartlinks Auth
+ *
+ * Implements a tiered persistence strategy similar to Firebase Auth:
+ * 1. Primary: IndexedDB (async, large capacity, cross-tab)
+ * 2. Fallback: localStorage (sync, universal support)
+ *
+ * Provides unified async API for all storage operations with automatic
+ * fallback handling and cross-tab synchronization.
+ */
+const DB_NAME = 'smartlinks_auth_db';
+const DB_VERSION = 1;
+const STORE_NAME = 'auth_state';
+const STORAGE_CHANNEL = 'smartlinks_auth_storage';
+/**
+ * IndexedDB Storage Implementation
+ */
+class IndexedDBStorage {
+    constructor() {
+        this.db = null;
+        this.initPromise = null;
+        this.channel = null;
+        this.initPromise = this.initialize();
+        // Set up BroadcastChannel for cross-tab communication
+        if (typeof BroadcastChannel !== 'undefined') {
+            this.channel = new BroadcastChannel(STORAGE_CHANNEL);
+        }
+    }
+    async initialize() {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(DB_NAME, DB_VERSION);
+            request.onerror = () => {
+                console.warn('IndexedDB initialization failed:', request.error);
+                reject(request.error);
+            };
+            request.onsuccess = () => {
+                this.db = request.result;
+                resolve();
+            };
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                // Create object store if it doesn't exist
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    db.createObjectStore(STORE_NAME);
+                }
+            };
+        });
+    }
+    async ensureInitialized() {
+        if (this.initPromise) {
+            await this.initPromise;
+        }
+    }
+    broadcastChange(event) {
+        if (this.channel) {
+            try {
+                this.channel.postMessage(event);
+            }
+            catch (error) {
+                console.warn('Failed to broadcast storage change:', error);
+            }
+        }
+    }
+    async setItem(key, value) {
+        await this.ensureInitialized();
+        return new Promise((resolve, reject) => {
+            if (!this.db) {
+                reject(new Error('IndexedDB not initialized'));
+                return;
+            }
+            const transaction = this.db.transaction([STORE_NAME], 'readwrite');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.put(value, key);
+            request.onsuccess = () => {
+                this.broadcastChange({
+                    type: 'set',
+                    key,
+                    value,
+                    timestamp: Date.now(),
+                });
+                resolve();
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    async getItem(key) {
+        await this.ensureInitialized();
+        return new Promise((resolve, reject) => {
+            if (!this.db) {
+                reject(new Error('IndexedDB not initialized'));
+                return;
+            }
+            const transaction = this.db.transaction([STORE_NAME], 'readonly');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.get(key);
+            request.onsuccess = () => {
+                resolve(request.result !== undefined ? request.result : null);
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    async removeItem(key) {
+        await this.ensureInitialized();
+        return new Promise((resolve, reject) => {
+            if (!this.db) {
+                reject(new Error('IndexedDB not initialized'));
+                return;
+            }
+            const transaction = this.db.transaction([STORE_NAME], 'readwrite');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.delete(key);
+            request.onsuccess = () => {
+                this.broadcastChange({
+                    type: 'remove',
+                    key,
+                    timestamp: Date.now(),
+                });
+                resolve();
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    async clear() {
+        await this.ensureInitialized();
+        return new Promise((resolve, reject) => {
+            if (!this.db) {
+                reject(new Error('IndexedDB not initialized'));
+                return;
+            }
+            const transaction = this.db.transaction([STORE_NAME], 'readwrite');
+            const store = transaction.objectStore(STORE_NAME);
+            const request = store.clear();
+            request.onsuccess = () => {
+                this.broadcastChange({
+                    type: 'clear',
+                    timestamp: Date.now(),
+                });
+                resolve();
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    async isAvailable() {
+        try {
+            await this.ensureInitialized();
+            return this.db !== null;
+        }
+        catch {
+            return false;
+        }
+    }
+    getBackend() {
+        return 'indexeddb';
+    }
+    destroy() {
+        if (this.db) {
+            this.db.close();
+            this.db = null;
+        }
+        if (this.channel) {
+            this.channel.close();
+            this.channel = null;
+        }
+    }
+}
+/**
+ * localStorage Storage Implementation (Fallback)
+ */
+class LocalStorageAdapter {
+    constructor() {
+        this.prefix = 'smartlinks_auth_';
+        this.channel = null;
+        // Set up BroadcastChannel for cross-tab communication
+        if (typeof BroadcastChannel !== 'undefined') {
+            this.channel = new BroadcastChannel(STORAGE_CHANNEL);
+        }
+    }
+    broadcastChange(event) {
+        if (this.channel) {
+            try {
+                this.channel.postMessage(event);
+            }
+            catch (error) {
+                console.warn('Failed to broadcast storage change:', error);
+            }
+        }
+    }
+    async setItem(key, value) {
+        try {
+            const serialized = JSON.stringify(value);
+            localStorage.setItem(this.prefix + key, serialized);
+            this.broadcastChange({
+                type: 'set',
+                key,
+                value,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            console.error('localStorage setItem failed:', error);
+            throw error;
+        }
+    }
+    async getItem(key) {
+        try {
+            const stored = localStorage.getItem(this.prefix + key);
+            if (!stored)
+                return null;
+            return JSON.parse(stored);
+        }
+        catch (error) {
+            console.error('localStorage getItem failed:', error);
+            return null;
+        }
+    }
+    async removeItem(key) {
+        try {
+            localStorage.removeItem(this.prefix + key);
+            this.broadcastChange({
+                type: 'remove',
+                key,
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            console.error('localStorage removeItem failed:', error);
+            throw error;
+        }
+    }
+    async clear() {
+        try {
+            const keys = Object.keys(localStorage);
+            keys.forEach(key => {
+                if (key.startsWith(this.prefix)) {
+                    localStorage.removeItem(key);
+                }
+            });
+            this.broadcastChange({
+                type: 'clear',
+                timestamp: Date.now(),
+            });
+        }
+        catch (error) {
+            console.error('localStorage clear failed:', error);
+            throw error;
+        }
+    }
+    async isAvailable() {
+        try {
+            const testKey = '__smartlinks_test__';
+            localStorage.setItem(testKey, 'test');
+            localStorage.removeItem(testKey);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    getBackend() {
+        return 'localstorage';
+    }
+    destroy() {
+        if (this.channel) {
+            this.channel.close();
+            this.channel = null;
+        }
+    }
+}
+/**
+ * In-Memory Storage Implementation (No Persistence)
+ */
+class InMemoryStorage {
+    constructor() {
+        this.storage = new Map();
+    }
+    async setItem(key, value) {
+        this.storage.set(key, value);
+    }
+    async getItem(key) {
+        return this.storage.has(key) ? this.storage.get(key) : null;
+    }
+    async removeItem(key) {
+        this.storage.delete(key);
+    }
+    async clear() {
+        this.storage.clear();
+    }
+    async isAvailable() {
+        return true;
+    }
+    getBackend() {
+        return 'none';
+    }
+    destroy() {
+        this.storage.clear();
+    }
+}
+/**
+ * Storage Factory - Creates appropriate storage backend with automatic fallback
+ */
+class StorageFactory {
+    static async createStorage() {
+        if (this.instance) {
+            return this.instance;
+        }
+        // Try IndexedDB first
+        try {
+            const indexedDB = new IndexedDBStorage();
+            const available = await indexedDB.isAvailable();
+            if (available) {
+                console.log('[PersistentStorage] Using IndexedDB backend');
+                this.instance = indexedDB;
+                return indexedDB;
+            }
+            indexedDB.destroy();
+        }
+        catch (error) {
+            console.warn('[PersistentStorage] IndexedDB failed:', error);
+        }
+        // Fallback to localStorage
+        try {
+            const localStorage = new LocalStorageAdapter();
+            const available = await localStorage.isAvailable();
+            if (available) {
+                console.log('[PersistentStorage] Using localStorage backend (fallback)');
+                this.instance = localStorage;
+                return localStorage;
+            }
+            localStorage.destroy();
+        }
+        catch (error) {
+            console.warn('[PersistentStorage] localStorage failed:', error);
+        }
+        // Final fallback to in-memory (no persistence)
+        console.warn('[PersistentStorage] Using in-memory storage (no persistence)');
+        this.instance = new InMemoryStorage();
+        return this.instance;
+    }
+    static getInstance() {
+        return this.instance;
+    }
+    static reset() {
+        if (this.instance && 'destroy' in this.instance) {
+            this.instance.destroy();
+        }
+        this.instance = null;
+    }
+}
+StorageFactory.instance = null;
+/**
+ * Main storage export - creates singleton storage instance
+ */
+let storageInstance = null;
+let storageInitPromise = null;
+async function getStorage() {
+    if (storageInstance) {
+        return storageInstance;
+    }
+    if (!storageInitPromise) {
+        storageInitPromise = StorageFactory.createStorage();
+    }
+    storageInstance = await storageInitPromise;
+    return storageInstance;
+}
+/**
+ * Listen for storage changes from other tabs
+ */
+function onStorageChange(callback) {
+    if (typeof BroadcastChannel === 'undefined') {
+        console.warn('BroadcastChannel not supported, cross-tab sync disabled');
+        return () => { };
+    }
+    const channel = new BroadcastChannel(STORAGE_CHANNEL);
+    channel.onmessage = (event) => {
+        callback(event.data);
+    };
+    return () => {
+        channel.close();
+    };
+}
+
+const TOKEN_KEY = 'token';
+const USER_KEY = 'user';
+const ACCOUNT_DATA_KEY = 'account_data';
+const ACCOUNT_INFO_KEY = 'account_info';
+const ACCOUNT_INFO_TTL = 5 * 60 * 1000; // 5 minutes default
+/**
+ * Token Storage Layer
+ *
+ * Manages authentication tokens, user data, and account data using
+ * the persistent storage layer (IndexedDB + localStorage fallback).
+ * All methods are async to support IndexedDB operations.
+ */
 const tokenStorage = {
-    saveToken(token, expiresAt) {
+    async saveToken(token, expiresAt) {
+        const storage = await getStorage();
         const authToken = {
             token,
             expiresAt: expiresAt || Date.now() + 3600000, // Default 1 hour
         };
-        localStorage.setItem(TOKEN_KEY, JSON.stringify(authToken));
+        await storage.setItem(TOKEN_KEY, authToken);
     },
-    getToken() {
-        const stored = localStorage.getItem(TOKEN_KEY);
-        if (!stored)
+    async getToken() {
+        const storage = await getStorage();
+        const authToken = await storage.getItem(TOKEN_KEY);
+        if (!authToken)
             return null;
-        try {
-            const authToken = JSON.parse(stored);
-            // Check if token is expired
-            if (authToken.expiresAt && authToken.expiresAt < Date.now()) {
-                this.clearToken();
-                return null;
-            }
-            return authToken;
-        }
-        catch {
+        // Check if token is expired
+        if (authToken.expiresAt && authToken.expiresAt < Date.now()) {
+            await this.clearToken();
             return null;
         }
+        return authToken;
     },
-    clearToken() {
-        localStorage.removeItem(TOKEN_KEY);
+    async clearToken() {
+        const storage = await getStorage();
+        await storage.removeItem(TOKEN_KEY);
     },
-    saveUser(user) {
-        localStorage.setItem(USER_KEY, JSON.stringify(user));
+    async saveUser(user) {
+        const storage = await getStorage();
+        await storage.setItem(USER_KEY, user);
     },
-    getUser() {
-        const stored = localStorage.getItem(USER_KEY);
-        if (!stored)
-            return null;
-        try {
-            return JSON.parse(stored);
-        }
-        catch {
-            return null;
-        }
+    async getUser() {
+        const storage = await getStorage();
+        return await storage.getItem(USER_KEY);
     },
-    clearUser() {
-        localStorage.removeItem(USER_KEY);
+    async clearUser() {
+        const storage = await getStorage();
+        await storage.removeItem(USER_KEY);
     },
-    clearAll() {
-        this.clearToken();
-        this.clearUser();
-        this.clearAccountData();
+    async clearAll() {
+        await this.clearToken();
+        await this.clearUser();
+        await this.clearAccountData();
+        await this.clearAccountInfo();
     },
-    saveAccountData(data) {
-        localStorage.setItem(ACCOUNT_DATA_KEY, JSON.stringify(data));
+    async saveAccountData(data) {
+        const storage = await getStorage();
+        await storage.setItem(ACCOUNT_DATA_KEY, data);
     },
-    getAccountData() {
-        const stored = localStorage.getItem(ACCOUNT_DATA_KEY);
-        if (!stored)
-            return null;
-        try {
-            return JSON.parse(stored);
-        }
-        catch {
+    async getAccountData() {
+        const storage = await getStorage();
+        return await storage.getItem(ACCOUNT_DATA_KEY);
+    },
+    async clearAccountData() {
+        const storage = await getStorage();
+        await storage.removeItem(ACCOUNT_DATA_KEY);
+    },
+    async saveAccountInfo(accountInfo, ttl = ACCOUNT_INFO_TTL) {
+        const storage = await getStorage();
+        const cachedData = {
+            data: accountInfo,
+            cachedAt: Date.now(),
+            expiresAt: Date.now() + ttl,
+        };
+        await storage.setItem(ACCOUNT_INFO_KEY, cachedData);
+    },
+    async getAccountInfo() {
+        const storage = await getStorage();
+        const cached = await storage.getItem(ACCOUNT_INFO_KEY);
+        if (!cached)
             return null;
-        }
+        const isStale = cached.expiresAt < Date.now();
+        return {
+            data: cached.data,
+            isStale,
+        };
     },
-    clearAccountData() {
-        localStorage.removeItem(ACCOUNT_DATA_KEY);
+    async clearAccountInfo() {
+        const storage = await getStorage();
+        await storage.removeItem(ACCOUNT_INFO_KEY);
     },
 };
 
 const AuthContext = React.createContext(undefined);
-const AuthProvider = ({ children }) => {
+const AuthProvider = ({ children, accountCacheTTL = 5 * 60 * 1000, preloadAccountInfo = false }) => {
     const [user, setUser] = React.useState(null);
     const [token, setToken] = React.useState(null);
     const [accountData, setAccountData] = React.useState(null);
+    const [accountInfo, setAccountInfo] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
-    // Initialize auth state from localStorage
+    const callbacksRef = React.useRef(new Set());
+    // Notify all subscribers of auth state changes
+    const notifyAuthStateChange = React.useCallback((type, currentUser, currentToken, currentAccountData, currentAccountInfo) => {
+        callbacksRef.current.forEach(callback => {
+            try {
+                callback({
+                    type,
+                    user: currentUser,
+                    token: currentToken,
+                    accountData: currentAccountData,
+                    accountInfo: currentAccountInfo
+                });
+            }
+            catch (error) {
+                console.error('[AuthContext] Error in auth state change callback:', error);
+            }
+        });
+    }, []);
+    // Initialize auth state from persistent storage
+    React.useEffect(() => {
+        const initializeAuth = async () => {
+            try {
+                const storedToken = await tokenStorage.getToken();
+                const storedUser = await tokenStorage.getUser();
+                const storedAccountData = await tokenStorage.getAccountData();
+                if (storedToken && storedUser) {
+                    setToken(storedToken.token);
+                    setUser(storedUser);
+                    setAccountData(storedAccountData);
+                    // Set bearer token in global Smartlinks SDK via auth.verifyToken
+                    smartlinks__namespace.auth.verifyToken(storedToken.token).catch(err => {
+                        console.warn('Failed to restore bearer token on init:', err);
+                    });
+                }
+                // Load cached account info if available
+                const cachedAccountInfo = await tokenStorage.getAccountInfo();
+                if (cachedAccountInfo && !cachedAccountInfo.isStale) {
+                    setAccountInfo(cachedAccountInfo.data);
+                }
+            }
+            catch (error) {
+                console.error('Failed to initialize auth from storage:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        initializeAuth();
+    }, []);
+    // Cross-tab synchronization - listen for auth changes in other tabs
     React.useEffect(() => {
-        const storedToken = tokenStorage.getToken();
-        const storedUser = tokenStorage.getUser();
-        const storedAccountData = tokenStorage.getAccountData();
-        if (storedToken && storedUser) {
-            setToken(storedToken.token);
-            setUser(storedUser);
-            setAccountData(storedAccountData);
+        console.log('[AuthContext] Setting up cross-tab synchronization');
+        const unsubscribe = onStorageChange(async (event) => {
+            console.log('[AuthContext] Cross-tab storage event:', event.type, event.key);
+            try {
+                if (event.type === 'clear') {
+                    // Another tab cleared all storage (logout)
+                    console.log('[AuthContext] Detected logout in another tab');
+                    setToken(null);
+                    setUser(null);
+                    setAccountData(null);
+                    setAccountInfo(null);
+                    smartlinks__namespace.auth.logout();
+                    notifyAuthStateChange('CROSS_TAB_SYNC', null, null, null);
+                }
+                else if (event.type === 'remove' && (event.key === 'token' || event.key === 'user')) {
+                    // Another tab removed token or user (logout)
+                    console.log('[AuthContext] Detected token/user removal in another tab');
+                    setToken(null);
+                    setUser(null);
+                    setAccountData(null);
+                    setAccountInfo(null);
+                    smartlinks__namespace.auth.logout();
+                    notifyAuthStateChange('CROSS_TAB_SYNC', null, null, null);
+                }
+                else if (event.type === 'set' && event.key === 'token') {
+                    // Another tab set a new token (login)
+                    console.log('[AuthContext] Detected login in another tab');
+                    const storedToken = await tokenStorage.getToken();
+                    const storedUser = await tokenStorage.getUser();
+                    const storedAccountData = await tokenStorage.getAccountData();
+                    if (storedToken && storedUser) {
+                        setToken(storedToken.token);
+                        setUser(storedUser);
+                        setAccountData(storedAccountData);
+                        // Set bearer token in global Smartlinks SDK
+                        smartlinks__namespace.auth.verifyToken(storedToken.token).catch(err => {
+                            console.warn('[AuthContext] Failed to restore bearer token from cross-tab sync:', err);
+                        });
+                        notifyAuthStateChange('CROSS_TAB_SYNC', storedUser, storedToken.token, storedAccountData);
+                    }
+                }
+                else if (event.type === 'set' && event.key === 'account_info') {
+                    // Another tab fetched fresh account info
+                    const cached = await tokenStorage.getAccountInfo();
+                    if (cached && !cached.isStale) {
+                        setAccountInfo(cached.data);
+                        console.log('[AuthContext] Account info synced from another tab');
+                    }
+                }
+            }
+            catch (error) {
+                console.error('[AuthContext] Error handling cross-tab sync:', error);
+            }
+        });
+        return () => {
+            console.log('[AuthContext] Cleaning up cross-tab synchronization');
+            unsubscribe();
+        };
+    }, [notifyAuthStateChange]);
+    const login = React.useCallback(async (authToken, authUser, authAccountData) => {
+        try {
+            // Store token, user, and account data
+            await tokenStorage.saveToken(authToken);
+            await tokenStorage.saveUser(authUser);
+            if (authAccountData) {
+                await tokenStorage.saveAccountData(authAccountData);
+            }
+            setToken(authToken);
+            setUser(authUser);
+            setAccountData(authAccountData || null);
             // Set bearer token in global Smartlinks SDK via auth.verifyToken
-            smartlinks__namespace.auth.verifyToken(storedToken.token).catch(err => {
-                console.warn('Failed to restore bearer token on init:', err);
+            // This both validates the token and sets it for future API calls
+            smartlinks__namespace.auth.verifyToken(authToken).catch(err => {
+                console.warn('Failed to set bearer token on login:', err);
             });
+            notifyAuthStateChange('LOGIN', authUser, authToken, authAccountData || null);
+            // Optionally preload account info on login
+            if (preloadAccountInfo) {
+                // Preload after login completes (non-blocking)
+                getAccount(true).catch(error => {
+                    console.warn('[AuthContext] Failed to preload account info:', error);
+                });
+            }
         }
-        setIsLoading(false);
-    }, []);
-    const login = React.useCallback((authToken, authUser, authAccountData) => {
-        // Store token, user, and account data
-        tokenStorage.saveToken(authToken);
-        tokenStorage.saveUser(authUser);
-        if (authAccountData) {
-            tokenStorage.saveAccountData(authAccountData);
-        }
-        setToken(authToken);
-        setUser(authUser);
-        setAccountData(authAccountData || null);
-        // Set bearer token in global Smartlinks SDK via auth.verifyToken
-        // This both validates the token and sets it for future API calls
-        smartlinks__namespace.auth.verifyToken(authToken).catch(err => {
-            console.warn('Failed to set bearer token on login:', err);
-        });
-    }, []);
+        catch (error) {
+            console.error('Failed to save auth data to storage:', error);
+            throw error;
+        }
+    }, [notifyAuthStateChange, preloadAccountInfo]);
     const logout = React.useCallback(async () => {
-        // Clear local storage
-        tokenStorage.clearAll();
-        setToken(null);
-        setUser(null);
-        setAccountData(null);
-        // Clear bearer token from global Smartlinks SDK
-        smartlinks__namespace.auth.logout();
-    }, []);
-    const getToken = React.useCallback(() => {
-        const storedToken = tokenStorage.getToken();
+        try {
+            // Clear persistent storage
+            await tokenStorage.clearAll();
+            setToken(null);
+            setUser(null);
+            setAccountData(null);
+            setAccountInfo(null);
+            // Clear bearer token from global Smartlinks SDK
+            smartlinks__namespace.auth.logout();
+            notifyAuthStateChange('LOGOUT', null, null, null);
+        }
+        catch (error) {
+            console.error('Failed to clear auth data from storage:', error);
+        }
+    }, [notifyAuthStateChange]);
+    const getToken = React.useCallback(async () => {
+        const storedToken = await tokenStorage.getToken();
         return storedToken ? storedToken.token : null;
     }, []);
     const refreshToken = React.useCallback(async () => {
         throw new Error('Token refresh must be implemented via your backend API');
     }, []);
+    // Get account with intelligent caching
+    const getAccount = React.useCallback(async (forceRefresh = false) => {
+        try {
+            // Check if user is authenticated
+            if (!token) {
+                throw new Error('Not authenticated. Please login first.');
+            }
+            // Check cache unless force refresh
+            if (!forceRefresh) {
+                const cached = await tokenStorage.getAccountInfo();
+                if (cached && !cached.isStale) {
+                    console.log('[AuthContext] Returning cached account info');
+                    return cached.data;
+                }
+            }
+            // Fetch fresh data from API
+            console.log('[AuthContext] Fetching fresh account info from API');
+            const freshAccountInfo = await smartlinks__namespace.auth.getAccount();
+            // Cache the fresh data
+            await tokenStorage.saveAccountInfo(freshAccountInfo, accountCacheTTL);
+            setAccountInfo(freshAccountInfo);
+            notifyAuthStateChange('ACCOUNT_REFRESH', user, token, accountData, freshAccountInfo);
+            return freshAccountInfo;
+        }
+        catch (error) {
+            console.error('[AuthContext] Failed to get account info:', error);
+            // Fallback to stale cache if API fails
+            const cached = await tokenStorage.getAccountInfo();
+            if (cached) {
+                console.warn('[AuthContext] Returning stale cached data due to API error');
+                return cached.data;
+            }
+            throw error;
+        }
+    }, [token, accountCacheTTL, user, accountData, notifyAuthStateChange]);
+    // Convenience method for explicit refresh
+    const refreshAccount = React.useCallback(async () => {
+        return await getAccount(true);
+    }, [getAccount]);
+    // Clear account cache
+    const clearAccountCache = React.useCallback(async () => {
+        await tokenStorage.clearAccountInfo();
+        setAccountInfo(null);
+    }, []);
+    const onAuthStateChange = React.useCallback((callback) => {
+        callbacksRef.current.add(callback);
+        // Return unsubscribe function
+        return () => {
+            callbacksRef.current.delete(callback);
+        };
+    }, []);
     const value = {
         user,
         token,
         accountData,
+        accountInfo,
         isAuthenticated: !!token && !!user,
         isLoading,
         login,
         logout,
         getToken,
         refreshToken,
+        getAccount,
+        refreshAccount,
+        clearAccountCache,
+        onAuthStateChange,
     };
     return jsxRuntime.jsx(AuthContext.Provider, { value: value, children: children });
 };
@@ -10840,996 +11432,1092 @@ const useAuth = () => {
     return context;
 };
 
-const AccountManagement = ({ apiEndpoint, clientId, onProfileUpdated, onEmailChangeRequested, onPasswordChanged, onAccountDeleted, onError, theme = 'light', className = '', customization = {}, }) => {
-    const auth = useAuth();
+// Default Smartlinks Google OAuth Client ID (public - safe to expose)
+const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
+    const [mode, setMode] = React.useState(initialMode);
     const [loading, setLoading] = React.useState(false);
-    const [profile, setProfile] = React.useState(null);
     const [error, setError] = React.useState();
-    const [success, setSuccess] = React.useState();
-    // Track which section is being edited
-    const [editingSection, setEditingSection] = React.useState(null);
-    // Profile form state
-    const [displayName, setDisplayName] = React.useState('');
-    // Email change state
-    const [newEmail, setNewEmail] = React.useState('');
-    const [emailPassword, setEmailPassword] = React.useState('');
-    // Password change state
-    const [currentPassword, setCurrentPassword] = React.useState('');
-    const [newPassword, setNewPassword] = React.useState('');
-    const [confirmPassword, setConfirmPassword] = React.useState('');
-    // Phone change state (reuses existing sendPhoneCode flow)
-    const [newPhone, setNewPhone] = React.useState('');
-    const [phoneCode, setPhoneCode] = React.useState('');
-    const [phoneCodeSent, setPhoneCodeSent] = React.useState(false);
-    // Account deletion state
-    const [deletePassword, setDeletePassword] = React.useState('');
-    const [deleteConfirmText, setDeleteConfirmText] = React.useState('');
-    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
-    const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, } = customization;
-    // Reinitialize Smartlinks SDK when apiEndpoint changes
+    const [resetSuccess, setResetSuccess] = React.useState(false);
+    const [authSuccess, setAuthSuccess] = React.useState(false);
+    const [successMessage, setSuccessMessage] = React.useState();
+    const [showResendVerification, setShowResendVerification] = React.useState(false);
+    const [resendEmail, setResendEmail] = React.useState();
+    const [showRequestNewReset, setShowRequestNewReset] = React.useState(false);
+    const [resetRequestEmail, setResetRequestEmail] = React.useState();
+    const [resetToken, setResetToken] = React.useState(); // Store the reset token from URL
+    const [config, setConfig] = React.useState(null);
+    const [configLoading, setConfigLoading] = React.useState(!skipConfigFetch);
+    const [showEmailForm, setShowEmailForm] = React.useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
+    const api = new AuthAPI(apiEndpoint, clientId, clientName);
+    const auth = useAuth();
+    // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
+    // IMPORTANT: Preserve bearer token during reinitialization
     React.useEffect(() => {
-        if (apiEndpoint) {
-            smartlinks__namespace.initializeApi({
-                baseURL: apiEndpoint,
-                proxyMode: false,
-                ngrokSkipBrowserWarning: true,
-            });
-        }
-    }, [apiEndpoint]);
-    // Load user profile on mount
+        const reinitializeWithToken = async () => {
+            if (apiEndpoint) {
+                // Get current token before reinitializing
+                const currentToken = await auth.getToken();
+                smartlinks__namespace.initializeApi({
+                    baseURL: apiEndpoint,
+                    proxyMode: false, // Direct API calls when custom endpoint is provided
+                    ngrokSkipBrowserWarning: true,
+                });
+                // Restore bearer token after reinitialization using auth.verifyToken
+                if (currentToken) {
+                    smartlinks__namespace.auth.verifyToken(currentToken).catch(err => {
+                        console.warn('Failed to restore bearer token after reinit:', err);
+                    });
+                }
+            }
+        };
+        reinitializeWithToken();
+    }, [apiEndpoint, auth]);
+    // Get the effective redirect URL (use prop or default to current page)
+    const getRedirectUrl = () => {
+        if (redirectUrl)
+            return redirectUrl;
+        // Get the full current URL including hash routes
+        // Remove any existing query parameters to avoid duplication
+        const currentUrl = window.location.href.split('?')[0];
+        return currentUrl;
+    };
+    // Fetch UI configuration
     React.useEffect(() => {
-        loadProfile();
-    }, [clientId]);
-    const loadProfile = async () => {
-        if (!auth.isAuthenticated) {
-            setError('You must be logged in to manage your account');
+        if (skipConfigFetch) {
+            setConfig(customization || {});
             return;
         }
+        const fetchConfig = async () => {
+            try {
+                // Check localStorage cache first
+                const cacheKey = `auth_ui_config_${clientId || 'default'}`;
+                const cached = localStorage.getItem(cacheKey);
+                if (cached) {
+                    const { config: cachedConfig, timestamp } = JSON.parse(cached);
+                    const age = Date.now() - timestamp;
+                    // Use cache if less than 1 hour old
+                    if (age < 3600000) {
+                        setConfig({ ...cachedConfig, ...customization });
+                        setConfigLoading(false);
+                        // Fetch in background to update cache
+                        api.fetchConfig().then(freshConfig => {
+                            localStorage.setItem(cacheKey, JSON.stringify({
+                                config: freshConfig,
+                                timestamp: Date.now()
+                            }));
+                        });
+                        return;
+                    }
+                }
+                // Fetch from API
+                const fetchedConfig = await api.fetchConfig();
+                // Merge with customization props (props take precedence)
+                const mergedConfig = { ...fetchedConfig, ...customization };
+                setConfig(mergedConfig);
+                // Cache the fetched config
+                localStorage.setItem(cacheKey, JSON.stringify({
+                    config: fetchedConfig,
+                    timestamp: Date.now()
+                }));
+            }
+            catch (err) {
+                console.error('Failed to fetch config:', err);
+                setConfig(customization || {});
+            }
+            finally {
+                setConfigLoading(false);
+            }
+        };
+        fetchConfig();
+    }, [apiEndpoint, clientId, customization, skipConfigFetch]);
+    // Reset showEmailForm when mode changes away from login/register
+    React.useEffect(() => {
+        if (mode !== 'login' && mode !== 'register') {
+            setShowEmailForm(false);
+        }
+    }, [mode]);
+    // Handle URL-based auth flows (email verification, password reset)
+    React.useEffect(() => {
+        // Helper to get URL parameters from either hash or search
+        const getUrlParams = () => {
+            // First check if there are params in the hash (for hash routing)
+            const hash = window.location.hash;
+            const hashQueryIndex = hash.indexOf('?');
+            if (hashQueryIndex !== -1) {
+                // Extract query string from hash (e.g., #/test?mode=verifyEmail&token=abc)
+                const hashQuery = hash.substring(hashQueryIndex + 1);
+                return new URLSearchParams(hashQuery);
+            }
+            // Fall back to regular search params (for non-hash routing)
+            return new URLSearchParams(window.location.search);
+        };
+        const params = getUrlParams();
+        const urlMode = params.get('mode');
+        const token = params.get('token');
+        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
+        if (urlMode && token) {
+            handleURLBasedAuth(urlMode, token);
+        }
+    }, []);
+    const handleURLBasedAuth = async (urlMode, token) => {
         setLoading(true);
         setError(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: GET /api/v1/authkit/:clientId/account/profile
-            // SDK method: smartlinks.authKit.getProfile(clientId)
-            // Temporary mock data for UI testing
-            const profileData = {
-                uid: auth.user?.uid || '',
-                email: auth.user?.email,
-                displayName: auth.user?.displayName,
-                phoneNumber: auth.user?.phoneNumber,
-                photoURL: auth.user?.photoURL,
-                emailVerified: true,
-                accountData: auth.accountData || {},
-            };
-            setProfile(profileData);
-            setDisplayName(profileData.displayName || '');
+            if (urlMode === 'verifyEmail') {
+                console.log('Verifying email with token:', token);
+                const response = await api.verifyEmailWithToken(token);
+                // Get email verification mode from response or config
+                const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
+                if ((verificationMode === 'verify-then-auto-login' || verificationMode === 'immediate') && response.token) {
+                    // Auto-login modes: Log the user in immediately if token is provided
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Email verified successfully! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Redirect after a brief delay to show success message
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    // verify-then-manual-login mode or no token: Show success but require manual login
+                    setAuthSuccess(true);
+                    setSuccessMessage('Email verified successfully! Please log in with your credentials.');
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Switch back to login mode after a delay
+                    setTimeout(() => {
+                        setAuthSuccess(false);
+                        setMode('login');
+                    }, 3000);
+                }
+            }
+            else if (urlMode === 'resetPassword') {
+                console.log('Verifying reset token:', token);
+                // Verify token is valid, then show password reset form
+                await api.verifyResetToken(token);
+                setResetToken(token); // Store token for use in password reset
+                setMode('reset-password');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'magicLink') {
+                console.log('Verifying magic link token:', token);
+                const response = await api.verifyMagicLink(token);
+                // Auto-login with magic link if token is provided
+                if (response.token) {
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Magic link verified! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Redirect after a brief delay to show success message
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - no token received');
+                }
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            console.error('URL-based auth error:', err);
+            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            // If it's an email verification error (expired/invalid token), show resend option
+            if (urlMode === 'verifyEmail') {
+                setError(`${errorMessage} - Please enter your email below to receive a new verification link.`);
+                setShowResendVerification(true);
+                setMode('login'); // Show the login form UI
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'resetPassword') {
+                // If password reset token is invalid/expired, show request new reset link option
+                setError(`${errorMessage} - Please enter your email below to receive a new password reset link.`);
+                setShowRequestNewReset(true);
+                setMode('login');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'magicLink') {
+                // If magic link is invalid/expired
+                setError(`${errorMessage} - Please request a new magic link below.`);
+                setMode('magic-link');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else {
+                setError(errorMessage);
+            }
+            onAuthError?.(err instanceof Error ? err : new Error('An error occurred'));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleUpdateProfile = async (e) => {
-        e.preventDefault();
+    const handleEmailAuth = async (data) => {
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
+        setAuthSuccess(false);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/update-profile
-            // SDK method: smartlinks.authKit.updateProfile(clientId, updateData)
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-profile');
-            console.log('Update data:', { displayName });
-            // Uncomment when backend is ready:
-            // const updateData: ProfileUpdateData = {
-            //   displayName: displayName || undefined,
-            //   photoURL: photoURL || undefined,
-            // };
-            // const updatedProfile = await smartlinks.authKit.updateProfile(clientId, updateData);
-            // setProfile(updatedProfile);
-            // setSuccess('Profile updated successfully!');
-            // setEditingSection(null);
-            // onProfileUpdated?.(updatedProfile);
+            const response = mode === 'login'
+                ? await api.login(data.email, data.password)
+                : await api.register({
+                    ...data,
+                    accountData: mode === 'register' ? accountData : undefined,
+                    redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
+                });
+            // Get email verification mode from response or config (default: verify-then-auto-login)
+            const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
+            const gracePeriodHours = config?.emailVerification?.gracePeriodHours || 24;
+            if (mode === 'register') {
+                // Handle different verification modes
+                if (verificationMode === 'immediate' && response.token) {
+                    // Immediate mode: Log in right away if token is provided
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    const deadline = response.emailVerificationDeadline
+                        ? new Date(response.emailVerificationDeadline).toLocaleString()
+                        : `${gracePeriodHours} hours`;
+                    setSuccessMessage(`Account created! You're logged in now. Please verify your email by ${deadline} to keep your account active.`);
+                    if (response.token) {
+                        onAuthSuccess(response.token, response.user, response.accountData);
+                    }
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else if (verificationMode === 'verify-then-auto-login') {
+                    // Verify-then-auto-login mode: Don't log in yet, but will auto-login after email verification
+                    setAuthSuccess(true);
+                    setSuccessMessage('Account created! Please check your email and click the verification link to complete your registration.');
+                }
+                else {
+                    // verify-then-manual-login mode: Traditional flow
+                    setAuthSuccess(true);
+                    setSuccessMessage('Account created successfully! Please check your email to verify your account, then log in.');
+                }
+            }
+            else {
+                // Login mode - always log in if token is provided
+                if (response.token) {
+                    // Check for account lock or verification requirements
+                    if (response.accountLocked) {
+                        throw new Error('Your account has been locked due to unverified email. Please check your email or request a new verification link.');
+                    }
+                    if (response.requiresEmailVerification) {
+                        throw new Error('Please verify your email before logging in. Check your inbox for the verification link.');
+                    }
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Login successful!');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - please verify your email before logging in.');
+                }
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+            // Check if error is about email already registered
+            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
+                setShowResendVerification(true);
+                setResendEmail(data.email);
+                setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
+            }
+            else {
+                setError(errorMessage);
+            }
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const cancelEdit = () => {
-        setEditingSection(null);
-        setDisplayName(profile?.displayName || '');
-        setNewEmail('');
-        setEmailPassword('');
-        setCurrentPassword('');
-        setNewPassword('');
-        setConfirmPassword('');
-        setNewPhone('');
-        setPhoneCode('');
-        setPhoneCodeSent(false);
-        setError(undefined);
-        setSuccess(undefined);
-    };
-    const handleChangeEmail = async (e) => {
-        e.preventDefault();
+    const handleResendVerification = async () => {
+        if (!resendEmail)
+            return;
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/change-email
-            // SDK method: smartlinks.authKit.changeEmail(clientId, newEmail, password)
-            // Note: No verification flow for now - direct email update
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-email');
-            console.log('Data:', { newEmail });
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.changeEmail(clientId, newEmail, emailPassword);
-            // setSuccess('Email changed successfully!');
-            // setEditingSection(null);
-            // setNewEmail('');
-            // setEmailPassword('');
-            // onEmailChangeRequested?.();
-            // await loadProfile(); // Reload to show new email
+            // For resend, we need the userId. If we don't have it, we need to handle this differently
+            // The backend should ideally handle this case
+            await api.resendVerification('unknown', resendEmail, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Verification email sent! Please check your inbox.');
+            setShowResendVerification(false);
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to change email';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleChangePassword = async (e) => {
-        e.preventDefault();
-        if (newPassword !== confirmPassword) {
-            setError('New passwords do not match');
-            return;
-        }
-        if (newPassword.length < 6) {
-            setError('Password must be at least 6 characters');
+    const handleRequestNewReset = async () => {
+        if (!resetRequestEmail)
             return;
-        }
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/change-password
-            // SDK method: smartlinks.authKit.changePassword(clientId, currentPassword, newPassword)
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-password');
-            console.log('Data: currentPassword and newPassword provided');
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.changePassword(clientId, currentPassword, newPassword);
-            // setSuccess('Password changed successfully!');
-            // setEditingSection(null);
-            // setCurrentPassword('');
-            // setNewPassword('');
-            // setConfirmPassword('');
-            // onPasswordChanged?.();
+            await api.requestPasswordReset(resetRequestEmail, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Password reset email sent! Please check your inbox.');
+            setShowRequestNewReset(false);
+            setResetRequestEmail('');
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send password reset email';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleSendPhoneCode = async () => {
+    const handleGoogleLogin = async () => {
+        // Use custom client ID from config, or fall back to default Smartlinks client ID
+        const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
+        // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
+        const oauthFlow = config?.googleOAuthFlow || 'oneTap';
         setLoading(true);
         setError(undefined);
         try {
-            await smartlinks__namespace.authKit.sendPhoneCode(clientId, newPhone);
-            setPhoneCodeSent(true);
-            setSuccess('Verification code sent to your phone');
+            const google = window.google;
+            if (!google) {
+                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
+            }
+            if (oauthFlow === 'popup') {
+                // Use OAuth2 popup flow (works in iframes but requires popup permission)
+                if (!google.accounts.oauth2) {
+                    throw new Error('Google OAuth2 not available');
+                }
+                const client = google.accounts.oauth2.initTokenClient({
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    callback: async (response) => {
+                        try {
+                            if (response.error) {
+                                throw new Error(response.error_description || response.error);
+                            }
+                            const accessToken = response.access_token;
+                            // Send access token to backend
+                            const authResponse = await api.loginWithGoogle(accessToken);
+                            if (authResponse.token) {
+                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                setAuthSuccess(true);
+                                setSuccessMessage('Google login successful!');
+                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            }
+                            else {
+                                throw new Error('Authentication failed - no token received');
+                            }
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                });
+                client.requestAccessToken();
+            }
+            else {
+                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                google.accounts.id.initialize({
+                    client_id: googleClientId,
+                    callback: async (response) => {
+                        try {
+                            const idToken = response.credential;
+                            const authResponse = await api.loginWithGoogle(idToken);
+                            if (authResponse.token) {
+                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                setAuthSuccess(true);
+                                setSuccessMessage('Google login successful!');
+                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            }
+                            else {
+                                throw new Error('Authentication failed - no token received');
+                            }
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                    auto_select: false,
+                    cancel_on_tap_outside: true,
+                });
+                google.accounts.id.prompt((notification) => {
+                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+                        setLoading(false);
+                    }
+                });
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send verification code';
+            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
-        }
-        finally {
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
             setLoading(false);
         }
     };
-    const handleUpdatePhone = async (e) => {
-        e.preventDefault();
+    const handlePhoneAuth = async (phoneNumber, verificationCode) => {
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/update-phone
-            // SDK method: smartlinks.authKit.updatePhone(clientId, phoneNumber, verificationCode)
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-phone');
-            console.log('Data:', { phoneNumber: newPhone, code: phoneCode });
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.updatePhone(clientId, newPhone, phoneCode);
-            // setSuccess('Phone number updated successfully!');
-            // setEditingSection(null);
-            // setNewPhone('');
-            // setPhoneCode('');
-            // setPhoneCodeSent(false);
-            // await loadProfile();
+            if (!verificationCode) {
+                // Send verification code via Twilio Verify Service
+                await api.sendPhoneCode(phoneNumber);
+                // Twilio Verify Service tracks the verification by phone number
+                // No need to store verificationId
+            }
+            else {
+                // Verify code - Twilio identifies the verification by phone number
+                const response = await api.verifyPhoneCode(phoneNumber, verificationCode);
+                // Update auth context with account data if token is provided
+                if (response.token) {
+                    auth.login(response.token, response.user, response.accountData);
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    if (redirectUrl) {
+                        window.location.href = redirectUrl;
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - no token received');
+                }
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to update phone number';
+            const errorMessage = err instanceof Error ? err.message : 'Phone authentication failed';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleDeleteAccount = async () => {
-        if (deleteConfirmText !== 'DELETE') {
-            setError('Please type DELETE to confirm account deletion');
-            return;
+    const handlePasswordReset = async (emailOrPassword, confirmPassword) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            if (resetToken && confirmPassword) {
+                // Complete password reset with token
+                await api.completePasswordReset(resetToken, emailOrPassword);
+                setResetSuccess(true);
+                setResetToken(undefined); // Clear token after successful reset
+            }
+            else {
+                // Request password reset email
+                await api.requestPasswordReset(emailOrPassword, getRedirectUrl());
+                setResetSuccess(true);
+            }
         }
-        if (!deletePassword) {
-            setError('Password is required');
-            return;
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Password reset failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
         }
+    };
+    const handleMagicLink = async (email) => {
         setLoading(true);
         setError(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: DELETE /api/v1/authkit/:clientId/account/delete
-            // SDK method: smartlinks.authKit.deleteAccount(clientId, password, confirmText)
-            // Note: This performs a SOFT DELETE (marks as deleted, obfuscates email)
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: DELETE /api/v1/authkit/:clientId/account/delete');
-            console.log('Data: password and confirmText="DELETE" provided');
-            console.log('Note: Backend should soft delete (mark deleted, obfuscate email, disable account)');
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.deleteAccount(clientId, deletePassword, deleteConfirmText);
-            // setSuccess('Account deleted successfully');
-            // onAccountDeleted?.();
-            // await auth.logout();
+            await api.sendMagicLink(email, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Magic link sent! Check your email to log in.');
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to delete account';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send magic link';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    if (!auth.isAuthenticated) {
-        return (jsxRuntime.jsx("div", { className: `account-management ${className}`, children: jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Please log in to manage your account" }) }));
-    }
-    if (loading && !profile) {
-        return (jsxRuntime.jsx("div", { className: `account-management ${className}`, children: jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Loading..." }) }));
-    }
-    return (jsxRuntime.jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsxRuntime.jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsxRuntime.jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Display Name" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsxRuntime.jsx("div", { className: "form-group", children: jsxRuntime.jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Email Address" }), jsxRuntime.jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxRuntime.jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsxRuntime.jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Password" }), jsxRuntime.jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxRuntime.jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsxRuntime.jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsxRuntime.jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsxRuntime.jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Phone Number" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsxRuntime.jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsxRuntime.jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxRuntime.jsxs("section", { className: "account-section danger-zone", children: [jsxRuntime.jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxRuntime.jsxs("div", { className: "delete-confirm", children: [jsxRuntime.jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsxRuntime.jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                                            setShowDeleteConfirm(false);
-                                            setDeletePassword('');
-                                            setDeleteConfirmText('');
-                                        }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
-};
-
-const ProtectedRoute = ({ children, fallback, redirectTo, }) => {
-    const { isAuthenticated, isLoading } = useAuth();
-    // Show loading state
-    if (isLoading) {
-        return jsxRuntime.jsx("div", { children: "Loading..." });
-    }
-    // If not authenticated, redirect or show fallback
-    if (!isAuthenticated) {
-        if (redirectTo) {
-            window.location.href = redirectTo;
-            return null;
-        }
-        return fallback ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : jsxRuntime.jsx("div", { children: "Access denied. Please log in." });
+    if (configLoading) {
+        return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
     }
-    // Render protected content
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
+                        color: 'var(--auth-primary-color, #4F46E5)',
+                        fontSize: '3rem',
+                        marginBottom: '1rem'
+                    }, children: "\u2713" }), jsxRuntime.jsx("h2", { style: {
+                        marginBottom: '0.5rem',
+                        fontSize: '1.5rem',
+                        fontWeight: 600
+                    }, children: successMessage?.includes('verified') ? 'Email Verified!' :
+                        successMessage?.includes('Magic link') ? 'Check Your Email!' :
+                            mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsxRuntime.jsx("p", { style: {
+                        color: '#6B7280',
+                        fontSize: '0.875rem'
+                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsxRuntime.jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error })) : mode === 'phone' ? (jsxRuntime.jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsxRuntime.jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
+                setMode('login');
+                setResetSuccess(false);
+                setResetToken(undefined); // Clear token when going back
+            }, loading: loading, error: error, success: resetSuccess, token: resetToken })) : (mode === 'login' || mode === 'register') ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showResendVerification ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(79, 70, 229, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Verification Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your verification link has expired or is no longer valid. Please enter your email address below and we'll send you a new verification link." }), jsxRuntime.jsx("input", { type: "email", value: resendEmail || '', onChange: (e) => setResendEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'var(--auth-primary-color, #4F46E5)',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resendEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsxRuntime.jsx("button", { onClick: () => {
+                                    setShowResendVerification(false);
+                                    setResendEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Password Reset Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your password reset link has expired or is no longer valid. Please enter your email address below and we'll send you a new password reset link." }), jsxRuntime.jsx("input", { type: "email", value: resetRequestEmail || '', onChange: (e) => setResetRequestEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleRequestNewReset, disabled: loading || !resetRequestEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: '#EF4444',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resetRequestEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resetRequestEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Reset Link' }), jsxRuntime.jsx("button", { onClick: () => {
+                                    setShowRequestNewReset(false);
+                                    setResetRequestEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
+                    const emailDisplayMode = config?.emailDisplayMode || 'form';
+                    const providerOrder = config?.providerOrder || (config?.enabledProviders || enabledProviders);
+                    const actualProviders = config?.enabledProviders || enabledProviders;
+                    // Button mode: show provider selection first, then email form if email is selected
+                    if (emailDisplayMode === 'button' && !showEmailForm) {
+                        return (jsxRuntime.jsx(ProviderButtons, { enabledProviders: actualProviders, providerOrder: providerOrder, onEmailLogin: () => setShowEmailForm(true), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }));
+                    }
+                    // Form mode or email button was clicked: show email form with other providers
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [emailDisplayMode === 'button' && showEmailForm && (jsxRuntime.jsx("button", { onClick: () => setShowEmailForm(false), style: {
+                                    marginBottom: '1rem',
+                                    padding: '0.5rem',
+                                    background: 'none',
+                                    border: 'none',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    cursor: 'pointer',
+                                    fontSize: '0.875rem',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.25rem'
+                                }, children: "\u2190 Back to options" })), jsxRuntime.jsx(EmailAuthForm, { mode: mode, onSubmit: handleEmailAuth, onModeSwitch: () => {
+                                    setMode(mode === 'login' ? 'register' : 'login');
+                                    setShowResendVerification(false);
+                                    setShowRequestNewReset(false);
+                                    setError(undefined);
+                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsxRuntime.jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
+                })() })) })) : null }));
 };
 
-const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], providerOrder, emailDisplayMode = 'form', theme = 'light', className, }) => {
-    const showEmail = enabledProviders.includes('email');
-    const showGoogle = enabledProviders.includes('google');
-    const showPhone = enabledProviders.includes('phone');
-    const showMagicLink = enabledProviders.includes('magic-link');
-    // Determine ordered providers (excluding email if in button mode)
-    const orderedProviders = providerOrder && providerOrder.length > 0
-        ? providerOrder.filter(p => enabledProviders.includes(p) && p !== 'email')
-        : enabledProviders.filter(p => p !== 'email');
-    const hasOtherProviders = showGoogle || showPhone || showMagicLink;
-    // Render provider button helper
-    const renderProviderButton = (provider) => {
-        if (provider === 'google' && showGoogle) {
-            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsxRuntime.jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsxRuntime.jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsxRuntime.jsx("span", { children: "Continue with Google" })] }, "google"));
-        }
-        if (provider === 'phone' && showPhone) {
-            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsxRuntime.jsx("span", { children: "Continue with Phone" })] }, "phone"));
-        }
-        if (provider === 'magic-link' && showMagicLink) {
-            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsxRuntime.jsx("span", { children: "Continue with Magic Link" })] }, "magic-link"));
-        }
-        if (provider === 'email' && showEmail && emailDisplayMode === 'button') {
-            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsxRuntime.jsx("span", { children: "Continue with Email" })] }, "email"));
-        }
-        return null;
-    };
-    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: customization, children: emailDisplayMode === 'button' ? (jsxRuntime.jsx("div", { className: "auth-provider-buttons", children: orderedProviders.concat(showEmail ? ['email'] : []).map(provider => renderProviderButton(provider)) })) : (
-        /* Form mode: show email form first, then other providers */
-        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showEmail && (jsxRuntime.jsxs("div", { className: "auth-form", children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Email" }), jsxRuntime.jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), jsxRuntime.jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), jsxRuntime.jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), jsxRuntime.jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasOtherProviders && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showEmail && (jsxRuntime.jsx("div", { className: "auth-or-divider", children: jsxRuntime.jsx("span", { children: "or continue with" }) })), jsxRuntime.jsx("div", { className: "auth-provider-buttons", children: orderedProviders.map(provider => renderProviderButton(provider)) })] }))] })) }));
-};
-
-// Default Smartlinks Google OAuth Client ID (public - safe to expose)
-const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, }) => {
-    const [mode, setMode] = React.useState(initialMode);
+const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', customization = {}, }) => {
+    const auth = useAuth();
     const [loading, setLoading] = React.useState(false);
+    const [profile, setProfile] = React.useState(null);
     const [error, setError] = React.useState();
-    const [resetSuccess, setResetSuccess] = React.useState(false);
-    const [authSuccess, setAuthSuccess] = React.useState(false);
-    const [successMessage, setSuccessMessage] = React.useState();
-    const [showResendVerification, setShowResendVerification] = React.useState(false);
-    const [resendEmail, setResendEmail] = React.useState();
-    const [showRequestNewReset, setShowRequestNewReset] = React.useState(false);
-    const [resetRequestEmail, setResetRequestEmail] = React.useState();
-    const [resetToken, setResetToken] = React.useState(); // Store the reset token from URL
-    const [config, setConfig] = React.useState(null);
-    const [configLoading, setConfigLoading] = React.useState(!skipConfigFetch);
-    const [showEmailForm, setShowEmailForm] = React.useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
-    const api = new AuthAPI(apiEndpoint, clientId, clientName);
-    const auth = useAuth();
-    // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
-    // IMPORTANT: Preserve bearer token during reinitialization
+    const [success, setSuccess] = React.useState();
+    // Track which section is being edited
+    const [editingSection, setEditingSection] = React.useState(null);
+    // Profile form state
+    const [displayName, setDisplayName] = React.useState('');
+    // Email change state
+    const [newEmail, setNewEmail] = React.useState('');
+    const [emailPassword, setEmailPassword] = React.useState('');
+    // Password change state
+    const [currentPassword, setCurrentPassword] = React.useState('');
+    const [newPassword, setNewPassword] = React.useState('');
+    const [confirmPassword, setConfirmPassword] = React.useState('');
+    // Phone change state (reuses existing sendPhoneCode flow)
+    const [newPhone, setNewPhone] = React.useState('');
+    const [phoneCode, setPhoneCode] = React.useState('');
+    const [phoneCodeSent, setPhoneCodeSent] = React.useState(false);
+    // Account deletion state
+    const [deletePassword, setDeletePassword] = React.useState('');
+    const [deleteConfirmText, setDeleteConfirmText] = React.useState('');
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, } = customization;
+    // Reinitialize Smartlinks SDK when apiEndpoint changes
     React.useEffect(() => {
         if (apiEndpoint) {
-            // Get current token before reinitializing
-            const currentToken = auth.getToken();
             smartlinks__namespace.initializeApi({
                 baseURL: apiEndpoint,
-                proxyMode: false, // Direct API calls when custom endpoint is provided
+                proxyMode: false,
                 ngrokSkipBrowserWarning: true,
             });
-            // Restore bearer token after reinitialization using auth.verifyToken
-            if (currentToken) {
-                smartlinks__namespace.auth.verifyToken(currentToken).catch(err => {
-                    console.warn('Failed to restore bearer token after reinit:', err);
-                });
-            }
         }
-    }, [apiEndpoint, auth]);
-    // Get the effective redirect URL (use prop or default to current page)
-    const getRedirectUrl = () => {
-        if (redirectUrl)
-            return redirectUrl;
-        // Get the full current URL including hash routes
-        // Remove any existing query parameters to avoid duplication
-        const currentUrl = window.location.href.split('?')[0];
-        return currentUrl;
-    };
-    // Fetch UI configuration
+    }, [apiEndpoint]);
+    // Load user profile on mount
     React.useEffect(() => {
-        if (skipConfigFetch) {
-            setConfig(customization || {});
+        loadProfile();
+    }, [clientId]);
+    const loadProfile = async () => {
+        if (!auth.isAuthenticated) {
+            setError('You must be logged in to manage your account');
             return;
         }
-        const fetchConfig = async () => {
-            try {
-                // Check localStorage cache first
-                const cacheKey = `auth_ui_config_${clientId || 'default'}`;
-                const cached = localStorage.getItem(cacheKey);
-                if (cached) {
-                    const { config: cachedConfig, timestamp } = JSON.parse(cached);
-                    const age = Date.now() - timestamp;
-                    // Use cache if less than 1 hour old
-                    if (age < 3600000) {
-                        setConfig({ ...cachedConfig, ...customization });
-                        setConfigLoading(false);
-                        // Fetch in background to update cache
-                        api.fetchConfig().then(freshConfig => {
-                            localStorage.setItem(cacheKey, JSON.stringify({
-                                config: freshConfig,
-                                timestamp: Date.now()
-                            }));
-                        });
-                        return;
-                    }
-                }
-                // Fetch from API
-                const fetchedConfig = await api.fetchConfig();
-                // Merge with customization props (props take precedence)
-                const mergedConfig = { ...fetchedConfig, ...customization };
-                setConfig(mergedConfig);
-                // Cache the fetched config
-                localStorage.setItem(cacheKey, JSON.stringify({
-                    config: fetchedConfig,
-                    timestamp: Date.now()
-                }));
-            }
-            catch (err) {
-                console.error('Failed to fetch config:', err);
-                setConfig(customization || {});
-            }
-            finally {
-                setConfigLoading(false);
-            }
-        };
-        fetchConfig();
-    }, [apiEndpoint, clientId, customization, skipConfigFetch]);
-    // Reset showEmailForm when mode changes away from login/register
-    React.useEffect(() => {
-        if (mode !== 'login' && mode !== 'register') {
-            setShowEmailForm(false);
-        }
-    }, [mode]);
-    // Handle URL-based auth flows (email verification, password reset)
-    React.useEffect(() => {
-        // Helper to get URL parameters from either hash or search
-        const getUrlParams = () => {
-            // First check if there are params in the hash (for hash routing)
-            const hash = window.location.hash;
-            const hashQueryIndex = hash.indexOf('?');
-            if (hashQueryIndex !== -1) {
-                // Extract query string from hash (e.g., #/test?mode=verifyEmail&token=abc)
-                const hashQuery = hash.substring(hashQueryIndex + 1);
-                return new URLSearchParams(hashQuery);
-            }
-            // Fall back to regular search params (for non-hash routing)
-            return new URLSearchParams(window.location.search);
-        };
-        const params = getUrlParams();
-        const urlMode = params.get('mode');
-        const token = params.get('token');
-        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
-        if (urlMode && token) {
-            handleURLBasedAuth(urlMode, token);
-        }
-    }, []);
-    const handleURLBasedAuth = async (urlMode, token) => {
-        setLoading(true);
-        setError(undefined);
-        try {
-            if (urlMode === 'verifyEmail') {
-                console.log('Verifying email with token:', token);
-                const response = await api.verifyEmailWithToken(token);
-                // Get email verification mode from response or config
-                const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
-                if ((verificationMode === 'verify-then-auto-login' || verificationMode === 'immediate') && response.token) {
-                    // Auto-login modes: Log the user in immediately if token is provided
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Email verified successfully! You are now logged in.');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Redirect after a brief delay to show success message
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    // verify-then-manual-login mode or no token: Show success but require manual login
-                    setAuthSuccess(true);
-                    setSuccessMessage('Email verified successfully! Please log in with your credentials.');
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Switch back to login mode after a delay
-                    setTimeout(() => {
-                        setAuthSuccess(false);
-                        setMode('login');
-                    }, 3000);
-                }
-            }
-            else if (urlMode === 'resetPassword') {
-                console.log('Verifying reset token:', token);
-                // Verify token is valid, then show password reset form
-                await api.verifyResetToken(token);
-                setResetToken(token); // Store token for use in password reset
-                setMode('reset-password');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'magicLink') {
-                console.log('Verifying magic link token:', token);
-                const response = await api.verifyMagicLink(token);
-                // Auto-login with magic link if token is provided
-                if (response.token) {
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Magic link verified! You are now logged in.');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Redirect after a brief delay to show success message
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - no token received');
-                }
-            }
-        }
-        catch (err) {
-            console.error('URL-based auth error:', err);
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
-            // If it's an email verification error (expired/invalid token), show resend option
-            if (urlMode === 'verifyEmail') {
-                setError(`${errorMessage} - Please enter your email below to receive a new verification link.`);
-                setShowResendVerification(true);
-                setMode('login'); // Show the login form UI
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'resetPassword') {
-                // If password reset token is invalid/expired, show request new reset link option
-                setError(`${errorMessage} - Please enter your email below to receive a new password reset link.`);
-                setShowRequestNewReset(true);
-                setMode('login');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'magicLink') {
-                // If magic link is invalid/expired
-                setError(`${errorMessage} - Please request a new magic link below.`);
-                setMode('magic-link');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else {
-                setError(errorMessage);
-            }
-            onAuthError?.(err instanceof Error ? err : new Error('An error occurred'));
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const handleEmailAuth = async (data) => {
         setLoading(true);
         setError(undefined);
-        setAuthSuccess(false);
         try {
-            const response = mode === 'login'
-                ? await api.login(data.email, data.password)
-                : await api.register({
-                    ...data,
-                    accountData: mode === 'register' ? accountData : undefined,
-                    redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
-                });
-            // Get email verification mode from response or config (default: verify-then-auto-login)
-            const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
-            const gracePeriodHours = config?.emailVerification?.gracePeriodHours || 24;
-            if (mode === 'register') {
-                // Handle different verification modes
-                if (verificationMode === 'immediate' && response.token) {
-                    // Immediate mode: Log in right away if token is provided
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    const deadline = response.emailVerificationDeadline
-                        ? new Date(response.emailVerificationDeadline).toLocaleString()
-                        : `${gracePeriodHours} hours`;
-                    setSuccessMessage(`Account created! You're logged in now. Please verify your email by ${deadline} to keep your account active.`);
-                    if (response.token) {
-                        onAuthSuccess(response.token, response.user, response.accountData);
-                    }
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else if (verificationMode === 'verify-then-auto-login') {
-                    // Verify-then-auto-login mode: Don't log in yet, but will auto-login after email verification
-                    setAuthSuccess(true);
-                    setSuccessMessage('Account created! Please check your email and click the verification link to complete your registration.');
-                }
-                else {
-                    // verify-then-manual-login mode: Traditional flow
-                    setAuthSuccess(true);
-                    setSuccessMessage('Account created successfully! Please check your email to verify your account, then log in.');
-                }
-            }
-            else {
-                // Login mode - always log in if token is provided
-                if (response.token) {
-                    // Check for account lock or verification requirements
-                    if (response.accountLocked) {
-                        throw new Error('Your account has been locked due to unverified email. Please check your email or request a new verification link.');
-                    }
-                    if (response.requiresEmailVerification) {
-                        throw new Error('Please verify your email before logging in. Check your inbox for the verification link.');
-                    }
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Login successful!');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - please verify your email before logging in.');
-                }
-            }
+            // TODO: Backend implementation required
+            // Endpoint: GET /api/v1/authkit/:clientId/account/profile
+            // SDK method: smartlinks.authKit.getProfile(clientId)
+            // Temporary mock data for UI testing
+            const profileData = {
+                uid: auth.user?.uid || '',
+                email: auth.user?.email,
+                displayName: auth.user?.displayName,
+                phoneNumber: auth.user?.phoneNumber,
+                photoURL: auth.user?.photoURL,
+                emailVerified: true,
+                accountData: auth.accountData || {},
+            };
+            setProfile(profileData);
+            setDisplayName(profileData.displayName || '');
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
-            // Check if error is about email already registered
-            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
-                setShowResendVerification(true);
-                setResendEmail(data.email);
-                setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
-            }
-            else {
-                setError(errorMessage);
-            }
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleResendVerification = async () => {
-        if (!resendEmail)
-            return;
+    const handleUpdateProfile = async (e) => {
+        e.preventDefault();
         setLoading(true);
         setError(undefined);
+        setSuccess(undefined);
         try {
-            // For resend, we need the userId. If we don't have it, we need to handle this differently
-            // The backend should ideally handle this case
-            await api.resendVerification('unknown', resendEmail, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Verification email sent! Please check your inbox.');
-            setShowResendVerification(false);
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/update-profile
+            // SDK method: smartlinks.authKit.updateProfile(clientId, updateData)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-profile');
+            console.log('Update data:', { displayName });
+            // Uncomment when backend is ready:
+            // const updateData: ProfileUpdateData = {
+            //   displayName: displayName || undefined,
+            //   photoURL: photoURL || undefined,
+            // };
+            // const updatedProfile = await smartlinks.authKit.updateProfile(clientId, updateData);
+            // setProfile(updatedProfile);
+            // setSuccess('Profile updated successfully!');
+            // setEditingSection(null);
+            // onProfileUpdated?.(updatedProfile);
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleRequestNewReset = async () => {
-        if (!resetRequestEmail)
-            return;
+    const cancelEdit = () => {
+        setEditingSection(null);
+        setDisplayName(profile?.displayName || '');
+        setNewEmail('');
+        setEmailPassword('');
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+        setNewPhone('');
+        setPhoneCode('');
+        setPhoneCodeSent(false);
+        setError(undefined);
+        setSuccess(undefined);
+    };
+    const handleChangeEmail = async (e) => {
+        e.preventDefault();
         setLoading(true);
         setError(undefined);
+        setSuccess(undefined);
         try {
-            await api.requestPasswordReset(resetRequestEmail, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Password reset email sent! Please check your inbox.');
-            setShowRequestNewReset(false);
-            setResetRequestEmail('');
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/change-email
+            // SDK method: smartlinks.authKit.changeEmail(clientId, newEmail, password)
+            // Note: No verification flow for now - direct email update
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-email');
+            console.log('Data:', { newEmail });
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.changeEmail(clientId, newEmail, emailPassword);
+            // setSuccess('Email changed successfully!');
+            // setEditingSection(null);
+            // setNewEmail('');
+            // setEmailPassword('');
+            // onEmailChangeRequested?.();
+            // await loadProfile(); // Reload to show new email
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send password reset email';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to change email';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleGoogleLogin = async () => {
-        // Use custom client ID from config, or fall back to default Smartlinks client ID
-        const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
-        // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
-        const oauthFlow = config?.googleOAuthFlow || 'oneTap';
+    const handleChangePassword = async (e) => {
+        e.preventDefault();
+        if (newPassword !== confirmPassword) {
+            setError('New passwords do not match');
+            return;
+        }
+        if (newPassword.length < 6) {
+            setError('Password must be at least 6 characters');
+            return;
+        }
         setLoading(true);
         setError(undefined);
+        setSuccess(undefined);
         try {
-            const google = window.google;
-            if (!google) {
-                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
-            }
-            if (oauthFlow === 'popup') {
-                // Use OAuth2 popup flow (works in iframes but requires popup permission)
-                if (!google.accounts.oauth2) {
-                    throw new Error('Google OAuth2 not available');
-                }
-                const client = google.accounts.oauth2.initTokenClient({
-                    client_id: googleClientId,
-                    scope: 'openid email profile',
-                    callback: async (response) => {
-                        try {
-                            if (response.error) {
-                                throw new Error(response.error_description || response.error);
-                            }
-                            const accessToken = response.access_token;
-                            // Send access token to backend
-                            const authResponse = await api.loginWithGoogle(accessToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
-                            }
-                            else {
-                                throw new Error('Authentication failed - no token received');
-                            }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
-                            }
-                            setLoading(false);
-                        }
-                        catch (err) {
-                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
-                            setError(errorMessage);
-                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
-                            setLoading(false);
-                        }
-                    },
-                });
-                client.requestAccessToken();
-            }
-            else {
-                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
-                google.accounts.id.initialize({
-                    client_id: googleClientId,
-                    callback: async (response) => {
-                        try {
-                            const idToken = response.credential;
-                            const authResponse = await api.loginWithGoogle(idToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
-                            }
-                            else {
-                                throw new Error('Authentication failed - no token received');
-                            }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
-                            }
-                            setLoading(false);
-                        }
-                        catch (err) {
-                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
-                            setError(errorMessage);
-                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
-                            setLoading(false);
-                        }
-                    },
-                    auto_select: false,
-                    cancel_on_tap_outside: true,
-                });
-                google.accounts.id.prompt((notification) => {
-                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-                        setLoading(false);
-                    }
-                });
-            }
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/change-password
+            // SDK method: smartlinks.authKit.changePassword(clientId, currentPassword, newPassword)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-password');
+            console.log('Data: currentPassword and newPassword provided');
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.changePassword(clientId, currentPassword, newPassword);
+            // setSuccess('Password changed successfully!');
+            // setEditingSection(null);
+            // setCurrentPassword('');
+            // setNewPassword('');
+            // setConfirmPassword('');
+            // onPasswordChanged?.();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
             setLoading(false);
         }
     };
-    const handlePhoneAuth = async (phoneNumber, verificationCode) => {
+    const handleSendPhoneCode = async () => {
         setLoading(true);
         setError(undefined);
         try {
-            if (!verificationCode) {
-                // Send verification code via Twilio Verify Service
-                await api.sendPhoneCode(phoneNumber);
-                // Twilio Verify Service tracks the verification by phone number
-                // No need to store verificationId
-            }
-            else {
-                // Verify code - Twilio identifies the verification by phone number
-                const response = await api.verifyPhoneCode(phoneNumber, verificationCode);
-                // Update auth context with account data if token is provided
-                if (response.token) {
-                    auth.login(response.token, response.user, response.accountData);
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    if (redirectUrl) {
-                        window.location.href = redirectUrl;
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - no token received');
-                }
-            }
+            await smartlinks__namespace.authKit.sendPhoneCode(clientId, newPhone);
+            setPhoneCodeSent(true);
+            setSuccess('Verification code sent to your phone');
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send verification code';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleUpdatePhone = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(undefined);
+        setSuccess(undefined);
+        try {
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/update-phone
+            // SDK method: smartlinks.authKit.updatePhone(clientId, phoneNumber, verificationCode)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-phone');
+            console.log('Data:', { phoneNumber: newPhone, code: phoneCode });
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.updatePhone(clientId, newPhone, phoneCode);
+            // setSuccess('Phone number updated successfully!');
+            // setEditingSection(null);
+            // setNewPhone('');
+            // setPhoneCode('');
+            // setPhoneCodeSent(false);
+            // await loadProfile();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Phone authentication failed';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update phone number';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handlePasswordReset = async (emailOrPassword, confirmPassword) => {
+    const handleDeleteAccount = async () => {
+        if (deleteConfirmText !== 'DELETE') {
+            setError('Please type DELETE to confirm account deletion');
+            return;
+        }
+        if (!deletePassword) {
+            setError('Password is required');
+            return;
+        }
         setLoading(true);
         setError(undefined);
         try {
-            if (resetToken && confirmPassword) {
-                // Complete password reset with token
-                await api.completePasswordReset(resetToken, emailOrPassword);
-                setResetSuccess(true);
-                setResetToken(undefined); // Clear token after successful reset
-            }
-            else {
-                // Request password reset email
-                await api.requestPasswordReset(emailOrPassword, getRedirectUrl());
-                setResetSuccess(true);
-            }
+            // TODO: Backend implementation required
+            // Endpoint: DELETE /api/v1/authkit/:clientId/account/delete
+            // SDK method: smartlinks.authKit.deleteAccount(clientId, password, confirmText)
+            // Note: This performs a SOFT DELETE (marks as deleted, obfuscates email)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: DELETE /api/v1/authkit/:clientId/account/delete');
+            console.log('Data: password and confirmText="DELETE" provided');
+            console.log('Note: Backend should soft delete (mark deleted, obfuscate email, disable account)');
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.deleteAccount(clientId, deletePassword, deleteConfirmText);
+            // setSuccess('Account deleted successfully');
+            // onAccountDeleted?.();
+            // await auth.logout();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Password reset failed';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to delete account';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleMagicLink = async (email) => {
+    if (!auth.isAuthenticated) {
+        return (jsxRuntime.jsx("div", { className: `account-management ${className}`, children: jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Please log in to manage your account" }) }));
+    }
+    if (loading && !profile) {
+        return (jsxRuntime.jsx("div", { className: `account-management ${className}`, children: jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Loading..." }) }));
+    }
+    return (jsxRuntime.jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsxRuntime.jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsxRuntime.jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Display Name" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsxRuntime.jsx("div", { className: "form-group", children: jsxRuntime.jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Email Address" }), jsxRuntime.jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxRuntime.jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsxRuntime.jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Password" }), jsxRuntime.jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxRuntime.jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsxRuntime.jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsxRuntime.jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsxRuntime.jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Phone Number" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsxRuntime.jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsxRuntime.jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxRuntime.jsxs("section", { className: "account-section danger-zone", children: [jsxRuntime.jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxRuntime.jsxs("div", { className: "delete-confirm", children: [jsxRuntime.jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsxRuntime.jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                            setShowDeleteConfirm(false);
+                                            setDeletePassword('');
+                                            setDeleteConfirmText('');
+                                        }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
+};
+
+const SmartlinksClaimUI = ({ apiEndpoint, clientId, clientName, collectionId, productId, proofId, onClaimSuccess, onClaimError, additionalFields = [], theme = 'light', className = '', minimal = false, customization = {}, }) => {
+    const auth = useAuth();
+    const [claimStep, setClaimStep] = React.useState(auth.isAuthenticated ? 'questions' : 'auth');
+    const [claimData, setClaimData] = React.useState({});
+    const [error, setError] = React.useState();
+    const [loading, setLoading] = React.useState(false);
+    const handleAuthSuccess = (token, user, accountData) => {
+        // Authentication successful
+        auth.login(token, user, accountData);
+        // If no additional questions, proceed directly to claim
+        if (additionalFields.length === 0) {
+            executeClaim(user);
+        }
+        else {
+            setClaimStep('questions');
+        }
+    };
+    const handleQuestionSubmit = async (e) => {
+        e.preventDefault();
+        // Validate required fields
+        const missingFields = additionalFields
+            .filter(field => field.required && !claimData[field.name])
+            .map(field => field.label);
+        if (missingFields.length > 0) {
+            setError(`Please fill in: ${missingFields.join(', ')}`);
+            return;
+        }
+        // Execute claim with collected data
+        if (auth.user) {
+            executeClaim(auth.user);
+        }
+    };
+    const executeClaim = async (user) => {
+        setClaimStep('claiming');
         setLoading(true);
         setError(undefined);
         try {
-            await api.sendMagicLink(email, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Magic link sent! Check your email to log in.');
+            // Create attestation to claim the proof
+            const response = await smartlinks__namespace.attestation.create(collectionId, productId, proofId, {
+                public: {
+                    claimed: true,
+                    claimedAt: new Date().toISOString(),
+                    claimedBy: user.uid,
+                    ...claimData,
+                },
+                private: {},
+                proof: {},
+            });
+            setClaimStep('success');
+            // Call success callback
+            onClaimSuccess({
+                proofId,
+                user,
+                claimData,
+                attestationId: response.id,
+            });
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send magic link';
+            console.error('Claim error:', err);
+            const errorMessage = err instanceof Error ? err.message : 'Failed to claim proof';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onClaimError?.(err instanceof Error ? err : new Error(errorMessage));
+            setClaimStep(additionalFields.length > 0 ? 'questions' : 'auth');
         }
         finally {
             setLoading(false);
         }
     };
-    if (configLoading) {
-        return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
+    const handleFieldChange = (fieldName, value) => {
+        setClaimData(prev => ({
+            ...prev,
+            [fieldName]: value,
+        }));
+    };
+    // Render authentication step
+    if (claimStep === 'auth') {
+        return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(SmartlinksAuthUI, { apiEndpoint: apiEndpoint, clientId: clientId, clientName: clientName, onAuthSuccess: handleAuthSuccess, onAuthError: onClaimError, theme: theme, minimal: minimal, customization: customization.authConfig }) }));
     }
-    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: config, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
-                        color: 'var(--auth-primary-color, #4F46E5)',
-                        fontSize: '3rem',
-                        marginBottom: '1rem'
-                    }, children: "\u2713" }), jsxRuntime.jsx("h2", { style: {
-                        marginBottom: '0.5rem',
-                        fontSize: '1.5rem',
-                        fontWeight: 600
-                    }, children: successMessage?.includes('verified') ? 'Email Verified!' :
-                        successMessage?.includes('Magic link') ? 'Check Your Email!' :
-                            mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsxRuntime.jsx("p", { style: {
-                        color: '#6B7280',
-                        fontSize: '0.875rem'
-                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsxRuntime.jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error })) : mode === 'phone' ? (jsxRuntime.jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsxRuntime.jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
-                setMode('login');
-                setResetSuccess(false);
-                setResetToken(undefined); // Clear token when going back
-            }, loading: loading, error: error, success: resetSuccess, token: resetToken })) : (mode === 'login' || mode === 'register') ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showResendVerification ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(79, 70, 229, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Verification Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your verification link has expired or is no longer valid. Please enter your email address below and we'll send you a new verification link." }), jsxRuntime.jsx("input", { type: "email", value: resendEmail || '', onChange: (e) => setResendEmail(e.target.value), placeholder: "your@email.com", style: {
-                            width: '100%',
-                            padding: '0.625rem',
-                            marginBottom: '1rem',
-                            border: '1px solid var(--auth-border-color, #D1D5DB)',
-                            borderRadius: '0.375rem',
-                            fontSize: '0.875rem',
-                            boxSizing: 'border-box'
-                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, style: {
-                                    flex: 1,
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'var(--auth-primary-color, #4F46E5)',
-                                    color: 'white',
-                                    border: 'none',
-                                    borderRadius: '0.375rem',
-                                    cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: (loading || !resendEmail) ? 0.6 : 1
-                                }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsxRuntime.jsx("button", { onClick: () => {
-                                    setShowResendVerification(false);
-                                    setResendEmail('');
-                                    setError(undefined);
-                                }, disabled: loading, style: {
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'transparent',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
-                                    borderRadius: '0.375rem',
-                                    cursor: loading ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: loading ? 0.6 : 1
-                                }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Password Reset Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your password reset link has expired or is no longer valid. Please enter your email address below and we'll send you a new password reset link." }), jsxRuntime.jsx("input", { type: "email", value: resetRequestEmail || '', onChange: (e) => setResetRequestEmail(e.target.value), placeholder: "your@email.com", style: {
-                            width: '100%',
-                            padding: '0.625rem',
-                            marginBottom: '1rem',
-                            border: '1px solid var(--auth-border-color, #D1D5DB)',
-                            borderRadius: '0.375rem',
-                            fontSize: '0.875rem',
-                            boxSizing: 'border-box'
-                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleRequestNewReset, disabled: loading || !resetRequestEmail, style: {
-                                    flex: 1,
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: '#EF4444',
-                                    color: 'white',
-                                    border: 'none',
-                                    borderRadius: '0.375rem',
-                                    cursor: (loading || !resetRequestEmail) ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: (loading || !resetRequestEmail) ? 0.6 : 1
-                                }, children: loading ? 'Sending...' : 'Send New Reset Link' }), jsxRuntime.jsx("button", { onClick: () => {
-                                    setShowRequestNewReset(false);
-                                    setResetRequestEmail('');
-                                    setError(undefined);
-                                }, disabled: loading, style: {
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'transparent',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
-                                    borderRadius: '0.375rem',
-                                    cursor: loading ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: loading ? 0.6 : 1
-                                }, children: "Cancel" })] })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
-                    const emailDisplayMode = config?.emailDisplayMode || 'form';
-                    const providerOrder = config?.providerOrder || (config?.enabledProviders || enabledProviders);
-                    const actualProviders = config?.enabledProviders || enabledProviders;
-                    // Button mode: show provider selection first, then email form if email is selected
-                    if (emailDisplayMode === 'button' && !showEmailForm) {
-                        return (jsxRuntime.jsx(ProviderButtons, { enabledProviders: actualProviders, providerOrder: providerOrder, onEmailLogin: () => setShowEmailForm(true), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }));
-                    }
-                    // Form mode or email button was clicked: show email form with other providers
-                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [emailDisplayMode === 'button' && showEmailForm && (jsxRuntime.jsx("button", { onClick: () => setShowEmailForm(false), style: {
-                                    marginBottom: '1rem',
-                                    padding: '0.5rem',
-                                    background: 'none',
-                                    border: 'none',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    cursor: 'pointer',
-                                    fontSize: '0.875rem',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '0.25rem'
-                                }, children: "\u2190 Back to options" })), jsxRuntime.jsx(EmailAuthForm, { mode: mode, onSubmit: handleEmailAuth, onModeSwitch: () => {
-                                    setMode(mode === 'login' ? 'register' : 'login');
-                                    setShowResendVerification(false);
-                                    setShowRequestNewReset(false);
-                                    setError(undefined);
-                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsxRuntime.jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
-                })() })) })) : null }));
+    // Render additional questions step
+    if (claimStep === 'questions') {
+        return (jsxRuntime.jsxs("div", { className: `claim-questions ${className}`, children: [jsxRuntime.jsxs("div", { className: "claim-header mb-6", children: [jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-2", children: customization.claimTitle || 'Complete Your Claim' }), customization.claimDescription && (jsxRuntime.jsx("p", { className: "text-muted-foreground", children: customization.claimDescription }))] }), error && (jsxRuntime.jsx("div", { className: "claim-error bg-destructive/10 text-destructive px-4 py-3 rounded-md mb-4", children: error })), jsxRuntime.jsxs("form", { onSubmit: handleQuestionSubmit, className: "claim-form space-y-4", children: [additionalFields.map((field) => (jsxRuntime.jsxs("div", { className: "claim-field", children: [jsxRuntime.jsxs("label", { htmlFor: field.name, className: "block text-sm font-medium mb-2", children: [field.label, field.required && jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })] }), field.type === 'textarea' ? (jsxRuntime.jsx("textarea", { id: field.name, name: field.name, placeholder: field.placeholder, value: claimData[field.name] || '', onChange: (e) => handleFieldChange(field.name, e.target.value), required: field.required, className: "w-full px-3 py-2 border border-input rounded-md bg-background", rows: 4 })) : field.type === 'select' ? (jsxRuntime.jsxs("select", { id: field.name, name: field.name, value: claimData[field.name] || '', onChange: (e) => handleFieldChange(field.name, e.target.value), required: field.required, className: "w-full px-3 py-2 border border-input rounded-md bg-background", children: [jsxRuntime.jsx("option", { value: "", children: "Select..." }), field.options?.map((option) => (jsxRuntime.jsx("option", { value: option, children: option }, option)))] })) : (jsxRuntime.jsx("input", { id: field.name, name: field.name, type: field.type, placeholder: field.placeholder, value: claimData[field.name] || '', onChange: (e) => handleFieldChange(field.name, e.target.value), required: field.required, className: "w-full px-3 py-2 border border-input rounded-md bg-background" }))] }, field.name))), jsxRuntime.jsx("button", { type: "submit", disabled: loading, className: "claim-submit-button w-full bg-primary text-primary-foreground px-4 py-2 rounded-md font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed", children: loading ? 'Claiming...' : 'Submit Claim' })] })] }));
+    }
+    // Render claiming step (loading state)
+    if (claimStep === 'claiming') {
+        return (jsxRuntime.jsxs("div", { className: `claim-loading ${className} flex flex-col items-center justify-center py-12`, children: [jsxRuntime.jsx("div", { className: "claim-spinner w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4" }), jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Claiming your product..." })] }));
+    }
+    // Render success step
+    if (claimStep === 'success') {
+        return (jsxRuntime.jsxs("div", { className: `claim-success ${className} text-center py-12`, children: [jsxRuntime.jsx("div", { className: "claim-success-icon w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center text-3xl font-bold mx-auto mb-4", children: "\u2713" }), jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-2", children: "Claim Successful!" }), jsxRuntime.jsx("p", { className: "text-muted-foreground", children: customization.successMessage || 'Your product has been successfully claimed and registered to your account.' })] }));
+    }
+    return null;
+};
+
+const ProtectedRoute = ({ children, fallback, redirectTo, }) => {
+    const { isAuthenticated, isLoading } = useAuth();
+    // Show loading state
+    if (isLoading) {
+        return jsxRuntime.jsx("div", { children: "Loading..." });
+    }
+    // If not authenticated, redirect or show fallback
+    if (!isAuthenticated) {
+        if (redirectTo) {
+            window.location.href = redirectTo;
+            return null;
+        }
+        return fallback ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : jsxRuntime.jsx("div", { children: "Access denied. Please log in." });
+    }
+    // Render protected content
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+
+const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], providerOrder, emailDisplayMode = 'form', theme = 'light', className, minimal = false, }) => {
+    const showEmail = enabledProviders.includes('email');
+    const showGoogle = enabledProviders.includes('google');
+    const showPhone = enabledProviders.includes('phone');
+    const showMagicLink = enabledProviders.includes('magic-link');
+    // Determine ordered providers (excluding email if in button mode)
+    const orderedProviders = providerOrder && providerOrder.length > 0
+        ? providerOrder.filter(p => enabledProviders.includes(p) && p !== 'email')
+        : enabledProviders.filter(p => p !== 'email');
+    const hasOtherProviders = showGoogle || showPhone || showMagicLink;
+    // Render provider button helper
+    const renderProviderButton = (provider) => {
+        if (provider === 'google' && showGoogle) {
+            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsxRuntime.jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsxRuntime.jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsxRuntime.jsx("span", { children: "Continue with Google" })] }, "google"));
+        }
+        if (provider === 'phone' && showPhone) {
+            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsxRuntime.jsx("span", { children: "Continue with Phone" })] }, "phone"));
+        }
+        if (provider === 'magic-link' && showMagicLink) {
+            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsxRuntime.jsx("span", { children: "Continue with Magic Link" })] }, "magic-link"));
+        }
+        if (provider === 'email' && showEmail && emailDisplayMode === 'button') {
+            return (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsxRuntime.jsx("span", { children: "Continue with Email" })] }, "email"));
+        }
+        return null;
+    };
+    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: customization, minimal: minimal, children: emailDisplayMode === 'button' ? (jsxRuntime.jsx("div", { className: "auth-provider-buttons", children: orderedProviders.concat(showEmail ? ['email'] : []).map(provider => renderProviderButton(provider)) })) : (
+        /* Form mode: show email form first, then other providers */
+        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showEmail && (jsxRuntime.jsxs("div", { className: "auth-form", children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Email" }), jsxRuntime.jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), jsxRuntime.jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), jsxRuntime.jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), jsxRuntime.jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasOtherProviders && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showEmail && (jsxRuntime.jsx("div", { className: "auth-or-divider", children: jsxRuntime.jsx("span", { children: "or continue with" }) })), jsxRuntime.jsx("div", { className: "auth-provider-buttons", children: orderedProviders.map(provider => renderProviderButton(provider)) })] }))] })) }));
 };
 
 exports.AccountManagement = AccountManagement;
@@ -11838,6 +12526,7 @@ exports.AuthUIPreview = AuthUIPreview;
 exports.FirebaseAuthUI = SmartlinksAuthUI;
 exports.ProtectedRoute = ProtectedRoute;
 exports.SmartlinksAuthUI = SmartlinksAuthUI;
+exports.SmartlinksClaimUI = SmartlinksClaimUI;
 exports.tokenStorage = tokenStorage;
 exports.useAuth = useAuth;
 //# sourceMappingURL=index.js.map