@proveanything/smartlinks-auth-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,867 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var smartlinks = require('@proveanything/smartlinks');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var smartlinks__namespace = /*#__PURE__*/_interopNamespaceDefault(smartlinks);
+
+const AuthContainer = ({ children, theme = 'light', className = '', config, }) => {
+    // Apply CSS variables for customization
+    react.useEffect(() => {
+        if (!config?.branding)
+            return;
+        const root = document.documentElement;
+        const { branding } = config;
+        if (branding.primaryColor) {
+            root.style.setProperty('--auth-primary-color', branding.primaryColor);
+        }
+        if (branding.secondaryColor) {
+            root.style.setProperty('--auth-secondary-color', branding.secondaryColor);
+        }
+        if (branding.backgroundColor) {
+            root.style.setProperty('--auth-bg-color', branding.backgroundColor);
+        }
+        if (branding.fontFamily) {
+            root.style.setProperty('--auth-font-family', branding.fontFamily);
+        }
+        // Inject custom CSS if provided
+        if (branding.customCss) {
+            const styleId = 'auth-custom-styles';
+            let styleEl = document.getElementById(styleId);
+            if (!styleEl) {
+                styleEl = document.createElement('style');
+                styleEl.id = styleId;
+                document.head.appendChild(styleEl);
+            }
+            styleEl.textContent = branding.customCss;
+        }
+        return () => {
+            // Cleanup on unmount
+            root.style.removeProperty('--auth-primary-color');
+            root.style.removeProperty('--auth-secondary-color');
+            root.style.removeProperty('--auth-bg-color');
+            root.style.removeProperty('--auth-font-family');
+        };
+    }, [config]);
+    const title = config?.branding?.title || 'Smartlinks Auth';
+    const subtitle = config?.branding?.subtitle || 'Sign in to your account';
+    const logoUrl = config?.branding?.logoUrl;
+    return (jsxRuntime.jsx("div", { className: `auth-container auth-theme-${theme} ${className}`, children: jsxRuntime.jsxs("div", { className: "auth-card", style: { borderRadius: config?.branding?.buttonStyle === 'square' ? '4px' : '12px' }, children: [jsxRuntime.jsxs("div", { className: "auth-header", children: [jsxRuntime.jsx("div", { className: "auth-logo", children: logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, alt: "Logo", style: { width: 40, height: 40, objectFit: 'contain' } })) : (jsxRuntime.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("rect", { width: "40", height: "40", rx: "8", fill: "url(#gradient)" }), jsxRuntime.jsx("path", { d: "M20 10L12 18L20 26L28 18L20 10Z", fill: "white", fillOpacity: "0.9" }), jsxRuntime.jsx("path", { d: "M20 18L16 22L20 26L24 22L20 18Z", fill: "white" }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "40", y2: "40", gradientUnits: "userSpaceOnUse", children: [jsxRuntime.jsx("stop", { stopColor: "var(--auth-primary-color, #3B82F6)" }), jsxRuntime.jsx("stop", { offset: "1", stopColor: "var(--auth-secondary-color, #1D4ED8)" })] }) })] })) }), jsxRuntime.jsx("h1", { className: "auth-title", children: title }), jsxRuntime.jsx("p", { className: "auth-subtitle", children: subtitle })] }), jsxRuntime.jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (jsxRuntime.jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && jsxRuntime.jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && jsxRuntime.jsx("span", { children: "\u2022" }), config.branding.privacyUrl && jsxRuntime.jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
+};
+
+const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, }) => {
+    const [formData, setFormData] = react.useState({
+        email: '',
+        password: '',
+        displayName: '',
+    });
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        await onSubmit(formData);
+    };
+    const handleChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+    return (jsxRuntime.jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("h2", { className: "auth-form-title", children: mode === 'login' ? 'Sign in' : 'Create account' }), jsxRuntime.jsx("p", { className: "auth-form-subtitle", children: mode === 'login'
+                            ? 'Welcome back! Please enter your credentials.'
+                            : 'Get started by creating your account.' })] }), error && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), jsxRuntime.jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsxRuntime.jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'login' && (jsxRuntime.jsx("div", { className: "auth-form-footer", children: jsxRuntime.jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsxRuntime.jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), jsxRuntime.jsxs("div", { className: "auth-divider", children: [jsxRuntime.jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), jsxRuntime.jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
+};
+
+const ProviderButtons = ({ enabledProviders, onGoogleLogin, onPhoneLogin, loading, }) => {
+    if (enabledProviders.length === 0)
+        return null;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "auth-or-divider", children: jsxRuntime.jsx("span", { children: "or continue with" }) }), jsxRuntime.jsxs("div", { className: "auth-provider-buttons", children: [enabledProviders.includes('google') && (jsxRuntime.jsxs("button", { type: "button", className: "auth-provider-button", onClick: onGoogleLogin, disabled: loading, children: [jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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') && (jsxRuntime.jsxs("button", { type: "button", className: "auth-provider-button", onClick: onPhoneLogin, disabled: loading, children: [jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: jsxRuntime.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"] }))] })] }));
+};
+
+const PhoneAuthForm = ({ onSubmit, onBack, loading, error, }) => {
+    const [phoneNumber, setPhoneNumber] = react.useState('');
+    const [verificationCode, setVerificationCode] = react.useState('');
+    const [codeSent, setCodeSent] = react.useState(false);
+    const handleSendCode = async (e) => {
+        e.preventDefault();
+        await onSubmit(phoneNumber);
+        setCodeSent(true);
+    };
+    const handleVerifyCode = async (e) => {
+        e.preventDefault();
+        await onSubmit(phoneNumber, verificationCode);
+    };
+    return (jsxRuntime.jsxs("form", { className: "auth-form", onSubmit: codeSent ? handleVerifyCode : handleSendCode, children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("h2", { className: "auth-form-title", children: "Phone Authentication" }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), !codeSent ? (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "phoneNumber", className: "auth-label", children: "Phone Number" }), jsxRuntime.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" })] })) : (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "verificationCode", className: "auth-label", children: "Verification Code" }), jsxRuntime.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}" })] })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsxRuntime.jsx("span", { className: "auth-spinner" })) : codeSent ? ('Verify Code') : ('Send Code') }), jsxRuntime.jsx("div", { className: "auth-divider", children: jsxRuntime.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, }) => {
+    const [email, setEmail] = react.useState('');
+    const [password, setPassword] = react.useState('');
+    const [confirmPassword, setConfirmPassword] = react.useState('');
+    const [passwordError, setPasswordError] = react.useState('');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (token) {
+            // Reset password with token
+            if (password !== confirmPassword) {
+                setPasswordError('Passwords do not match');
+                return;
+            }
+            if (password.length < 6) {
+                setPasswordError('Password must be at least 6 characters');
+                return;
+            }
+            setPasswordError('');
+            await onSubmit(password, confirmPassword);
+        }
+        else {
+            // Request password reset
+            await onSubmit(email);
+        }
+    };
+    if (success) {
+        return (jsxRuntime.jsxs("div", { className: "auth-form", children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("div", { style: { textAlign: 'center', marginBottom: '1rem' }, children: jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", style: { margin: '0 auto' }, children: [jsxRuntime.jsx("circle", { cx: "32", cy: "32", r: "32", fill: "#10b981", fillOpacity: "0.1" }), jsxRuntime.jsx("path", { d: "M20 32l8 8 16-16", stroke: "#10b981", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })] }) }), jsxRuntime.jsx("h2", { className: "auth-form-title", children: token ? 'Password reset!' : 'Check your email' }), jsxRuntime.jsx("p", { className: "auth-form-subtitle", children: token
+                                ? 'Your password has been successfully reset. You can now sign in with your new password.'
+                                : `We've sent password reset instructions to ${email}` })] }), jsxRuntime.jsx("button", { type: "button", className: "auth-button auth-button-primary", onClick: onBack, children: "Back to Sign in" })] }));
+    }
+    return (jsxRuntime.jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "auth-form-header", children: [jsxRuntime.jsx("h2", { className: "auth-form-title", children: token ? 'Set new password' : 'Reset your password' }), jsxRuntime.jsx("p", { className: "auth-form-subtitle", children: token
+                            ? 'Enter your new password below.'
+                            : "Enter your email address and we'll send you instructions to reset your password." })] }), (error || passwordError) && (jsxRuntime.jsxs("div", { className: "auth-error", role: "alert", children: [jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error || passwordError] })), token ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "password", className: "auth-label", children: "New Password" }), jsxRuntime.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 })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "confirmPassword", className: "auth-label", children: "Confirm Password" }), jsxRuntime.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 })] })] })) : (jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), jsxRuntime.jsx("input", { type: "email", id: "email", className: "auth-input", value: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] })), jsxRuntime.jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (jsxRuntime.jsx("span", { className: "auth-spinner" })) : token ? ('Reset password') : ('Send reset instructions') }), jsxRuntime.jsx("div", { className: "auth-divider", children: jsxRuntime.jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onBack, disabled: loading, children: "\u2190 Back to Sign in" }) })] }));
+};
+
+/**
+ * AuthAPI - Thin wrapper around Smartlinks SDK authKit namespace
+ * All authentication operations now use the global Smartlinks SDK
+ */
+class AuthAPI {
+    constructor(_apiEndpoint, clientId, clientName) {
+        // apiEndpoint is kept for backward compatibility but not used
+        // Smartlinks SDK is pre-configured globally
+        this.clientId = clientId;
+        this.clientName = clientName;
+    }
+    async login(email, password) {
+        return smartlinks__namespace.authKit.login(this.clientId, email, password);
+    }
+    async register(data) {
+        return smartlinks__namespace.authKit.register(this.clientId, {
+            email: data.email,
+            password: data.password,
+            displayName: data.displayName,
+            accountData: data.accountData,
+        });
+    }
+    async loginWithGoogle(idToken) {
+        return smartlinks__namespace.authKit.googleLogin(this.clientId, idToken);
+    }
+    async sendPhoneCode(phoneNumber) {
+        return smartlinks__namespace.authKit.sendPhoneCode(this.clientId, phoneNumber);
+    }
+    async verifyPhoneCode(verificationId, code) {
+        return smartlinks__namespace.authKit.verifyPhoneCode(this.clientId, verificationId, code);
+    }
+    async requestPasswordReset(email, redirectUrl) {
+        return smartlinks__namespace.authKit.requestPasswordReset(this.clientId, {
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    async verifyResetToken(token) {
+        return smartlinks__namespace.authKit.verifyResetToken(this.clientId, token);
+    }
+    async completePasswordReset(token, newPassword) {
+        return smartlinks__namespace.authKit.completePasswordReset(this.clientId, token, newPassword);
+    }
+    async sendEmailVerification(userId, email, redirectUrl) {
+        return smartlinks__namespace.authKit.sendEmailVerification(this.clientId, {
+            userId,
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    async verifyEmailWithToken(token) {
+        return smartlinks__namespace.authKit.verifyEmail(this.clientId, token);
+    }
+    async resendVerification(userId, email, redirectUrl) {
+        return smartlinks__namespace.authKit.resendEmailVerification(this.clientId, {
+            userId,
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    async fetchConfig() {
+        try {
+            return await smartlinks__namespace.authKit.load(this.clientId);
+        }
+        catch (error) {
+            console.warn('Failed to fetch UI config, using defaults:', error);
+            return {
+                branding: {
+                    title: 'Smartlinks Auth',
+                    subtitle: 'Sign in to your account',
+                    primaryColor: '#3B82F6',
+                    secondaryColor: '#1D4ED8',
+                    backgroundColor: '#e0f2fe',
+                    buttonStyle: 'rounded',
+                    fontFamily: 'Inter, sans-serif'
+                }
+            };
+        }
+    }
+}
+
+const TOKEN_KEY = 'smartlinks_auth_token';
+const USER_KEY = 'smartlinks_auth_user';
+const ACCOUNT_DATA_KEY = 'smartlinks_account_data';
+const tokenStorage = {
+    saveToken(token, expiresAt) {
+        const authToken = {
+            token,
+            expiresAt: expiresAt || Date.now() + 3600000, // Default 1 hour
+        };
+        localStorage.setItem(TOKEN_KEY, JSON.stringify(authToken));
+    },
+    getToken() {
+        const stored = localStorage.getItem(TOKEN_KEY);
+        if (!stored)
+            return null;
+        try {
+            const authToken = JSON.parse(stored);
+            // Check if token is expired
+            if (authToken.expiresAt && authToken.expiresAt < Date.now()) {
+                this.clearToken();
+                return null;
+            }
+            return authToken;
+        }
+        catch {
+            return null;
+        }
+    },
+    clearToken() {
+        localStorage.removeItem(TOKEN_KEY);
+    },
+    saveUser(user) {
+        localStorage.setItem(USER_KEY, JSON.stringify(user));
+    },
+    getUser() {
+        const stored = localStorage.getItem(USER_KEY);
+        if (!stored)
+            return null;
+        try {
+            return JSON.parse(stored);
+        }
+        catch {
+            return null;
+        }
+    },
+    clearUser() {
+        localStorage.removeItem(USER_KEY);
+    },
+    clearAll() {
+        this.clearToken();
+        this.clearUser();
+        this.clearAccountData();
+    },
+    saveAccountData(data) {
+        localStorage.setItem(ACCOUNT_DATA_KEY, JSON.stringify(data));
+    },
+    getAccountData() {
+        const stored = localStorage.getItem(ACCOUNT_DATA_KEY);
+        if (!stored)
+            return null;
+        try {
+            return JSON.parse(stored);
+        }
+        catch {
+            return null;
+        }
+    },
+    clearAccountData() {
+        localStorage.removeItem(ACCOUNT_DATA_KEY);
+    },
+};
+
+const AuthContext = react.createContext(undefined);
+const AuthProvider = ({ children }) => {
+    const [user, setUser] = react.useState(null);
+    const [token, setToken] = react.useState(null);
+    const [accountData, setAccountData] = react.useState(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    // Initialize auth state from localStorage
+    react.useEffect(() => {
+        const storedToken = tokenStorage.getToken();
+        const storedUser = tokenStorage.getUser();
+        const storedAccountData = tokenStorage.getAccountData();
+        if (storedToken && storedUser) {
+            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__namespace.setBearerToken(storedToken.token);
+        }
+        setIsLoading(false);
+    }, []);
+    const login = react.useCallback((authToken, authUser, authAccountData) => {
+        // Store token, user, and account data
+        tokenStorage.saveToken(authToken);
+        tokenStorage.saveUser(authUser);
+        if (authAccountData) {
+            tokenStorage.saveAccountData(authAccountData);
+        }
+        setToken(authToken);
+        setUser(authUser);
+        setAccountData(authAccountData || null);
+        // Set bearer token in global Smartlinks SDK
+        // @ts-expect-error - setBearerToken exists in runtime but may not be in type definitions
+        smartlinks__namespace.setBearerToken(authToken);
+    }, []);
+    const logout = react.useCallback(async () => {
+        // Clear local storage
+        tokenStorage.clearAll();
+        setToken(null);
+        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__namespace.setBearerToken(undefined);
+    }, []);
+    const getToken = react.useCallback(() => {
+        const storedToken = tokenStorage.getToken();
+        return storedToken ? storedToken.token : null;
+    }, []);
+    const refreshToken = react.useCallback(async () => {
+        throw new Error('Token refresh must be implemented via your backend API');
+    }, []);
+    const value = {
+        user,
+        token,
+        accountData,
+        isAuthenticated: !!token && !!user,
+        isLoading,
+        login,
+        logout,
+        getToken,
+        refreshToken,
+    };
+    return jsxRuntime.jsx(AuthContext.Provider, { value: value, children: children });
+};
+const useAuth = () => {
+    const context = react.useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+};
+
+const ProtectedRoute = ({ children, fallback, redirectTo, }) => {
+    const { isAuthenticated, isLoading } = useAuth();
+    // Show loading state
+    if (isLoading) {
+        return jsxRuntime.jsx("div", { children: "Loading..." });
+    }
+    // If not authenticated, redirect or show fallback
+    if (!isAuthenticated) {
+        if (redirectTo) {
+            window.location.href = redirectTo;
+            return null;
+        }
+        return fallback ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : jsxRuntime.jsx("div", { children: "Access denied. Please log in." });
+    }
+    // Render protected content
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+
+const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], theme = 'light', className, }) => {
+    const showEmail = enabledProviders.includes('email');
+    const showGoogle = enabledProviders.includes('google');
+    const showPhone = enabledProviders.includes('phone');
+    const hasProviders = showGoogle || showPhone;
+    return (jsxRuntime.jsxs(AuthContainer, { theme: theme, className: className, config: customization, children: [showEmail && (jsxRuntime.jsxs("div", { className: "auth-form", children: [jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Email" }), jsxRuntime.jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), jsxRuntime.jsxs("div", { className: "auth-form-group", children: [jsxRuntime.jsx("label", { className: "auth-label", children: "Password" }), jsxRuntime.jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), jsxRuntime.jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), jsxRuntime.jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), jsxRuntime.jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', jsxRuntime.jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasProviders && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showEmail && (jsxRuntime.jsx("div", { className: "auth-or-divider", children: jsxRuntime.jsx("span", { children: "or continue with" }) })), jsxRuntime.jsxs("div", { className: "auth-provider-buttons", children: [showGoogle && (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsxRuntime.jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsxRuntime.jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsxRuntime.jsx("span", { children: "Google" })] })), showPhone && (jsxRuntime.jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsxRuntime.jsx("span", { children: "Phone" })] }))] })] }))] }));
+};
+
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, }) => {
+    const [mode, setMode] = react.useState('login');
+    const [loading, setLoading] = react.useState(false);
+    const [error, setError] = react.useState();
+    const [resetSuccess, setResetSuccess] = react.useState(false);
+    const [authSuccess, setAuthSuccess] = react.useState(false);
+    const [successMessage, setSuccessMessage] = react.useState();
+    const [verificationId, setVerificationId] = react.useState();
+    const [showResendVerification, setShowResendVerification] = react.useState(false);
+    const [resendEmail, setResendEmail] = react.useState();
+    const [showRequestNewReset, setShowRequestNewReset] = react.useState(false);
+    const [resetRequestEmail, setResetRequestEmail] = react.useState();
+    const [resetToken, setResetToken] = react.useState(); // Store the reset token from URL
+    const [config, setConfig] = react.useState(null);
+    const [configLoading, setConfigLoading] = react.useState(!skipConfigFetch);
+    const api = new AuthAPI(apiEndpoint, clientId, clientName);
+    const auth = useAuth();
+    // Get the effective redirect URL (use prop or default to current page)
+    const getRedirectUrl = () => {
+        if (redirectUrl)
+            return redirectUrl;
+        // Get the full current URL including hash routes
+        // Remove any existing query parameters to avoid duplication
+        const currentUrl = window.location.href.split('?')[0];
+        return currentUrl;
+    };
+    // Fetch UI configuration
+    react.useEffect(() => {
+        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]);
+    // Handle URL-based auth flows (email verification, password reset)
+    react.useEffect(() => {
+        // Helper to get URL parameters from either hash or search
+        const getUrlParams = () => {
+            // First check if there are params in the hash (for hash routing)
+            const hash = window.location.hash;
+            const hashQueryIndex = hash.indexOf('?');
+            if (hashQueryIndex !== -1) {
+                // Extract query string from hash (e.g., #/test?mode=verifyEmail&token=abc)
+                const hashQuery = hash.substring(hashQueryIndex + 1);
+                return new URLSearchParams(hashQuery);
+            }
+            // Fall back to regular search params (for non-hash routing)
+            return new URLSearchParams(window.location.search);
+        };
+        const params = getUrlParams();
+        const urlMode = params.get('mode');
+        const token = params.get('token');
+        console.log('URL params detected:', { urlMode, token, hash: window.location.hash, search: window.location.search });
+        if (urlMode && token) {
+            handleURLBasedAuth(urlMode, token);
+        }
+    }, []);
+    const handleURLBasedAuth = async (urlMode, token) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            if (urlMode === 'verifyEmail') {
+                console.log('Verifying email with token:', token);
+                const response = await api.verifyEmailWithToken(token);
+                // Get email verification mode from 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
+                    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: 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);
+            }
+        }
+        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 {
+                setError(errorMessage);
+            }
+            onAuthError?.(err instanceof Error ? err : new Error('An error occurred'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleEmailAuth = async (data) => {
+        setLoading(true);
+        setError(undefined);
+        setAuthSuccess(false);
+        try {
+            const response = mode === 'login'
+                ? await api.login(data.email, data.password)
+                : await api.register({
+                    ...data,
+                    accountData: mode === 'register' ? accountData : undefined,
+                    redirectUrl: getRedirectUrl(), // Include redirect URL for email verification
+                });
+            // Get email verification mode from config (default: verify-then-auto-login)
+            const verificationMode = 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
+                    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);
+                    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
+                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);
+                }
+            }
+        }
+        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));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleResendVerification = async () => {
+        if (!resendEmail)
+            return;
+        setLoading(true);
+        setError(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);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to resend verification email';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleRequestNewReset = async () => {
+        if (!resetRequestEmail)
+            return;
+        setLoading(true);
+        setError(undefined);
+        try {
+            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 send password reset email';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleGoogleLogin = async () => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            // In a real implementation, this would open Google OAuth flow
+            // For now, this is a placeholder that the consuming app would implement
+            throw new Error('Google OAuth flow must be implemented in your application');
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handlePhoneAuth = async (phoneNumber, verificationCode) => {
+        setLoading(true);
+        setError(undefined);
+        try {
+            if (!verificationCode) {
+                // Send verification code
+                const result = await api.sendPhoneCode(phoneNumber);
+                setVerificationId(result.verificationId);
+            }
+            else {
+                // Verify code
+                if (!verificationId) {
+                    throw new Error('Verification ID not found');
+                }
+                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;
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Phone authentication failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    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);
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Password reset failed';
+            setError(errorMessage);
+            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (configLoading) {
+        return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
+    }
+    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: config, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
+                        color: 'var(--auth-primary-color, #4F46E5)',
+                        fontSize: '3rem',
+                        marginBottom: '1rem'
+                    }, children: "\u2713" }), jsxRuntime.jsx("h2", { style: {
+                        marginBottom: '0.5rem',
+                        fontSize: '1.5rem',
+                        fontWeight: 600
+                    }, children: successMessage?.includes('verified') ? 'Email Verified!' :
+                        mode === 'register' ? 'Account Created!' : 'Login Successful!' }), jsxRuntime.jsx("p", { style: {
+                        color: '#6B7280',
+                        fontSize: '0.875rem'
+                    }, children: successMessage })] })) : mode === 'phone' ? (jsxRuntime.jsx(PhoneAuthForm, { onSubmit: handlePhoneAuth, onBack: () => setMode('login'), loading: loading, error: error })) : mode === 'reset-password' ? (jsxRuntime.jsx(PasswordResetForm, { onSubmit: handlePasswordReset, onBack: () => {
+                setMode('login');
+                setResetSuccess(false);
+                setResetToken(undefined); // Clear token when going back
+            }, loading: loading, error: error, success: resetSuccess, token: resetToken })) : (mode === 'login' || mode === 'register') ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showResendVerification ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(79, 70, 229, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Verification Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your verification link has expired or is no longer valid. Please enter your email address below and we'll send you a new verification link." }), jsxRuntime.jsx("input", { type: "email", value: resendEmail || '', onChange: (e) => setResendEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleResendVerification, disabled: loading || !resendEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'var(--auth-primary-color, #4F46E5)',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resendEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resendEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Verification Link' }), jsxRuntime.jsx("button", { onClick: () => {
+                                    setShowResendVerification(false);
+                                    setResendEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : showRequestNewReset ? (jsxRuntime.jsxs("div", { style: { marginTop: '1rem', padding: '1.5rem', backgroundColor: 'rgba(239, 68, 68, 0.05)', borderRadius: '0.5rem' }, children: [jsxRuntime.jsx("h3", { style: { marginBottom: '0.75rem', fontSize: '1rem', fontWeight: 600, color: 'var(--auth-text-color, #374151)' }, children: "Password Reset Link Expired" }), jsxRuntime.jsx("p", { style: { marginBottom: '1rem', fontSize: '0.875rem', color: 'var(--auth-text-color, #6B7280)', lineHeight: '1.5' }, children: "Your password reset link has expired or is no longer valid. Please enter your email address below and we'll send you a new password reset link." }), jsxRuntime.jsx("input", { type: "email", value: resetRequestEmail || '', onChange: (e) => setResetRequestEmail(e.target.value), placeholder: "your@email.com", style: {
+                            width: '100%',
+                            padding: '0.625rem',
+                            marginBottom: '1rem',
+                            border: '1px solid var(--auth-border-color, #D1D5DB)',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.875rem',
+                            boxSizing: 'border-box'
+                        } }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '0.75rem' }, children: [jsxRuntime.jsx("button", { onClick: handleRequestNewReset, disabled: loading || !resetRequestEmail, style: {
+                                    flex: 1,
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: '#EF4444',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '0.375rem',
+                                    cursor: (loading || !resetRequestEmail) ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: (loading || !resetRequestEmail) ? 0.6 : 1
+                                }, children: loading ? 'Sending...' : 'Send New Reset Link' }), jsxRuntime.jsx("button", { onClick: () => {
+                                    setShowRequestNewReset(false);
+                                    setResetRequestEmail('');
+                                    setError(undefined);
+                                }, disabled: loading, style: {
+                                    padding: '0.625rem 1rem',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--auth-text-color, #6B7280)',
+                                    border: '1px solid var(--auth-border-color, #D1D5DB)',
+                                    borderRadius: '0.375rem',
+                                    cursor: loading ? 'not-allowed' : 'pointer',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    opacity: loading ? 0.6 : 1
+                                }, children: "Cancel" })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EmailAuthForm, { mode: mode, onSubmit: handleEmailAuth, onModeSwitch: () => {
+                            setMode(mode === 'login' ? 'register' : 'login');
+                            setShowResendVerification(false);
+                            setShowRequestNewReset(false);
+                            setError(undefined);
+                        }, onForgotPassword: () => setMode('reset-password'), loading: loading, error: error }), ((config?.enabledProviders || enabledProviders).length > 1) && (jsxRuntime.jsx(ProviderButtons, { enabledProviders: (config?.enabledProviders || enabledProviders).filter((p) => p !== 'email'), onGoogleLogin: handleGoogleLogin, onPhoneLogin: () => setMode('phone'), loading: loading }))] })) })) : null }));
+};
+
+exports.AuthProvider = AuthProvider;
+exports.AuthUIPreview = AuthUIPreview;
+exports.FirebaseAuthUI = SmartlinksAuthUI;
+exports.ProtectedRoute = ProtectedRoute;
+exports.SmartlinksAuthUI = SmartlinksAuthUI;
+exports.tokenStorage = tokenStorage;
+exports.useAuth = useAuth;
+//# sourceMappingURL=index.js.map