@proveanything/smartlinks-auth-ui 0.3.10 → 0.3.11

package/dist/components/AccountManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountManagement.d.ts","sourceRoot":"","sources":["../../src/components/AccountManagement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,UAAU,CAAC;AACpE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0vB9D,CAAC"}
+{"version":3,"file":"AccountManagement.d.ts","sourceRoot":"","sources":["../../src/components/AccountManagement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,UAAU,CAAC;AACpE,OAAO,qBAAqB,CAAC;AAO7B,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0wB9D,CAAC"}

package/dist/components/SmartlinksAuthUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAY5D,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AAkH7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CAmCjD,CAAC;AAwEF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAK/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyhD5D,CAAC"}
+{"version":3,"file":"SmartlinksAuthUI.d.ts","sourceRoot":"","sources":["../../src/components/SmartlinksAuthUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAY5D,OAAO,KAAK,EAAE,qBAAqB,EAAyF,MAAM,UAAU,CAAC;AA0I7I,QAAA,MAAM,mBAAmB,QAAa,OAAO,CAAC,IAAI,CAmCjD,CAAC;AAwEF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAK/B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0mD5D,CAAC"}

package/dist/context/AuthContext.d.ts

@@ -1,35 +1,5 @@
 import React from 'react';
-import type { ContactResponse } from '@proveanything/smartlinks';
-import type { AuthUser, AuthStateChangeCallback, AuthProviderProps } from '../types';
-interface AuthContextValue {
-    user: AuthUser | null;
-    token: string | null;
-    accountData: Record<string, any> | null;
-    accountInfo: Record<string, any> | null;
-    isAuthenticated: boolean;
-    isVerified: boolean;
-    isLoading: boolean;
-    isOnline: boolean;
-    proxyMode: boolean;
-    contact: ContactResponse | null;
-    contactId: string | null;
-    getContact: (forceRefresh?: boolean) => Promise<ContactResponse | null>;
-    updateContactCustomFields: (customFields: Record<string, any>) => Promise<ContactResponse>;
-    login: (token: string, user: AuthUser, accountData?: Record<string, any>, isNewUser?: boolean, expiresAt?: number) => Promise<void>;
-    logout: () => Promise<void>;
-    getToken: () => Promise<string | null>;
-    getTokenInfo: () => Promise<{
-        token: string;
-        expiresAt: number;
-        expiresIn: number;
-    } | null>;
-    refreshToken: () => Promise<string>;
-    getAccount: (forceRefresh?: boolean) => Promise<Record<string, any>>;
-    refreshAccount: () => Promise<Record<string, any>>;
-    clearAccountCache: () => Promise<void>;
-    onAuthStateChange: (callback: AuthStateChangeCallback) => () => void;
-    retryVerification: () => Promise<boolean>;
-}
+import type { AuthProviderProps, AuthContextValue } from '../types';
 export declare const AuthContext: React.Context<AuthContextValue | undefined>;
 export type { AuthContextValue };
 export declare const AuthProvider: React.FC<AuthProviderProps>;

package/dist/context/AuthContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../../src/context/AuthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGjE,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAErF,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACxC,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IAGnB,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACxE,yBAAyB,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IAG3F,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpI,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,YAAY,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC5F,YAAY,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IACpC,UAAU,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACrE,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACnD,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,uBAAuB,KAAK,MAAM,IAAI,CAAC;IACrE,iBAAiB,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3C;AAGD,eAAO,MAAM,WAAW,6CAAyD,CAAC;AAGlF,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0yBpD,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,gBAM1B,CAAC"}
+{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../../src/context/AuthContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAMnG,OAAO,KAAK,EAAqC,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGvG,eAAO,MAAM,WAAW,6CAAyD,CAAC;AAGlF,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAq0BpD,CAAC;AAEF,eAAO,MAAM,OAAO,QAAO,gBAM1B,CAAC"}

package/dist/index.esm.js

@@ -11530,21 +11530,48 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             return null;
         }
     }, [collectionId, shouldSyncContacts, proxyMode, token, accountData, accountInfo, isVerified, notifyAuthStateChange]);
+    // Detect legacy vs new interactionConfig shape
+    const isLegacyConfig = interactionConfig && !('interactionId' in interactionConfig) && ('login' in interactionConfig || 'logout' in interactionConfig || 'signup' in interactionConfig);
+    if (isLegacyConfig) {
+        console.warn('[AuthContext] Deprecated: interactionConfig uses legacy per-event-type IDs. Migrate to { interactionId, scopes? } shape. Legacy support will be removed in a future release.');
+    }
     // Track interaction event (non-blocking)
-    // IMPORTANT: Only tracks if an explicit interaction ID is configured for the event type.
-    // Interaction IDs must be pre-created in SmartLinks - you cannot use arbitrary IDs.
+    // Uses scope-based architecture: single interactionId + scope field to differentiate events.
     const trackInteraction = useCallback(async (eventType, userId, currentContactId, metadata) => {
         if (!collectionId || !shouldTrackInteractions)
             return;
-        const interactionIdMap = {
-            login: interactionConfig?.login,
-            logout: interactionConfig?.logout,
-            signup: interactionConfig?.signup,
-            session_restore: interactionConfig?.sessionRestore,
-        };
-        const interactionId = interactionIdMap[eventType];
-        if (!interactionId)
+        let interactionId;
+        let scope;
+        if (isLegacyConfig) {
+            // Legacy: per-event-type IDs (deprecated)
+            const legacyConfig = interactionConfig;
+            const legacyMap = {
+                login: legacyConfig?.login,
+                logout: legacyConfig?.logout,
+                signup: legacyConfig?.signup,
+                session_restore: legacyConfig?.sessionRestore,
+            };
+            interactionId = legacyMap[eventType];
+            if (!interactionId)
+                return;
+        }
+        else if (interactionConfig && 'interactionId' in interactionConfig) {
+            // New: single ID + scope
+            interactionId = interactionConfig.interactionId;
+            if (!interactionId)
+                return;
+            const defaultScopes = {
+                login: 'login',
+                logout: 'logout',
+                signup: 'signup',
+                session_restore: 'session_restore',
+            };
+            const customScopes = interactionConfig.scopes || {};
+            scope = customScopes[eventType === 'session_restore' ? 'sessionRestore' : eventType] || defaultScopes[eventType];
+        }
+        else {
             return;
+        }
         try {
             await smartlinks.interactions.submitPublicEvent(collectionId, {
                 collectionId,
@@ -11552,7 +11579,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                 userId,
                 contactId: currentContactId || undefined,
                 appId: interactionAppId,
-                eventType,
+                scope,
                 outcome: 'completed',
                 metadata: {
                     ...metadata,
@@ -11565,7 +11592,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         catch (err) {
             // Non-blocking
         }
-    }, [collectionId, shouldTrackInteractions, interactionAppId, interactionConfig, user, token, accountData, accountInfo, isVerified, contact, contactId, notifyAuthStateChange]);
+    }, [collectionId, shouldTrackInteractions, interactionAppId, interactionConfig, isLegacyConfig, user, token, accountData, accountInfo, isVerified, contact, contactId, notifyAuthStateChange]);
     // Keep refs in sync with latest callbacks (avoids stale closures)
     useEffect(() => {
         syncContactRef.current = syncContact;
@@ -11670,7 +11697,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                             pendingVerificationRef.current = false;
                             notifyAuthStateChange('SESSION_VERIFIED', storedUser, storedToken.token, storedAccountData || null, null, true, null, storedContactId);
                             // Track session restore interaction (optional) - use ref for stable dependency
-                            if (interactionConfig?.sessionRestore) {
+                            if (interactionConfig && ('interactionId' in interactionConfig || interactionConfig?.sessionRestore)) {
                                 trackInteractionRef.current?.('session_restore', storedUser.uid, storedContactId);
                             }
                         }
@@ -11716,7 +11743,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         return () => {
             isMounted = false;
         };
-    }, [proxyMode, notifyAuthStateChange, isNetworkError, interactionConfig?.sessionRestore]);
+    }, [proxyMode, notifyAuthStateChange, isNetworkError, interactionConfig]);
     // Listen for parent auth state changes (proxy mode only)
     useEffect(() => {
         if (!proxyMode)
@@ -12085,9 +12112,9 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                 if (!storedToken?.expiresAt)
                     return;
                 const now = Date.now();
-                const tokenLifetime = storedToken.expiresAt - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000));
-                const tokenAge = now - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000));
-                const percentUsed = (tokenAge / tokenLifetime) * 100;
+                const remainingMs = storedToken.expiresAt - now;
+                const totalLifetimeMs = 7 * 24 * 60 * 60 * 1000;
+                const percentUsed = totalLifetimeMs > 0 ? ((totalLifetimeMs - remainingMs) / totalLifetimeMs) * 100 : 100;
                 if (percentUsed >= refreshThresholdPercent) {
                     try {
                         await refreshToken();
@@ -12283,6 +12310,25 @@ const getExpirationFromResponse = (response) => {
 };
 // Default Smartlinks Google OAuth Client ID (public - safe to expose)
 const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
+// Default Google OAuth proxy URL (hosted on our whitelisted domain)
+const DEFAULT_GOOGLE_PROXY_URL = 'https://smartlinks-auth-kit.lovable.app/google-proxy.html';
+// Exact hostnames where Google OAuth is registered and inline/OneTap flow works directly.
+// Only specific registered origins — NOT broad wildcards like *.lovable.app
+const WHITELISTED_GOOGLE_OAUTH_HOSTS = [
+    'smartlinks-auth-kit.lovable.app', // This app's dev/preview domain (registered in Google Console)
+    'smartlinks.app', // Production root
+    'localhost', // Local dev
+    '127.0.0.1', // Local dev
+];
+/**
+ * Check if the current domain is whitelisted for direct Google OAuth.
+ * Uses exact hostname match (plus subdomain match for smartlinks.app production).
+ * Returns true if OneTap/inline flow can work without a proxy.
+ */
+const isWhitelistedGoogleDomain = () => {
+    const hostname = window.location.hostname;
+    return WHITELISTED_GOOGLE_OAUTH_HOSTS.some(domain => hostname === domain || hostname.endsWith(`.${domain}`));
+};
 // Default auth UI configuration when no clientId is provided
 const DEFAULT_AUTH_CONFIG = {
     branding: {
@@ -13051,16 +13097,29 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     const handleGoogleLogin = async () => {
+        const hasCustomGoogleClientId = !!config?.googleClientId;
         const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
         const configuredFlow = config?.googleOAuthFlow || 'oneTap';
         const isWebView = detectWebView();
         const nativeBridge = getNativeBridge();
         const oauthFlow = (configuredFlow === 'oneTap' && isWebView && !nativeBridge) ? 'redirect' : configuredFlow;
+        // Auto-detect proxy need:
+        // - If explicitly configured, use that URL
+        // - If user has their own Google Client ID, they've registered their domains — no proxy needed
+        // - If on a whitelisted SmartLinks domain, inline flow works directly
+        // - Otherwise, auto-use the default proxy URL
+        const isWhitelisted = isWhitelistedGoogleDomain();
+        const googleProxyUrl = config?.googleOAuthProxyUrl
+            || (!hasCustomGoogleClientId && !isWhitelisted ? DEFAULT_GOOGLE_PROXY_URL : undefined);
         log.log('Google Auth initiated:', {
             configuredFlow,
             effectiveFlow: oauthFlow,
             isWebView,
             hasNativeBridge: !!nativeBridge,
+            hasCustomGoogleClientId,
+            isWhitelistedDomain: isWhitelisted,
+            usingProxy: !!googleProxyUrl,
+            proxyUrl: googleProxyUrl,
         });
         setLoading(true);
         setError(undefined);
@@ -13135,6 +13194,70 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 setLoading(false);
                 return;
             }
+            // Priority 3: Google OAuth Proxy popup (for custom domains not registered in Google Console)
+            if (googleProxyUrl) {
+                log.log('Using Google OAuth proxy popup:', googleProxyUrl);
+                const proxyParams = new URLSearchParams({
+                    clientId,
+                    returnOrigin: window.location.origin,
+                    ...(apiEndpoint ? { apiEndpoint } : {}),
+                });
+                const popupUrl = `${googleProxyUrl}?${proxyParams.toString()}`;
+                const popup = window.open(popupUrl, 'google-oauth-proxy', 'width=500,height=600,menubar=no,toolbar=no,location=yes');
+                if (!popup) {
+                    setError('Popup blocked. Please allow popups for this site and try again.');
+                    setLoading(false);
+                    return;
+                }
+                // Listen for result from proxy popup
+                const handleProxyMessage = async (event) => {
+                    // Validate origin matches proxy URL
+                    try {
+                        const proxyOrigin = new URL(googleProxyUrl).origin;
+                        if (event.origin !== proxyOrigin)
+                            return;
+                    }
+                    catch {
+                        return;
+                    }
+                    if (event.data?.type !== 'smartlinks:google-proxy:result')
+                        return;
+                    window.removeEventListener('message', handleProxyMessage);
+                    clearInterval(checkClosed);
+                    try {
+                        if (event.data.success && event.data.token) {
+                            const { token, user, accountData, isNewUser, expiresAt, expiresIn } = event.data;
+                            const expiration = expiresAt || (expiresIn ? Date.now() + expiresIn : undefined);
+                            await auth.login(token, user, accountData, isNewUser, expiration);
+                            setAuthSuccess(true);
+                            setSuccessMessage('Google login successful!');
+                            onAuthSuccess(token, user, accountData);
+                        }
+                        else {
+                            const errorMsg = event.data.error || 'Google login failed';
+                            setError(getFriendlyErrorMessage(errorMsg));
+                            onAuthError?.(new Error(errorMsg));
+                        }
+                    }
+                    catch (err) {
+                        setError(getFriendlyErrorMessage(err));
+                        onAuthError?.(err instanceof Error ? err : new Error(getFriendlyErrorMessage(err)));
+                    }
+                    finally {
+                        setLoading(false);
+                    }
+                };
+                window.addEventListener('message', handleProxyMessage);
+                // Monitor popup close without result (user closed it)
+                const checkClosed = setInterval(() => {
+                    if (popup.closed) {
+                        clearInterval(checkClosed);
+                        window.removeEventListener('message', handleProxyMessage);
+                        setLoading(false);
+                    }
+                }, 500);
+                return; // Don't set loading to false - waiting for popup
+            }
             log.log('Using web-based OAuth flow:', oauthFlow);
             // Priority 3: Web-based flows (redirect, popup, oneTap)
             // Dynamically load Google Identity Services if not already loaded
@@ -13368,7 +13491,6 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             if (resetToken && confirmPassword) {
                 // Complete password reset with token
                 await api.completePasswordReset(resetToken, emailOrPassword);
-                await api.completePasswordReset(resetToken, emailOrPassword);
                 // Auto-login with the new password if we have the email
                 if (resetEmail) {
                     try {
@@ -13693,6 +13815,12 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
     const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, showCustomFields = true, // New: show schema-driven custom fields
      } = customization;
+    // Provider awareness helpers
+    // If providers is undefined (backend not updated yet), fall back to showing everything
+    const providers = profile?.providers;
+    const hasPassword = profile?.hasPassword ?? (providers === undefined ? undefined : providers?.includes('password'));
+    const isGoogleOnly = providers !== undefined && providers.includes('google.com') && !providers.includes('password');
+    const isPhoneOnly = providers !== undefined && providers.includes('phone') && providers.length === 1;
     // Reinitialize Smartlinks SDK when apiEndpoint changes
     useEffect(() => {
         if (apiEndpoint) {
@@ -13710,13 +13838,11 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
         const loadSchema = async () => {
             setSchemaLoading(true);
             try {
-                console.log('[AccountManagement] Loading schema for collection:', collectionId);
                 const schemaResult = await smartlinks.contact.publicGetSchema(collectionId);
-                console.log('[AccountManagement] Schema loaded:', schemaResult);
                 setSchema(schemaResult);
             }
             catch (err) {
-                console.warn('[AccountManagement] Failed to load schema:', err);
+                // Non-fatal - component works without schema
                 // Non-fatal - component works without schema
             }
             finally {
@@ -13731,7 +13857,6 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     // where getContact() is called before the server knows about the user.
     useEffect(() => {
         if (!auth.isAuthenticated || !auth.isVerified) {
-            console.log('[AccountManagement] Waiting for verified authentication before loading profile...');
             return;
         }
         loadProfile();
@@ -13832,7 +13957,7 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
         setError(undefined);
         setSuccess(undefined);
         try {
-            console.log('[AccountManagement] Updating custom fields:', customFieldValues);
+            await auth.updateContactCustomFields?.(customFieldValues);
             await auth.updateContactCustomFields?.(customFieldValues);
             setSuccess('Profile updated successfully!');
             setEditingSection(null);
@@ -13958,7 +14083,8 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
             setError('Please type DELETE to confirm account deletion');
             return;
         }
-        if (!deletePassword) {
+        // Only require password for users who have one
+        if (hasPassword !== false && !deletePassword) {
             setError('Password is required');
             return;
         }
@@ -13988,7 +14114,7 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     }
     return (jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Display Name" }), jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsx("div", { className: "form-group", children: jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showCustomFields && collectionId && editableCustomFields.length > 0 && (jsxs("section", { className: "account-section", children: [jsx("h3", { className: "section-title", style: { fontSize: '0.9rem', fontWeight: 600, marginBottom: '12px' }, children: "Additional Information" }), editingSection !== 'customFields' ? (jsxs(Fragment, { children: [editableCustomFields.map((field) => (jsx("div", { className: "account-field", children: jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: field.label }), jsx("div", { className: "field-value", children: customFieldValues[field.key] !== undefined && customFieldValues[field.key] !== ''
                                                 ? String(customFieldValues[field.key])
-                                                : 'Not set' })] }) }, field.key))), jsx("button", { type: "button", onClick: () => setEditingSection('customFields'), className: "auth-button button-secondary", style: { marginTop: '8px' }, children: "Edit Information" })] })) : (jsxs("form", { onSubmit: handleUpdateCustomFields, className: "edit-form", children: [editableCustomFields.map((field) => (jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key))), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Email Address" }), jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Password" }), jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Phone Number" }), jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxs("section", { className: "account-section danger-zone", children: [jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxs("div", { className: "delete-confirm", children: [jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsx("button", { type: "button", onClick: () => {
+                                                : 'Not set' })] }) }, field.key))), jsx("button", { type: "button", onClick: () => setEditingSection('customFields'), className: "auth-button button-secondary", style: { marginTop: '8px' }, children: "Edit Information" })] })) : (jsxs("form", { onSubmit: handleUpdateCustomFields, className: "edit-form", children: [editableCustomFields.map((field) => (jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key))), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Email Address" }), jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] }), isGoogleOnly && (jsx("div", { className: "field-hint", style: { fontSize: '0.8rem', color: 'var(--color-muted-foreground, #888)', marginTop: '4px' }, children: "This email is managed by your Google account" }))] }), editingSection !== 'email' && !isGoogleOnly && !isPhoneOnly && (jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && !isGoogleOnly && !isPhoneOnly && (jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && !isGoogleOnly && !isPhoneOnly && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Password" }), jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxs("section", { className: "account-section", children: [jsxs("div", { className: "account-field", children: [jsxs("div", { className: "field-info", children: [jsx("label", { className: "field-label", children: "Phone Number" }), jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxs("div", { className: "button-group", children: [jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "form-group", children: [jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxs("div", { className: "button-group", children: [jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxs("section", { className: "account-section danger-zone", children: [jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxs("div", { className: "delete-confirm", children: [jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), hasPassword !== false && (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('');