dexie-cloud-addon 4.3.0 → 4.3.3

package/dist/umd/service-worker.js

@@ -8,7 +8,7 @@
  *
  * ==========================================================================
  *
- * Version 4.3.0, Tue Jan 20 2026
+ * Version 4.3.3, Thu Jan 22 2026
  *
  * https://dexie.org
  *
@@ -542,15 +542,6 @@
         }
     }
 
-    /** 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');
@@ -2454,6 +2445,74 @@
         }
     }
 
+    /** 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) => {
@@ -2591,6 +2650,9 @@
     /**
      * 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
@@ -2598,34 +2660,70 @@
      * @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 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);
+            });
         });
     }
 
+    /**
+     * Error thrown when initiating an OAuth redirect.
+     *
+     * This is not a real error - it's used to signal that the page is
+     * navigating away to an OAuth provider. It should be caught and
+     * silently ignored at the appropriate level.
+     */
+    class OAuthRedirectError extends Error {
+        constructor(provider) {
+            super(`OAuth redirect initiated for provider: ${provider}`);
+            this.name = 'OAuthRedirectError';
+            this.provider = provider;
+        }
+    }
+
     function loadAccessToken(db) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c;
@@ -2793,6 +2891,10 @@
                 return context;
             }
             catch (error) {
+                // OAuth redirect is not an error - page is navigating away
+                if (error instanceof OAuthRedirectError || (error === null || error === void 0 ? void 0 : error.name) === 'OAuthRedirectError') {
+                    throw error; // Re-throw without logging
+                }
                 if (error instanceof TokenErrorResponseError) {
                     yield alertUser(userInteraction, error.title, {
                         type: 'error',
@@ -14558,8 +14660,6 @@
 
     /** 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.',
@@ -14701,144 +14801,46 @@
         });
     }
 
-    /** 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) {
+    function buildOAuthLoginUrl(options) {
         const url = new URL(`${options.databaseUrl}/oauth/login/${options.provider}`);
-        url.searchParams.set('state', state);
-        // Set the redirect URI for postMessage or custom scheme
+        // Set the redirect URI - defaults to current page URL for web SPAs
         const redirectUri = options.redirectUri ||
-            (typeof window !== 'undefined' ? window.location.origin : '');
+            (typeof window !== 'undefined' ? window.location.href : '');
         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.
+     * 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.
      *
-     * Opens a popup to the OAuth provider, listens for postMessage with the result,
-     * and returns the Dexie Cloud authorization code.
+     * The dexie-cloud-addon automatically detects and processes this parameter
+     * when db.cloud.configure() is called on page load.
      *
-     * @param options - OAuth login options
-     * @returns Promise resolving to OAuthLoginResult
-     * @throws OAuthError on failure
+     * @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 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';
+    function startOAuthRedirect(options) {
+        // Store provider in sessionStorage for reference on callback
+        if (typeof sessionStorage !== 'undefined') {
+            sessionStorage.setItem('dexie-cloud-oauth-provider', options.provider);
         }
-        return 'provider_error';
+        const loginUrl = buildOAuthLoginUrl(options);
+        window.location.href = loginUrl;
     }
 
     function otpFetchTokenCallback(db) {
@@ -14859,9 +14861,11 @@
                         scopes: ['ACCESS_DB'],
                     });
                 }
-                // Handle OAuth provider login (popup flow)
+                // Handle OAuth provider login via redirect
                 if (hints === null || hints === void 0 ? void 0 : hints.provider) {
-                    return yield handleOAuthFlow(db, public_key, hints.provider);
+                    initiateOAuthRedirect(db, hints.provider);
+                    // This function never returns - page navigates away
+                    throw new OAuthRedirectError(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));
@@ -14893,8 +14897,10 @@
                     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 selected an OAuth provider - initiate redirect
+                            initiateOAuthRedirect(db, selection.provider);
+                            // This function never returns - page navigates away
+                            throw new OAuthRedirectError(selection.provider);
                         }
                         // User chose OTP - continue with email prompt below
                     }
@@ -14976,46 +14982,24 @@
         };
     }
     /**
-     * Handles the OAuth popup flow and token exchange.
+     * 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 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;
-            }
+    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,
         });
     }
 
@@ -15105,7 +15089,15 @@
                 claims: {},
                 lastLogin: new Date(0),
             });
-            yield authenticate(db.cloud.options.databaseUrl, context, db.cloud.options.fetchTokens || otpFetchTokenCallback(db), db.cloud.userInteraction, hints);
+            try {
+                yield authenticate(db.cloud.options.databaseUrl, context, db.cloud.options.fetchTokens || otpFetchTokenCallback(db), db.cloud.userInteraction, hints);
+            }
+            catch (err) {
+                if (err.name === 'OAuthRedirectError') {
+                    return false; // Page is redirecting for OAuth login
+                }
+                throw err;
+            }
             if (origUserId !== UNAUTHORIZED_USER.userId &&
                 context.userId !== origUserId) {
                 // User was logged in before, but now logged in as another user.
@@ -17039,7 +17031,10 @@
         ProviderButtonIcon: {
             width: "20px",
             height: "20px",
-            flexShrink: 0
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
         },
         ProviderButtonText: {
             flex: 1,
@@ -17104,14 +17099,7 @@
             color: "#374151",
             transition: "all 0.2s ease",
             gap: "12px"
-        },
-        // Cancel button for provider selection
-        CancelButtonRow: {
-            display: "flex",
-            justifyContent: "center",
-            marginTop: "16px"
-        }
-    };
+        }};
 
     function Dialog({ children, className }) {
         return (_$1("div", { className: `dexie-dialog ${className || ''}` },
@@ -17140,19 +17128,126 @@
         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;
@@ -17163,10 +17258,10 @@
                                 // 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),
+                    submitLabel && (hasFields || (!hasOptions && !hasFields)) && (_$1("button", { type: "submit", style: Styles.PrimaryButton, onClick: () => onSubmit(params) }, submitLabel)),
                     cancelLabel && (_$1("button", { style: Styles.Button, onClick: onCancel }, cancelLabel))))));
     }
     function valueTransformer(type, value) {
@@ -17180,82 +17275,6 @@
         }
     }
 
-    /** 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);
@@ -17274,11 +17293,8 @@
         render(props, { userInteraction }) {
             if (!userInteraction)
                 return null;
-            // 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
+            // LoginDialog handles all interaction types uniformly
+            // (forms with fields, options, or both)
             return _$1(LoginDialog, Object.assign({}, userInteraction));
         }
     }
@@ -17837,6 +17853,83 @@
         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);
+    }
+
     const DEFAULT_OPTIONS = {
         nameSuffix: true,
     };
@@ -17848,6 +17941,10 @@
         const currentUserEmitter = getCurrentUserEmitter(dexie);
         const subscriptions = [];
         let configuredProgramatically = false;
+        // Pending OAuth auth code from dxc-auth redirect (detected in configure())
+        let pendingOAuthCode = null;
+        // Pending OAuth error from dxc-auth redirect (detected in configure())
+        let pendingOAuthError = 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* () {
@@ -17877,7 +17974,7 @@
         const syncComplete = new rxjs.Subject();
         dexie.cloud = {
             // @ts-ignore
-            version: "4.3.0",
+            version: "4.3.3",
             options: Object.assign({}, DEFAULT_OPTIONS),
             schema: null,
             get currentUserId() {
@@ -17912,6 +18009,31 @@
                     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
+                        cleanupOAuthUrl();
+                        if (error instanceof OAuthError) {
+                            pendingOAuthError = error;
+                            console.error('[dexie-cloud] OAuth callback error:', error.message);
+                        }
+                        else {
+                            console.error('[dexie-cloud] OAuth callback error:', error);
+                        }
+                    }
+                }
             },
             logout() {
                 return __awaiter(this, arguments, void 0, function* ({ force } = {}) {
@@ -18105,7 +18227,34 @@
                 }
                 // HERE: If requireAuth, do athentication now.
                 let changedUser = false;
-                const user = yield db.getCurrentUser();
+                let user = yield db.getCurrentUser();
+                // Show pending OAuth error if present (from dxc-auth redirect)
+                if (pendingOAuthError && !db.cloud.isServiceWorkerDB) {
+                    const error = pendingOAuthError;
+                    pendingOAuthError = null; // Clear pending error
+                    console.debug('[dexie-cloud] Showing OAuth error:', error.message);
+                    // Show alert to user about the OAuth error
+                    yield alertUser(db.cloud.userInteraction, 'Authentication Error', {
+                        type: 'error',
+                        messageCode: 'GENERIC_ERROR',
+                        message: error.message,
+                        messageParams: { provider: error.provider || 'unknown' }
+                    });
+                }
+                // 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 });
+                        user = yield db.getCurrentUser();
+                    }
+                    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) {
@@ -18194,7 +18343,7 @@
         }
     }
     // @ts-ignore
-    dexieCloud.version = "4.3.0";
+    dexieCloud.version = "4.3.3";
     Dexie.Cloud = dexieCloud;
 
     // In case the SW lives for a while, let it reuse already opened connections: