dexie-cloud-addon 4.2.5 → 4.3.0

package/dist/umd/dexie-cloud-addon.d.ts

@@ -0,0 +1,3 @@
+import dexieCloudAddon from './dexie-cloud-client';
+export * from './dexie-cloud-client';
+export default dexieCloudAddon;

package/dist/umd/dexie-cloud-addon.js

@@ -8,7 +8,7 @@
  *
  * ==========================================================================
  *
- * Version 4.2.5, Sat Dec 20 2025
+ * Version 4.3.0, Tue Jan 20 2026
  *
  * https://dexie.org
  *
@@ -103,6 +103,15 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
+    /** Type guard to check if a message is an OAuthResultMessage */
+    function isOAuthResultMessage(msg) {
+        return (typeof msg === 'object' &&
+            msg !== null &&
+            msg.type === 'dexie:oauthResult' &&
+            typeof msg.provider === 'string' &&
+            typeof msg.state === 'string');
+    }
+
     function assert(b) {
         if (!b)
             throw new Error('Assertion Failed');
@@ -2195,6 +2204,43 @@
                 .catch(() => false);
         });
     }
+    /**
+     * Prompts the user to select an authentication method (OAuth provider or OTP).
+     *
+     * @param userInteraction - The user interaction BehaviorSubject
+     * @param providers - Available OAuth providers
+     * @param otpEnabled - Whether OTP is available
+     * @param title - Dialog title
+     * @param alerts - Optional alerts to display
+     * @returns Promise resolving to the user's selection
+     */
+    function promptForProvider(userInteraction, providers, otpEnabled, title = 'Choose login method', alerts = []) {
+        return new Promise((resolve, reject) => {
+            const interactionProps = {
+                type: 'provider-selection',
+                title,
+                alerts,
+                providers,
+                otpEnabled,
+                fields: {},
+                submitLabel: undefined,
+                cancelLabel: 'Cancel',
+                onSelectProvider: (providerName) => {
+                    userInteraction.next(undefined);
+                    resolve({ type: 'provider', provider: providerName });
+                },
+                onSelectOtp: () => {
+                    userInteraction.next(undefined);
+                    resolve({ type: 'otp' });
+                },
+                onCancel: () => {
+                    userInteraction.next(undefined);
+                    reject(new Dexie.AbortError('User cancelled'));
+                },
+            };
+            userInteraction.next(interactionProps);
+        });
+    }
 
     function loadAccessToken(db) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -2518,15 +2564,313 @@
         }
     }
 
+    /** User-friendly messages for OAuth error codes */
+    const ERROR_MESSAGES = {
+        popup_blocked: 'The login popup was blocked by your browser. Please allow popups for this site and try again.',
+        popup_closed: 'The login popup was closed before completing authentication.',
+        access_denied: 'Access was denied by the authentication provider.',
+        invalid_state: 'The authentication response could not be verified. Please try again.',
+        email_not_verified: 'Your email address must be verified before you can log in.',
+        expired_code: 'The authentication code has expired. Please try again.',
+        provider_error: 'An error occurred with the authentication provider.',
+        network_error: 'A network error occurred during authentication. Please check your connection and try again.',
+    };
+    /** Error class for OAuth-specific errors */
+    class OAuthError extends Error {
+        constructor(code, provider, customMessage) {
+            super(customMessage || ERROR_MESSAGES[code]);
+            this.name = 'OAuthError';
+            this.code = code;
+            this.provider = provider;
+        }
+        /** Get user-friendly message for this error */
+        get userMessage() {
+            return ERROR_MESSAGES[this.code] || this.message;
+        }
+    }
+
+    /**
+     * Exchanges a Dexie Cloud authorization code for access and refresh tokens.
+     *
+     * This is called after the OAuth callback delivers the authorization code
+     * via postMessage (popup flow) or redirect.
+     *
+     * @param options - Exchange options
+     * @returns Promise resolving to TokenFinalResponse
+     * @throws OAuthError or TokenErrorResponseError on failure
+     */
+    function exchangeOAuthCode(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { databaseUrl, code, publicKey, scopes = ['ACCESS_DB'] } = options;
+            const tokenRequest = {
+                grant_type: 'authorization_code',
+                code,
+                public_key: publicKey,
+                scopes,
+            };
+            try {
+                const res = yield fetch(`${databaseUrl}/token`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(tokenRequest),
+                    mode: 'cors',
+                });
+                if (!res.ok) {
+                    if (res.status === 400 || res.status === 401) {
+                        // Try to parse error response
+                        try {
+                            const errorResponse = yield res.json();
+                            if (errorResponse.type === 'error') {
+                                // Check for specific error codes
+                                if (errorResponse.messageCode === 'INVALID_OTP') {
+                                    // In the context of OAuth, this likely means expired code
+                                    throw new OAuthError('expired_code', undefined, errorResponse.message);
+                                }
+                                throw new TokenErrorResponseError(errorResponse);
+                            }
+                        }
+                        catch (e) {
+                            if (e instanceof OAuthError || e instanceof TokenErrorResponseError) {
+                                throw e;
+                            }
+                            // Fall through to generic error
+                        }
+                    }
+                    const errorText = yield res.text().catch(() => res.statusText);
+                    throw new OAuthError('provider_error', undefined, `Token exchange failed: ${res.status} ${errorText}`);
+                }
+                const response = yield res.json();
+                if (response.type === 'error') {
+                    throw new TokenErrorResponseError(response);
+                }
+                if (response.type !== 'tokens') {
+                    throw new OAuthError('provider_error', undefined, `Unexpected response type: ${response.type}`);
+                }
+                return response;
+            }
+            catch (error) {
+                if (error instanceof OAuthError || error instanceof TokenErrorResponseError) {
+                    throw error;
+                }
+                if (error instanceof TypeError) {
+                    // Network error
+                    throw new OAuthError('network_error');
+                }
+                throw error;
+            }
+        });
+    }
+
+    /** Default response when OAuth is disabled or unavailable */
+    const OTP_ONLY_RESPONSE = {
+        providers: [],
+        otpEnabled: true,
+    };
+    /**
+     * Fetches available authentication providers from the Dexie Cloud server.
+     *
+     * @param databaseUrl - The Dexie Cloud database URL
+     * @param socialAuthEnabled - Whether social auth is enabled in client config (default: true)
+     * @returns Promise resolving to AuthProvidersResponse
+     *
+     * Handles failures gracefully:
+     * - 404 → Returns OTP-only (old server version)
+     * - Network error → Returns OTP-only
+     * - socialAuthEnabled: false → Returns OTP-only without fetching
+     */
+    function fetchAuthProviders(databaseUrl_1) {
+        return __awaiter(this, arguments, void 0, function* (databaseUrl, socialAuthEnabled = true) {
+            // If social auth is disabled, return OTP-only without fetching
+            if (!socialAuthEnabled) {
+                return OTP_ONLY_RESPONSE;
+            }
+            try {
+                const res = yield fetch(`${databaseUrl}/auth-providers`, {
+                    method: 'GET',
+                    headers: { 'Accept': 'application/json' },
+                    mode: 'cors',
+                });
+                if (res.status === 404) {
+                    // Old server version without OAuth support
+                    console.debug('[dexie-cloud] Server does not support /auth-providers endpoint. Using OTP-only authentication.');
+                    return OTP_ONLY_RESPONSE;
+                }
+                if (!res.ok) {
+                    console.warn(`[dexie-cloud] Failed to fetch auth providers: ${res.status} ${res.statusText}`);
+                    return OTP_ONLY_RESPONSE;
+                }
+                return yield res.json();
+            }
+            catch (error) {
+                // Network error or other failure - fall back to OTP
+                console.debug('[dexie-cloud] Could not fetch auth providers, falling back to OTP:', error);
+                return OTP_ONLY_RESPONSE;
+            }
+        });
+    }
+
+    /** Generate a random state string for CSRF protection */
+    function generateState() {
+        const array = new Uint8Array(32);
+        crypto.getRandomValues(array);
+        return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
+    }
+    /** Build the OAuth login URL */
+    function buildOAuthLoginUrl(options, state) {
+        const url = new URL(`${options.databaseUrl}/oauth/login/${options.provider}`);
+        url.searchParams.set('state', state);
+        // Set the redirect URI for postMessage or custom scheme
+        const redirectUri = options.redirectUri ||
+            (typeof window !== 'undefined' ? window.location.origin : '');
+        if (redirectUri) {
+            url.searchParams.set('redirect_uri', redirectUri);
+        }
+        return url.toString();
+    }
+    /** Calculate centered popup position */
+    function getPopupPosition(width, height) {
+        var _a, _b, _c, _d, _e, _f;
+        const screenLeft = (_a = window.screenLeft) !== null && _a !== void 0 ? _a : window.screenX;
+        const screenTop = (_b = window.screenTop) !== null && _b !== void 0 ? _b : window.screenY;
+        const screenWidth = (_d = (_c = window.innerWidth) !== null && _c !== void 0 ? _c : document.documentElement.clientWidth) !== null && _d !== void 0 ? _d : screen.width;
+        const screenHeight = (_f = (_e = window.innerHeight) !== null && _e !== void 0 ? _e : document.documentElement.clientHeight) !== null && _f !== void 0 ? _f : screen.height;
+        const left = screenLeft + (screenWidth - width) / 2;
+        const top = screenTop + (screenHeight - height) / 2;
+        return { left: Math.max(0, left), top: Math.max(0, top) };
+    }
+    /**
+     * Initiates OAuth login flow using a popup window.
+     *
+     * Opens a popup to the OAuth provider, listens for postMessage with the result,
+     * and returns the Dexie Cloud authorization code.
+     *
+     * @param options - OAuth login options
+     * @returns Promise resolving to OAuthLoginResult
+     * @throws OAuthError on failure
+     */
+    function oauthLogin(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { databaseUrl, provider, usePopup = true } = options;
+            if (!usePopup) {
+                // For redirect flows, we can't return a promise - the page will navigate away
+                throw new Error('Non-popup OAuth flow requires handleOAuthCallback after redirect');
+            }
+            const state = generateState();
+            const loginUrl = buildOAuthLoginUrl(options, state);
+            // Calculate popup dimensions and position
+            const width = 500;
+            const height = 600;
+            const { left, top } = getPopupPosition(width, height);
+            // Open popup window
+            const popup = window.open(loginUrl, 'dexie-cloud-oauth', `width=${width},height=${height},left=${left},top=${top},menubar=no,toolbar=no,location=yes,status=no`);
+            if (!popup) {
+                throw new OAuthError('popup_blocked', provider);
+            }
+            return new Promise((resolve, reject) => {
+                let resolved = false;
+                // Listen for postMessage from the popup
+                const handleMessage = (event) => {
+                    // Validate origin - must be from the Dexie Cloud server
+                    const expectedOrigin = new URL(databaseUrl).origin;
+                    if (event.origin !== expectedOrigin) {
+                        return; // Ignore messages from other origins
+                    }
+                    // Check if this is our OAuth result message
+                    if (!isOAuthResultMessage(event.data)) {
+                        return;
+                    }
+                    const message = event.data;
+                    // Validate state to prevent CSRF
+                    if (message.state !== state) {
+                        console.warn('[dexie-cloud] OAuth state mismatch, ignoring message');
+                        return;
+                    }
+                    // Clean up
+                    cleanup();
+                    resolved = true;
+                    // Handle error from OAuth flow
+                    if (message.error) {
+                        const errorCode = mapOAuthError(message.error);
+                        reject(new OAuthError(errorCode, provider, message.error));
+                        return;
+                    }
+                    // Success - return the authorization code
+                    if (message.code) {
+                        resolve({
+                            code: message.code,
+                            provider: message.provider,
+                            state: message.state,
+                        });
+                    }
+                    else {
+                        reject(new OAuthError('provider_error', provider, 'No authorization code received'));
+                    }
+                };
+                // Check if popup was closed without completing
+                const checkPopupClosed = setInterval(() => {
+                    if (popup.closed && !resolved) {
+                        cleanup();
+                        reject(new OAuthError('popup_closed', provider));
+                    }
+                }, 500);
+                // Cleanup function
+                const cleanup = () => {
+                    window.removeEventListener('message', handleMessage);
+                    clearInterval(checkPopupClosed);
+                    try {
+                        if (!popup.closed) {
+                            popup.close();
+                        }
+                    }
+                    catch (_a) {
+                        // Ignore errors when closing popup
+                    }
+                };
+                // Start listening for messages
+                window.addEventListener('message', handleMessage);
+            });
+        });
+    }
+    /** Map OAuth error strings to error codes */
+    function mapOAuthError(error) {
+        const lowerError = error.toLowerCase();
+        if (lowerError.includes('access_denied') || lowerError.includes('access denied')) {
+            return 'access_denied';
+        }
+        if (lowerError.includes('email') && lowerError.includes('verif')) {
+            return 'email_not_verified';
+        }
+        if (lowerError.includes('expired')) {
+            return 'expired_code';
+        }
+        if (lowerError.includes('state')) {
+            return 'invalid_state';
+        }
+        return 'provider_error';
+    }
+
     function otpFetchTokenCallback(db) {
         const { userInteraction } = db.cloud;
         return function otpAuthenticate(_a) {
             return __awaiter(this, arguments, void 0, function* ({ public_key, hints }) {
-                var _b;
+                var _b, _c;
                 let tokenRequest;
                 const url = (_b = db.cloud.options) === null || _b === void 0 ? void 0 : _b.databaseUrl;
                 if (!url)
                     throw new Error(`No database URL given.`);
+                // Handle OAuth code exchange (from redirect/deep link flows)
+                if ((hints === null || hints === void 0 ? void 0 : hints.oauthCode) && hints.provider) {
+                    return yield exchangeOAuthCode({
+                        databaseUrl: url,
+                        code: hints.oauthCode,
+                        publicKey: public_key,
+                        scopes: ['ACCESS_DB'],
+                    });
+                }
+                // Handle OAuth provider login (popup flow)
+                if (hints === null || hints === void 0 ? void 0 : hints.provider) {
+                    return yield handleOAuthFlow(db, public_key, hints.provider);
+                }
                 if ((hints === null || hints === void 0 ? void 0 : hints.grant_type) === 'demo') {
                     const demo_user = yield promptForEmail(userInteraction, 'Enter a demo user email', (hints === null || hints === void 0 ? void 0 : hints.email) || (hints === null || hints === void 0 ? void 0 : hints.userId));
                     tokenRequest = {
@@ -2550,6 +2894,18 @@
                     };
                 }
                 else {
+                    // Check for available auth providers (OAuth + OTP)
+                    const socialAuthEnabled = ((_c = db.cloud.options) === null || _c === void 0 ? void 0 : _c.socialAuth) !== false;
+                    const authProviders = yield fetchAuthProviders(url, socialAuthEnabled);
+                    // If we have OAuth providers available, prompt for selection
+                    if (authProviders.providers.length > 0) {
+                        const selection = yield promptForProvider(userInteraction, authProviders.providers, authProviders.otpEnabled, 'Sign in');
+                        if (selection.type === 'provider') {
+                            // User selected an OAuth provider
+                            return yield handleOAuthFlow(db, public_key, selection.provider);
+                        }
+                        // User chose OTP - continue with email prompt below
+                    }
                     const email = yield promptForEmail(userInteraction, 'Enter email address', hints === null || hints === void 0 ? void 0 : hints.email);
                     if (/@demo.local$/.test(email)) {
                         tokenRequest = {
@@ -2627,6 +2983,49 @@
             });
         };
     }
+    /**
+     * Handles the OAuth popup flow and token exchange.
+     */
+    function handleOAuthFlow(db, publicKey, provider) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const url = (_a = db.cloud.options) === null || _a === void 0 ? void 0 : _a.databaseUrl;
+            if (!url)
+                throw new Error(`No database URL given.`);
+            const { userInteraction } = db.cloud;
+            const usePopup = ((_b = db.cloud.options) === null || _b === void 0 ? void 0 : _b.oauthPopup) !== false;
+            const redirectUri = ((_c = db.cloud.options) === null || _c === void 0 ? void 0 : _c.oauthRedirectUri) ||
+                (typeof window !== 'undefined' ? window.location.origin : undefined);
+            try {
+                // Start OAuth popup flow
+                const result = yield oauthLogin({
+                    databaseUrl: url,
+                    provider,
+                    redirectUri,
+                    usePopup,
+                });
+                // Exchange the auth code for tokens
+                return yield exchangeOAuthCode({
+                    databaseUrl: url,
+                    code: result.code,
+                    publicKey,
+                    scopes: ['ACCESS_DB'],
+                });
+            }
+            catch (error) {
+                if (error instanceof OAuthError) {
+                    // Show user-friendly error message
+                    yield alertUser(userInteraction, 'Authentication Failed', {
+                        type: 'error',
+                        messageCode: 'GENERIC_ERROR',
+                        message: error.userMessage,
+                        messageParams: {},
+                    }).catch(() => { });
+                }
+                throw error;
+            }
+        });
+    }
 
     /** A way to log to console in production without terser stripping out
      * it from the release bundle.
@@ -13417,7 +13816,7 @@
      *
      * ==========================================================================
      *
-     * Version 4.2.2, Sat Dec 20 2025
+     * Version 4.2.2, Tue Jan 20 2026
      *
      * https://dexie.org
      *
@@ -16618,6 +17017,99 @@
             color: "#333",
             borderBottom: "1px solid #eee",
             paddingBottom: "10px"
+        },
+        // OAuth Provider Button Styles
+        ProviderButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            padding: "12px 16px",
+            marginBottom: "10px",
+            border: "1px solid #d1d5db",
+            borderRadius: "6px",
+            backgroundColor: "#ffffff",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: "500",
+            color: "#374151",
+            transition: "all 0.2s ease",
+            gap: "12px"
+        },
+        ProviderButtonIcon: {
+            width: "20px",
+            height: "20px",
+            flexShrink: 0
+        },
+        ProviderButtonText: {
+            flex: 1,
+            textAlign: "left"
+        },
+        // Provider-specific colors
+        ProviderGoogle: {
+            backgroundColor: "#ffffff",
+            border: "1px solid #dadce0",
+            color: "#3c4043"
+        },
+        ProviderGitHub: {
+            backgroundColor: "#24292e",
+            border: "1px solid #24292e",
+            color: "#ffffff"
+        },
+        ProviderMicrosoft: {
+            backgroundColor: "#ffffff",
+            border: "1px solid #8c8c8c",
+            color: "#5e5e5e"
+        },
+        ProviderApple: {
+            backgroundColor: "#000000",
+            border: "1px solid #000000",
+            color: "#ffffff"
+        },
+        ProviderCustom: {
+            backgroundColor: "#4f46e5",
+            border: "1px solid #4f46e5",
+            color: "#ffffff"
+        },
+        // Divider styles
+        Divider: {
+            display: "flex",
+            alignItems: "center",
+            margin: "20px 0",
+            color: "#6b7280",
+            fontSize: "13px"
+        },
+        DividerLine: {
+            flex: 1,
+            height: "1px",
+            backgroundColor: "#e5e7eb"
+        },
+        DividerText: {
+            padding: "0 12px",
+            color: "#9ca3af"
+        },
+        // OTP Button (Continue with email)
+        OtpButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            padding: "12px 16px",
+            border: "1px solid #d1d5db",
+            borderRadius: "6px",
+            backgroundColor: "#f9fafb",
+            cursor: "pointer",
+            fontSize: "14px",
+            fontWeight: "500",
+            color: "#374151",
+            transition: "all 0.2s ease",
+            gap: "12px"
+        },
+        // Cancel button for provider selection
+        CancelButtonRow: {
+            display: "flex",
+            justifyContent: "center",
+            marginTop: "16px"
         }
     };
 
@@ -16688,6 +17180,82 @@
         }
     }
 
+    /** Default SVG icons for built-in providers */
+    const ProviderIcons = {
+        google: `<svg viewBox="0 0 24 24" width="20" height="20"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
+        github: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>`,
+        microsoft: `<svg viewBox="0 0 24 24" width="20" height="20"><rect fill="#F25022" x="1" y="1" width="10" height="10"/><rect fill="#00A4EF" x="1" y="13" width="10" height="10"/><rect fill="#7FBA00" x="13" y="1" width="10" height="10"/><rect fill="#FFB900" x="13" y="13" width="10" height="10"/></svg>`,
+        apple: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>`,
+    };
+    /** Get provider-specific button styles */
+    function getProviderStyle(providerType) {
+        const baseStyle = Object.assign({}, Styles.ProviderButton);
+        switch (providerType) {
+            case 'google':
+                return Object.assign(Object.assign({}, baseStyle), Styles.ProviderGoogle);
+            case 'github':
+                return Object.assign(Object.assign({}, baseStyle), Styles.ProviderGitHub);
+            case 'microsoft':
+                return Object.assign(Object.assign({}, baseStyle), Styles.ProviderMicrosoft);
+            case 'apple':
+                return Object.assign(Object.assign({}, baseStyle), Styles.ProviderApple);
+            default:
+                return Object.assign(Object.assign({}, baseStyle), Styles.ProviderCustom);
+        }
+    }
+    /**
+     * Button component for OAuth provider login.
+     * Displays the provider's icon and name following provider branding guidelines.
+     */
+    function AuthProviderButton({ provider, onClick }) {
+        const { type, name, displayName, iconUrl } = provider;
+        const style = getProviderStyle(type);
+        // Determine button text
+        const buttonText = `Continue with ${displayName}`;
+        // Get icon - use custom iconUrl if provided, otherwise use built-in SVG
+        const iconSvg = ProviderIcons[type] || '';
+        return (_$1("button", { type: "button", style: style, onClick: onClick, class: `dxc-provider-btn dxc-provider-${type}`, "aria-label": buttonText },
+            iconUrl ? (_$1("img", { src: iconUrl, alt: "", style: Styles.ProviderButtonIcon, "aria-hidden": "true" })) : iconSvg ? (_$1("span", { style: Styles.ProviderButtonIcon, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: iconSvg } })) : null,
+            _$1("span", { style: Styles.ProviderButtonText }, buttonText)));
+    }
+    /** Email/envelope icon for OTP button */
+    const EmailIcon = `<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6L12 13 2 6"/></svg>`;
+    /**
+     * Button for email/OTP authentication option.
+     */
+    function OtpButton({ onClick }) {
+        return (_$1("button", { type: "button", style: Styles.OtpButton, onClick: onClick, class: "dxc-otp-btn", "aria-label": "Continue with email" },
+            _$1("span", { style: Styles.ProviderButtonIcon, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: EmailIcon } }),
+            _$1("span", { style: Styles.ProviderButtonText }, "Continue with email")));
+    }
+    /**
+     * Visual divider with "or" text.
+     */
+    function Divider() {
+        return (_$1("div", { style: Styles.Divider },
+            _$1("div", { style: Styles.DividerLine }),
+            _$1("span", { style: Styles.DividerText }, "or"),
+            _$1("div", { style: Styles.DividerLine })));
+    }
+
+    /**
+     * Dialog component for OAuth provider selection.
+     * Displays available OAuth providers as buttons and optionally an email/OTP option.
+     */
+    function ProviderSelectionDialog({ title, alerts, providers, otpEnabled, cancelLabel, onSelectProvider, onSelectOtp, onCancel, }) {
+        return (_$1(Dialog, { className: "dxc-provider-selection-dlg" },
+            _$1(k$1, null,
+                _$1("h3", { style: Styles.WindowHeader }, title),
+                alerts.map((alert, idx) => (_$1("p", { key: idx, style: Styles.Alert[alert.type] }, resolveText(alert)))),
+                _$1("div", { class: "dxc-providers" }, providers.map((provider) => (_$1(AuthProviderButton, { key: provider.name, provider: provider, onClick: () => onSelectProvider(provider.name) })))),
+                otpEnabled && providers.length > 0 && (_$1(k$1, null,
+                    _$1(Divider, null),
+                    _$1(OtpButton, { onClick: onSelectOtp }))),
+                otpEnabled && providers.length === 0 && (_$1(OtpButton, { onClick: onSelectOtp })),
+                cancelLabel && (_$1("div", { style: Styles.CancelButtonRow },
+                    _$1("button", { type: "button", style: Styles.Button, onClick: onCancel }, cancelLabel))))));
+    }
+
     class LoginGui extends x {
         constructor(props) {
             super(props);
@@ -16706,7 +17274,11 @@
         render(props, { userInteraction }) {
             if (!userInteraction)
                 return null;
-            //if (props.db.cloud.userInteraction.observers.length > 1) return null; // Someone else subscribes.
+            // Render appropriate dialog based on interaction type
+            if (userInteraction.type === 'provider-selection') {
+                return _$1(ProviderSelectionDialog, Object.assign({}, userInteraction));
+            }
+            // Default to LoginDialog for other interaction types
             return _$1(LoginDialog, Object.assign({}, userInteraction));
         }
     }
@@ -17476,7 +18048,7 @@
         const syncComplete = new rxjs.Subject();
         dexie.cloud = {
             // @ts-ignore
-            version: "4.2.5",
+            version: "4.3.0",
             options: Object.assign({}, DEFAULT_OPTIONS),
             schema: null,
             get currentUserId() {
@@ -17793,7 +18365,7 @@
         }
     }
     // @ts-ignore
-    dexieCloud.version = "4.2.5";
+    dexieCloud.version = "4.3.0";
     Dexie.Cloud = dexieCloud;
 
     exports.default = dexieCloud;