dexie-cloud-addon 4.3.4 → 4.3.6

package/TODO-SOCIALAUTH.md

@@ -9,7 +9,7 @@ This feature adds support for OAuth 2.0 social login providers (Google, GitHub,
 ### Related Files
 
 - **Detailed flow diagram**: [oauth_flow.md](oauth_flow.md) - Sequence diagrams and detailed protocol description
-- **Server implementation**: `/Users/daw/repos/dexie-cloud/libs/dexie-cloud-server`
+- **Server implementation**: See `dexie-cloud-server` repository
   - `src/api/oauth/registerOAuthEndpoints.ts` - OAuth endpoints
   - `src/api/oauth/oauth-helpers.ts` - Provider exchange logic
   - `src/api/registerTokenEndpoint.ts` - Token endpoint (authorization_code grant)

package/dist/modern/authentication/handleOAuthCallback.d.ts

@@ -26,10 +26,6 @@ export declare function parseOAuthCallback(url?: string): OAuthCallbackParams |
  * @returns true if valid, false otherwise
  */
 export declare function validateOAuthState(receivedState: string): boolean;
-/**
- * Gets the OAuth provider from sessionStorage (for redirect flows).
- */
-export declare function getStoredOAuthProvider(): string | null;
 /**
  * Cleans up the dxc-auth query parameter from the URL.
  * Call this after successfully handling the callback to clean up the browser URL.

package/dist/modern/default-ui/OptionButton.d.ts

@@ -8,10 +8,6 @@ export interface OptionButtonProps {
  * 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.
  */
 export declare function OptionButton({ option, onClick }: OptionButtonProps): h.JSX.Element;

package/dist/modern/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
  *
@@ -761,73 +761,19 @@ 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;
-    });
-}
+/** 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) => {
@@ -978,8 +924,8 @@ function confirmLogout(userInteraction, currentUserId, numUnsyncedChanges) {
  */
 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
@@ -988,7 +934,7 @@ function promptForProvider(userInteraction_1, providers_1, otpEnabled_1) {
                 name: 'otp',
                 value: 'email',
                 displayName: 'Continue with email',
-                iconSvg: EmailIcon,
+                iconUrl: EmailIcon,
                 styleHint: 'otp',
             });
         }
@@ -1416,10 +1362,12 @@ function exchangeOAuthCode(options) {
                 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') {
@@ -1436,8 +1384,7 @@ function exchangeOAuthCode(options) {
                         // 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') {
@@ -1543,9 +1490,8 @@ function buildOAuthLoginUrl(options) {
  * ```
  */
 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;
@@ -1597,6 +1543,25 @@ function otpFetchTokenCallback(db) {
                     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;
@@ -1632,7 +1597,8 @@ function otpFetchTokenCallback(db) {
             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();
@@ -1702,7 +1668,11 @@ function initiateOAuthRedirect(db, provider) {
     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,
@@ -5817,13 +5787,13 @@ const Styles = {
         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: {
@@ -5832,9 +5802,9 @@ const Styles = {
         color: "#ffffff"
     },
     ProviderCustom: {
-        backgroundColor: "#4f46e5",
-        border: "1px solid #4f46e5",
-        color: "#ffffff"
+        backgroundColor: "#ffffff",
+        border: "1px solid #dadce0",
+        color: "#181717"
     },
     // Divider styles
     Divider: {
@@ -5925,39 +5895,13 @@ function getOptionStyle(styleHint) {
  * 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)));
 }
 /**
@@ -6915,7 +6859,7 @@ function dexieCloud(dexie) {
     const syncComplete = new Subject();
     dexie.cloud = {
         // @ts-ignore
-        version: "4.3.4",
+        version: "4.3.6",
         options: Object.assign({}, DEFAULT_OPTIONS),
         schema: null,
         get currentUserId() {
@@ -7185,12 +7129,18 @@ function dexieCloud(dexie) {
                 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) {
@@ -7294,7 +7244,7 @@ function dexieCloud(dexie) {
     }
 }
 // @ts-ignore
-dexieCloud.version = "4.3.4";
+dexieCloud.version = "4.3.6";
 Dexie.Cloud = dexieCloud;
 
 export { dexieCloud as default, defineYDocTrigger, dexieCloud, getTiedObjectId, getTiedRealmId, resolveText };