@proveanything/smartlinks-auth-ui 0.1.1 → 0.1.2

package/dist/index.esm.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEffect, useState, createContext, useCallback, useContext } from 'react';
+import { useEffect, useState, useRef, createContext, useCallback, useContext } from 'react';
 import * as smartlinks from '@proveanything/smartlinks';
+import PhoneInputComponent from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
 
 const AuthContainer = ({ children, theme = 'light', className = '', config, }) => {
     // Apply CSS variables for customization
@@ -64,20 +66,159 @@ const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading
                             : 'Get started by creating your account.' })] }), error && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'login' && (jsx("div", { className: "auth-form-footer", children: jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxs("div", { className: "auth-divider", children: [jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
 };
 
-const ProviderButtons = ({ enabledProviders, onGoogleLogin, onPhoneLogin, loading, }) => {
+const ProviderButtons = ({ enabledProviders, providerOrder, onEmailLogin, onGoogleLogin, onPhoneLogin, onMagicLinkLogin, loading, }) => {
     if (enabledProviders.length === 0)
         return null;
-    return (jsxs(Fragment, { children: [jsx("div", { className: "auth-or-divider", children: jsx("span", { children: "or continue with" }) }), jsxs("div", { className: "auth-provider-buttons", children: [enabledProviders.includes('google') && (jsxs("button", { type: "button", className: "auth-provider-button", onClick: onGoogleLogin, disabled: loading, children: [jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsx("path", { d: "M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 01-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z", fill: "#4285F4" }), jsx("path", { d: "M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0010 20z", fill: "#34A853" }), jsx("path", { d: "M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 000 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z", fill: "#FBBC05" }), jsx("path", { d: "M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.19 5.736 7.395 3.977 10 3.977z", fill: "#EA4335" })] }), "Continue with Google"] })), enabledProviders.includes('phone') && (jsxs("button", { type: "button", className: "auth-provider-button", onClick: onPhoneLogin, disabled: loading, children: [jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V15a2 2 0 01-2 2h-1C7.82 17 2 11.18 2 5V4z" }) }), "Continue with Phone"] }))] })] }));
+    // Determine the order of providers to display
+    const orderedProviders = providerOrder && providerOrder.length > 0
+        ? providerOrder.filter(p => enabledProviders.includes(p))
+        : enabledProviders;
+    // Provider button configurations
+    const providerConfigs = {
+        email: {
+            label: 'Continue with Email',
+            icon: (jsx("svg", { width: "20", height: "20", 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" }) })),
+            onClick: () => onEmailLogin?.()
+        },
+        google: {
+            label: 'Continue with Google',
+            icon: (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsx("path", { d: "M19.6 10.227c0-.709-.064-1.39-.182-2.045H10v3.868h5.382a4.6 4.6 0 01-1.996 3.018v2.51h3.232c1.891-1.742 2.982-4.305 2.982-7.35z", fill: "#4285F4" }), jsx("path", { d: "M10 20c2.7 0 4.964-.895 6.618-2.423l-3.232-2.509c-.895.6-2.04.955-3.386.955-2.605 0-4.81-1.76-5.595-4.123H1.064v2.59A9.996 9.996 0 0010 20z", fill: "#34A853" }), jsx("path", { d: "M4.405 11.9c-.2-.6-.314-1.24-.314-1.9 0-.66.114-1.3.314-1.9V5.51H1.064A9.996 9.996 0 000 10c0 1.614.386 3.14 1.064 4.49l3.34-2.59z", fill: "#FBBC05" }), jsx("path", { d: "M10 3.977c1.468 0 2.786.505 3.823 1.496l2.868-2.868C14.959.99 12.695 0 10 0 6.09 0 2.71 2.24 1.064 5.51l3.34 2.59C5.19 5.736 7.395 3.977 10 3.977z", fill: "#EA4335" })] })),
+            onClick: onGoogleLogin
+        },
+        phone: {
+            label: 'Continue with Phone',
+            icon: (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V15a2 2 0 01-2 2h-1C7.82 17 2 11.18 2 5V4z" }) })),
+            onClick: onPhoneLogin
+        },
+        'magic-link': {
+            label: 'Continue with Magic Link',
+            icon: (jsx("svg", { width: "20", height: "20", 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" }) })),
+            onClick: () => onMagicLinkLogin?.()
+        }
+    };
+    // Show divider only if email handler is not provided (meaning this is showing alternative providers, not all providers)
+    const showDivider = !onEmailLogin;
+    return (jsxs(Fragment, { children: [showDivider && (jsx("div", { className: "auth-or-divider", children: jsx("span", { children: "or continue with" }) })), jsx("div", { className: "auth-provider-buttons", children: orderedProviders.map((provider) => {
+                    const config = providerConfigs[provider];
+                    if (!config)
+                        return null;
+                    return (jsxs("button", { type: "button", className: "auth-provider-button", onClick: config.onClick, disabled: loading, children: [config.icon, config.label] }, provider));
+                }) })] }));
+};
+
+const OTPInput = ({ length = 6, value, onChange, disabled = false, }) => {
+    const [otp, setOtp] = useState(Array(length).fill(''));
+    const inputRefs = useRef([]);
+    useEffect(() => {
+        const digits = value.split('').slice(0, length);
+        const newOtp = [...digits, ...Array(Math.max(0, length - digits.length)).fill('')];
+        setOtp(newOtp);
+    }, [value, length]);
+    const handleChange = (index, digit) => {
+        if (disabled)
+            return;
+        // Only allow numbers
+        if (digit && !/^\d$/.test(digit))
+            return;
+        const newOtp = [...otp];
+        newOtp[index] = digit;
+        setOtp(newOtp);
+        // Call onChange with the full OTP value
+        onChange(newOtp.join(''));
+        // Move to next input if digit was entered
+        if (digit && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (disabled)
+            return;
+        // Handle backspace
+        if (e.key === 'Backspace' && !otp[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+        // Handle arrow keys
+        if (e.key === 'ArrowLeft' && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+        if (e.key === 'ArrowRight' && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain').slice(0, length);
+        const digits = pastedData.replace(/\D/g, '').split('');
+        const newOtp = [...Array(length).fill('')];
+        digits.forEach((digit, idx) => {
+            if (idx < length) {
+                newOtp[idx] = digit;
+            }
+        });
+        setOtp(newOtp);
+        onChange(newOtp.join(''));
+        // Focus the next empty input or the last one
+        const nextEmptyIndex = newOtp.findIndex(digit => !digit);
+        const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
+        inputRefs.current[focusIndex]?.focus();
+    };
+    return (jsx("div", { className: "otp-input-container", children: otp.map((digit, index) => (jsx("input", { ref: (el) => (inputRefs.current[index] = el), type: "text", inputMode: "numeric", maxLength: 1, value: digit, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, disabled: disabled, className: "otp-input-box", autoComplete: "off" }, index))) }));
+};
+
+const PhoneInput = ({ value, onChange, disabled = false, }) => {
+    const [defaultCountry, setDefaultCountry] = useState('US');
+    useEffect(() => {
+        // Auto-detect country based on user's location
+        const detectCountry = async () => {
+            try {
+                const response = await fetch('https://ipapi.co/json/');
+                const data = await response.json();
+                if (data.country_code) {
+                    setDefaultCountry(data.country_code);
+                }
+            }
+            catch (error) {
+                console.log('Could not detect country, using default');
+            }
+        };
+        detectCountry();
+    }, []);
+    return (jsx(PhoneInputComponent, { international: true, defaultCountry: defaultCountry, value: value, onChange: (value) => onChange(value || ''), disabled: disabled, className: "phone-input-wrapper" }));
 };
 
 const PhoneAuthForm = ({ onSubmit, onBack, loading, error, }) => {
     const [phoneNumber, setPhoneNumber] = useState('');
     const [verificationCode, setVerificationCode] = useState('');
     const [codeSent, setCodeSent] = useState(false);
+    const [resendCooldown, setResendCooldown] = useState(0);
+    // Countdown timer for resend button
+    useEffect(() => {
+        if (resendCooldown > 0) {
+            const timer = setTimeout(() => {
+                setResendCooldown(resendCooldown - 1);
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [resendCooldown]);
     const handleSendCode = async (e) => {
         e.preventDefault();
         await onSubmit(phoneNumber);
         setCodeSent(true);
+        setResendCooldown(60); // 60 second cooldown
+    };
+    const handleResendCode = async () => {
+        if (resendCooldown > 0)
+            return;
+        try {
+            await onSubmit(phoneNumber);
+            setResendCooldown(60); // Reset cooldown
+            setVerificationCode(''); // Clear the code input
+        }
+        catch (err) {
+            // Error will be handled by parent component
+        }
     };
     const handleVerifyCode = async (e) => {
         e.preventDefault();
@@ -85,7 +226,12 @@ const PhoneAuthForm = ({ onSubmit, onBack, loading, error, }) => {
     };
     return (jsxs("form", { className: "auth-form", onSubmit: codeSent ? handleVerifyCode : handleSendCode, children: [jsxs("div", { className: "auth-form-header", children: [jsx("h2", { className: "auth-form-title", children: "Phone Authentication" }), jsx("p", { className: "auth-form-subtitle", children: codeSent
                             ? 'Enter the verification code sent to your phone.'
-                            : 'Enter your phone number to receive a verification code.' })] }), error && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), !codeSent ? (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "phoneNumber", className: "auth-label", children: "Phone Number" }), jsx("input", { type: "tel", id: "phoneNumber", className: "auth-input", value: phoneNumber, onChange: (e) => setPhoneNumber(e.target.value), required: true, disabled: loading, placeholder: "+1 (555) 123-4567" })] })) : (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "verificationCode", className: "auth-label", children: "Verification Code" }), jsx("input", { type: "text", id: "verificationCode", className: "auth-input", value: verificationCode, onChange: (e) => setVerificationCode(e.target.value), required: true, disabled: loading, placeholder: "123456", maxLength: 6, pattern: "[0-9]{6}" })] })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : codeSent ? ('Verify Code') : ('Send Code') }), jsx("div", { className: "auth-divider", children: jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to login" }) })] }));
+                            : 'Enter your phone number to receive a verification code.' })] }), error && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), !codeSent ? (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "phoneNumber", className: "auth-label", children: "Phone Number" }), jsx(PhoneInput, { value: phoneNumber, onChange: setPhoneNumber, disabled: loading })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "verificationCode", className: "auth-label", children: "Verification Code" }), jsx(OTPInput, { length: 6, value: verificationCode, onChange: setVerificationCode, disabled: loading })] }), jsx("div", { style: { marginTop: '0.5rem', textAlign: 'center' }, children: jsx("button", { type: "button", className: "auth-link", onClick: handleResendCode, disabled: loading || resendCooldown > 0, style: {
+                                cursor: resendCooldown > 0 ? 'not-allowed' : 'pointer',
+                                opacity: resendCooldown > 0 ? 0.5 : 1,
+                            }, children: resendCooldown > 0
+                                ? `Resend code in ${resendCooldown}s`
+                                : 'Resend code' }) })] })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : codeSent ? ('Verify Code') : ('Send Code') }), jsx("div", { className: "auth-divider", children: jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to login" }) })] }));
 };
 
 const PasswordResetForm = ({ onSubmit, onBack, loading, error, success, token, }) => {
@@ -123,6 +269,15 @@ const PasswordResetForm = ({ onSubmit, onBack, loading, error, success, token, }
                             : "Enter your email address and we'll send you instructions to reset your password." })] }), (error || passwordError) && (jsxs("div", { className: "auth-error", role: "alert", children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error || passwordError] })), token ? (jsxs(Fragment, { children: [jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "password", className: "auth-label", children: "New Password" }), jsx("input", { type: "password", id: "password", className: "auth-input", value: password, onChange: (e) => setPassword(e.target.value), required: true, disabled: loading, placeholder: "Enter new password", autoComplete: "new-password", minLength: 6 })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "confirmPassword", className: "auth-label", children: "Confirm Password" }), jsx("input", { type: "password", id: "confirmPassword", className: "auth-input", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, disabled: loading, placeholder: "Confirm new password", autoComplete: "new-password", minLength: 6 })] })] })) : (jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsx("input", { type: "email", id: "email", className: "auth-input", value: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsx("span", { className: "auth-spinner" })) : token ? ('Reset password') : ('Send reset instructions') }), jsx("div", { className: "auth-divider", children: jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to Sign in" }) })] }));
 };
 
+const MagicLinkForm = ({ onSubmit, onCancel, loading = false, error, }) => {
+    const [email, setEmail] = useState('');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        await onSubmit(email);
+    };
+    return (jsxs("form", { onSubmit: handleSubmit, className: "auth-form", children: [jsxs("div", { className: "auth-form-group", children: [jsx("label", { htmlFor: "magic-link-email", className: "auth-label", children: "Email Address" }), jsx("input", { id: "magic-link-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), className: "auth-input", placeholder: "you@example.com", required: true, disabled: loading })] }), error && (jsx("div", { className: "auth-error-message", children: error })), jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading || !email, children: loading ? (jsxs(Fragment, { children: [jsx("span", { className: "auth-spinner" }), "Sending..."] })) : ('Send Magic Link') }), jsx("button", { type: "button", onClick: onCancel, className: "auth-button auth-button-secondary", disabled: loading, children: "Cancel" })] }));
+};
+
 /**
  * AuthAPI - Thin wrapper around Smartlinks SDK authKit namespace
  * All authentication operations now use the global Smartlinks SDK
@@ -151,8 +306,8 @@ class AuthAPI {
     async sendPhoneCode(phoneNumber) {
         return smartlinks.authKit.sendPhoneCode(this.clientId, phoneNumber);
     }
-    async verifyPhoneCode(verificationId, code) {
-        return smartlinks.authKit.verifyPhoneCode(this.clientId, verificationId, code);
+    async verifyPhoneCode(phoneNumber, code) {
+        return smartlinks.authKit.verifyPhoneCode(this.clientId, phoneNumber, code);
     }
     async requestPasswordReset(email, redirectUrl) {
         return smartlinks.authKit.requestPasswordReset(this.clientId, {
@@ -205,6 +360,15 @@ class AuthAPI {
             };
         }
     }
+    async sendMagicLink(email, redirectUrl) {
+        return smartlinks.authKit.sendMagicLink(this.clientId, {
+            email,
+            redirectUrl
+        });
+    }
+    async verifyMagicLink(token) {
+        return smartlinks.authKit.verifyMagicLink(this.clientId, token);
+    }
 }
 
 const TOKEN_KEY = 'smartlinks_auth_token';
@@ -294,9 +458,10 @@ const AuthProvider = ({ children }) => {
             setToken(storedToken.token);
             setUser(storedUser);
             setAccountData(storedAccountData);
-            // Set bearer token in global Smartlinks SDK
-            // @ts-expect-error - setBearerToken exists in runtime but may not be in type definitions
-            smartlinks.setBearerToken(storedToken.token);
+            // Set bearer token in global Smartlinks SDK via auth.verifyToken
+            smartlinks.auth.verifyToken(storedToken.token).catch(err => {
+                console.warn('Failed to restore bearer token on init:', err);
+            });
         }
         setIsLoading(false);
     }, []);
@@ -310,9 +475,11 @@ const AuthProvider = ({ children }) => {
         setToken(authToken);
         setUser(authUser);
         setAccountData(authAccountData || null);
-        // Set bearer token in global Smartlinks SDK
-        // @ts-expect-error - setBearerToken exists in runtime but may not be in type definitions
-        smartlinks.setBearerToken(authToken);
+        // Set bearer token in global Smartlinks SDK via auth.verifyToken
+        // This both validates the token and sets it for future API calls
+        smartlinks.auth.verifyToken(authToken).catch(err => {
+            console.warn('Failed to set bearer token on login:', err);
+        });
     }, []);
     const logout = useCallback(async () => {
         // Clear local storage
@@ -321,8 +488,7 @@ const AuthProvider = ({ children }) => {
         setUser(null);
         setAccountData(null);
         // Clear bearer token from global Smartlinks SDK
-        // @ts-expect-error - setBearerToken exists in runtime but may not be in type definitions
-        smartlinks.setBearerToken(undefined);
+        smartlinks.auth.logout();
     }, []);
     const getToken = useCallback(() => {
         const storedToken = tokenStorage.getToken();
@@ -352,6 +518,269 @@ const useAuth = () => {
     return context;
 };
 
+const AccountManagement = ({ apiEndpoint, clientId, onProfileUpdated, onEmailChangeRequested, onPasswordChanged, onAccountDeleted, onError, theme = 'light', className = '', customization = {}, }) => {
+    const auth = useAuth();
+    const [loading, setLoading] = useState(false);
+    const [profile, setProfile] = useState(null);
+    const [error, setError] = useState();
+    const [success, setSuccess] = useState();
+    // 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 = true, } = customization;
+    // Reinitialize Smartlinks SDK when apiEndpoint changes
+    useEffect(() => {
+        if (apiEndpoint) {
+            smartlinks.initializeApi({
+                baseURL: apiEndpoint,
+                proxyMode: false,
+                ngrokSkipBrowserWarning: true,
+            });
+        }
+    }, [apiEndpoint]);
+    // Load user profile on mount
+    useEffect(() => {
+        loadProfile();
+    }, [clientId]);
+    const loadProfile = async () => {
+        if (!auth.isAuthenticated) {
+            setError('You must be logged in to manage your account');
+            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!');
+            // 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));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    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!');
+            // 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 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 {
+            // 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!');
+            // setCurrentPassword('');
+            // setNewPassword('');
+            // setConfirmPassword('');
+            // onPasswordChanged?.();
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to change password';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSendPhoneCode = async () => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            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 verification code';
+            setError(errorMessage);
+            onError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleUpdatePhone = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError(undefined);
+        setSuccess(undefined);
+        try {
+            // TODO: Backend implementation required
+            // Endpoint: POST /api/v1/authkit/:clientId/account/update-phone
+            // SDK method: smartlinks.authKit.updatePhone(clientId, phoneNumber, verificationCode)
+            setError('Backend API not yet implemented. See console for required endpoint.');
+            console.log('Required API endpoint: POST /api/v1/authkit/:clientId/account/update-phone');
+            console.log('Data:', { phoneNumber: newPhone, code: phoneCode });
+            // Uncomment when backend is ready:
+            // await smartlinks.authKit.updatePhone(clientId, newPhone, phoneCode);
+            // setSuccess('Phone number updated successfully!');
+            // setNewPhone('');
+            // setPhoneCode('');
+            // setPhoneCodeSent(false);
+            // await loadProfile();
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to update phone number';
+            setError(errorMessage);
+            onError?.(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;
+        }
+        if (!deletePassword) {
+            setError('Password is required');
+            return;
+        }
+        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();
+        }
+        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(AuthContainer, { theme: theme, className: className, children: jsxs("div", { className: "auth-form", children: [jsx("h2", { className: "auth-title", children: "Account Management" }), jsx("p", { className: "text-muted-foreground", children: "Please log in to manage your account" })] }) }));
+    }
+    if (loading && !profile) {
+        return (jsx(AuthContainer, { theme: theme, className: className, children: jsx("div", { className: "auth-form", children: jsx("h2", { className: "auth-title", children: "Loading..." }) }) }));
+    }
+    return (jsx(AuthContainer, { theme: theme, className: className, children: jsxs("div", { className: "auth-form", style: { maxWidth: '600px' }, children: [jsx("h2", { className: "auth-title", children: "Account Management" }), 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: [jsx("h3", { className: "section-title", children: "Profile Information" }), jsxs("form", { onSubmit: handleUpdateProfile, className: "auth-form-fields", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "displayName", children: "Display Name" }), jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" })] }), jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Updating...' : 'Update Profile' })] })] })), showEmailSection && (jsxs("section", { className: "account-section", children: [jsx("h3", { className: "section-title", children: "Email Management" }), jsxs("div", { className: "current-info", children: [jsxs("p", { children: [jsx("strong", { children: "Current Email:" }), " ", profile?.email || 'Not set'] }), jsxs("p", { children: [jsx("strong", { children: "Status:" }), ' ', jsx("span", { className: profile?.emailVerified ? 'text-success' : 'text-warning', children: profile?.emailVerified ? 'Verified' : 'Unverified' })] })] }), jsxs("form", { onSubmit: handleChangeEmail, className: "auth-form-fields", 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 })] }), jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Sending...' : 'Change Email' })] })] })), showPasswordSection && (jsxs("section", { className: "account-section", children: [jsx("h3", { className: "section-title", children: "Password Management" }), jsxs("form", { onSubmit: handleChangePassword, className: "auth-form-fields", 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 })] }), jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' })] })] })), showPhoneSection && (jsxs("section", { className: "account-section", children: [jsx("h3", { className: "section-title", children: "Phone Number" }), jsx("div", { className: "current-info", children: jsxs("p", { children: [jsx("strong", { children: "Current Phone:" }), " ", profile?.phoneNumber || 'Not set'] }) }), jsxs("form", { onSubmit: handleUpdatePhone, className: "auth-form-fields", 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 ? (jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Verification Code' })) : (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 })] }), jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Update Phone' })] }))] })] })), 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 ProtectedRoute = ({ children, fallback, redirectTo, }) => {
     const { isAuthenticated, isLoading } = useAuth();
     // Show loading state
@@ -370,24 +799,46 @@ const ProtectedRoute = ({ children, fallback, redirectTo, }) => {
     return jsx(Fragment, { children: children });
 };
 
-const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], theme = 'light', className, }) => {
+const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], providerOrder, emailDisplayMode = 'form', theme = 'light', className, }) => {
     const showEmail = enabledProviders.includes('email');
     const showGoogle = enabledProviders.includes('google');
     const showPhone = enabledProviders.includes('phone');
-    const hasProviders = showGoogle || showPhone;
-    return (jsxs(AuthContainer, { theme: theme, className: className, config: customization, 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" })] })] })), hasProviders && (jsxs(Fragment, { children: [showEmail && (jsx("div", { className: "auth-or-divider", children: jsx("span", { children: "or continue with" }) })), jsxs("div", { className: "auth-provider-buttons", children: [showGoogle && (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: "Google" })] })), showPhone && (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: "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, 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)) })] }))] })) }));
 };
 
 // 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'], redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, }) => {
-    const [mode, setMode] = useState('login');
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, }) => {
+    const [mode, setMode] = useState(initialMode);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
     const [resetSuccess, setResetSuccess] = useState(false);
     const [authSuccess, setAuthSuccess] = useState(false);
     const [successMessage, setSuccessMessage] = useState();
-    const [verificationId, setVerificationId] = useState();
     const [showResendVerification, setShowResendVerification] = useState(false);
     const [resendEmail, setResendEmail] = useState();
     const [showRequestNewReset, setShowRequestNewReset] = useState(false);
@@ -395,8 +846,28 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     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) {
+            // Get current token before reinitializing
+            const currentToken = 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);
+                });
+            }
+        }
+    }, [apiEndpoint, auth]);
     // Get the effective redirect URL (use prop or default to current page)
     const getRedirectUrl = () => {
         if (redirectUrl)
@@ -455,6 +926,12 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         };
         fetchConfig();
     }, [apiEndpoint, clientId, customization, skipConfigFetch]);
+    // Reset showEmailForm when mode changes away from login/register
+    useEffect(() => {
+        if (mode !== 'login' && mode !== 'register') {
+            setShowEmailForm(false);
+        }
+    }, [mode]);
     // Handle URL-based auth flows (email verification, password reset)
     useEffect(() => {
         // Helper to get URL parameters from either hash or search
@@ -485,10 +962,10 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             if (urlMode === 'verifyEmail') {
                 console.log('Verifying email with token:', token);
                 const response = await api.verifyEmailWithToken(token);
-                // Get email verification mode from config (default: verify-then-auto-login)
-                const verificationMode = config?.emailVerification?.mode || 'verify-then-auto-login';
-                if (verificationMode === 'verify-then-auto-login' || verificationMode === 'immediate') {
-                    // Auto-login modes: Log the user in immediately
+                // 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.');
@@ -504,7 +981,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     }
                 }
                 else {
-                    // verify-then-manual-login mode: Show success but require manual login
+                    // 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
@@ -527,6 +1004,29 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 const cleanUrl = window.location.href.split('?')[0];
                 window.history.replaceState({}, document.title, cleanUrl);
             }
+            else if (urlMode === 'magicLink') {
+                console.log('Verifying magic link token:', token);
+                const response = await api.verifyMagicLink(token);
+                // Auto-login with magic link if token is provided
+                if (response.token) {
+                    auth.login(response.token, response.user, response.accountData);
+                    setAuthSuccess(true);
+                    setSuccessMessage('Magic link verified! You are now logged in.');
+                    onAuthSuccess(response.token, response.user, response.accountData);
+                    // Clear the URL parameters
+                    const cleanUrl = window.location.href.split('?')[0];
+                    window.history.replaceState({}, document.title, cleanUrl);
+                    // Redirect after a brief delay to show success message
+                    if (redirectUrl) {
+                        setTimeout(() => {
+                            window.location.href = redirectUrl;
+                        }, 2000);
+                    }
+                }
+                else {
+                    throw new Error('Authentication failed - no token received');
+                }
+            }
         }
         catch (err) {
             console.error('URL-based auth error:', err);
@@ -549,6 +1049,14 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 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);
             }
@@ -570,17 +1078,22 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     accountData: mode === 'register' ? accountData : undefined,
                     redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
                 });
-            // Get email verification mode from config (default: verify-then-auto-login)
-            const verificationMode = config?.emailVerification?.mode || 'verify-then-auto-login';
+            // 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') {
-                    // Immediate mode: Log in right away
+                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);
-                    setSuccessMessage(`Account created! You're logged in now. Please verify your email within ${gracePeriodHours} hours to keep your account active.`);
-                    onAuthSuccess(response.token, response.user, response.accountData);
+                    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;
@@ -599,15 +1112,27 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 }
             }
             else {
-                // Login mode - always log in
-                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);
+                // 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.');
                 }
             }
         }
@@ -699,10 +1224,15 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                             const accessToken = response.access_token;
                             // Send access token to backend
                             const authResponse = await api.loginWithGoogle(accessToken);
-                            auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                            setAuthSuccess(true);
-                            setSuccessMessage('Google login successful!');
-                            onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            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;
@@ -728,10 +1258,15 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                         try {
                             const idToken = response.credential;
                             const authResponse = await api.loginWithGoogle(idToken);
-                            auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                            setAuthSuccess(true);
-                            setSuccessMessage('Google login successful!');
-                            onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            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;
@@ -768,21 +1303,24 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         setError(undefined);
         try {
             if (!verificationCode) {
-                // Send verification code
-                const result = await api.sendPhoneCode(phoneNumber);
-                setVerificationId(result.verificationId);
+                // 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
-                if (!verificationId) {
-                    throw new Error('Verification ID not found');
+                // 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;
+                    }
                 }
-                const response = await api.verifyPhoneCode(verificationId, verificationCode);
-                // Update auth context with account data
-                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');
                 }
             }
         }
@@ -820,6 +1358,23 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             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.');
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to send magic link';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
     if (configLoading) {
         return (jsx(AuthContainer, { theme: theme, className: className, children: jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsx("div", { className: "auth-spinner" }) }) }));
     }
@@ -832,10 +1387,11 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                         fontSize: '1.5rem',
                         fontWeight: 600
                     }, children: successMessage?.includes('verified') ? 'Email Verified!' :
-                        mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsx("p", { style: {
+                        successMessage?.includes('Magic link') ? 'Check Your Email!' :
+                            mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsx("p", { style: {
                         color: '#6B7280',
                         fontSize: '0.875rem'
-                    }, children: successMessage })] })) : mode === 'phone' ? (jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
+                    }, 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
@@ -905,13 +1461,34 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                                     fontSize: '0.875rem',
                                     fontWeight: 500,
                                     opacity: loading ? 0.6 : 1
-                                }, children: "Cancel" })] })] })) : (jsxs(Fragment, { children: [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 }), ((config?.enabledProviders || enabledProviders).length > 1) && (jsx(ProviderButtons, { enabledProviders: (config?.enabledProviders || enabledProviders).filter((p) => p !== 'email'), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), loading: loading }))] })) })) : null }));
+                                }, 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 }), 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 }));
 };
 
-export { AuthProvider, AuthUIPreview, SmartlinksAuthUI as FirebaseAuthUI, ProtectedRoute, SmartlinksAuthUI, tokenStorage, useAuth };
+export { AccountManagement, AuthProvider, AuthUIPreview, SmartlinksAuthUI as FirebaseAuthUI, ProtectedRoute, SmartlinksAuthUI, tokenStorage, useAuth };
 //# sourceMappingURL=index.esm.js.map