fix: fixes race between setUserId and trigger (#7498) [Backport to release/4.8] (#7514)

Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>

apps/web/lib/auth.test.ts

@@ -33,14 +33,14 @@ describe("Password Management", () => {
     const hashedPassword = await hashPassword(password);
     const isValid = await verifyPassword(password, hashedPassword);
     expect(isValid).toBe(true);
-  }, 15000);
+  });
 
   test("verifyPassword should reject an incorrect password", async () => {
     const password = "testPassword123";
     const hashedPassword = await hashPassword(password);
     const isValid = await verifyPassword("wrongPassword", hashedPassword);
     expect(isValid).toBe(false);
-  }, 15000);
+  });
 });
 
 describe("Organization Access", () => {

apps/web/lib/crypto.test.ts

@@ -34,7 +34,7 @@ describe("Crypto Utils", () => {
 
       const isValid = await verifySecret(secret, hash);
       expect(isValid).toBe(true);
-    }, 15000);
+    });
 
     test("should reject wrong secrets", async () => {
       const secret = "test-secret-123";
@@ -43,7 +43,7 @@ describe("Crypto Utils", () => {
 
       const isValid = await verifySecret(wrongSecret, hash);
       expect(isValid).toBe(false);
-    }, 15000);
+    });
 
     test("should generate different hashes for the same secret (due to salt)", async () => {
       const secret = "test-secret-123";
@@ -64,7 +64,7 @@ describe("Crypto Utils", () => {
       // Verify the cost factor is in the hash
       expect(hash).toMatch(/^\$2[aby]\$10\$/);
       expect(await verifySecret(secret, hash)).toBe(true);
-    }, 15000);
+    });
 
     test("should return false for invalid hash format", async () => {
       const secret = "test-secret-123";

apps/web/lib/survey/service.test.ts

@@ -1021,6 +1021,6 @@ describe("updateSurveyDraftAction", () => {
 
       // Expect validation error (skipValidation = false)
       await expect(updateSurveyInternal(incompleteSurvey, false)).rejects.toThrow();
-    }, 15000);
+    });
   });
 });

apps/web/modules/ee/billing/lib/organization-billing.test.ts

@@ -159,12 +159,6 @@ describe("organization-billing", () => {
     mocks.getCloudPlanFromProduct.mockReturnValue("pro");
     mocks.subscriptionsList.mockResolvedValue({ data: [] });
     mocks.customersList.mockResolvedValue({ data: [] });
-    mocks.customersRetrieve.mockResolvedValue({
-      id: "cus_1",
-      deleted: false,
-      invoice_settings: { default_payment_method: null },
-      default_source: null,
-    });
     mocks.prismaMembershipFindFirst.mockResolvedValue(null);
     mocks.productsList.mockResolvedValue({
       data: [
@@ -645,64 +639,6 @@ describe("organization-billing", () => {
     expect(mocks.cacheDel).toHaveBeenCalledWith(["billing-cache-key"]);
   });
 
-  test("syncOrganizationBillingFromStripe marks migrated customers with customer-level payment methods", async () => {
-    mocks.prismaOrganizationBillingFindUnique.mockResolvedValue({
-      stripeCustomerId: "cus_1",
-      limits: {
-        projects: 3,
-        monthly: {
-          responses: 1500,
-        },
-      },
-      usageCycleAnchor: new Date(),
-      stripe: { lastSyncedEventId: null },
-    });
-    mocks.subscriptionsList.mockResolvedValue({
-      data: [
-        {
-          id: "sub_1",
-          status: "active",
-          default_payment_method: null,
-          billing_cycle_anchor: 1739923200,
-          items: {
-            data: [
-              {
-                price: {
-                  metadata: {},
-                  product: { id: "prod_pro", metadata: { formbricks_plan: "pro" } },
-                  recurring: { usage_type: "licensed", interval: "month" },
-                },
-              },
-            ],
-          },
-        },
-      ],
-    });
-    mocks.customersRetrieve.mockResolvedValue({
-      id: "cus_1",
-      deleted: false,
-      invoice_settings: { default_payment_method: "pm_legacy_default" },
-      default_source: null,
-    });
-    mocks.entitlementsList.mockResolvedValue({
-      data: [],
-      has_more: false,
-    });
-
-    const result = await syncOrganizationBillingFromStripe("org_1");
-
-    expect(result?.stripe?.hasPaymentMethod).toBe(true);
-    expect(mocks.prismaOrganizationBillingUpdate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        data: expect.objectContaining({
-          stripe: expect.objectContaining({
-            hasPaymentMethod: true,
-          }),
-        }),
-      })
-    );
-  });
-
   test("createPaidPlanCheckoutSession rejects mixed-interval yearly checkout", async () => {
     await expect(
       createPaidPlanCheckoutSession({

apps/web/modules/ee/billing/lib/organization-billing.ts

@@ -1107,21 +1107,6 @@ const resolvePendingPlanChange = async (subscription: Stripe.Subscription | null
   return null;
 };
 
-const resolveHasPaymentMethod = (
-  subscription: Stripe.Subscription | null,
-  customer: Stripe.Customer | Stripe.DeletedCustomer
-) => {
-  if (subscription?.default_payment_method != null) {
-    return true;
-  }
-
-  if (customer.deleted) {
-    return false;
-  }
-
-  return customer.invoice_settings.default_payment_method != null || customer.default_source != null;
-};
-
 export const syncOrganizationBillingFromStripe = async (
   organizationId: string,
   event?: { id: string; created: number }
@@ -1147,10 +1132,9 @@ export const syncOrganizationBillingFromStripe = async (
     return billing;
   }
 
-  const [subscription, featureLookupKeys, customer] = await Promise.all([
+  const [subscription, featureLookupKeys] = await Promise.all([
     resolveCurrentSubscription(customerId),
     listAllActiveEntitlements(customerId),
-    stripeClient.customers.retrieve(customerId),
   ]);
 
   const cloudPlan = resolveCloudPlanFromSubscription(subscription);
@@ -1176,7 +1160,7 @@ export const syncOrganizationBillingFromStripe = async (
       interval: billingInterval,
       subscriptionStatus,
       subscriptionId: subscription?.id ?? null,
-      hasPaymentMethod: resolveHasPaymentMethod(subscription, customer),
+      hasPaymentMethod: subscription?.default_payment_method != null,
       features: featureLookupKeys,
       pendingChange,
       lastStripeEventCreatedAt: toIsoStringOrNull(incomingEventDate ?? previousEventDate),

packages/js-core/src/lib/survey/widget.ts

@@ -11,6 +11,7 @@ import {
   handleHiddenFields,
   shouldDisplayBasedOnPercentage,
 } from "@/lib/common/utils";
+import { UpdateQueue } from "@/lib/user/update-queue";
 import { type TEnvironmentStateSurvey, type TUserState } from "@/types/config";
 import { type TTrackProperties } from "@/types/survey";
 
@@ -60,6 +61,24 @@ export const renderWidget = async (
 
   setIsSurveyRunning(true);
 
+  // Wait for pending user identification to complete before rendering
+  const updateQueue = UpdateQueue.getInstance();
+  if (updateQueue.hasPendingWork()) {
+    logger.debug("Waiting for pending user identification before rendering survey");
+    const identificationSucceeded = await updateQueue.waitForPendingWork();
+    if (!identificationSucceeded) {
+      const hasSegmentFilters = Array.isArray(survey.segment?.filters) && survey.segment.filters.length > 0;
+
+      if (hasSegmentFilters) {
+        logger.debug("User identification failed. Skipping survey with segment filters.");
+        setIsSurveyRunning(false);
+        return;
+      }
+
+      logger.debug("User identification failed but survey has no segment filters. Proceeding.");
+    }
+  }
+
   if (survey.delay) {
     logger.debug(`Delaying survey "${survey.name}" by ${survey.delay.toString()} seconds.`);
   }

packages/js-core/src/lib/user/update-queue.ts

@@ -8,7 +8,9 @@ export class UpdateQueue {
   private static instance: UpdateQueue | null = null;
   private updates: TUpdates | null = null;
   private debounceTimeout: NodeJS.Timeout | null = null;
+  private pendingFlush: Promise<void> | null = null;
   private readonly DEBOUNCE_DELAY = 500;
+  private readonly PENDING_WORK_TIMEOUT = 5000;
 
   private constructor() {}
 
@@ -63,17 +65,45 @@ export class UpdateQueue {
     return !this.updates;
   }
 
+  public hasPendingWork(): boolean {
+    return this.updates !== null || this.pendingFlush !== null;
+  }
+
+  public async waitForPendingWork(): Promise<boolean> {
+    if (!this.hasPendingWork()) return true;
+
+    const flush = this.pendingFlush ?? this.processUpdates();
+    try {
+      const succeeded = await Promise.race([
+        flush.then(() => true as const),
+        new Promise<false>((resolve) => {
+          setTimeout(() => {
+            resolve(false);
+          }, this.PENDING_WORK_TIMEOUT);
+        }),
+      ]);
+      return succeeded;
+    } catch {
+      return false;
+    }
+  }
+
   public async processUpdates(): Promise<void> {
     const logger = Logger.getInstance();
     if (!this.updates) {
       return;
     }
 
+    // If a flush is already in flight, reuse it instead of creating a new promise
+    if (this.pendingFlush) {
+      return this.pendingFlush;
+    }
+
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
     }
 
-    return new Promise((resolve, reject) => {
+    const flushPromise = new Promise<void>((resolve, reject) => {
       const handler = async (): Promise<void> => {
         try {
           let currentUpdates = { ...this.updates };
@@ -147,8 +177,10 @@ export class UpdateQueue {
           }
 
           this.clearUpdates();
+          this.pendingFlush = null;
           resolve();
         } catch (error: unknown) {
+          this.pendingFlush = null;
           logger.error(
             `Failed to process updates: ${error instanceof Error ? error.message : "Unknown error"}`
           );
@@ -158,5 +190,8 @@ export class UpdateQueue {
 
       this.debounceTimeout = setTimeout(() => void handler(), this.DEBOUNCE_DELAY);
     });
+
+    this.pendingFlush = flushPromise;
+    return flushPromise;
   }
 }

packages/survey-ui/src/components/general/label.tsx

@@ -1,4 +1,4 @@
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import * as React from "react";
 import { cn, stripInlineStyles } from "@/lib/utils";
 
@@ -39,7 +39,7 @@ function Label({
   const isHtml = childrenString ? isValidHTML(strippedContent) : false;
   const safeHtml =
     isHtml && strippedContent
-      ? DOMPurify.sanitize(strippedContent, {
+      ? sanitize(strippedContent, {
           ADD_ATTR: ["target"],
           FORBID_ATTR: ["style"],
         })

packages/survey-ui/src/lib/utils.ts

@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const twMerge = extendTailwindMerge({
@@ -27,14 +27,16 @@ export function cn(...inputs: ClassValue[]): string {
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
-  // This is more secure than regex-based approaches and handles edge cases properly
-  return DOMPurify.sanitize(html, {
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };

packages/survey-ui/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "isolatedModules": true,
     "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2020", "ES2021.String"],
     "noEmit": true,
     "paths": {
       "@/*": ["./src/*"]

packages/surveys/src/lib/html-utils.ts

@@ -10,14 +10,16 @@ import DOMPurify from "isomorphic-dompurify";
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
-  // This is more secure than regex-based approaches and handles edge cases properly
-  return DOMPurify.sanitize(html, {
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return DOMPurify.sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };