@proveanything/smartlinks-auth-ui 0.1.4 → 0.1.5

package/dist/index.esm.js

@@ -47,7 +47,7 @@ const AuthContainer = ({ children, theme = 'light', className = '', config, mini
     // - null or empty string: hide logo completely
     // - string URL: use custom logo
     const logoUrl = config?.branding?.logoUrl === undefined
-        ? '/smartlinks-logo.png' // Default
+        ? 'https://smartlinks.app/smartlinks/landscape-medium.png' // Default Smartlinks logo
         : config?.branding?.logoUrl || null; // Custom or explicitly hidden
     const containerClass = minimal
         ? `auth-minimal auth-theme-${theme} ${className}`
@@ -11411,1092 +11411,1092 @@ const useAuth = () => {
     return context;
 };
 
-const AccountManagement = ({ apiEndpoint, clientId, onProfileUpdated, onEmailChangeRequested, onPasswordChanged, onAccountDeleted, onError, theme = 'light', className = '', customization = {}, minimal = false, }) => {
-    const auth = useAuth();
+// Default Smartlinks Google OAuth Client ID (public - safe to expose)
+const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
+    const [mode, setMode] = useState(initialMode);
     const [loading, setLoading] = useState(false);
-    const [profile, setProfile] = useState(null);
     const [error, setError] = useState();
-    const [success, setSuccess] = useState();
-    // Track which section is being edited
-    const [editingSection, setEditingSection] = useState(null);
-    // Profile form state
-    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);
-    // 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;
-    // Reinitialize Smartlinks SDK when apiEndpoint changes
+    const [resetSuccess, setResetSuccess] = useState(false);
+    const [authSuccess, setAuthSuccess] = useState(false);
+    const [successMessage, setSuccessMessage] = useState();
+    const [showResendVerification, setShowResendVerification] = useState(false);
+    const [resendEmail, setResendEmail] = useState();
+    const [showRequestNewReset, setShowRequestNewReset] = useState(false);
+    const [resetRequestEmail, setResetRequestEmail] = useState();
+    const [resetToken, setResetToken] = useState(); // Store the reset token from URL
+    const [config, setConfig] = useState(null);
+    const [configLoading, setConfigLoading] = useState(!skipConfigFetch);
+    const [showEmailForm, setShowEmailForm] = useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
+    const api = new AuthAPI(apiEndpoint, clientId, clientName);
+    const auth = useAuth();
+    // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
+    // IMPORTANT: Preserve bearer token during reinitialization
     useEffect(() => {
-        if (apiEndpoint) {
-            smartlinks.initializeApi({
-                baseURL: apiEndpoint,
-                proxyMode: false,
-                ngrokSkipBrowserWarning: true,
-            });
-        }
-    }, [apiEndpoint]);
-    // Load user profile on mount
+        const reinitializeWithToken = async () => {
+            if (apiEndpoint) {
+                // Get current token before reinitializing
+                const currentToken = await auth.getToken();
+                smartlinks.initializeApi({
+                    baseURL: apiEndpoint,
+                    proxyMode: false, // Direct API calls when custom endpoint is provided
+                    ngrokSkipBrowserWarning: true,
+                });
+                // Restore bearer token after reinitialization using auth.verifyToken
+                if (currentToken) {
+                    smartlinks.auth.verifyToken(currentToken).catch(err => {
+                        console.warn('Failed to restore bearer token after reinit:', err);
+                    });
+                }
+            }
+        };
+        reinitializeWithToken();
+    }, [apiEndpoint, auth]);
+    // Get the effective redirect URL (use prop or default to current page)
+    const getRedirectUrl = () => {
+        if (redirectUrl)
+            return redirectUrl;
+        // Get the full current URL including hash routes
+        // Remove any existing query parameters to avoid duplication
+        const currentUrl = window.location.href.split('?')[0];
+        return currentUrl;
+    };
+    // Fetch UI configuration
     useEffect(() => {
-        loadProfile();
-    }, [clientId]);
-    const loadProfile = async () => {
-        if (!auth.isAuthenticated) {
-            setError('You must be logged in to manage your account');
+        if (skipConfigFetch) {
+            setConfig(customization || {});
             return;
         }
-        setLoading(true);
-        setError(undefined);
-        try {
-            // TODO: Backend implementation required
-            // Endpoint: GET /api/v1/authkit/:clientId/account/profile
-            // SDK method: smartlinks.authKit.getProfile(clientId)
-            // Temporary mock data for UI testing
-            const profileData = {
-                uid: auth.user?.uid || '',
-                email: auth.user?.email,
-                displayName: auth.user?.displayName,
-                phoneNumber: auth.user?.phoneNumber,
-                photoURL: auth.user?.photoURL,
-                emailVerified: true,
-                accountData: auth.accountData || {},
-            };
-            setProfile(profileData);
-            setDisplayName(profileData.displayName || '');
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    const 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);
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        const fetchConfig = async () => {
+            try {
+                // Check localStorage cache first
+                const cacheKey = `auth_ui_config_${clientId || 'default'}`;
+                const cached = localStorage.getItem(cacheKey);
+                if (cached) {
+                    const { config: cachedConfig, timestamp } = JSON.parse(cached);
+                    const age = Date.now() - timestamp;
+                    // Use cache if less than 1 hour old
+                    if (age < 3600000) {
+                        setConfig({ ...cachedConfig, ...customization });
+                        setConfigLoading(false);
+                        // Fetch in background to update cache
+                        api.fetchConfig().then(freshConfig => {
+                            localStorage.setItem(cacheKey, JSON.stringify({
+                                config: freshConfig,
+                                timestamp: Date.now()
+                            }));
+                        });
+                        return;
+                    }
+                }
+                // Fetch from API
+                const fetchedConfig = await api.fetchConfig();
+                // Merge with customization props (props take precedence)
+                const mergedConfig = { ...fetchedConfig, ...customization };
+                setConfig(mergedConfig);
+                // Cache the fetched config
+                localStorage.setItem(cacheKey, JSON.stringify({
+                    config: fetchedConfig,
+                    timestamp: Date.now()
+                }));
+            }
+            catch (err) {
+                console.error('Failed to fetch config:', err);
+                setConfig(customization || {});
+            }
+            finally {
+                setConfigLoading(false);
+            }
+        };
+        fetchConfig();
+    }, [apiEndpoint, clientId, customization, skipConfigFetch]);
+    // Reset showEmailForm when mode changes away from login/register
+    useEffect(() => {
+        if (mode !== 'login' && mode !== 'register') {
+            setShowEmailForm(false);
         }
-        finally {
-            setLoading(false);
+    }, [mode]);
+    // Handle URL-based auth flows (email verification, password reset)
+    useEffect(() => {
+        // Helper to get URL parameters from either hash or search
+        const getUrlParams = () => {
+            // First check if there are params in the hash (for hash routing)
+            const hash = window.location.hash;
+            const hashQueryIndex = hash.indexOf('?');
+            if (hashQueryIndex !== -1) {
+                // Extract query string from hash (e.g., #/test?mode=verifyEmail&token=abc)
+                const hashQuery = hash.substring(hashQueryIndex + 1);
+                return new URLSearchParams(hashQuery);
+            }
+            // Fall back to regular search params (for non-hash routing)
+            return new URLSearchParams(window.location.search);
+        };
+        const params = getUrlParams();
+        const urlMode = params.get('mode');
+        const token = params.get('token');
+        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
+        if (urlMode && token) {
+            handleURLBasedAuth(urlMode, token);
         }
-    };
-    const cancelEdit = () => {
-        setEditingSection(null);
-        setDisplayName(profile?.displayName || '');
-        setNewEmail('');
-        setEmailPassword('');
-        setCurrentPassword('');
-        setNewPassword('');
-        setConfirmPassword('');
-        setNewPhone('');
-        setPhoneCode('');
-        setPhoneCodeSent(false);
-        setError(undefined);
-        setSuccess(undefined);
-    };
-    const handleChangeEmail = async (e) => {
-        e.preventDefault();
+    }, []);
+    const handleURLBasedAuth = async (urlMode, token) => {
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/change-email
-            // SDK method: smartlinks.authKit.changeEmail(clientId, newEmail, password)
-            // Note: No verification flow for now - direct email update
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-email');
-            console.log('Data:', { newEmail });
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.changeEmail(clientId, newEmail, emailPassword);
-            // setSuccess('Email changed successfully!');
-            // setEditingSection(null);
-            // setNewEmail('');
-            // setEmailPassword('');
-            // onEmailChangeRequested?.();
-            // await loadProfile(); // Reload to show new email
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to change email';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
-        }
-        finally {
-            setLoading(false);
+            if (urlMode === 'verifyEmail') {
+                console.log('Verifying email with token:', token);
+                const response = await api.verifyEmailWithToken(token);
+                // Get email verification mode from response or config
+                const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
+                if ((verificationMode === 'verify-then-auto-login' || verificationMode === 'immediate') && response.token) {
+                    // Auto-login modes: Log the user in immediately if token is provided
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Email verified successfully! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Redirect after a brief delay to show success message
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    // verify-then-manual-login mode or no token: Show success but require manual login
+                    setAuthSuccess(true);
+                    setSuccessMessage('Email verified successfully! Please log in with your credentials.');
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Switch back to login mode after a delay
+                    setTimeout(() => {
+                        setAuthSuccess(false);
+                        setMode('login');
+                    }, 3000);
+                }
+            }
+            else if (urlMode === 'resetPassword') {
+                console.log('Verifying reset token:', token);
+                // Verify token is valid, then show password reset form
+                await api.verifyResetToken(token);
+                setResetToken(token); // Store token for use in password reset
+                setMode('reset-password');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'magicLink') {
+                console.log('Verifying magic link token:', token);
+                const response = await api.verifyMagicLink(token);
+                // Auto-login with magic link if token is provided
+                if (response.token) {
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Magic link verified! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Redirect after a brief delay to show success message
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - no token received');
+                }
+            }
         }
-    };
-    const handleChangePassword = async (e) => {
-        e.preventDefault();
-        if (newPassword !== confirmPassword) {
-            setError('New passwords do not match');
-            return;
+        catch (err) {
+            console.error('URL-based auth error:', err);
+            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
+            // If it's an email verification error (expired/invalid token), show resend option
+            if (urlMode === 'verifyEmail') {
+                setError(`${errorMessage} - Please enter your email below to receive a new verification link.`);
+                setShowResendVerification(true);
+                setMode('login'); // Show the login form UI
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'resetPassword') {
+                // If password reset token is invalid/expired, show request new reset link option
+                setError(`${errorMessage} - Please enter your email below to receive a new password reset link.`);
+                setShowRequestNewReset(true);
+                setMode('login');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else if (urlMode === 'magicLink') {
+                // If magic link is invalid/expired
+                setError(`${errorMessage} - Please request a new magic link below.`);
+                setMode('magic-link');
+                // Clear the URL parameters
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }
+            else {
+                setError(errorMessage);
+            }
+            onAuthError?.(err instanceof Error ? err : new Error('An error occurred'));
         }
-        if (newPassword.length < 6) {
-            setError('Password must be at least 6 characters');
-            return;
+        finally {
+            setLoading(false);
         }
+    };
+    const handleEmailAuth = async (data) => {
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
+        setAuthSuccess(false);
         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?.();
+            const response = mode === 'login'
+                ? await api.login(data.email, data.password)
+                : await api.register({
+                    ...data,
+                    accountData: mode === 'register' ? accountData : undefined,
+                    redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
+                });
+            // Get email verification mode from response or config (default: verify-then-auto-login)
+            const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
+            const gracePeriodHours = config?.emailVerification?.gracePeriodHours || 24;
+            if (mode === 'register') {
+                // Handle different verification modes
+                if (verificationMode === 'immediate' && response.token) {
+                    // Immediate mode: Log in right away if token is provided
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    const deadline = response.emailVerificationDeadline
+                        ? new Date(response.emailVerificationDeadline).toLocaleString()
+                        : `${gracePeriodHours} hours`;
+                    setSuccessMessage(`Account created! You're logged in now. Please verify your email by ${deadline} to keep your account active.`);
+                    if (response.token) {
+                        onAuthSuccess(response.token, response.user, response.accountData);
+                    }
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else if (verificationMode === 'verify-then-auto-login') {
+                    // Verify-then-auto-login mode: Don't log in yet, but will auto-login after email verification
+                    setAuthSuccess(true);
+                    setSuccessMessage('Account created! Please check your email and click the verification link to complete your registration.');
+                }
+                else {
+                    // verify-then-manual-login mode: Traditional flow
+                    setAuthSuccess(true);
+                    setSuccessMessage('Account created successfully! Please check your email to verify your account, then log in.');
+                }
+            }
+            else {
+                // Login mode - always log in if token is provided
+                if (response.token) {
+                    // Check for account lock or verification requirements
+                    if (response.accountLocked) {
+                        throw new Error('Your account has been locked due to unverified email. Please check your email or request a new verification link.');
+                    }
+                    if (response.requiresEmailVerification) {
+                        throw new Error('Please verify your email before logging in. Check your inbox for the verification link.');
+                    }
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Login successful!');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - please verify your email before logging in.');
+                }
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
-            setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
+            // Check if error is about email already registered
+            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
+                setShowResendVerification(true);
+                setResendEmail(data.email);
+                setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
+            }
+            else {
+                setError(errorMessage);
+            }
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleSendPhoneCode = async () => {
+    const handleResendVerification = async () => {
+        if (!resendEmail)
+            return;
         setLoading(true);
         setError(undefined);
         try {
-            await smartlinks.authKit.sendPhoneCode(clientId, newPhone);
-            setPhoneCodeSent(true);
-            setSuccess('Verification code sent to your phone');
+            // For resend, we need the userId. If we don't have it, we need to handle this differently
+            // The backend should ideally handle this case
+            await api.resendVerification('unknown', resendEmail, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Verification email sent! Please check your inbox.');
+            setShowResendVerification(false);
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send verification code';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleUpdatePhone = async (e) => {
-        e.preventDefault();
+    const handleRequestNewReset = async () => {
+        if (!resetRequestEmail)
+            return;
         setLoading(true);
         setError(undefined);
-        setSuccess(undefined);
         try {
-            // TODO: Backend implementation required
-            // Endpoint: POST /api/v1/authkit/:clientId/account/update-phone
-            // SDK method: smartlinks.authKit.updatePhone(clientId, phoneNumber, verificationCode)
-            setError('Backend API not yet implemented. See console for required endpoint.');
-            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-phone');
-            console.log('Data:', { phoneNumber: newPhone, code: phoneCode });
-            // Uncomment when backend is ready:
-            // await smartlinks.authKit.updatePhone(clientId, newPhone, phoneCode);
-            // setSuccess('Phone number updated successfully!');
-            // setEditingSection(null);
-            // setNewPhone('');
-            // setPhoneCode('');
-            // setPhoneCodeSent(false);
-            // await loadProfile();
+            await api.requestPasswordReset(resetRequestEmail, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Password reset email sent! Please check your inbox.');
+            setShowRequestNewReset(false);
+            setResetRequestEmail('');
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to update phone number';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send password reset email';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleDeleteAccount = async () => {
-        if (deleteConfirmText !== 'DELETE') {
-            setError('Please type DELETE to confirm account deletion');
-            return;
+    const handleGoogleLogin = async () => {
+        // Use custom client ID from config, or fall back to default Smartlinks client ID
+        const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
+        // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
+        const oauthFlow = config?.googleOAuthFlow || 'oneTap';
+        setLoading(true);
+        setError(undefined);
+        try {
+            const google = window.google;
+            if (!google) {
+                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
+            }
+            if (oauthFlow === 'popup') {
+                // Use OAuth2 popup flow (works in iframes but requires popup permission)
+                if (!google.accounts.oauth2) {
+                    throw new Error('Google OAuth2 not available');
+                }
+                const client = google.accounts.oauth2.initTokenClient({
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    callback: async (response) => {
+                        try {
+                            if (response.error) {
+                                throw new Error(response.error_description || response.error);
+                            }
+                            const accessToken = response.access_token;
+                            // Send access token to backend
+                            const authResponse = await api.loginWithGoogle(accessToken);
+                            if (authResponse.token) {
+                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                setAuthSuccess(true);
+                                setSuccessMessage('Google login successful!');
+                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            }
+                            else {
+                                throw new Error('Authentication failed - no token received');
+                            }
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                });
+                client.requestAccessToken();
+            }
+            else {
+                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                google.accounts.id.initialize({
+                    client_id: googleClientId,
+                    callback: async (response) => {
+                        try {
+                            const idToken = response.credential;
+                            const authResponse = await api.loginWithGoogle(idToken);
+                            if (authResponse.token) {
+                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                setAuthSuccess(true);
+                                setSuccessMessage('Google login successful!');
+                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            }
+                            else {
+                                throw new Error('Authentication failed - no token received');
+                            }
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                    auto_select: false,
+                    cancel_on_tap_outside: true,
+                });
+                google.accounts.id.prompt((notification) => {
+                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+                        setLoading(false);
+                    }
+                });
+            }
         }
-        if (!deletePassword) {
-            setError('Password is required');
-            return;
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            setLoading(false);
         }
+    };
+    const handlePhoneAuth = async (phoneNumber, verificationCode) => {
         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();
+            if (!verificationCode) {
+                // Send verification code via Twilio Verify Service
+                await api.sendPhoneCode(phoneNumber);
+                // Twilio Verify Service tracks the verification by phone number
+                // No need to store verificationId
+            }
+            else {
+                // Verify code - Twilio identifies the verification by phone number
+                const response = await api.verifyPhoneCode(phoneNumber, verificationCode);
+                // Update auth context with account data if token is provided
+                if (response.token) {
+                    auth.login(response.token, response.user, response.accountData);
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    if (redirectUrl) {
+                        window.location.href = redirectUrl;
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - no token received');
+                }
+            }
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to delete account';
+            const errorMessage = err instanceof Error ? err.message : 'Phone authentication failed';
             setError(errorMessage);
-            onError?.(err instanceof Error ? err : new Error(errorMessage));
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    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) {
-        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: () => {
-                                            setShowDeleteConfirm(false);
-                                            setDeletePassword('');
-                                            setDeleteConfirmText('');
-                                        }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
-};
-
-const SmartlinksClaimUI = ({ apiEndpoint, clientId, clientName, collectionId, productId, proofId, onClaimSuccess, onClaimError, additionalFields = [], theme = 'light', className = '', minimal = false, customization = {}, }) => {
-    const auth = useAuth();
-    const [claimStep, setClaimStep] = 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 handlePasswordReset = async (emailOrPassword, confirmPassword) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            if (resetToken && confirmPassword) {
+                // Complete password reset with token
+                await api.completePasswordReset(resetToken, emailOrPassword);
+                setResetSuccess(true);
+                setResetToken(undefined); // Clear token after successful reset
+            }
+            else {
+                // Request password reset email
+                await api.requestPasswordReset(emailOrPassword, getRedirectUrl());
+                setResetSuccess(true);
+            }
         }
-    };
-    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;
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Password reset failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
-        // Execute claim with collected data
-        if (auth.user) {
-            executeClaim(auth.user);
+        finally {
+            setLoading(false);
         }
     };
-    const executeClaim = async (user) => {
-        setClaimStep('claiming');
+    const handleMagicLink = async (email) => {
         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,
-            });
+            await api.sendMagicLink(email, getRedirectUrl());
+            setAuthSuccess(true);
+            setSuccessMessage('Magic link sent! Check your email to log in.');
         }
         catch (err) {
-            console.error('Claim error:', err);
-            const errorMessage = err instanceof Error ? err.message : 'Failed to claim proof';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send magic link';
             setError(errorMessage);
-            onClaimError?.(err instanceof Error ? err : new Error(errorMessage));
-            setClaimStep(additionalFields.length > 0 ? 'questions' : 'auth');
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleFieldChange = (fieldName, value) => {
-        setClaimData(prev => ({
-            ...prev,
-            [fieldName]: value,
-        }));
-    };
-    // Render authentication step
-    if (claimStep === 'auth') {
-        return (jsx("div", { className: className, children: jsx(SmartlinksAuthUI, { apiEndpoint: apiEndpoint, clientId: clientId, clientName: clientName, onAuthSuccess: handleAuthSuccess, onAuthError: onClaimError, theme: theme, minimal: minimal, 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' })] })] }));
+    if (configLoading) {
+        return (jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsx("div", { className: "auth-spinner" }) }) }));
     }
-    // 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
-    if (isLoading) {
-        return jsx("div", { children: "Loading..." });
-    }
-    // If not authenticated, redirect or show fallback
-    if (!isAuthenticated) {
-        if (redirectTo) {
-            window.location.href = redirectTo;
-            return null;
-        }
-        return fallback ? jsx(Fragment, { children: fallback }) : jsx("div", { children: "Access denied. Please log in." });
-    }
-    // Render protected content
-    return jsx(Fragment, { children: children });
-};
-
-const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], providerOrder, emailDisplayMode = 'form', theme = 'light', className, minimal = false, }) => {
-    const showEmail = enabledProviders.includes('email');
-    const showGoogle = enabledProviders.includes('google');
-    const showPhone = enabledProviders.includes('phone');
-    const showMagicLink = enabledProviders.includes('magic-link');
-    // Determine ordered providers (excluding email if in button mode)
-    const orderedProviders = providerOrder && providerOrder.length > 0
-        ? providerOrder.filter(p => enabledProviders.includes(p) && p !== 'email')
-        : enabledProviders.filter(p => p !== 'email');
-    const hasOtherProviders = showGoogle || showPhone || showMagicLink;
-    // Render provider button helper
-    const renderProviderButton = (provider) => {
-        if (provider === 'google' && showGoogle) {
-            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsx("span", { children: "Continue with Google" })] }, "google"));
-        }
-        if (provider === 'phone' && showPhone) {
-            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsx("span", { children: "Continue with Phone" })] }, "phone"));
-        }
-        if (provider === 'magic-link' && showMagicLink) {
-            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsx("span", { children: "Continue with Magic Link" })] }, "magic-link"));
-        }
-        if (provider === 'email' && showEmail && emailDisplayMode === 'button') {
-            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsx("span", { children: "Continue with Email" })] }, "email"));
-        }
-        return null;
-    };
-    return (jsx(AuthContainer, { theme: theme, className: className, config: customization, minimal: minimal, children: emailDisplayMode === 'button' ? (jsx("div", { className: "auth-provider-buttons", children: orderedProviders.concat(showEmail ? ['email'] : []).map(provider => renderProviderButton(provider)) })) : (
-        /* Form mode: show email form first, then other providers */
-        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)) })] }))] })) }));
+    return (jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsx("div", { style: {
+                        color: 'var(--auth-primary-color, #4F46E5)',
+                        fontSize: '3rem',
+                        marginBottom: '1rem'
+                    }, children: "\u2713" }), jsx("h2", { style: {
+                        marginBottom: '0.5rem',
+                        fontSize: '1.5rem',
+                        fontWeight: 600
+                    }, children: successMessage?.includes('verified') ? 'Email Verified!' :
+                        successMessage?.includes('Magic link') ? 'Check Your Email!' :
+                            mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsx("p", { style: {
+                        color: '#6B7280',
+                        fontSize: '0.875rem'
+                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error })) : mode === 'phone' ? (jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
+                setMode('login');
+                setResetSuccess(false);
+                setResetToken(undefined); // Clear token when going back
+            }, loading: loading, error: error, success: resetSuccess, token: resetToken })) : (mode === 'login' || mode === 'register') ? (jsx(Fragment, { children: showResendVerification ? (jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(79, 70, 229, 0.05)', borderRadius: '0.5rem' }, children: [jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Verification Link Expired" }), jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your verification link has expired or is no longer valid. Please enter your email address below and we'll send you a new verification link." }), jsx("input", { type: "email", value: resendEmail || '', onChange: (e) => setResendEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'var(--auth-primary-color, #4F46E5)',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resendEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsx("button", { onClick: () => {
+                                    setShowResendVerification(false);
+                                    setResendEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.5rem' }, children: [jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Password Reset Link Expired" }), jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your password reset link has expired or is no longer valid. Please enter your email address below and we'll send you a new password reset link." }), jsx("input", { type: "email", value: resetRequestEmail || '', onChange: (e) => setResetRequestEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsx("button", { onClick: handleRequestNewReset, disabled: loading || !resetRequestEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: '#EF4444',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resetRequestEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resetRequestEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Reset Link' }), jsx("button", { onClick: () => {
+                                    setShowRequestNewReset(false);
+                                    setResetRequestEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : (jsx(Fragment, { children: (() => {
+                    const emailDisplayMode = config?.emailDisplayMode || 'form';
+                    const providerOrder = config?.providerOrder || (config?.enabledProviders || enabledProviders);
+                    const actualProviders = config?.enabledProviders || enabledProviders;
+                    // Button mode: show provider selection first, then email form if email is selected
+                    if (emailDisplayMode === 'button' && !showEmailForm) {
+                        return (jsx(ProviderButtons, { enabledProviders: actualProviders, providerOrder: providerOrder, onEmailLogin: () => setShowEmailForm(true), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }));
+                    }
+                    // Form mode or email button was clicked: show email form with other providers
+                    return (jsxs(Fragment, { children: [emailDisplayMode === 'button' && showEmailForm && (jsx("button", { onClick: () => setShowEmailForm(false), style: {
+                                    marginBottom: '1rem',
+                                    padding: '0.5rem',
+                                    background: 'none',
+                                    border: 'none',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    cursor: 'pointer',
+                                    fontSize: '0.875rem',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.25rem'
+                                }, children: "\u2190 Back to options" })), jsx(EmailAuthForm, { mode: mode, onSubmit: handleEmailAuth, onModeSwitch: () => {
+                                    setMode(mode === 'login' ? 'register' : 'login');
+                                    setShowResendVerification(false);
+                                    setShowRequestNewReset(false);
+                                    setError(undefined);
+                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
+                })() })) })) : null }));
 };
 
-// Default Smartlinks Google OAuth Client ID (public - safe to expose)
-const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
-    const [mode, setMode] = useState(initialMode);
+const AccountManagement = ({ apiEndpoint, clientId, onError, className = '', customization = {}, }) => {
+    const auth = useAuth();
     const [loading, setLoading] = useState(false);
+    const [profile, setProfile] = useState(null);
     const [error, setError] = useState();
-    const [resetSuccess, setResetSuccess] = useState(false);
-    const [authSuccess, setAuthSuccess] = useState(false);
-    const [successMessage, setSuccessMessage] = useState();
-    const [showResendVerification, setShowResendVerification] = useState(false);
-    const [resendEmail, setResendEmail] = useState();
-    const [showRequestNewReset, setShowRequestNewReset] = useState(false);
-    const [resetRequestEmail, setResetRequestEmail] = useState();
-    const [resetToken, setResetToken] = useState(); // Store the reset token from URL
-    const [config, setConfig] = useState(null);
-    const [configLoading, setConfigLoading] = useState(!skipConfigFetch);
-    const [showEmailForm, setShowEmailForm] = useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
-    const api = new AuthAPI(apiEndpoint, clientId, clientName);
-    const auth = useAuth();
-    // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
-    // IMPORTANT: Preserve bearer token during reinitialization
-    useEffect(() => {
-        const reinitializeWithToken = async () => {
-            if (apiEndpoint) {
-                // Get current token before reinitializing
-                const currentToken = await auth.getToken();
-                smartlinks.initializeApi({
-                    baseURL: apiEndpoint,
-                    proxyMode: false, // Direct API calls when custom endpoint is provided
-                    ngrokSkipBrowserWarning: true,
-                });
-                // Restore bearer token after reinitialization using auth.verifyToken
-                if (currentToken) {
-                    smartlinks.auth.verifyToken(currentToken).catch(err => {
-                        console.warn('Failed to restore bearer token after reinit:', err);
-                    });
-                }
-            }
-        };
-        reinitializeWithToken();
-    }, [apiEndpoint, auth]);
-    // Get the effective redirect URL (use prop or default to current page)
-    const getRedirectUrl = () => {
-        if (redirectUrl)
-            return redirectUrl;
-        // Get the full current URL including hash routes
-        // Remove any existing query parameters to avoid duplication
-        const currentUrl = window.location.href.split('?')[0];
-        return currentUrl;
-    };
-    // Fetch UI configuration
-    useEffect(() => {
-        if (skipConfigFetch) {
-            setConfig(customization || {});
-            return;
-        }
-        const fetchConfig = async () => {
-            try {
-                // Check localStorage cache first
-                const cacheKey = `auth_ui_config_${clientId || 'default'}`;
-                const cached = localStorage.getItem(cacheKey);
-                if (cached) {
-                    const { config: cachedConfig, timestamp } = JSON.parse(cached);
-                    const age = Date.now() - timestamp;
-                    // Use cache if less than 1 hour old
-                    if (age < 3600000) {
-                        setConfig({ ...cachedConfig, ...customization });
-                        setConfigLoading(false);
-                        // Fetch in background to update cache
-                        api.fetchConfig().then(freshConfig => {
-                            localStorage.setItem(cacheKey, JSON.stringify({
-                                config: freshConfig,
-                                timestamp: Date.now()
-                            }));
-                        });
-                        return;
-                    }
-                }
-                // Fetch from API
-                const fetchedConfig = await api.fetchConfig();
-                // Merge with customization props (props take precedence)
-                const mergedConfig = { ...fetchedConfig, ...customization };
-                setConfig(mergedConfig);
-                // Cache the fetched config
-                localStorage.setItem(cacheKey, JSON.stringify({
-                    config: fetchedConfig,
-                    timestamp: Date.now()
-                }));
-            }
-            catch (err) {
-                console.error('Failed to fetch config:', err);
-                setConfig(customization || {});
-            }
-            finally {
-                setConfigLoading(false);
-            }
-        };
-        fetchConfig();
-    }, [apiEndpoint, clientId, customization, skipConfigFetch]);
-    // Reset showEmailForm when mode changes away from login/register
+    const [success, setSuccess] = useState();
+    // Track which section is being edited
+    const [editingSection, setEditingSection] = useState(null);
+    // Profile form state
+    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);
+    // 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;
+    // Reinitialize Smartlinks SDK when apiEndpoint changes
     useEffect(() => {
-        if (mode !== 'login' && mode !== 'register') {
-            setShowEmailForm(false);
+        if (apiEndpoint) {
+            smartlinks.initializeApi({
+                baseURL: apiEndpoint,
+                proxyMode: false,
+                ngrokSkipBrowserWarning: true,
+            });
         }
-    }, [mode]);
-    // Handle URL-based auth flows (email verification, password reset)
+    }, [apiEndpoint]);
+    // Load user profile on mount
     useEffect(() => {
-        // Helper to get URL parameters from either hash or search
-        const getUrlParams = () => {
-            // First check if there are params in the hash (for hash routing)
-            const hash = window.location.hash;
-            const hashQueryIndex = hash.indexOf('?');
-            if (hashQueryIndex !== -1) {
-                // Extract query string from hash (e.g., #/test?mode=verifyEmail&token=abc)
-                const hashQuery = hash.substring(hashQueryIndex + 1);
-                return new URLSearchParams(hashQuery);
-            }
-            // Fall back to regular search params (for non-hash routing)
-            return new URLSearchParams(window.location.search);
-        };
-        const params = getUrlParams();
-        const urlMode = params.get('mode');
-        const token = params.get('token');
-        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
-        if (urlMode && token) {
-            handleURLBasedAuth(urlMode, token);
+        loadProfile();
+    }, [clientId]);
+    const loadProfile = async () => {
+        if (!auth.isAuthenticated) {
+            setError('You must be logged in to manage your account');
+            return;
         }
-    }, []);
-    const handleURLBasedAuth = async (urlMode, token) => {
         setLoading(true);
         setError(undefined);
         try {
-            if (urlMode === 'verifyEmail') {
-                console.log('Verifying email with token:', token);
-                const response = await api.verifyEmailWithToken(token);
-                // Get email verification mode from response or config
-                const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
-                if ((verificationMode === 'verify-then-auto-login' || verificationMode === 'immediate') && response.token) {
-                    // Auto-login modes: Log the user in immediately if token is provided
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Email verified successfully! You are now logged in.');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Redirect after a brief delay to show success message
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    // verify-then-manual-login mode or no token: Show success but require manual login
-                    setAuthSuccess(true);
-                    setSuccessMessage('Email verified successfully! Please log in with your credentials.');
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Switch back to login mode after a delay
-                    setTimeout(() => {
-                        setAuthSuccess(false);
-                        setMode('login');
-                    }, 3000);
-                }
-            }
-            else if (urlMode === 'resetPassword') {
-                console.log('Verifying reset token:', token);
-                // Verify token is valid, then show password reset form
-                await api.verifyResetToken(token);
-                setResetToken(token); // Store token for use in password reset
-                setMode('reset-password');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'magicLink') {
-                console.log('Verifying magic link token:', token);
-                const response = await api.verifyMagicLink(token);
-                // Auto-login with magic link if token is provided
-                if (response.token) {
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Magic link verified! You are now logged in.');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    // Clear the URL parameters
-                    const cleanUrl = window.location.href.split('?')[0];
-                    window.history.replaceState({}, document.title, cleanUrl);
-                    // Redirect after a brief delay to show success message
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - no token received');
-                }
-            }
+            // TODO: Backend implementation required
+            // Endpoint: GET /api/v1/authkit/:clientId/account/profile
+            // SDK method: smartlinks.authKit.getProfile(clientId)
+            // Temporary mock data for UI testing
+            const profileData = {
+                uid: auth.user?.uid || '',
+                email: auth.user?.email,
+                displayName: auth.user?.displayName,
+                phoneNumber: auth.user?.phoneNumber,
+                photoURL: auth.user?.photoURL,
+                emailVerified: true,
+                accountData: auth.accountData || {},
+            };
+            setProfile(profileData);
+            setDisplayName(profileData.displayName || '');
         }
         catch (err) {
-            console.error('URL-based auth error:', err);
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred';
-            // If it's an email verification error (expired/invalid token), show resend option
-            if (urlMode === 'verifyEmail') {
-                setError(`${errorMessage} - Please enter your email below to receive a new verification link.`);
-                setShowResendVerification(true);
-                setMode('login'); // Show the login form UI
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'resetPassword') {
-                // If password reset token is invalid/expired, show request new reset link option
-                setError(`${errorMessage} - Please enter your email below to receive a new password reset link.`);
-                setShowRequestNewReset(true);
-                setMode('login');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else if (urlMode === 'magicLink') {
-                // If magic link is invalid/expired
-                setError(`${errorMessage} - Please request a new magic link below.`);
-                setMode('magic-link');
-                // Clear the URL parameters
-                const cleanUrl = window.location.href.split('?')[0];
-                window.history.replaceState({}, document.title, cleanUrl);
-            }
-            else {
-                setError(errorMessage);
-            }
-            onAuthError?.(err instanceof Error ? err : new Error('An error occurred'));
+            const errorMessage = err instanceof Error ? err.message : 'Failed to load profile';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleEmailAuth = async (data) => {
+    const handleUpdateProfile = async (e) => {
+        e.preventDefault();
         setLoading(true);
         setError(undefined);
-        setAuthSuccess(false);
+        setSuccess(undefined);
         try {
-            const response = mode === 'login'
-                ? await api.login(data.email, data.password)
-                : await api.register({
-                    ...data,
-                    accountData: mode === 'register' ? accountData : undefined,
-                    redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
-                });
-            // Get email verification mode from response or config (default: verify-then-auto-login)
-            const verificationMode = response.emailVerificationMode || config?.emailVerification?.mode || 'verify-then-auto-login';
-            const gracePeriodHours = config?.emailVerification?.gracePeriodHours || 24;
-            if (mode === 'register') {
-                // Handle different verification modes
-                if (verificationMode === 'immediate' && response.token) {
-                    // Immediate mode: Log in right away if token is provided
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    const deadline = response.emailVerificationDeadline
-                        ? new Date(response.emailVerificationDeadline).toLocaleString()
-                        : `${gracePeriodHours} hours`;
-                    setSuccessMessage(`Account created! You're logged in now. Please verify your email by ${deadline} to keep your account active.`);
-                    if (response.token) {
-                        onAuthSuccess(response.token, response.user, response.accountData);
-                    }
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else if (verificationMode === 'verify-then-auto-login') {
-                    // Verify-then-auto-login mode: Don't log in yet, but will auto-login after email verification
-                    setAuthSuccess(true);
-                    setSuccessMessage('Account created! Please check your email and click the verification link to complete your registration.');
-                }
-                else {
-                    // verify-then-manual-login mode: Traditional flow
-                    setAuthSuccess(true);
-                    setSuccessMessage('Account created successfully! Please check your email to verify your account, then log in.');
-                }
-            }
-            else {
-                // Login mode - always log in if token is provided
-                if (response.token) {
-                    // Check for account lock or verification requirements
-                    if (response.accountLocked) {
-                        throw new Error('Your account has been locked due to unverified email. Please check your email or request a new verification link.');
-                    }
-                    if (response.requiresEmailVerification) {
-                        throw new Error('Please verify your email before logging in. Check your inbox for the verification link.');
-                    }
-                    auth.login(response.token, response.user, response.accountData);
-                    setAuthSuccess(true);
-                    setSuccessMessage('Login successful!');
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    if (redirectUrl) {
-                        setTimeout(() => {
-                            window.location.href = redirectUrl;
-                        }, 2000);
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - please verify your email before logging in.');
-                }
-            }
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/update-profile
+            // SDK method: smartlinks.authKit.updateProfile(clientId, updateData)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-profile');
+            console.log('Update data:', { displayName });
+            // Uncomment when backend is ready:
+            // const updateData: ProfileUpdateData = {
+            //   displayName: displayName || undefined,
+            //   photoURL: photoURL || undefined,
+            // };
+            // const updatedProfile = await smartlinks.authKit.updateProfile(clientId, updateData);
+            // setProfile(updatedProfile);
+            // setSuccess('Profile updated successfully!');
+            // setEditingSection(null);
+            // onProfileUpdated?.(updatedProfile);
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
-            // Check if error is about email already registered
-            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
-                setShowResendVerification(true);
-                setResendEmail(data.email);
-                setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
-            }
-            else {
-                setError(errorMessage);
-            }
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update profile';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const cancelEdit = () => {
+        setEditingSection(null);
+        setDisplayName(profile?.displayName || '');
+        setNewEmail('');
+        setEmailPassword('');
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+        setNewPhone('');
+        setPhoneCode('');
+        setPhoneCodeSent(false);
+        setError(undefined);
+        setSuccess(undefined);
+    };
+    const handleChangeEmail = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(undefined);
+        setSuccess(undefined);
+        try {
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/change-email
+            // SDK method: smartlinks.authKit.changeEmail(clientId, newEmail, password)
+            // Note: No verification flow for now - direct email update
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-email');
+            console.log('Data:', { newEmail });
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.changeEmail(clientId, newEmail, emailPassword);
+            // setSuccess('Email changed successfully!');
+            // setEditingSection(null);
+            // setNewEmail('');
+            // setEmailPassword('');
+            // onEmailChangeRequested?.();
+            // await loadProfile(); // Reload to show new email
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to change email';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleResendVerification = async () => {
-        if (!resendEmail)
+    const handleChangePassword = async (e) => {
+        e.preventDefault();
+        if (newPassword !== confirmPassword) {
+            setError('New passwords do not match');
+            return;
+        }
+        if (newPassword.length < 6) {
+            setError('Password must be at least 6 characters');
             return;
+        }
         setLoading(true);
         setError(undefined);
+        setSuccess(undefined);
         try {
-            // For resend, we need the userId. If we don't have it, we need to handle this differently
-            // The backend should ideally handle this case
-            await api.resendVerification('unknown', resendEmail, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Verification email sent! Please check your inbox.');
-            setShowResendVerification(false);
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/change-password
+            // SDK method: smartlinks.authKit.changePassword(clientId, currentPassword, newPassword)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/change-password');
+            console.log('Data: currentPassword and newPassword provided');
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.changePassword(clientId, currentPassword, newPassword);
+            // setSuccess('Password changed successfully!');
+            // setEditingSection(null);
+            // setCurrentPassword('');
+            // setNewPassword('');
+            // setConfirmPassword('');
+            // onPasswordChanged?.();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleRequestNewReset = async () => {
-        if (!resetRequestEmail)
-            return;
+    const handleSendPhoneCode = async () => {
         setLoading(true);
         setError(undefined);
         try {
-            await api.requestPasswordReset(resetRequestEmail, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Password reset email sent! Please check your inbox.');
-            setShowRequestNewReset(false);
-            setResetRequestEmail('');
+            await smartlinks.authKit.sendPhoneCode(clientId, newPhone);
+            setPhoneCodeSent(true);
+            setSuccess('Verification code sent to your phone');
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send password reset email';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send verification code';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
         }
         finally {
             setLoading(false);
         }
     };
-    const handleGoogleLogin = async () => {
-        // Use custom client ID from config, or fall back to default Smartlinks client ID
-        const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
-        // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
-        const oauthFlow = config?.googleOAuthFlow || 'oneTap';
+    const handleUpdatePhone = async (e) => {
+        e.preventDefault();
         setLoading(true);
         setError(undefined);
+        setSuccess(undefined);
         try {
-            const google = window.google;
-            if (!google) {
-                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
-            }
-            if (oauthFlow === 'popup') {
-                // Use OAuth2 popup flow (works in iframes but requires popup permission)
-                if (!google.accounts.oauth2) {
-                    throw new Error('Google OAuth2 not available');
-                }
-                const client = google.accounts.oauth2.initTokenClient({
-                    client_id: googleClientId,
-                    scope: 'openid email profile',
-                    callback: async (response) => {
-                        try {
-                            if (response.error) {
-                                throw new Error(response.error_description || response.error);
-                            }
-                            const accessToken = response.access_token;
-                            // Send access token to backend
-                            const authResponse = await api.loginWithGoogle(accessToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
-                            }
-                            else {
-                                throw new Error('Authentication failed - no token received');
-                            }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
-                            }
-                            setLoading(false);
-                        }
-                        catch (err) {
-                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
-                            setError(errorMessage);
-                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
-                            setLoading(false);
-                        }
-                    },
-                });
-                client.requestAccessToken();
-            }
-            else {
-                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
-                google.accounts.id.initialize({
-                    client_id: googleClientId,
-                    callback: async (response) => {
-                        try {
-                            const idToken = response.credential;
-                            const authResponse = await api.loginWithGoogle(idToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
-                            }
-                            else {
-                                throw new Error('Authentication failed - no token received');
-                            }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
-                            }
-                            setLoading(false);
-                        }
-                        catch (err) {
-                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
-                            setError(errorMessage);
-                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
-                            setLoading(false);
-                        }
-                    },
-                    auto_select: false,
-                    cancel_on_tap_outside: true,
-                });
-                google.accounts.id.prompt((notification) => {
-                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-                        setLoading(false);
-                    }
-                });
-            }
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/update-phone
+            // SDK method: smartlinks.authKit.updatePhone(clientId, phoneNumber, verificationCode)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-phone');
+            console.log('Data:', { phoneNumber: newPhone, code: phoneCode });
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.updatePhone(clientId, newPhone, phoneCode);
+            // setSuccess('Phone number updated successfully!');
+            // setEditingSection(null);
+            // setNewPhone('');
+            // setPhoneCode('');
+            // setPhoneCodeSent(false);
+            // await loadProfile();
         }
         catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update phone number';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
             setLoading(false);
         }
     };
-    const handlePhoneAuth = async (phoneNumber, verificationCode) => {
+    const handleDeleteAccount = async () => {
+        if (deleteConfirmText !== 'DELETE') {
+            setError('Please type DELETE to confirm account deletion');
+            return;
+        }
+        if (!deletePassword) {
+            setError('Password is required');
+            return;
+        }
         setLoading(true);
         setError(undefined);
         try {
-            if (!verificationCode) {
-                // Send verification code via Twilio Verify Service
-                await api.sendPhoneCode(phoneNumber);
-                // Twilio Verify Service tracks the verification by phone number
-                // No need to store verificationId
-            }
-            else {
-                // Verify code - Twilio identifies the verification by phone number
-                const response = await api.verifyPhoneCode(phoneNumber, verificationCode);
-                // Update auth context with account data if token is provided
-                if (response.token) {
-                    auth.login(response.token, response.user, response.accountData);
-                    onAuthSuccess(response.token, response.user, response.accountData);
-                    if (redirectUrl) {
-                        window.location.href = redirectUrl;
-                    }
-                }
-                else {
-                    throw new Error('Authentication failed - no token received');
-                }
-            }
+            // TODO: Backend implementation required
+            // Endpoint: DELETE /api/v1/authkit/:clientId/account/delete
+            // SDK method: smartlinks.authKit.deleteAccount(clientId, password, confirmText)
+            // Note: This performs a SOFT DELETE (marks as deleted, obfuscates email)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: DELETE /api/v1/authkit/:clientId/account/delete');
+            console.log('Data: password and confirmText="DELETE" provided');
+            console.log('Note: Backend should soft delete (mark deleted, obfuscate email, disable account)');
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.deleteAccount(clientId, deletePassword, deleteConfirmText);
+            // setSuccess('Account deleted successfully');
+            // onAccountDeleted?.();
+            // await auth.logout();
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to delete account';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    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) {
+        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: () => {
+                                            setShowDeleteConfirm(false);
+                                            setDeletePassword('');
+                                            setDeleteConfirmText('');
+                                        }, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] }));
+};
+
+const SmartlinksClaimUI = ({ apiEndpoint, clientId, clientName, collectionId, productId, proofId, onClaimSuccess, onClaimError, additionalFields = [], theme = 'light', className = '', minimal = false, customization = {}, }) => {
+    const auth = useAuth();
+    const [claimStep, setClaimStep] = 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);
         }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Phone authentication failed';
-            setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        else {
+            setClaimStep('questions');
         }
-        finally {
-            setLoading(false);
+    };
+    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 handlePasswordReset = async (emailOrPassword, confirmPassword) => {
+    const executeClaim = async (user) => {
+        setClaimStep('claiming');
         setLoading(true);
         setError(undefined);
         try {
-            if (resetToken && confirmPassword) {
-                // Complete password reset with token
-                await api.completePasswordReset(resetToken, emailOrPassword);
-                setResetSuccess(true);
-                setResetToken(undefined); // Clear token after successful reset
-            }
-            else {
-                // Request password reset email
-                await api.requestPasswordReset(emailOrPassword, getRedirectUrl());
-                setResetSuccess(true);
-            }
+            // 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) {
-            const errorMessage = err instanceof Error ? err.message : 'Password reset failed';
+            console.error('Claim error:', err);
+            const errorMessage = err instanceof Error ? err.message : 'Failed to claim proof';
             setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+            onClaimError?.(err instanceof Error ? err : new Error(errorMessage));
+            setClaimStep(additionalFields.length > 0 ? 'questions' : 'auth');
         }
         finally {
             setLoading(false);
         }
     };
-    const handleMagicLink = async (email) => {
-        setLoading(true);
-        setError(undefined);
-        try {
-            await api.sendMagicLink(email, getRedirectUrl());
-            setAuthSuccess(true);
-            setSuccessMessage('Magic link sent! Check your email to log in.');
+    const handleFieldChange = (fieldName, value) => {
+        setClaimData(prev => ({
+            ...prev,
+            [fieldName]: value,
+        }));
+    };
+    // Render authentication step
+    if (claimStep === 'auth') {
+        return (jsx("div", { className: className, children: jsx(SmartlinksAuthUI, { apiEndpoint: apiEndpoint, clientId: clientId, clientName: clientName, onAuthSuccess: handleAuthSuccess, onAuthError: onClaimError, theme: theme, minimal: minimal, 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
+    if (isLoading) {
+        return jsx("div", { children: "Loading..." });
+    }
+    // If not authenticated, redirect or show fallback
+    if (!isAuthenticated) {
+        if (redirectTo) {
+            window.location.href = redirectTo;
+            return null;
         }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'Failed to send magic link';
-            setError(errorMessage);
-            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        return fallback ? jsx(Fragment, { children: fallback }) : jsx("div", { children: "Access denied. Please log in." });
+    }
+    // Render protected content
+    return jsx(Fragment, { children: children });
+};
+
+const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], providerOrder, emailDisplayMode = 'form', theme = 'light', className, minimal = false, }) => {
+    const showEmail = enabledProviders.includes('email');
+    const showGoogle = enabledProviders.includes('google');
+    const showPhone = enabledProviders.includes('phone');
+    const showMagicLink = enabledProviders.includes('magic-link');
+    // Determine ordered providers (excluding email if in button mode)
+    const orderedProviders = providerOrder && providerOrder.length > 0
+        ? providerOrder.filter(p => enabledProviders.includes(p) && p !== 'email')
+        : enabledProviders.filter(p => p !== 'email');
+    const hasOtherProviders = showGoogle || showPhone || showMagicLink;
+    // Render provider button helper
+    const renderProviderButton = (provider) => {
+        if (provider === 'google' && showGoogle) {
+            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsx("span", { children: "Continue with Google" })] }, "google"));
         }
-        finally {
-            setLoading(false);
+        if (provider === 'phone' && showPhone) {
+            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsx("span", { children: "Continue with Phone" })] }, "phone"));
+        }
+        if (provider === 'magic-link' && showMagicLink) {
+            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsx("span", { children: "Continue with Magic Link" })] }, "magic-link"));
         }
+        if (provider === 'email' && showEmail && emailDisplayMode === 'button') {
+            return (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }), jsx("span", { children: "Continue with Email" })] }, "email"));
+        }
+        return null;
     };
-    if (configLoading) {
-        return (jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsx("div", { className: "auth-spinner" }) }) }));
-    }
-    return (jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsx("div", { style: {
-                        color: 'var(--auth-primary-color, #4F46E5)',
-                        fontSize: '3rem',
-                        marginBottom: '1rem'
-                    }, children: "\u2713" }), jsx("h2", { style: {
-                        marginBottom: '0.5rem',
-                        fontSize: '1.5rem',
-                        fontWeight: 600
-                    }, children: successMessage?.includes('verified') ? 'Email Verified!' :
-                        successMessage?.includes('Magic link') ? 'Check Your Email!' :
-                            mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsx("p", { style: {
-                        color: '#6B7280',
-                        fontSize: '0.875rem'
-                    }, children: successMessage })] })) : mode === 'magic-link' ? (jsx(MagicLinkForm, { onSubmit: handleMagicLink, onCancel: () => setMode('login'), loading: loading, error: error })) : mode === 'phone' ? (jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
-                setMode('login');
-                setResetSuccess(false);
-                setResetToken(undefined); // Clear token when going back
-            }, loading: loading, error: error, success: resetSuccess, token: resetToken })) : (mode === 'login' || mode === 'register') ? (jsx(Fragment, { children: showResendVerification ? (jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(79, 70, 229, 0.05)', borderRadius: '0.5rem' }, children: [jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Verification Link Expired" }), jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your verification link has expired or is no longer valid. Please enter your email address below and we'll send you a new verification link." }), jsx("input", { type: "email", value: resendEmail || '', onChange: (e) => setResendEmail(e.target.value), placeholder: "your@email.com", style: {
-                            width: '100%',
-                            padding: '0.625rem',
-                            marginBottom: '1rem',
-                            border: '1px solid var(--auth-border-color, #D1D5DB)',
-                            borderRadius: '0.375rem',
-                            fontSize: '0.875rem',
-                            boxSizing: 'border-box'
-                        } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, style: {
-                                    flex: 1,
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'var(--auth-primary-color, #4F46E5)',
-                                    color: 'white',
-                                    border: 'none',
-                                    borderRadius: '0.375rem',
-                                    cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: (loading || !resendEmail) ? 0.6 : 1
-                                }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsx("button", { onClick: () => {
-                                    setShowResendVerification(false);
-                                    setResendEmail('');
-                                    setError(undefined);
-                                }, disabled: loading, style: {
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'transparent',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
-                                    borderRadius: '0.375rem',
-                                    cursor: loading ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: loading ? 0.6 : 1
-                                }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.5rem' }, children: [jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Password Reset Link Expired" }), jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your password reset link has expired or is no longer valid. Please enter your email address below and we'll send you a new password reset link." }), jsx("input", { type: "email", value: resetRequestEmail || '', onChange: (e) => setResetRequestEmail(e.target.value), placeholder: "your@email.com", style: {
-                            width: '100%',
-                            padding: '0.625rem',
-                            marginBottom: '1rem',
-                            border: '1px solid var(--auth-border-color, #D1D5DB)',
-                            borderRadius: '0.375rem',
-                            fontSize: '0.875rem',
-                            boxSizing: 'border-box'
-                        } }), jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsx("button", { onClick: handleRequestNewReset, disabled: loading || !resetRequestEmail, style: {
-                                    flex: 1,
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: '#EF4444',
-                                    color: 'white',
-                                    border: 'none',
-                                    borderRadius: '0.375rem',
-                                    cursor: (loading || !resetRequestEmail) ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: (loading || !resetRequestEmail) ? 0.6 : 1
-                                }, children: loading ? 'Sending...' : 'Send New Reset Link' }), jsx("button", { onClick: () => {
-                                    setShowRequestNewReset(false);
-                                    setResetRequestEmail('');
-                                    setError(undefined);
-                                }, disabled: loading, style: {
-                                    padding: '0.625rem 1rem',
-                                    backgroundColor: 'transparent',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
-                                    borderRadius: '0.375rem',
-                                    cursor: loading ? 'not-allowed' : 'pointer',
-                                    fontSize: '0.875rem',
-                                    fontWeight: 500,
-                                    opacity: loading ? 0.6 : 1
-                                }, children: "Cancel" })] })] })) : (jsx(Fragment, { children: (() => {
-                    const emailDisplayMode = config?.emailDisplayMode || 'form';
-                    const providerOrder = config?.providerOrder || (config?.enabledProviders || enabledProviders);
-                    const actualProviders = config?.enabledProviders || enabledProviders;
-                    // Button mode: show provider selection first, then email form if email is selected
-                    if (emailDisplayMode === 'button' && !showEmailForm) {
-                        return (jsx(ProviderButtons, { enabledProviders: actualProviders, providerOrder: providerOrder, onEmailLogin: () => setShowEmailForm(true), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }));
-                    }
-                    // Form mode or email button was clicked: show email form with other providers
-                    return (jsxs(Fragment, { children: [emailDisplayMode === 'button' && showEmailForm && (jsx("button", { onClick: () => setShowEmailForm(false), style: {
-                                    marginBottom: '1rem',
-                                    padding: '0.5rem',
-                                    background: 'none',
-                                    border: 'none',
-                                    color: 'var(--auth-text-color, #6B7280)',
-                                    cursor: 'pointer',
-                                    fontSize: '0.875rem',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '0.25rem'
-                                }, children: "\u2190 Back to options" })), jsx(EmailAuthForm, { mode: mode, onSubmit: handleEmailAuth, onModeSwitch: () => {
-                                    setMode(mode === 'login' ? 'register' : 'login');
-                                    setShowResendVerification(false);
-                                    setShowRequestNewReset(false);
-                                    setError(undefined);
-                                }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error, additionalFields: config?.signupAdditionalFields }), emailDisplayMode === 'form' && actualProviders.length > 1 && (jsx(ProviderButtons, { enabledProviders: actualProviders.filter((p) => p !== 'email'), providerOrder: providerOrder, onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), onMagicLinkLogin: () => setMode('magic-link'), loading: loading }))] }));
-                })() })) })) : null }));
+    return (jsx(AuthContainer, { theme: theme, className: className, config: customization, minimal: minimal, children: emailDisplayMode === 'button' ? (jsx("div", { className: "auth-provider-buttons", children: orderedProviders.concat(showEmail ? ['email'] : []).map(provider => renderProviderButton(provider)) })) : (
+        /* Form mode: show email form first, then other providers */
+        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 };