@proveanything/smartlinks-auth-ui 0.1.27 → 0.1.29

package/dist/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useEffect, useState, useRef, useCallback, useMemo, createContext, useContext } from 'react';
+import React, { useEffect, useState, useMemo, useRef, useCallback, createContext, useContext } from 'react';
 import * as smartlinks from '@proveanything/smartlinks';
 import { iframe } from '@proveanything/smartlinks';
+import { post } from '@proveanything/smartlinks/dist/http';
 
 const AuthContainer = ({ children, theme = 'light', className = '', config, minimal = false, }) => {
     // Apply CSS variables for customization
@@ -58,22 +59,145 @@ const AuthContainer = ({ children, theme = 'light', className = '', config, mini
     return (jsx("div", { className: containerClass, children: jsxs("div", { className: cardClass, style: !minimal && config?.branding?.buttonStyle === 'square' ? { borderRadius: '4px' } : undefined, children: [(logoUrl || title || subtitle) && (jsxs("div", { className: "auth-header", children: [logoUrl && (jsx("div", { className: "auth-logo", children: jsx("img", { src: logoUrl, alt: "Logo", style: { maxWidth: '200px', height: 'auto', objectFit: 'contain' } }) })), title && jsx("h1", { className: "auth-title", children: title }), subtitle && jsx("p", { className: "auth-subtitle", children: subtitle })] })), jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && jsx("span", { children: "\u2022" }), config.branding.privacyUrl && jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
 };
 
-const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, additionalFields = [], }) => {
+/**
+ * Renders a form field based on schema definition
+ * Used in both registration and account management forms
+ */
+const SchemaFieldRenderer = ({ field, value, onChange, disabled = false, error, className = '', }) => {
+    const handleChange = (newValue) => {
+        onChange(field.key, newValue);
+    };
+    const inputId = `field-${field.key}`;
+    const commonProps = {
+        id: inputId,
+        className: `auth-input ${error ? 'auth-input-error' : ''} ${className}`,
+        disabled: disabled || field.readOnly,
+        'aria-describedby': error ? `${inputId}-error` : undefined,
+    };
+    const renderField = () => {
+        switch (field.widget) {
+            case 'select':
+                return (jsxs("select", { ...commonProps, value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required, children: [jsxs("option", { value: "", children: ["Select ", field.label, "..."] }), field.options?.map((option) => {
+                            const optionValue = typeof option === 'string' ? option : option.value;
+                            const optionLabel = typeof option === 'string' ? option : option.label;
+                            return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
+                        })] }));
+            case 'checkbox':
+                return (jsxs("label", { className: "auth-checkbox-label", style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [jsx("input", { type: "checkbox", id: inputId, checked: !!value, onChange: (e) => handleChange(e.target.checked), disabled: disabled || field.readOnly, required: field.required, className: "auth-checkbox" }), jsx("span", { children: field.description || field.label })] }));
+            case 'textarea':
+                return (jsx("textarea", { ...commonProps, value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required, placeholder: field.placeholder, rows: 3, style: { minHeight: '80px', resize: 'vertical' }, maxLength: field.validation?.maxLength }));
+            case 'number':
+                return (jsx("input", { ...commonProps, type: "number", value: value ?? '', onChange: (e) => handleChange(e.target.value ? Number(e.target.value) : undefined), required: field.required, placeholder: field.placeholder, min: field.validation?.min, max: field.validation?.max }));
+            case 'date':
+                return (jsx("input", { ...commonProps, type: "date", value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required }));
+            case 'tel':
+                return (jsx("input", { ...commonProps, type: "tel", value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required, placeholder: field.placeholder || '+1 (555) 000-0000', autoComplete: "tel" }));
+            case 'email':
+                return (jsx("input", { ...commonProps, type: "email", value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required, placeholder: field.placeholder || 'email@example.com', autoComplete: "email" }));
+            case 'text':
+            default:
+                return (jsx("input", { ...commonProps, type: "text", value: value || '', onChange: (e) => handleChange(e.target.value), required: field.required, placeholder: field.placeholder, minLength: field.validation?.minLength, maxLength: field.validation?.maxLength, pattern: field.validation?.pattern }));
+        }
+    };
+    // Checkbox has its own label
+    if (field.widget === 'checkbox') {
+        return (jsxs("div", { className: "auth-form-group", children: [renderField(), error && (jsx("div", { id: `${inputId}-error`, className: "auth-field-error", role: "alert", children: error }))] }));
+    }
+    return (jsxs("div", { className: "auth-form-group", children: [jsxs("label", { htmlFor: inputId, className: "auth-label", children: [field.label, field.required && jsx("span", { style: { color: 'var(--auth-error-color, #ef4444)' }, children: " *" })] }), field.description && (jsx("p", { className: "auth-field-description", style: { fontSize: '0.85em', color: 'var(--auth-text-muted)', marginBottom: '4px' }, children: field.description })), renderField(), error && (jsx("div", { id: `${inputId}-error`, className: "auth-field-error", role: "alert", children: error }))] }));
+};
+/**
+ * Helper to get all editable fields from schema
+ */
+const getEditableFields = (schema) => {
+    if (!schema)
+        return [];
+    const editableKeys = new Set(schema.settings.publicEditableFields);
+    const coreEditable = schema.fields.filter(f => f.editable && f.visible && editableKeys.has(f.key));
+    const customEditable = schema.customFields.filter(f => f.editable && f.visible);
+    return [...coreEditable, ...customEditable];
+};
+/**
+ * Helper to get registration fields based on config
+ */
+const getRegistrationFields = (schema, registrationConfig) => {
+    if (!schema || !registrationConfig.length)
+        return [];
+    const configMap = new Map(registrationConfig.map(c => [c.key, c]));
+    const allFields = [...schema.fields, ...schema.customFields];
+    return allFields
+        .filter(field => {
+        const config = configMap.get(field.key);
+        return config?.showDuringRegistration && field.visible;
+    })
+        .map(field => {
+        const config = configMap.get(field.key);
+        // Allow registration config to override required status
+        if (config?.required !== undefined) {
+            return { ...field, required: config.required };
+        }
+        return field;
+    });
+};
+/**
+ * Sort fields by placement (inline first, then post-credentials)
+ */
+const sortFieldsByPlacement = (fields, registrationConfig) => {
+    const configMap = new Map(registrationConfig.map(c => [c.key, c]));
+    const inline = [];
+    const postCredentials = [];
+    fields.forEach(field => {
+        const config = configMap.get(field.key);
+        if (config?.placement === 'post-credentials') {
+            postCredentials.push(field);
+        }
+        else {
+            inline.push(field);
+        }
+    });
+    return { inline, postCredentials };
+};
+
+const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, schema, registrationFieldsConfig = [], additionalFields = [], }) => {
     const [formData, setFormData] = useState({
         email: '',
         password: '',
         displayName: '',
     });
+    // Custom field values (separate from core AuthFormData)
+    const [customFieldValues, setCustomFieldValues] = useState({});
+    // Get schema-driven registration fields
+    const schemaFields = useMemo(() => {
+        if (!schema || !registrationFieldsConfig.length)
+            return { inline: [], postCredentials: [] };
+        const fields = getRegistrationFields(schema, registrationFieldsConfig);
+        return sortFieldsByPlacement(fields, registrationFieldsConfig);
+    }, [schema, registrationFieldsConfig]);
+    // Check if we have any additional fields to show
+    const hasSchemaFields = schemaFields.inline.length > 0 || schemaFields.postCredentials.length > 0;
+    const hasLegacyFields = additionalFields.length > 0 && !hasSchemaFields;
     const handleSubmit = async (e) => {
         e.preventDefault();
-        await onSubmit(formData);
+        // Merge custom field values into accountData for registration
+        const submitData = {
+            ...formData,
+            accountData: mode === 'register'
+                ? { ...(formData.accountData || {}), customFields: customFieldValues }
+                : undefined,
+        };
+        await onSubmit(submitData);
     };
     const handleChange = (field, value) => {
         setFormData(prev => ({ ...prev, [field]: value }));
     };
+    const handleCustomFieldChange = (key, value) => {
+        setCustomFieldValues(prev => ({ ...prev, [key]: value }));
+    };
+    const renderSchemaField = (field) => (jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key));
+    // Legacy field renderer (for backward compatibility)
+    const renderLegacyField = (field) => (jsxs("div", { className: "auth-form-group", children: [jsxs("label", { htmlFor: field.name, className: "auth-label", children: [field.label, field.required && jsx("span", { style: { color: 'var(--auth-error-color, #ef4444)' }, children: " *" })] }), field.type === 'select' ? (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: [jsx("option", { value: "", children: "Select..." }), field.options?.map((option) => (jsx("option", { value: option, children: option }, option)))] })) : field.type === 'textarea' ? (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' } })) : (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));
     return (jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [jsxs("div", { className: "auth-form-header", children: [jsx("h2", { className: "auth-form-title", children: mode === 'login' ? 'Sign in' : 'Create account' }), jsx("p", { className: "auth-form-subtitle", children: mode === 'login'
                             ? 'Welcome back! Please enter your credentials.'
-                            : 'Get started by creating your account.' })] }), error && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: 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' && (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), 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" })] })), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), 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" })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), 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) => (jsxs("div", { className: "auth-form-group", children: [jsxs("label", { htmlFor: field.name, className: "auth-label", children: [field.label, field.required && jsx("span", { style: { color: 'var(--auth-error-color, #ef4444)' }, children: " *" })] }), field.type === 'select' ? (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: [jsx("option", { value: "", children: "Select..." }), field.options?.map((option) => (jsx("option", { value: option, children: option }, option)))] })) : field.type === 'textarea' ? (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' } })) : (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' && (jsx("div", { className: "auth-form-footer", children: jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxs("div", { className: "auth-divider", children: [jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), 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 && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: 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' && (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), 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" })] })), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), 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" })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), 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' && hasSchemaFields && schemaFields.inline.map(renderSchemaField), mode === 'register' && hasLegacyFields && additionalFields.map(renderLegacyField), mode === 'register' && hasSchemaFields && schemaFields.postCredentials.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "auth-divider", style: { margin: '16px 0' }, children: jsx("span", { children: "Additional Information" }) }), schemaFields.postCredentials.map(renderSchemaField)] })), mode === 'login' && (jsx("div", { className: "auth-form-footer", children: jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxs("div", { className: "auth-divider", children: [jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), 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, }) => {
@@ -10641,6 +10765,8 @@ class AuthAPI {
         return smartlinks.authKit.login(this.clientId, email, password);
     }
     async register(data) {
+        // Note: redirectUrl is not passed to register - verification email is sent separately
+        // via sendEmailVerification() after registration for verify-then-* modes
         return smartlinks.authKit.register(this.clientId, {
             email: data.email,
             password: data.password,
@@ -10664,6 +10790,18 @@ class AuthAPI {
         // Pass token to SDK - backend verifies with Google
         return smartlinks.authKit.googleLogin(this.clientId, token);
     }
+    async loginWithGoogleCode(code, redirectUri) {
+        this.log.log('loginWithGoogleCode called:', {
+            codeLength: code?.length,
+            redirectUri,
+        });
+        // Exchange authorization code for tokens via backend
+        // Use direct HTTP call since SDK may not have this method in authKit namespace yet
+        return post(`/api/v1/authkit/${this.clientId}/google-code`, {
+            code,
+            redirectUri,
+        });
+    }
     async sendPhoneCode(phoneNumber) {
         return smartlinks.authKit.sendPhoneCode(this.clientId, phoneNumber);
     }
@@ -11147,7 +11285,7 @@ const tokenStorage = {
         const storage = await getStorage();
         const authToken = {
             token,
-            expiresAt: expiresAt || Date.now() + 3600000, // Default 1 hour
+            expiresAt: expiresAt || Date.now() + (7 * 24 * 60 * 60 * 1000), // Default 7 days (matches backend JWT)
         };
         await storage.setItem(TOKEN_KEY, authToken);
     },
@@ -11158,7 +11296,8 @@ const tokenStorage = {
             return null;
         // Check if token is expired
         if (authToken.expiresAt && authToken.expiresAt < Date.now()) {
-            await this.clearToken();
+            console.log('[TokenStorage] Token expired at:', new Date(authToken.expiresAt).toISOString(), '- clearing all auth data');
+            await this.clearAll(); // Clear ALL auth data to prevent orphaned state
             return null;
         }
         return authToken;
@@ -11238,6 +11377,9 @@ const tokenStorage = {
 
 const AuthContext = createContext(undefined);
 const AuthProvider = ({ children, proxyMode = false, accountCacheTTL = 5 * 60 * 1000, preloadAccountInfo = false, 
+// Token refresh settings
+enableAutoRefresh = true, refreshThresholdPercent = 75, // Refresh when 75% of token lifetime has passed
+refreshCheckInterval = 60 * 1000, // Check every minute
 // Contact & Interaction features
 collectionId, enableContactSync, enableInteractionTracking, interactionAppId, interactionConfig, }) => {
     const [user, setUser] = useState(null);
@@ -11658,11 +11800,11 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             unsubscribe();
         };
     }, [proxyMode, notifyAuthStateChange]);
-    const login = useCallback(async (authToken, authUser, authAccountData, isNewUser) => {
+    const login = useCallback(async (authToken, authUser, authAccountData, isNewUser, expiresAt) => {
         try {
             // Only persist to storage in standalone mode
             if (!proxyMode) {
-                await tokenStorage.saveToken(authToken);
+                await tokenStorage.saveToken(authToken, expiresAt);
                 await tokenStorage.saveUser(authUser);
                 if (authAccountData) {
                     await tokenStorage.saveAccountData(authAccountData);
@@ -11745,9 +11887,67 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         const storedToken = await tokenStorage.getToken();
         return storedToken ? storedToken.token : null;
     }, [proxyMode, token]);
+    // Get token with expiration info
+    const getTokenInfo = useCallback(async () => {
+        if (proxyMode) {
+            // In proxy mode, we don't have expiration info
+            if (token) {
+                return { token, expiresAt: 0, expiresIn: 0 };
+            }
+            return null;
+        }
+        const storedToken = await tokenStorage.getToken();
+        if (!storedToken?.token || !storedToken.expiresAt) {
+            return null;
+        }
+        return {
+            token: storedToken.token,
+            expiresAt: storedToken.expiresAt,
+            expiresIn: Math.max(0, storedToken.expiresAt - Date.now()),
+        };
+    }, [proxyMode, token]);
+    // Refresh token - validates current token and extends session if backend supports it
     const refreshToken = useCallback(async () => {
-        throw new Error('Token refresh must be implemented via your backend API');
-    }, []);
+        if (proxyMode) {
+            console.log('[AuthContext] Proxy mode: token refresh handled by parent');
+            throw new Error('Token refresh in proxy mode is handled by the parent application');
+        }
+        const storedToken = await tokenStorage.getToken();
+        if (!storedToken?.token) {
+            throw new Error('No token to refresh. Please login first.');
+        }
+        try {
+            console.log('[AuthContext] Refreshing token...');
+            // Verify current token is still valid
+            const verifyResult = await smartlinks.auth.verifyToken(storedToken.token);
+            if (!verifyResult.valid) {
+                console.warn('[AuthContext] Token is no longer valid, clearing session');
+                await logout();
+                throw new Error('Token expired or invalid. Please login again.');
+            }
+            // Token is valid - extend its expiration locally
+            // Backend JWT remains valid, we just update our local tracking
+            const newExpiresAt = Date.now() + (7 * 24 * 60 * 60 * 1000); // 7 days from now
+            await tokenStorage.saveToken(storedToken.token, newExpiresAt);
+            console.log('[AuthContext] Token verified and expiration extended to:', new Date(newExpiresAt).toISOString());
+            // Update verified state
+            setIsVerified(true);
+            pendingVerificationRef.current = false;
+            notifyAuthStateChange('TOKEN_REFRESH', user, storedToken.token, accountData, accountInfo, true, contact, contactId);
+            return storedToken.token;
+        }
+        catch (error) {
+            console.error('[AuthContext] Token refresh failed:', error);
+            // If it's a network error, don't logout
+            if (isNetworkError(error)) {
+                console.warn('[AuthContext] Network error during refresh, keeping session');
+                throw error;
+            }
+            // Auth error - clear session
+            await logout();
+            throw new Error('Token refresh failed. Please login again.');
+        }
+    }, [proxyMode, user, accountData, accountInfo, contact, contactId, notifyAuthStateChange, isNetworkError, logout]);
     const getAccount = useCallback(async (forceRefresh = false) => {
         try {
             if (proxyMode) {
@@ -11855,6 +12055,54 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             window.removeEventListener('offline', handleOffline);
         };
     }, [proxyMode, token, user, retryVerification]);
+    // Automatic background token refresh
+    useEffect(() => {
+        if (proxyMode || !enableAutoRefresh || !token || !user) {
+            return;
+        }
+        console.log('[AuthContext] Setting up automatic token refresh (interval:', refreshCheckInterval, 'ms, threshold:', refreshThresholdPercent, '%)');
+        const checkAndRefresh = async () => {
+            try {
+                const storedToken = await tokenStorage.getToken();
+                if (!storedToken?.expiresAt) {
+                    console.log('[AuthContext] No token expiration info, skipping refresh check');
+                    return;
+                }
+                const now = Date.now();
+                const tokenLifetime = storedToken.expiresAt - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000)); // Assume 7-day lifetime
+                const tokenAge = now - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000));
+                const percentUsed = (tokenAge / tokenLifetime) * 100;
+                // Calculate time remaining
+                const timeRemaining = storedToken.expiresAt - now;
+                const hoursRemaining = Math.round(timeRemaining / (60 * 60 * 1000));
+                if (percentUsed >= refreshThresholdPercent) {
+                    console.log(`[AuthContext] Token at ${Math.round(percentUsed)}% lifetime (${hoursRemaining}h remaining), refreshing...`);
+                    try {
+                        await refreshToken();
+                        console.log('[AuthContext] Automatic token refresh successful');
+                    }
+                    catch (refreshError) {
+                        console.warn('[AuthContext] Automatic token refresh failed:', refreshError);
+                        // Don't logout on refresh failure - user can still use the app until token actually expires
+                    }
+                }
+                else {
+                    console.log(`[AuthContext] Token at ${Math.round(percentUsed)}% lifetime (${hoursRemaining}h remaining), no refresh needed`);
+                }
+            }
+            catch (error) {
+                console.error('[AuthContext] Error checking token for refresh:', error);
+            }
+        };
+        // Check immediately on mount
+        checkAndRefresh();
+        // Set up periodic check
+        const intervalId = setInterval(checkAndRefresh, refreshCheckInterval);
+        return () => {
+            console.log('[AuthContext] Cleaning up automatic token refresh timer');
+            clearInterval(intervalId);
+        };
+    }, [proxyMode, enableAutoRefresh, refreshCheckInterval, refreshThresholdPercent, token, user, refreshToken]);
     const value = {
         user,
         token,
@@ -11872,6 +12120,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         login,
         logout,
         getToken,
+        getTokenInfo,
         refreshToken,
         getAccount,
         refreshAccount,
@@ -11889,6 +12138,14 @@ const useAuth = () => {
     return context;
 };
 
+// Helper to calculate expiration from AuthResponse
+const getExpirationFromResponse = (response) => {
+    if (response.expiresAt)
+        return response.expiresAt;
+    if (response.expiresIn)
+        return Date.now() + response.expiresIn;
+    return undefined; // Will use 7-day default in tokenStorage
+};
 // Default Smartlinks Google OAuth Client ID (public - safe to expose)
 const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
 // Default auth UI configuration when no clientId is provided
@@ -11932,6 +12189,28 @@ const loadGoogleIdentityServices = () => {
         document.head.appendChild(script);
     });
 };
+// Helper to detect WebView environments (Android/iOS)
+const detectWebView = () => {
+    const ua = navigator.userAgent;
+    // Android WebView detection
+    if (/Android/i.test(ua)) {
+        // Modern Android WebViews include "wv" in UA string
+        if (/\bwv\b/i.test(ua))
+            return true;
+        // Check for legacy Android bridge
+        if (typeof window.Android !== 'undefined')
+            return true;
+    }
+    // iOS WKWebView detection
+    if (/iPhone|iPad|iPod/i.test(ua)) {
+        const hasWebKitHandlers = !!window.webkit?.messageHandlers;
+        const isSafari = !!window.safari;
+        // WKWebView has webkit handlers but no safari object
+        if (hasWebKitHandlers && !isSafari)
+            return true;
+    }
+    return false;
+};
 // Helper to convert generic SDK errors to user-friendly messages
 const getFriendlyErrorMessage = (errorMessage) => {
     // Check for common HTTP status codes in the error message
@@ -11959,7 +12238,7 @@ const getFriendlyErrorMessage = (errorMessage) => {
     // Return original message if no pattern matches
     return errorMessage;
 };
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, }) => {
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, proxyMode = false, collectionId, }) => {
     const [mode, setMode] = useState(initialMode);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
@@ -11976,6 +12255,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [configLoading, setConfigLoading] = useState(!skipConfigFetch);
     const [showEmailForm, setShowEmailForm] = useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
     const [sdkReady, setSdkReady] = useState(false); // Track SDK initialization state
+    const [contactSchema, setContactSchema] = useState(null); // Schema for registration fields
     const log = useMemo(() => createLoggerWrapper(logger), [logger]);
     const api = new AuthAPI(apiEndpoint, clientId, clientName, logger);
     const auth = useAuth();
@@ -12150,6 +12430,24 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         };
         fetchConfig();
     }, [apiEndpoint, clientId, customization, skipConfigFetch, sdkReady, proxyMode, log]);
+    // Fetch contact schema for registration fields when collectionId is provided
+    useEffect(() => {
+        if (!collectionId || !sdkReady)
+            return;
+        const fetchSchema = async () => {
+            try {
+                console.log('[SmartlinksAuthUI] 📋 Fetching contact schema for collection:', collectionId);
+                const schema = await smartlinks.contact.publicGetSchema(collectionId);
+                console.log('[SmartlinksAuthUI] ✅ Schema loaded:', schema);
+                setContactSchema(schema);
+            }
+            catch (err) {
+                console.warn('[SmartlinksAuthUI] ⚠️ Failed to fetch schema (non-fatal):', err);
+                // Non-fatal - registration will work without schema fields
+            }
+        };
+        fetchSchema();
+    }, [collectionId, sdkReady]);
     // Reset showEmailForm when mode changes away from login/register
     useEffect(() => {
         if (mode !== 'login' && mode !== 'register') {
@@ -12174,8 +12472,15 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const params = getUrlParams();
         const urlMode = params.get('mode');
         const token = params.get('token');
-        log.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
-        if (urlMode && token) {
+        // Check for Google OAuth redirect callback
+        const authCode = params.get('code');
+        const state = params.get('state');
+        log.log('URL params detected:', { urlMode, token, authCode: !!authCode, state: !!state, hash: window.location.hash, search: window.location.search });
+        if (authCode && state) {
+            // Google OAuth redirect callback
+            handleGoogleAuthCodeCallback(authCode, state);
+        }
+        else if (urlMode && token) {
             handleURLBasedAuth(urlMode, token);
         }
     }, []);
@@ -12190,18 +12495,17 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 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, true);
+                    auth.login(response.token, response.user, response.accountData, true, getExpirationFromResponse(response));
                     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
+                    // For email verification deep links, redirect immediately if configured
+                    // (user came from an email link, so redirect is expected behavior)
                     if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
+                        window.location.href = redirectUrl;
                     }
                 }
                 else {
@@ -12233,18 +12537,17 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 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, true);
+                    auth.login(response.token, response.user, response.accountData, true, getExpirationFromResponse(response));
                     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
+                    // For magic link deep links, redirect immediately if configured
+                    // (user came from an email link, so redirect is expected behavior)
                     if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
+                        window.location.href = redirectUrl;
                     }
                 }
                 else {
@@ -12290,6 +12593,43 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             setLoading(false);
         }
     };
+    // Handle Google OAuth authorization code callback (from redirect flow)
+    const handleGoogleAuthCodeCallback = async (code, stateParam) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            // Parse state to get context
+            const state = JSON.parse(decodeURIComponent(stateParam));
+            log.log('Google OAuth redirect callback:', { clientId: state.clientId, returnPath: state.returnPath });
+            // Determine the redirect URI that was used (must match exactly)
+            const redirectUri = state.redirectUri || window.location.origin + window.location.pathname;
+            // Exchange authorization code for tokens
+            const response = await api.loginWithGoogleCode(code, redirectUri);
+            if (response.token) {
+                auth.login(response.token, response.user, response.accountData, response.isNewUser, getExpirationFromResponse(response));
+                setAuthSuccess(true);
+                setSuccessMessage('Google login successful!');
+                onAuthSuccess(response.token, response.user, response.accountData);
+            }
+            else {
+                throw new Error('Authentication failed - no token received');
+            }
+            // Clean URL parameters
+            const cleanUrl = window.location.origin + window.location.pathname + (state.returnPath?.includes('#') ? state.returnPath.split('?')[0] : window.location.hash.split('?')[0]);
+            window.history.replaceState({}, document.title, cleanUrl);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+            setError(getFriendlyErrorMessage(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            // Clean URL parameters even on error
+            const cleanUrl = window.location.origin + window.location.pathname + window.location.hash.split('?')[0];
+            window.history.replaceState({}, document.title, cleanUrl);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
     const handleEmailAuth = async (data) => {
         setLoading(true);
         setError(undefined);
@@ -12309,7 +12649,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 // Handle different verification modes
                 if (verificationMode === 'immediate' && response.token) {
                     // Immediate mode: Log in right away if token is provided (isNewUser=true for registration)
-                    auth.login(response.token, response.user, response.accountData, true);
+                    auth.login(response.token, response.user, response.accountData, true, getExpirationFromResponse(response));
                     setAuthSuccess(true);
                     const deadline = response.emailVerificationDeadline
                         ? new Date(response.emailVerificationDeadline).toLocaleString()
@@ -12318,19 +12658,37 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     if (response.token) {
                         onAuthSuccess(response.token, response.user, response.accountData);
                     }
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
+                    // Note: No automatic redirect - app controls navigation via onAuthSuccess callback
                 }
                 else if (verificationMode === 'verify-then-auto-login') {
                     // Verify-then-auto-login mode: Don't log in yet, but will auto-login after email verification
+                    // Send the verification email since backend register may not send it automatically
+                    if (response.user?.uid && data.email) {
+                        try {
+                            await api.sendEmailVerification(response.user.uid, data.email, getRedirectUrl());
+                            log.log('Verification email sent after registration');
+                        }
+                        catch (verifyError) {
+                            log.warn('Failed to send verification email after registration:', verifyError);
+                            // Don't fail the registration, just log the warning
+                        }
+                    }
                     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
+                    // Send the verification email since backend register may not send it automatically
+                    if (response.user?.uid && data.email) {
+                        try {
+                            await api.sendEmailVerification(response.user.uid, data.email, getRedirectUrl());
+                            log.log('Verification email sent after registration');
+                        }
+                        catch (verifyError) {
+                            log.warn('Failed to send verification email after registration:', verifyError);
+                            // Don't fail the registration, just log the warning
+                        }
+                    }
                     setAuthSuccess(true);
                     setSuccessMessage('Account created successfully! Please check your email to verify your account, then log in.');
                 }
@@ -12345,15 +12703,11 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     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, false);
+                    auth.login(response.token, response.user, response.accountData, false, getExpirationFromResponse(response));
                     setAuthSuccess(true);
                     setSuccessMessage('Login successful!');
                     onAuthSuccess(response.token, response.user, response.accountData);
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
+                    // Note: No automatic redirect - app controls navigation via onAuthSuccess callback
                 }
                 else {
                     throw new Error('Authentication failed - please verify your email before logging in.');
@@ -12428,11 +12782,16 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         // 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 configuredFlow = config?.googleOAuthFlow || 'oneTap';
+        // For oneTap, automatically use redirect flow in WebView environments
+        const isWebView = detectWebView();
+        const oauthFlow = (configuredFlow === 'oneTap' && isWebView) ? 'redirect' : configuredFlow;
         // Log Google Auth configuration for debugging
         log.log('Google Auth initiated:', {
             googleClientId,
-            oauthFlow,
+            configuredFlow,
+            effectiveFlow: oauthFlow,
+            isWebView,
             currentOrigin: window.location.origin,
             currentHref: window.location.href,
             configGoogleClientId: config?.googleClientId,
@@ -12448,7 +12807,37 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 throw new Error('Google Identity Services failed to initialize');
             }
             log.log('Google Identity Services loaded, using flow:', oauthFlow);
-            if (oauthFlow === 'popup') {
+            if (oauthFlow === 'redirect') {
+                // Use OAuth2 redirect flow (works in WebViews and everywhere)
+                if (!google.accounts.oauth2) {
+                    throw new Error('Google OAuth2 not available');
+                }
+                // Build the redirect URI - use current URL without query params
+                const redirectUri = getRedirectUrl();
+                // Build state parameter to preserve context across redirect
+                const state = encodeURIComponent(JSON.stringify({
+                    clientId,
+                    returnPath: window.location.hash || window.location.pathname,
+                    redirectUri,
+                }));
+                log.log('Initializing Google OAuth2 redirect flow:', {
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    redirect_uri: redirectUri,
+                    state,
+                });
+                const client = google.accounts.oauth2.initCodeClient({
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    ux_mode: 'redirect',
+                    redirect_uri: redirectUri,
+                    state,
+                });
+                // This will navigate away from the page
+                client.requestCode();
+                return; // Don't set loading to false - we're navigating away
+            }
+            else 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');
@@ -12506,7 +12895,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                                 });
                                 if (authResponse.token) {
                                     // Google OAuth can be login or signup - use isNewUser flag from backend if available
-                                    auth.login(authResponse.token, authResponse.user, authResponse.accountData, authResponse.isNewUser);
+                                    auth.login(authResponse.token, authResponse.user, authResponse.accountData, authResponse.isNewUser, getExpirationFromResponse(authResponse));
                                     setAuthSuccess(true);
                                     setSuccessMessage('Google login successful!');
                                     onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
@@ -12514,11 +12903,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                                 else {
                                     throw new Error('Authentication failed - no token received');
                                 }
-                                if (redirectUrl) {
-                                    setTimeout(() => {
-                                        window.location.href = redirectUrl;
-                                    }, 2000);
-                                }
+                                // Note: No automatic redirect - app controls navigation via onAuthSuccess callback
                             }
                             catch (apiError) {
                                 const errorMessage = apiError instanceof Error ? apiError.message : 'Google login failed';
@@ -12543,7 +12928,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 client.requestAccessToken();
             }
             else {
-                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes or WebViews)
                 log.log('Initializing Google OneTap flow:', {
                     client_id: googleClientId,
                     origin: window.location.origin,
@@ -12556,7 +12941,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                             const authResponse = await api.loginWithGoogle(idToken);
                             if (authResponse.token) {
                                 // Google OAuth can be login or signup - use isNewUser flag from backend if available
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData, authResponse.isNewUser);
+                                auth.login(authResponse.token, authResponse.user, authResponse.accountData, authResponse.isNewUser, getExpirationFromResponse(authResponse));
                                 setAuthSuccess(true);
                                 setSuccessMessage('Google login successful!');
                                 onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
@@ -12564,11 +12949,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                             else {
                                 throw new Error('Authentication failed - no token received');
                             }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
-                            }
+                            // Note: No automatic redirect - app controls navigation via onAuthSuccess callback
                             setLoading(false);
                         }
                         catch (err) {
@@ -12580,8 +12961,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     },
                     auto_select: false,
                     cancel_on_tap_outside: true,
-                    // Note: use_fedcm_for_prompt omitted - requires Permissions-Policy header on hosting server
-                    // Will be needed when FedCM becomes mandatory in the future
+                    use_fedcm_for_prompt: true, // Enable FedCM for future browser compatibility
                 });
                 // Use timeout fallback instead of deprecated notification methods
                 // (isNotDisplayed/isSkippedMoment will stop working when FedCM becomes mandatory)
@@ -12618,7 +12998,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 // Update auth context with account data if token is provided
                 if (response.token) {
                     // Phone auth can be login or signup - use isNewUser flag from backend if available
-                    auth.login(response.token, response.user, response.accountData, response.isNewUser);
+                    auth.login(response.token, response.user, response.accountData, response.isNewUser, getExpirationFromResponse(response));
                     onAuthSuccess(response.token, response.user, response.accountData);
                     if (redirectUrl) {
                         window.location.href = redirectUrl;
@@ -12791,36 +13171,39 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                                     setShowResendVerification(false);
                                     setShowRequestNewReset(false);
                                     setError(undefined);
-                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
+                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, schema: contactSchema, registrationFieldsConfig: config?.registrationFields, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
                 })() })) })) : null }));
 };
 
-const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', customization = {}, }) => {
+const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, className = '', customization = {}, }) => {
     const auth = useAuth();
     const [loading, setLoading] = useState(false);
     const [profile, setProfile] = useState(null);
     const [error, setError] = useState();
     const [success, setSuccess] = useState();
+    // Schema state
+    const [schema, setSchema] = useState(null);
+    const [schemaLoading, setSchemaLoading] = useState(false);
     // Track which section is being edited
     const [editingSection, setEditingSection] = useState(null);
-    // Profile form state
+    // Form state for core fields
     const [displayName, setDisplayName] = useState('');
-    // Email change state
     const [newEmail, setNewEmail] = useState('');
     const [emailPassword, setEmailPassword] = useState('');
-    // Password change state
     const [currentPassword, setCurrentPassword] = useState('');
     const [newPassword, setNewPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
-    // Phone change state (reuses existing sendPhoneCode flow)
     const [newPhone, setNewPhone] = useState('');
     const [phoneCode, setPhoneCode] = useState('');
     const [phoneCodeSent, setPhoneCodeSent] = useState(false);
+    // Custom fields form state
+    const [customFieldValues, setCustomFieldValues] = useState({});
     // Account deletion state
     const [deletePassword, setDeletePassword] = useState('');
     const [deleteConfirmText, setDeleteConfirmText] = useState('');
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-    const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, } = customization;
+    const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, showCustomFields = true, // New: show schema-driven custom fields
+     } = customization;
     // Reinitialize Smartlinks SDK when apiEndpoint changes
     useEffect(() => {
         if (apiEndpoint) {
@@ -12831,10 +13214,32 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
             });
         }
     }, [apiEndpoint]);
-    // Load user profile on mount
+    // Load schema when collectionId is available
+    useEffect(() => {
+        if (!collectionId)
+            return;
+        const loadSchema = async () => {
+            setSchemaLoading(true);
+            try {
+                console.log('[AccountManagement] Loading schema for collection:', collectionId);
+                const schemaResult = await smartlinks.contact.publicGetSchema(collectionId);
+                console.log('[AccountManagement] Schema loaded:', schemaResult);
+                setSchema(schemaResult);
+            }
+            catch (err) {
+                console.warn('[AccountManagement] Failed to load schema:', err);
+                // Non-fatal - component works without schema
+            }
+            finally {
+                setSchemaLoading(false);
+            }
+        };
+        loadSchema();
+    }, [collectionId]);
+    // Load user profile and contact data on mount
     useEffect(() => {
         loadProfile();
-    }, [clientId]);
+    }, [clientId, collectionId]);
     const loadProfile = async () => {
         if (!auth.isAuthenticated) {
             setError('You must be logged in to manage your account');
@@ -12843,10 +13248,7 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
         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
+            // Get base profile from auth context
             const profileData = {
                 uid: auth.user?.uid || '',
                 email: auth.user?.email,
@@ -12858,6 +13260,17 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
             };
             setProfile(profileData);
             setDisplayName(profileData.displayName || '');
+            // Load contact custom fields if collectionId provided
+            if (collectionId && auth.contact) {
+                setCustomFieldValues(auth.contact.customFields || {});
+            }
+            else if (collectionId) {
+                // Try to fetch contact
+                const contact = await auth.getContact?.();
+                if (contact?.customFields) {
+                    setCustomFieldValues(contact.customFields);
+                }
+            }
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
@@ -12868,28 +13281,39 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
             setLoading(false);
         }
     };
+    const cancelEdit = useCallback(() => {
+        setEditingSection(null);
+        setDisplayName(profile?.displayName || '');
+        setNewEmail('');
+        setEmailPassword('');
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+        setNewPhone('');
+        setPhoneCode('');
+        setPhoneCodeSent(false);
+        setError(undefined);
+        setSuccess(undefined);
+        // Reset custom fields to original values
+        if (auth.contact?.customFields) {
+            setCustomFieldValues(auth.contact.customFields);
+        }
+    }, [profile, auth.contact]);
+    // Get editable custom fields from schema
+    const editableCustomFields = getEditableFields(schema).filter(f => !['email', 'displayName', 'phone', 'phoneNumber'].includes(f.key));
     const handleUpdateProfile = async (e) => {
         e.preventDefault();
         setLoading(true);
         setError(undefined);
         setSuccess(undefined);
         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);
+            await smartlinks.authKit.updateProfile(clientId, { displayName });
+            setSuccess('Profile updated successfully!');
+            setEditingSection(null);
+            // Update local state
+            if (profile) {
+                setProfile({ ...profile, displayName });
+            }
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
@@ -12900,19 +13324,29 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
             setLoading(false);
         }
     };
-    const cancelEdit = () => {
-        setEditingSection(null);
-        setDisplayName(profile?.displayName || '');
-        setNewEmail('');
-        setEmailPassword('');
-        setCurrentPassword('');
-        setNewPassword('');
-        setConfirmPassword('');
-        setNewPhone('');
-        setPhoneCode('');
-        setPhoneCodeSent(false);
+    const handleUpdateCustomFields = async (e) => {
+        e.preventDefault();
+        if (!collectionId) {
+            setError('Collection ID is required to update custom fields');
+            return;
+        }
+        setLoading(true);
         setError(undefined);
         setSuccess(undefined);
+        try {
+            console.log('[AccountManagement] Updating custom fields:', customFieldValues);
+            await auth.updateContactCustomFields?.(customFieldValues);
+            setSuccess('Profile updated successfully!');
+            setEditingSection(null);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
     };
     const handleChangeEmail = async (e) => {
         e.preventDefault();
@@ -12920,21 +13354,12 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
         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
+            const redirectUrl = window.location.href;
+            await smartlinks.authKit.changeEmail(clientId, newEmail, emailPassword, redirectUrl);
+            setSuccess('Email change requested. Please check your new email for verification.');
+            setEditingSection(null);
+            setNewEmail('');
+            setEmailPassword('');
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Failed to change email';
@@ -12959,20 +13384,12 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
         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 smartlinks.authKit.changePassword(clientId, currentPassword, newPassword);
+            setSuccess('Password changed successfully!');
+            setEditingSection(null);
+            setCurrentPassword('');
+            setNewPassword('');
+            setConfirmPassword('');
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
@@ -13006,20 +13423,13 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
         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();
+            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 : 'Failed to update phone number';
@@ -13042,19 +13452,9 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
         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 smartlinks.authKit.deleteAccount(clientId, deletePassword, deleteConfirmText);
+            setSuccess('Account deleted successfully');
+            await auth.logout();
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Failed to delete account';
@@ -13065,120 +13465,24 @@ const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', cus
             setLoading(false);
         }
     };
+    const handleCustomFieldChange = (key, value) => {
+        setCustomFieldValues(prev => ({ ...prev, [key]: value }));
+    };
     if (!auth.isAuthenticated) {
         return (jsx("div", { className: `account-management ${className}`, children: jsx("p", { className: "text-muted-foreground", children: "Please log in to manage your account" }) }));
     }
-    if (loading && !profile) {
+    if ((loading || schemaLoading) && !profile) {
         return (jsx("div", { className: `account-management ${className}`, children: jsx("p", { className: "text-muted-foreground", children: "Loading..." }) }));
     }
-    return (jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Display Name" }), jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsx("div", { className: "form-group", children: jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Email Address" }), jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Password" }), jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPassword", children: "New Password" }), 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 })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), 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 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Phone Number" }), jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), 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 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxs("section", { className: "account-section danger-zone", children: [jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxs("div", { className: "delete-confirm", children: [jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsx("button", { type: "button", onClick: () => {
+    return (jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Display Name" }), jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsx("div", { className: "form-group", children: jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showCustomFields && collectionId && editableCustomFields.length > 0 && (jsxs("section", { className: "account-section", children: [jsx("h3", { className: "section-title", style: { fontSize: '0.9rem', fontWeight: 600, marginBottom: '12px' }, children: "Additional Information" }), editingSection !== 'customFields' ? (jsxs(Fragment, { children: [editableCustomFields.map((field) => (jsx("div", { className: "account-field", children: jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: field.label }), jsx("div", { className: "field-value", children: customFieldValues[field.key] !== undefined && customFieldValues[field.key] !== ''
+                                                ? String(customFieldValues[field.key])
+                                                : 'Not set' })] }) }, field.key))), jsx("button", { type: "button", onClick: () => setEditingSection('customFields'), className: "auth-button button-secondary", style: { marginTop: '8px' }, children: "Edit Information" })] })) : (jsxs("form", { onSubmit: handleUpdateCustomFields, className: "edit-form", children: [editableCustomFields.map((field) => (jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key))), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Email Address" }), jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Password" }), jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPassword", children: "New Password" }), 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 })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), 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 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Phone Number" }), jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), 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 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxs("section", { className: "account-section danger-zone", children: [jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxs("div", { className: "delete-confirm", children: [jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsx("button", { type: "button", onClick: () => {
                                             setShowDeleteConfirm(false);
                                             setDeletePassword('');
                                             setDeleteConfirmText('');
                                         }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
 };
 
-const SmartlinksClaimUI = (props) => {
-    // Destructure AFTER logging raw props to debug proxyMode issue
-    const { apiEndpoint, clientId, clientName, collectionId, productId, proofId, onClaimSuccess, onClaimError, additionalFields = [], theme = 'light', className = '', minimal = false, proxyMode = false, customization = {}, } = props;
-    // Debug logging for proxyMode - log RAW props first
-    console.log('[SmartlinksClaimUI] 🔍 RAW props received:', props);
-    console.log('[SmartlinksClaimUI] 🔍 props.proxyMode value:', props.proxyMode);
-    console.log('[SmartlinksClaimUI] 🔍 typeof props.proxyMode:', typeof props.proxyMode);
-    console.log('[SmartlinksClaimUI] 🎯 Destructured proxyMode:', proxyMode);
-    const auth = useAuth();
-    const [claimStep, setClaimStep] = useState(auth.isAuthenticated ? 'questions' : 'auth');
-    const [claimData, setClaimData] = useState({});
-    const [error, setError] = useState();
-    const [loading, setLoading] = 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 {
-            // Create attestation to claim the proof
-            const response = await smartlinks.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) {
-            console.error('Claim error:', err);
-            const errorMessage = err instanceof Error ? err.message : 'Failed to claim proof';
-            setError(errorMessage);
-            onClaimError?.(err instanceof Error ? err : new Error(errorMessage));
-            setClaimStep(additionalFields.length > 0 ? 'questions' : 'auth');
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const handleFieldChange = (fieldName, value) => {
-        setClaimData(prev => ({
-            ...prev,
-            [fieldName]: value,
-        }));
-    };
-    // Render authentication step
-    if (claimStep === 'auth') {
-        console.log('[SmartlinksClaimUI] 🔑 Rendering auth step with proxyMode:', proxyMode);
-        return (jsx("div", { className: className, children: jsx(SmartlinksAuthUI, { apiEndpoint: apiEndpoint, clientId: clientId, clientName: clientName, onAuthSuccess: handleAuthSuccess, onAuthError: onClaimError, theme: theme, minimal: minimal, proxyMode: proxyMode, customization: customization.authConfig }) }));
-    }
-    // Render additional questions step
-    if (claimStep === 'questions') {
-        return (jsxs("div", { className: `claim-questions ${className}`, children: [jsxs("div", { className: "claim-header mb-6", children: [jsx("h2", { className: "text-2xl font-bold mb-2", children: customization.claimTitle || 'Complete Your Claim' }), customization.claimDescription && (jsx("p", { className: "text-muted-foreground", children: customization.claimDescription }))] }), error && (jsx("div", { className: "claim-error bg-destructive/10 text-destructive px-4 py-3 rounded-md mb-4", children: error })), jsxs("form", { onSubmit: handleQuestionSubmit, className: "claim-form space-y-4", children: [additionalFields.map((field) => (jsxs("div", { className: "claim-field", children: [jsxs("label", { htmlFor: field.name, className: "block text-sm font-medium mb-2", children: [field.label, field.required && jsx("span", { className: "text-destructive ml-1", children: "*" })] }), field.type === 'textarea' ? (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' ? (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: [jsx("option", { value: "", children: "Select..." }), field.options?.map((option) => (jsx("option", { value: option, children: option }, option)))] })) : (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))), 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 (jsxs("div", { className: `claim-loading ${className} flex flex-col items-center justify-center py-12`, children: [jsx("div", { className: "claim-spinner w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4" }), jsx("p", { className: "text-muted-foreground", children: "Claiming your product..." })] }));
-    }
-    // Render success step
-    if (claimStep === 'success') {
-        return (jsxs("div", { className: `claim-success ${className} text-center py-12`, children: [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" }), jsx("h2", { className: "text-2xl font-bold mb-2", children: "Claim Successful!" }), 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
@@ -13228,5 +13532,5 @@ const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', '
         jsxs(Fragment, { children: [showEmail && (jsxs("div", { className: "auth-form", children: [jsxs("div", { className: "auth-form-group", children: [jsx("label", { className: "auth-label", children: "Email" }), jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { className: "auth-label", children: "Password" }), jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasOtherProviders && (jsxs(Fragment, { children: [showEmail && (jsx("div", { className: "auth-or-divider", children: jsx("span", { children: "or continue with" }) })), jsx("div", { className: "auth-provider-buttons", children: orderedProviders.map(provider => renderProviderButton(provider)) })] }))] })) }));
 };
 
-export { AccountManagement, AuthProvider, AuthUIPreview, SmartlinksAuthUI as FirebaseAuthUI, ProtectedRoute, SmartlinksAuthUI, SmartlinksClaimUI, tokenStorage, useAuth };
+export { AccountManagement, AuthProvider, AuthUIPreview, SmartlinksAuthUI as FirebaseAuthUI, ProtectedRoute, SchemaFieldRenderer, SmartlinksAuthUI, getEditableFields, getRegistrationFields, sortFieldsByPlacement, tokenStorage, useAuth };
 //# sourceMappingURL=index.esm.js.map