feat(vercel): implement envSlugArrayField for JSON-encoded EnvSlug arrays and enhance Vercel integration with transaction handling to prevent race conditions

Author: 0ski

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx

@@ -43,6 +43,7 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
+import { sanitizeVercelNextUrl } from "~/v3/vercel/vercelUrls.server";
 import { EnvironmentParamSchema, v3ProjectSettingsPath, vercelAppInstallPath, vercelResourcePath } from "~/utils/pathBuilder";
 import {
   VercelSettingsPresenter,
@@ -54,7 +55,7 @@ import {
   type VercelProjectIntegrationData,
   type SyncEnvVarsMapping,
   type EnvSlug,
-  jsonArrayField,
+  envSlugArrayField,
   envTypeToSlug,
   getAvailableEnvSlugs,
   getAvailableEnvSlugsForBuildSettings,
@@ -93,9 +94,9 @@ function parseVercelStagingEnvironment(
 
 const UpdateVercelConfigFormSchema = z.object({
   action: z.literal("update-config"),
-  atomicBuilds: jsonArrayField,
-  pullEnvVarsBeforeBuild: jsonArrayField,
-  discoverEnvVars: jsonArrayField,
+  atomicBuilds: envSlugArrayField,
+  pullEnvVarsBeforeBuild: envSlugArrayField,
+  discoverEnvVars: envSlugArrayField,
   vercelStagingEnvironment: z.string().nullable().optional(),
 });
 
@@ -106,9 +107,9 @@ const DisconnectVercelFormSchema = z.object({
 const CompleteOnboardingFormSchema = z.object({
   action: z.literal("complete-onboarding"),
   vercelStagingEnvironment: z.string().nullable().optional(),
-  pullEnvVarsBeforeBuild: jsonArrayField,
-  atomicBuilds: jsonArrayField,
-  discoverEnvVars: jsonArrayField,
+  pullEnvVarsBeforeBuild: envSlugArrayField,
+  atomicBuilds: envSlugArrayField,
+  discoverEnvVars: envSlugArrayField,
   syncEnvVarsMapping: z.string().optional(),
   next: z.string().optional(),
   skipRedirect: z.string().optional().transform((val) => val === "true"),
@@ -242,9 +243,9 @@ export async function action({ request, params }: ActionFunctionArgs) {
       const parsedStagingEnv = parseVercelStagingEnvironment(vercelStagingEnvironment);
 
       const result = await vercelService.updateVercelIntegrationConfig(project.id, {
-        atomicBuilds: atomicBuilds as EnvSlug[] | null,
-        pullEnvVarsBeforeBuild: pullEnvVarsBeforeBuild as EnvSlug[] | null,
-        discoverEnvVars: discoverEnvVars as EnvSlug[] | null,
+        atomicBuilds,
+        pullEnvVarsBeforeBuild,
+        discoverEnvVars,
         vercelStagingEnvironment: parsedStagingEnv,
       });
 
@@ -283,9 +284,9 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
       const result = await vercelService.completeOnboarding(project.id, {
         vercelStagingEnvironment: parsedStagingEnv,
-        pullEnvVarsBeforeBuild: pullEnvVarsBeforeBuild as EnvSlug[] | null,
-        atomicBuilds: atomicBuilds as EnvSlug[] | null,
-        discoverEnvVars: discoverEnvVars as EnvSlug[] | null,
+        pullEnvVarsBeforeBuild,
+        atomicBuilds,
+        discoverEnvVars,
         syncEnvVarsMapping: parsedSyncEnvVarsMapping,
       });
 
@@ -295,13 +296,11 @@ export async function action({ request, params }: ActionFunctionArgs) {
         }
 
         if (next) {
-          const urlResult = Result.fromThrowable(() => new URL(next), (e) => e)();
-          if (urlResult.isOk() && urlResult.value.protocol === "https:") {
-            return json({ success: true, redirectTo: next });
-          }
-          if (urlResult.isErr()) {
-            logger.warn("Invalid next URL provided", { next, error: urlResult.error });
+          const sanitizedNext = sanitizeVercelNextUrl(next);
+          if (sanitizedNext) {
+            return json({ success: true, redirectTo: sanitizedNext });
           }
+          logger.warn("Rejected next URL - not same-origin or vercel.com", { next });
         }
 
         return json({ success: true, redirectTo: settingsPath });

apps/webapp/app/services/vercelIntegration.server.ts

@@ -5,7 +5,7 @@ import type {
   SecretReference,
 } from "@trigger.dev/database";
 import { ResultAsync } from "neverthrow";
-import { prisma } from "~/db.server";
+import { prisma, $transaction } from "~/db.server";
 import { logger } from "~/services/logger.server";
 import { VercelIntegrationRepository } from "~/models/vercelIntegration.server";
 import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
@@ -178,82 +178,124 @@ export class VercelIntegrationService {
         () => undefined
       );
 
-    const existing = await this.getVercelProjectIntegration(params.projectId);
-    if (existing) {
-      const updated = await this.#prismaClient.organizationProjectIntegration.update({
-        where: { id: existing.id },
-        data: {
-          externalEntityId: params.vercelProjectId,
-          integrationData: {
-            ...existing.parsedIntegrationData,
-            vercelProjectId: params.vercelProjectId,
-            vercelProjectName: params.vercelProjectName,
-            vercelTeamId: teamId,
-            vercelTeamSlug,
+    // Use a serializable transaction to prevent duplicate project integrations
+    // from concurrent selectVercelProject calls (read-then-write race condition).
+    const txResult = await $transaction(
+      this.#prismaClient,
+      "selectVercelProject",
+      async (tx) => {
+        const existing = await tx.organizationProjectIntegration.findFirst({
+          where: {
+            projectId: params.projectId,
+            deletedAt: null,
+            organizationIntegration: {
+              service: "VERCEL",
+              deletedAt: null,
+            },
           },
-        },
-      });
+          include: {
+            organizationIntegration: true,
+          },
+        });
 
-      const syncResultAsync = await VercelIntegrationRepository.syncApiKeysToVercel({
-        projectId: params.projectId,
-        vercelProjectId: params.vercelProjectId,
-        teamId,
-        vercelStagingEnvironment: existing.parsedIntegrationData.config.vercelStagingEnvironment,
-        orgIntegration,
-      });
-      const syncResult = syncResultAsync.isOk()
-        ? { success: syncResultAsync.value.errors.length === 0, errors: syncResultAsync.value.errors }
-        : { success: false, errors: [syncResultAsync.error.message] };
+        if (existing) {
+          const parsedData = VercelProjectIntegrationDataSchema.safeParse(
+            existing.integrationData
+          );
+
+          const updated = await tx.organizationProjectIntegration.update({
+            where: { id: existing.id },
+            data: {
+              externalEntityId: params.vercelProjectId,
+              integrationData: {
+                ...(parsedData.success ? parsedData.data : {}),
+                vercelProjectId: params.vercelProjectId,
+                vercelProjectName: params.vercelProjectName,
+                vercelTeamId: teamId,
+                vercelTeamSlug,
+              },
+            },
+          });
+
+          return {
+            integration: updated,
+            wasCreated: false,
+            vercelStagingEnvironment: parsedData.success
+              ? parsedData.data.config.vercelStagingEnvironment
+              : null,
+          };
+        }
+
+        const integrationData = createDefaultVercelIntegrationData(
+          params.vercelProjectId,
+          params.vercelProjectName,
+          teamId,
+          vercelTeamSlug
+        );
+
+        const created = await tx.organizationProjectIntegration.create({
+          data: {
+            organizationIntegrationId: orgIntegration.id,
+            projectId: params.projectId,
+            externalEntityId: params.vercelProjectId,
+            integrationData: integrationData,
+            installedBy: params.userId,
+          },
+        });
 
-      return { integration: updated, syncResult };
+        return {
+          integration: created,
+          wasCreated: true,
+          vercelStagingEnvironment: null,
+        };
+      },
+      { isolationLevel: "Serializable" }
+    );
+
+    if (!txResult) {
+      throw new Error("Failed to select Vercel project: transaction returned undefined");
     }
 
-    const integration = await this.createVercelProjectIntegration({
-      organizationIntegrationId: orgIntegration.id,
-      projectId: params.projectId,
-      vercelProjectId: params.vercelProjectId,
-      vercelProjectName: params.vercelProjectName,
-      vercelTeamId: teamId,
-      vercelTeamSlug,
-      installedByUserId: params.userId,
-    });
+    const { integration, wasCreated, vercelStagingEnvironment } = txResult;
 
     const syncResultAsync = await VercelIntegrationRepository.syncApiKeysToVercel({
       projectId: params.projectId,
       vercelProjectId: params.vercelProjectId,
       teamId,
-      vercelStagingEnvironment: null,
+      vercelStagingEnvironment,
       orgIntegration,
     });
     const syncResult = syncResultAsync.isOk()
       ? { success: syncResultAsync.value.errors.length === 0, errors: syncResultAsync.value.errors }
       : { success: false, errors: [syncResultAsync.error.message] };
 
-    const disableResult = await VercelIntegrationRepository.getVercelClient(orgIntegration)
-      .andThen((client) =>
-        VercelIntegrationRepository.disableAutoAssignCustomDomains(
-          client,
-          params.vercelProjectId,
-          teamId
-        )
-      );
+    if (wasCreated) {
+      const disableResult = await VercelIntegrationRepository.getVercelClient(orgIntegration)
+        .andThen((client) =>
+          VercelIntegrationRepository.disableAutoAssignCustomDomains(
+            client,
+            params.vercelProjectId,
+            teamId
+          )
+        );
+
+      if (disableResult.isErr()) {
+        logger.warn("Failed to disable autoAssignCustomDomains during project selection", {
+          projectId: params.projectId,
+          vercelProjectId: params.vercelProjectId,
+          error: disableResult.error.message,
+        });
+      }
 
-    if (disableResult.isErr()) {
-      logger.warn("Failed to disable autoAssignCustomDomains during project selection", {
+      logger.info("Vercel project selected and API keys synced", {
         projectId: params.projectId,
         vercelProjectId: params.vercelProjectId,
-        error: disableResult.error.message,
+        vercelProjectName: params.vercelProjectName,
+        syncSuccess: syncResult.success,
+        syncErrors: syncResult.errors,
       });
     }
 
-    logger.info("Vercel project selected and API keys synced", {
-      projectId: params.projectId,
-      vercelProjectId: params.vercelProjectId,
-      vercelProjectName: params.vercelProjectName,
-      syncSuccess: syncResult.success,
-      syncErrors: syncResult.errors,
-    });
-
     return { integration, syncResult };
   }
 

apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.ts

@@ -23,6 +23,22 @@ export const jsonArrayField = z.string().optional().transform((val) => {
   );
 });
 
+/**
+ * Zod transform for form fields that submit JSON-encoded EnvSlug arrays.
+ * Parses the string as JSON and validates each element is a valid EnvSlug.
+ * Invalid elements are filtered out rather than rejecting the whole array.
+ */
+export const envSlugArrayField = z.string().optional().transform((val): EnvSlug[] | null => {
+  if (!val) return null;
+  return safeJsonParse(val).match(
+    (parsed) => {
+      if (!Array.isArray(parsed)) return null;
+      return parsed.filter((item): item is EnvSlug => EnvSlugSchema.safeParse(item).success);
+    },
+    () => null
+  );
+});
+
 export const VercelIntegrationConfigSchema = z.object({
   atomicBuilds: z.array(EnvSlugSchema).nullable().optional(),
   pullEnvVarsBeforeBuild: z.array(EnvSlugSchema).nullable().optional(),