dexie-cloud-addon 4.3.4 → 4.3.6

package/dist/modern/types/DXCUserInteraction.d.ts

@@ -17,10 +17,8 @@ export interface DXCOption {
     value: string;
     /** Human-readable display label */
     displayName: string;
-    /** URL to an icon image (mutually exclusive with iconSvg) */
+    /** URL to an icon image (can be a regular URL or a data: URL for inline images) */
     iconUrl?: string;
-    /** Inline SVG markup for the icon (mutually exclusive with iconUrl) */
-    iconSvg?: string;
     /** Optional style hint for the UI (e.g., 'google', 'github', 'microsoft', 'apple', 'otp') */
     styleHint?: string;
 }

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

@@ -8,7 +8,7 @@
  *
  * ==========================================================================
  *
- * Version 4.3.4, Fri Jan 23 2026
+ * Version 4.3.6, Wed Jan 28 2026
  *
  * https://dexie.org
  *
@@ -2061,73 +2061,19 @@
         }
     }
 
-    /** 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;
-        });
-    }
+    /** Email/envelope icon data URL for OTP option */
+    const EmailIcon = `data:image/svg+xml;base64,${btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#666666" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6L12 13 2 6"/></svg>')}`;
     /**
      * 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,
-            };
-        });
+        return {
+            name: 'provider',
+            value: provider.name,
+            displayName: `Continue with ${provider.displayName}`,
+            iconUrl: provider.iconUrl,
+            styleHint: provider.type,
+        };
     }
     function interactWithUser(userInteraction, req) {
         return new Promise((resolve, reject) => {
@@ -2278,8 +2224,8 @@
      */
     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));
+            // Convert providers to generic options
+            const providerOptions = providers.map(providerToOption);
             // Build the options array
             const options = [...providerOptions];
             // Add OTP option if enabled
@@ -2288,7 +2234,7 @@
                     name: 'otp',
                     value: 'email',
                     displayName: 'Continue with email',
-                    iconSvg: EmailIcon,
+                    iconUrl: EmailIcon,
                     styleHint: 'otp',
                 });
             }
@@ -2716,10 +2662,12 @@
                     mode: 'cors',
                 });
                 if (!res.ok) {
+                    // Read body once as text to avoid stream consumption issues
+                    const bodyText = yield res.text().catch(() => res.statusText);
                     if (res.status === 400 || res.status === 401) {
-                        // Try to parse error response
+                        // Try to parse error response as JSON
                         try {
-                            const errorResponse = yield res.json();
+                            const errorResponse = JSON.parse(bodyText);
                             if (errorResponse.type === 'error') {
                                 // Check for specific error codes
                                 if (errorResponse.messageCode === 'INVALID_OTP') {
@@ -2736,8 +2684,7 @@
                             // 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}`);
+                    throw new OAuthError('provider_error', undefined, `Token exchange failed: ${res.status} ${bodyText}`);
                 }
                 const response = yield res.json();
                 if (response.type === 'error') {
@@ -2843,9 +2790,8 @@
      * ```
      */
     function startOAuthRedirect(options) {
-        // Store provider in sessionStorage for reference on callback
-        if (typeof sessionStorage !== 'undefined') {
-            sessionStorage.setItem('dexie-cloud-oauth-provider', options.provider);
+        if (typeof window === 'undefined') {
+            throw new Error('OAuth redirect requires a browser environment');
         }
         const loginUrl = buildOAuthLoginUrl(options);
         window.location.href = loginUrl;
@@ -2897,6 +2843,25 @@
                         public_key,
                     };
                 }
+                else if ((hints === null || hints === void 0 ? void 0 : hints.grant_type) === 'otp' || (hints === null || hints === void 0 ? void 0 : hints.email)) {
+                    // User explicitly requested OTP flow - skip provider selection
+                    const email = (hints === null || hints === void 0 ? void 0 : hints.email) || (yield promptForEmail(userInteraction, 'Enter email address'));
+                    if (/@demo.local$/.test(email)) {
+                        tokenRequest = {
+                            demo_user: email,
+                            grant_type: 'demo',
+                            scopes: ['ACCESS_DB'],
+                            public_key
+                        };
+                    }
+                    else {
+                        tokenRequest = {
+                            email,
+                            grant_type: 'otp',
+                            scopes: ['ACCESS_DB'],
+                        };
+                    }
+                }
                 else {
                     // Check for available auth providers (OAuth + OTP)
                     const socialAuthEnabled = ((_c = db.cloud.options) === null || _c === void 0 ? void 0 : _c.socialAuth) !== false;
@@ -2932,7 +2897,8 @@
                 const res1 = yield fetch(`${url}/token`, {
                     body: JSON.stringify(tokenRequest),
                     method: 'post',
-                    headers: { 'Content-Type': 'application/json', mode: 'cors' },
+                    headers: { 'Content-Type': 'application/json' },
+                    mode: 'cors',
                 });
                 if (res1.status !== 200) {
                     const errMsg = yield res1.text();
@@ -3002,7 +2968,11 @@
         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);
+            (typeof location !== 'undefined' ? location.href : undefined);
+        // CodeRabbit suggested to fail fast here, but the only situation where
+        // redirectUri would be undefined is in non-browser environments, and
+        // in those environments OAuth redirect does not make sense anyway
+        // and will fail fast in startOAuthRedirect().
         // Start OAuth redirect flow - page navigates away
         startOAuthRedirect({
             databaseUrl: url,
@@ -13808,7 +13778,7 @@
      *
      * ==========================================================================
      *
-     * Version 4.2.2, Fri Jan 23 2026
+     * Version 4.2.2, Wed Jan 28 2026
      *
      * https://dexie.org
      *
@@ -17047,13 +17017,13 @@
             color: "#3c4043"
         },
         ProviderGitHub: {
-            backgroundColor: "#24292e",
-            border: "1px solid #24292e",
-            color: "#ffffff"
+            backgroundColor: "#ffffff",
+            border: "1px solid #dadce0",
+            color: "#181717"
         },
         ProviderMicrosoft: {
             backgroundColor: "#ffffff",
-            border: "1px solid #8c8c8c",
+            border: "1px solid #dadce0",
             color: "#5e5e5e"
         },
         ProviderApple: {
@@ -17062,9 +17032,9 @@
             color: "#ffffff"
         },
         ProviderCustom: {
-            backgroundColor: "#4f46e5",
-            border: "1px solid #4f46e5",
-            color: "#ffffff"
+            backgroundColor: "#ffffff",
+            border: "1px solid #dadce0",
+            color: "#181717"
         },
         // Divider styles
         Divider: {
@@ -17155,39 +17125,13 @@
      * 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 { displayName, iconUrl, styleHint } = 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(),
+            iconUrl && (_$1("img", { src: iconUrl, alt: "", style: Styles.ProviderButtonIcon, "aria-hidden": "true" })),
             _$1("span", { style: Styles.ProviderButtonText }, displayName)));
     }
     /**
@@ -18145,7 +18089,7 @@
         const syncComplete = new rxjs.Subject();
         dexie.cloud = {
             // @ts-ignore
-            version: "4.3.4",
+            version: "4.3.6",
             options: Object.assign({}, DEFAULT_OPTIONS),
             schema: null,
             get currentUserId() {
@@ -18415,12 +18359,18 @@
                     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' }
-                    });
+                    // Guard so UI errors don't abort initialization
+                    try {
+                        yield alertUser(db.cloud.userInteraction, 'Authentication Error', {
+                            type: 'error',
+                            messageCode: 'GENERIC_ERROR',
+                            message: error.message,
+                            messageParams: { provider: error.provider || 'unknown' }
+                        });
+                    }
+                    catch (uiError) {
+                        console.error('[dexie-cloud] Failed to show OAuth error alert:', uiError);
+                    }
                 }
                 // Process pending OAuth callback if present (from dxc-auth redirect)
                 if (pendingOAuthCode && !db.cloud.isServiceWorkerDB) {
@@ -18524,7 +18474,7 @@
         }
     }
     // @ts-ignore
-    dexieCloud.version = "4.3.4";
+    dexieCloud.version = "4.3.6";
     Dexie.Cloud = dexieCloud;
 
     exports.default = dexieCloud;