dexie-cloud-addon 4.2.5 → 4.3.2

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

@@ -8,7 +8,7 @@
  *
  * ==========================================================================
  *
- * Version 4.2.5, Sat Dec 20 2025
+ * Version 4.3.2, Thu Jan 22 2026
  *
  * https://dexie.org
  *
@@ -761,6 +761,74 @@ class TokenErrorResponseError extends Error {
     }
 }
 
+/** Cache for fetched SVG content to avoid re-fetching */
+const svgCache = {};
+/** Default SVG icons for built-in OAuth 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>`,
+};
+/** Email/envelope icon for OTP option */
+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>`;
+/**
+ * Fetches SVG content from a URL and caches it.
+ * Returns the SVG string or null if fetch fails.
+ */
+function fetchSvgIcon(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (svgCache[url]) {
+            return svgCache[url];
+        }
+        try {
+            const res = yield fetch(url);
+            if (res.ok) {
+                const svg = yield res.text();
+                // Validate it looks like SVG
+                if (svg.includes('<svg')) {
+                    svgCache[url] = svg;
+                    return svg;
+                }
+            }
+        }
+        catch (_a) {
+            // Silently fail - will show no icon
+        }
+        return null;
+    });
+}
+/**
+ * Converts an OAuthProviderInfo to a generic DXCOption.
+ * Fetches SVG icons from URLs if needed.
+ */
+function providerToOption(provider) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        let iconSvg;
+        // First check for built-in icons
+        if (ProviderIcons[provider.type]) {
+            iconSvg = ProviderIcons[provider.type];
+        }
+        // If provider has iconUrl pointing to SVG, fetch and inline it
+        else if ((_a = provider.iconUrl) === null || _a === void 0 ? void 0 : _a.toLowerCase().endsWith('.svg')) {
+            const fetched = yield fetchSvgIcon(provider.iconUrl);
+            if (fetched) {
+                iconSvg = fetched;
+            }
+        }
+        return {
+            name: 'provider',
+            value: provider.name,
+            displayName: `Continue with ${provider.displayName}`,
+            iconSvg,
+            // If iconUrl is not SVG, pass it through for img tag rendering
+            iconUrl: (!iconSvg && provider.iconUrl) ? provider.iconUrl : undefined,
+            // Use provider type as style hint for branding
+            styleHint: provider.type,
+        };
+    });
+}
 function interactWithUser(userInteraction, req) {
     return new Promise((resolve, reject) => {
         const interactionProps = Object.assign(Object.assign({ submitLabel: 'Submit', cancelLabel: 'Cancel' }, req), { onSubmit: (res) => {
@@ -895,6 +963,67 @@ function confirmLogout(userInteraction, currentUserId, numUnsyncedChanges) {
             .catch(() => false);
     });
 }
+/**
+ * Prompts the user to select an authentication method (OAuth provider or OTP).
+ *
+ * This function converts OAuth providers and OTP option into generic DXCOption[]
+ * for the DXCSelect interaction, handling icon fetching and style hints.
+ *
+ * @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_1, providers_1, otpEnabled_1) {
+    return __awaiter(this, arguments, void 0, function* (userInteraction, providers, otpEnabled, title = 'Choose login method', alerts = []) {
+        // Convert providers to generic options (with icon fetching)
+        const providerOptions = yield Promise.all(providers.map(providerToOption));
+        // Build the options array
+        const options = [...providerOptions];
+        // Add OTP option if enabled
+        if (otpEnabled) {
+            options.push({
+                name: 'otp',
+                value: 'email',
+                displayName: 'Continue with email',
+                iconSvg: EmailIcon,
+                styleHint: 'otp',
+            });
+        }
+        return new Promise((resolve, reject) => {
+            const interactionProps = {
+                type: 'generic',
+                title,
+                alerts,
+                options,
+                fields: {},
+                submitLabel: '', // No submit button - just options
+                cancelLabel: 'Cancel',
+                onSubmit: (params) => {
+                    userInteraction.next(undefined);
+                    // Check which option was selected
+                    if ('otp' in params) {
+                        resolve({ type: 'otp' });
+                    }
+                    else if ('provider' in params) {
+                        resolve({ type: 'provider', provider: params.provider });
+                    }
+                    else {
+                        // Unknown - default to OTP
+                        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* () {
@@ -1218,15 +1347,215 @@ class HttpError extends Error {
     }
 }
 
+/** User-friendly messages for OAuth error codes */
+const ERROR_MESSAGES = {
+    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;
+        }
+    });
+}
+
+/** Build the OAuth login URL */
+function buildOAuthLoginUrl(options) {
+    const url = new URL(`${options.databaseUrl}/oauth/login/${options.provider}`);
+    // Set the redirect URI - defaults to current page URL for web SPAs
+    const redirectUri = options.redirectUri ||
+        (typeof window !== 'undefined' ? window.location.href : '');
+    if (redirectUri) {
+        url.searchParams.set('redirect_uri', redirectUri);
+    }
+    return url.toString();
+}
+/**
+ * Initiates OAuth login via full page redirect.
+ *
+ * The page will navigate to the OAuth provider. After authentication,
+ * the user is redirected back to the app with a `dxc-auth` query parameter
+ * containing base64url-encoded JSON with the authorization code.
+ *
+ * The dexie-cloud-addon automatically detects and processes this parameter
+ * when db.cloud.configure() is called on page load.
+ *
+ * @param options - OAuth redirect options
+ *
+ * @example
+ * ```typescript
+ * // Initiate OAuth login
+ * startOAuthRedirect({
+ *   databaseUrl: 'https://mydb.dexie.cloud',
+ *   provider: 'google'
+ * });
+ * // Page navigates away, user authenticates, then returns with auth code
+ * ```
+ */
+function startOAuthRedirect(options) {
+    // Store provider in sessionStorage for reference on callback
+    if (typeof sessionStorage !== 'undefined') {
+        sessionStorage.setItem('dexie-cloud-oauth-provider', options.provider);
+    }
+    const loginUrl = buildOAuthLoginUrl(options);
+    window.location.href = loginUrl;
+}
+
 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 via redirect
+            if (hints === null || hints === void 0 ? void 0 : hints.provider) {
+                initiateOAuthRedirect(db, hints.provider);
+                // This function never returns - page navigates away
+                throw new Error('OAuth redirect initiated');
+            }
             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 = {
@@ -1250,6 +1579,20 @@ function otpFetchTokenCallback(db) {
                 };
             }
             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 - initiate redirect
+                        initiateOAuthRedirect(db, selection.provider);
+                        // This function never returns - page navigates away
+                        throw new Error('OAuth redirect initiated');
+                    }
+                    // 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 = {
@@ -1327,6 +1670,27 @@ function otpFetchTokenCallback(db) {
         });
     };
 }
+/**
+ * Initiates OAuth login via full page redirect.
+ *
+ * The page will navigate away to the OAuth provider. After authentication,
+ * the user is redirected back with a dxc-auth query parameter that is
+ * automatically detected by db.cloud.configure().
+ */
+function initiateOAuthRedirect(db, provider) {
+    var _a, _b;
+    const url = (_a = db.cloud.options) === null || _a === void 0 ? void 0 : _a.databaseUrl;
+    if (!url)
+        throw new Error(`No database URL given.`);
+    const redirectUri = ((_b = db.cloud.options) === null || _b === void 0 ? void 0 : _b.oauthRedirectUri) ||
+        (typeof window !== 'undefined' ? window.location.href : undefined);
+    // Start OAuth redirect flow - page navigates away
+    startOAuthRedirect({
+        databaseUrl: url,
+        provider,
+        redirectUri,
+    });
+}
 
 /** A way to log to console in production without terser stripping out
  * it from the release bundle.
@@ -5388,8 +5752,97 @@ const Styles = {
         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,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    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"
+    }};
 
 function Dialog({ children, className }) {
     return (_$1("div", { className: `dexie-dialog ${className || ''}` },
@@ -5418,19 +5871,126 @@ function resolveText({ message, messageCode, messageParams }) {
     return message.replace(/\{\w+\}/ig, n => messageParams[n.substring(1, n.length - 1)]);
 }
 
+/** Get style based on styleHint (for provider branding, etc.) */
+function getOptionStyle(styleHint) {
+    const baseStyle = Object.assign({}, Styles.ProviderButton);
+    if (!styleHint) {
+        return baseStyle;
+    }
+    switch (styleHint) {
+        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);
+        case 'otp':
+            return Object.assign({}, Styles.OtpButton);
+        case 'custom-oauth2':
+            return Object.assign(Object.assign({}, baseStyle), Styles.ProviderCustom);
+        default:
+            return baseStyle;
+    }
+}
+/**
+ * Generic button component for selectable options.
+ * Displays the option's icon and display name.
+ *
+ * The icon can be:
+ * - Inline SVG (iconSvg) - rendered directly with dangerouslySetInnerHTML
+ * - Image URL (iconUrl) - rendered as an img tag
+ *
+ * Style is determined by the styleHint property for branding purposes.
+ */
+function OptionButton({ option, onClick }) {
+    const { displayName, iconUrl, iconSvg, styleHint, value } = option;
+    const style = getOptionStyle(styleHint);
+    // Get the text color from the button style for SVG fill processing
+    const textColor = style.color || '#000000';
+    // Process SVG to replace currentColor with actual text color
+    const processedSvg = iconSvg
+        ? iconSvg
+            .replace(/fill="currentColor"/gi, `fill="${textColor}"`)
+            .replace(/fill='currentColor'/gi, `fill='${textColor}'`)
+            .replace(/stroke="currentColor"/gi, `stroke="${textColor}"`)
+            .replace(/stroke='currentColor'/gi, `stroke='${textColor}'`)
+        : null;
+    // Render the appropriate icon
+    const renderIcon = () => {
+        // Inline SVG
+        if (processedSvg) {
+            return (_$1("span", { style: Styles.ProviderButtonIcon, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: processedSvg } }));
+        }
+        // Image URL
+        if (iconUrl) {
+            return (_$1("img", { src: iconUrl, alt: "", style: Styles.ProviderButtonIcon, "aria-hidden": "true" }));
+        }
+        return null;
+    };
+    return (_$1("button", { type: "button", style: style, onClick: onClick, class: `dxc-option-btn${styleHint ? ` dxc-option-${styleHint}` : ''}`, "aria-label": displayName },
+        renderIcon(),
+        _$1("span", { style: Styles.ProviderButtonText }, displayName)));
+}
+/**
+ * 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 })));
+}
+
 const OTP_LENGTH = 8;
-function LoginDialog({ title, type, alerts, fields, submitLabel, cancelLabel, onCancel, onSubmit, }) {
+/**
+ * Generic dialog that can render:
+ * - Form fields (text inputs)
+ * - Selectable options (buttons)
+ * - Or both together
+ *
+ * When an option is clicked, calls onSubmit({ [option.name]: option.value }).
+ * This unified approach means the same callback handles both form submission
+ * and option selection.
+ */
+function LoginDialog({ title, alerts, fields, options, submitLabel, cancelLabel, onCancel, onSubmit, }) {
     const [params, setParams] = d({});
     const firstFieldRef = A(null);
     _(() => { var _a; return (_a = firstFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
+    const fieldEntries = Object.entries(fields || {});
+    const hasFields = fieldEntries.length > 0;
+    const hasOptions = options && options.length > 0;
+    // Group options by name to detect if we have multiple groups
+    const optionGroups = new Map();
+    if (options) {
+        for (const option of options) {
+            const group = optionGroups.get(option.name) || [];
+            group.push(option);
+            optionGroups.set(option.name, group);
+        }
+    }
+    const hasMultipleGroups = optionGroups.size > 1;
+    // Handler for option clicks - calls onSubmit with { [option.name]: option.value }
+    const handleOptionClick = (option) => {
+        onSubmit({ [option.name]: option.value });
+    };
     return (_$1(Dialog, { className: "dxc-login-dlg" },
         _$1(k$1, null,
             _$1("h3", { style: Styles.WindowHeader }, title),
-            alerts.map((alert) => (_$1("p", { style: Styles.Alert[alert.type] }, resolveText(alert)))),
-            _$1("form", { onSubmit: (ev) => {
+            alerts.map((alert, idx) => (_$1("p", { key: idx, style: Styles.Alert[alert.type] }, resolveText(alert)))),
+            hasOptions && (_$1("div", { class: "dxc-options" }, hasMultipleGroups ? (
+            // Render with dividers between groups
+            Array.from(optionGroups.entries()).map(([groupName, groupOptions], groupIdx) => (_$1(k$1, { key: groupName },
+                groupIdx > 0 && _$1(Divider, null),
+                groupOptions.map((option) => (_$1(OptionButton, { key: `${option.name}-${option.value}`, option: option, onClick: () => handleOptionClick(option) }))))))) : (
+            // Simple case: all options in one group
+            options.map((option) => (_$1(OptionButton, { key: `${option.name}-${option.value}`, option: option, onClick: () => handleOptionClick(option) })))))),
+            hasOptions && hasFields && _$1(Divider, null),
+            hasFields && (_$1("form", { onSubmit: (ev) => {
                     ev.preventDefault();
                     onSubmit(params);
-                } }, Object.entries(fields).map(([fieldName, { type, label, placeholder }], idx) => (_$1("label", { style: Styles.Label, key: idx },
+                } }, fieldEntries.map(([fieldName, { type, label, placeholder }], idx) => (_$1("label", { style: Styles.Label, key: idx },
                 label ? `${label}: ` : '',
                 _$1("input", { ref: idx === 0 ? firstFieldRef : undefined, type: type, name: fieldName, autoComplete: "on", style: Styles.Input, autoFocus: true, placeholder: placeholder, value: params[fieldName] || '', onInput: (ev) => {
                         var _a;
@@ -5441,10 +6001,10 @@ function LoginDialog({ title, type, alerts, fields, submitLabel, cancelLabel, on
                             // Auto-submit when OTP is filled in.
                             onSubmit(updatedParams);
                         }
-                    } })))))),
+                    } }))))))),
         _$1("div", { style: Styles.ButtonsDiv },
             _$1(k$1, null,
-                _$1("button", { type: "submit", style: Styles.PrimaryButton, onClick: () => onSubmit(params) }, submitLabel),
+                hasFields && submitLabel && (_$1("button", { type: "submit", style: Styles.PrimaryButton, onClick: () => onSubmit(params) }, submitLabel)),
                 cancelLabel && (_$1("button", { style: Styles.Button, onClick: onCancel }, cancelLabel))))));
 }
 function valueTransformer(type, value) {
@@ -5476,7 +6036,8 @@ class LoginGui extends x {
     render(props, { userInteraction }) {
         if (!userInteraction)
             return null;
-        //if (props.db.cloud.userInteraction.observers.length > 1) return null; // Someone else subscribes.
+        // LoginDialog handles all interaction types uniformly
+        // (forms with fields, options, or both)
         return _$1(LoginDialog, Object.assign({}, userInteraction));
     }
 }
@@ -6035,6 +6596,83 @@ function createAwareness(db, doc, provider) {
     return awareness;
 }
 
+/**
+ * Decodes a base64url-encoded string to a regular string.
+ * Base64url uses - instead of + and _ instead of /, and may omit padding.
+ */
+function decodeBase64Url(encoded) {
+    // Add padding if needed
+    const padded = encoded + '='.repeat((4 - (encoded.length % 4)) % 4);
+    // Convert base64url to base64
+    const base64 = padded.replace(/-/g, '+').replace(/_/g, '/');
+    return atob(base64);
+}
+/**
+ * Parses OAuth callback parameters from the dxc-auth query parameter.
+ *
+ * The dxc-auth parameter contains base64url-encoded JSON with the following structure:
+ * - On success: { "code": "...", "provider": "...", "state": "..." }
+ * - On error: { "error": "...", "provider": "...", "state": "..." }
+ *
+ * @param url - The URL to parse (defaults to window.location.href)
+ * @returns OAuthCallbackParams if valid callback, null otherwise
+ * @throws OAuthError if there's an error in the callback
+ */
+function parseOAuthCallback(url) {
+    const targetUrl = (typeof window !== 'undefined' ? window.location.href : '');
+    if (!targetUrl) {
+        return null;
+    }
+    const parsed = new URL(targetUrl);
+    const encoded = parsed.searchParams.get('dxc-auth');
+    if (!encoded) {
+        return null; // Not an OAuth callback URL
+    }
+    let payload;
+    try {
+        const json = decodeBase64Url(encoded);
+        payload = JSON.parse(json);
+    }
+    catch (e) {
+        console.warn('[dexie-cloud] Failed to parse dxc-auth parameter:', e);
+        return null;
+    }
+    const { code, provider, state, error } = payload;
+    // Check for error first
+    if (error) {
+        if (error.toLowerCase().includes('access_denied') || error.toLowerCase().includes('access denied')) {
+            throw new OAuthError('access_denied', provider, error);
+        }
+        if (error.toLowerCase().includes('email') && error.toLowerCase().includes('verif')) {
+            throw new OAuthError('email_not_verified', provider, error);
+        }
+        throw new OAuthError('provider_error', provider, error);
+    }
+    // Validate required fields for success case
+    if (!code || !provider || !state) {
+        console.warn('[dexie-cloud] Invalid dxc-auth payload: missing required fields');
+        return null;
+    }
+    return { code, provider, state };
+}
+/**
+ * Cleans up the dxc-auth query parameter from the URL.
+ * Call this after successfully handling the callback to clean up the browser URL.
+ */
+function cleanupOAuthUrl() {
+    var _a;
+    if (typeof window === 'undefined' || !((_a = window.history) === null || _a === void 0 ? void 0 : _a.replaceState)) {
+        return;
+    }
+    const url = new URL(window.location.href);
+    if (!url.searchParams.has('dxc-auth')) {
+        return;
+    }
+    url.searchParams.delete('dxc-auth');
+    const cleanUrl = url.pathname + (url.searchParams.toString() ? `?${url.searchParams.toString()}` : '') + url.hash;
+    window.history.replaceState(null, '', cleanUrl);
+}
+
 function getTiedRealmId(objectId) {
     return 'rlm~' + objectId;
 }
@@ -6217,6 +6855,8 @@ function dexieCloud(dexie) {
     const currentUserEmitter = getCurrentUserEmitter(dexie);
     const subscriptions = [];
     let configuredProgramatically = false;
+    // Pending OAuth auth code from dxc-auth redirect (detected in configure())
+    let pendingOAuthCode = null;
     // local sync worker - used when there's no service worker.
     let localSyncWorker = null;
     dexie.on('ready', (dexie) => __awaiter(this, void 0, void 0, function* () {
@@ -6246,7 +6886,7 @@ function dexieCloud(dexie) {
     const syncComplete = new Subject();
     dexie.cloud = {
         // @ts-ignore
-        version: "4.2.5",
+        version: "4.3.2",
         options: Object.assign({}, DEFAULT_OPTIONS),
         schema: null,
         get currentUserId() {
@@ -6281,6 +6921,26 @@ function dexieCloud(dexie) {
                 DexieCloudDB(dexie).reconfigure(); // Update observable from new dexie.name
             }
             updateSchemaFromOptions(dexie.cloud.schema, dexie.cloud.options);
+            // Check for OAuth callback (dxc-auth query parameter)
+            // Only check in DOM environment, not workers
+            if (typeof window !== 'undefined' && window.location) {
+                try {
+                    const callback = parseOAuthCallback();
+                    if (callback) {
+                        // Clean up URL immediately (remove dxc-auth param)
+                        cleanupOAuthUrl();
+                        // Store the pending auth code for processing when db is ready
+                        pendingOAuthCode = { code: callback.code, provider: callback.provider };
+                        console.debug('[dexie-cloud] OAuth callback detected, auth code stored for processing');
+                    }
+                }
+                catch (error) {
+                    // parseOAuthCallback throws OAuthError on error callbacks
+                    // Store null for code but log the error
+                    console.warn('[dexie-cloud] OAuth callback error:', error);
+                    cleanupOAuthUrl();
+                }
+            }
         },
         logout() {
             return __awaiter(this, arguments, void 0, function* ({ force } = {}) {
@@ -6475,6 +7135,19 @@ function dexieCloud(dexie) {
             // HERE: If requireAuth, do athentication now.
             let changedUser = false;
             const user = yield db.getCurrentUser();
+            // Process pending OAuth callback if present (from dxc-auth redirect)
+            if (pendingOAuthCode && !db.cloud.isServiceWorkerDB) {
+                const { code, provider } = pendingOAuthCode;
+                pendingOAuthCode = null; // Clear pending code
+                console.debug('[dexie-cloud] Processing OAuth callback, provider:', provider);
+                try {
+                    changedUser = yield login(db, { oauthCode: code, provider });
+                }
+                catch (error) {
+                    console.error('[dexie-cloud] OAuth login failed:', error);
+                    // Continue with normal flow - user can try again
+                }
+            }
             const requireAuth = (_b = db.cloud.options) === null || _b === void 0 ? void 0 : _b.requireAuth;
             if (requireAuth) {
                 if (db.cloud.isServiceWorkerDB) {
@@ -6563,7 +7236,7 @@ function dexieCloud(dexie) {
     }
 }
 // @ts-ignore
-dexieCloud.version = "4.2.5";
+dexieCloud.version = "4.3.2";
 Dexie.Cloud = dexieCloud;
 
 export { dexieCloud as default, defineYDocTrigger, dexieCloud, getTiedObjectId, getTiedRealmId, resolveText };