feat(buildExtensions): syncSupabaseEnvVars build extension (#3152)

with docs

Author: 0ski

.changeset/warm-falcons-joke.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/build": patch
+---
+
+Add syncSupabaseEnvVars to pull database connection strings and save them as trigger.dev environment variables

apps/webapp/app/components/integrations/VercelBuildSettings.tsx

@@ -2,6 +2,7 @@ import { Switch } from "~/components/primitives/Switch";
 import { Label } from "~/components/primitives/Label";
 import { Hint } from "~/components/primitives/Hint";
 import { TextLink } from "~/components/primitives/TextLink";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import {
   EnvironmentIcon,
   environmentFullTitle,
@@ -18,6 +19,8 @@ type BuildSettingsFieldsProps = {
   atomicBuilds: EnvSlug[];
   onAtomicBuildsChange: (slugs: EnvSlug[]) => void;
   envVarsConfigLink?: string;
+  /** Slugs that should be forced off and disabled, with tooltip reason. */
+  disabledEnvSlugs?: Partial<Record<EnvSlug, string>>;
 };
 
 export function BuildSettingsFields({
@@ -29,7 +32,11 @@ export function BuildSettingsFields({
   atomicBuilds,
   onAtomicBuildsChange,
   envVarsConfigLink,
+  disabledEnvSlugs,
 }: BuildSettingsFieldsProps) {
+  const isSlugDisabled = (slug: EnvSlug) => !!disabledEnvSlugs?.[slug];
+  const enabledSlugs = availableEnvSlugs.filter((s) => !isSlugDisabled(s));
+
   return (
     <>
       {/* Pull env vars before build */}
@@ -41,11 +48,11 @@ export function BuildSettingsFields({
               <Switch
                 variant="small"
                 checked={
-                  availableEnvSlugs.length > 0 &&
-                  availableEnvSlugs.every((s) => pullEnvVarsBeforeBuild.includes(s))
+                  enabledSlugs.length > 0 &&
+                  enabledSlugs.every((s) => pullEnvVarsBeforeBuild.includes(s))
                 }
                 onCheckedChange={(checked) => {
-                  onPullEnvVarsChange(checked ? [...availableEnvSlugs] : []);
+                  onPullEnvVarsChange(checked ? [...enabledSlugs] : []);
                 }}
               />
             )}
@@ -63,8 +70,13 @@ export function BuildSettingsFields({
         <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
           {availableEnvSlugs.map((slug) => {
             const envType = envSlugToType(slug);
-            return (
-              <div key={slug} className="flex items-center justify-between">
+            const disabled = isSlugDisabled(slug);
+            const disabledReason = disabledEnvSlugs?.[slug];
+            const row = (
+              <div
+                key={slug}
+                className={`flex items-center justify-between ${disabled ? "opacity-50" : ""}`}
+              >
                 <div className="flex items-center gap-1.5">
                   <EnvironmentIcon environment={{ type: envType }} className="size-4" />
                   <span className={`text-sm ${environmentTextClassName({ type: envType })}`}>
@@ -73,7 +85,8 @@ export function BuildSettingsFields({
                 </div>
                 <Switch
                   variant="small"
-                  checked={pullEnvVarsBeforeBuild.includes(slug)}
+                  checked={disabled ? false : pullEnvVarsBeforeBuild.includes(slug)}
+                  disabled={disabled}
                   onCheckedChange={(checked) => {
                     onPullEnvVarsChange(
                       checked
@@ -84,6 +97,12 @@ export function BuildSettingsFields({
                 />
               </div>
             );
+            if (disabled && disabledReason) {
+              return (
+                <SimpleTooltip key={slug} button={row} content={disabledReason} side="left" />
+              );
+            }
+            return row;
           })}
         </div>
       </div>
@@ -97,17 +116,17 @@ export function BuildSettingsFields({
               <Switch
                 variant="small"
                 checked={
-                  availableEnvSlugs.length > 0 &&
-                  availableEnvSlugs.every(
+                  enabledSlugs.length > 0 &&
+                  enabledSlugs.every(
                     (s) => discoverEnvVars.includes(s) || !pullEnvVarsBeforeBuild.includes(s)
                   ) &&
-                  availableEnvSlugs.some((s) => discoverEnvVars.includes(s))
+                  enabledSlugs.some((s) => discoverEnvVars.includes(s))
                 }
-                disabled={!availableEnvSlugs.some((s) => pullEnvVarsBeforeBuild.includes(s))}
+                disabled={!enabledSlugs.some((s) => pullEnvVarsBeforeBuild.includes(s))}
                 onCheckedChange={(checked) => {
                   onDiscoverEnvVarsChange(
                     checked
-                      ? availableEnvSlugs.filter((s) => pullEnvVarsBeforeBuild.includes(s))
+                      ? enabledSlugs.filter((s) => pullEnvVarsBeforeBuild.includes(s))
                       : []
                   );
                 }}
@@ -122,11 +141,13 @@ export function BuildSettingsFields({
         <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
           {availableEnvSlugs.map((slug) => {
             const envType = envSlugToType(slug);
+            const disabled = isSlugDisabled(slug);
+            const disabledReason = disabledEnvSlugs?.[slug];
             const isPullDisabled = !pullEnvVarsBeforeBuild.includes(slug);
-            return (
+            const row = (
               <div
                 key={slug}
-                className={`flex items-center justify-between ${isPullDisabled ? "opacity-50" : ""}`}
+                className={`flex items-center justify-between ${disabled || isPullDisabled ? "opacity-50" : ""}`}
               >
                 <div className="flex items-center gap-1.5">
                   <EnvironmentIcon environment={{ type: envType }} className="size-4" />
@@ -136,8 +157,8 @@ export function BuildSettingsFields({
                 </div>
                 <Switch
                   variant="small"
-                  checked={discoverEnvVars.includes(slug)}
-                  disabled={isPullDisabled}
+                  checked={disabled ? false : discoverEnvVars.includes(slug)}
+                  disabled={disabled || isPullDisabled}
                   onCheckedChange={(checked) => {
                     onDiscoverEnvVarsChange(
                       checked
@@ -148,6 +169,12 @@ export function BuildSettingsFields({
                 />
               </div>
             );
+            if (disabled && disabledReason) {
+              return (
+                <SimpleTooltip key={slug} button={row} content={disabledReason} side="left" />
+              );
+            }
+            return row;
           })}
         </div>
       </div>

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -48,6 +48,7 @@ import { vercelAppInstallPath, v3ProjectSettingsIntegrationsPath, githubAppInsta
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { useEffect, useState, useCallback, useRef } from "react";
 import { usePostHogTracking } from "~/hooks/usePostHog";
+import { TextLink } from "../primitives/TextLink";
 
 function safeRedirectUrl(url: string): string | null {
   try {
@@ -224,9 +225,10 @@ export function VercelOnboardingModal({
     () => availableEnvSlugsForOnboardingBuildSettings
   );
 
-  // Sync pullEnvVarsBeforeBuild and discoverEnvVars when hasStagingEnvironment becomes true (once)
+  // Sync pullEnvVarsBeforeBuild and discoverEnvVars when hasStagingEnvironment becomes true
+  // AND a custom Vercel environment is mapped (once)
   useEffect(() => {
-    if (hasStagingEnvironment && !hasSyncedStagingRef.current) {
+    if (hasStagingEnvironment && vercelStagingEnvironment && !hasSyncedStagingRef.current) {
       hasSyncedStagingRef.current = true;
       setPullEnvVarsBeforeBuild((prev) => {
         if (!prev.includes("stg")) {
@@ -241,7 +243,15 @@ export function VercelOnboardingModal({
         return prev;
       });
     }
-  }, [hasStagingEnvironment]);
+  }, [hasStagingEnvironment, vercelStagingEnvironment]);
+
+  // Strip "stg" from build settings when the staging environment mapping is cleared
+  useEffect(() => {
+    if (!vercelStagingEnvironment) {
+      setPullEnvVarsBeforeBuild((prev) => prev.filter((s) => s !== "stg"));
+      setDiscoverEnvVars((prev) => prev.filter((s) => s !== "stg"));
+    }
+  }, [vercelStagingEnvironment]);
 
   // Sync pullEnvVarsBeforeBuild and discoverEnvVars when hasPreviewEnvironment becomes true (once)
   useEffect(() => {
@@ -670,6 +680,11 @@ export function VercelOnboardingModal({
   const showBuildSettings = state === "build-settings";
   const showGitHubConnection = state === "github-connection";
 
+  const disabledEnvSlugsForBuildSettings =
+    hasStagingEnvironment && !vercelStagingEnvironment
+      ? ({ stg: "Map a custom Vercel environment to Staging to enable this" } as Partial<Record<EnvSlug, string>>)
+      : undefined;
+
   return (
     <Dialog open={isOpen} onOpenChange={(open) => {
       if (!open && !fromMarketplaceContext) {
@@ -731,7 +746,7 @@ export function VercelOnboardingModal({
               )}
 
               <Hint>
-                Once connected, your <code className="text-xs">TRIGGER_SECRET_KEY</code> will be
+                Once connected, your <code className="text-xs rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">TRIGGER_SECRET_KEY</code> will be
                 automatically synced to Vercel for each environment.
               </Hint>
 
@@ -775,6 +790,10 @@ export function VercelOnboardingModal({
               <Paragraph className="text-sm">
                 Select which custom Vercel environment should map to Trigger.dev's Staging
                 environment. Production and Preview environments are mapped automatically.
+                If you skip this step, the{" "}
+                <code className="rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">TRIGGER_SECRET_KEY</code>{" "}
+                will not be installed for the staging environment in Vercel. You can configure this later in
+                project settings.
               </Paragraph>
 
               <Select
@@ -800,15 +819,6 @@ export function VercelOnboardingModal({
                 ))}
               </Select>
 
-              <Callout variant="info">
-                <p className="text-xs">
-                  If you skip this step, the{" "}
-                  <code className="rounded bg-charcoal-700 px-1 py-0.5 text-text-bright">TRIGGER_SECRET_KEY</code>{" "}
-                  will not be installed for the staging environment in Vercel. You can configure this later in
-                  project settings.
-                </p>
-              </Callout>
-
               <Paragraph className="text-xs text-text-dimmed">
                 Make sure the staging branch in your Vercel project's Git settings matches the staging branch
                 configured in your GitHub integration.
@@ -845,25 +855,13 @@ export function VercelOnboardingModal({
 
           {showEnvVarSync && (
             <div className="flex flex-col gap-4">
-              <Header3>Pull Environment Variables</Header3>
-              <Paragraph className="text-sm">
-                Select which environment variables to pull from Vercel now. This is a one-time pull.
-                Later on environment variables can be pulled before each build.
-              </Paragraph>
-
-              <div className="flex gap-4 text-sm">
-                <div className="rounded border bg-charcoal-750 px-3 py-2">
-                  <span className="font-medium text-text-bright">{syncableEnvVars.length}</span>
-                  <span className="text-text-dimmed"> can be pulled</span>
-                </div>
-                {secretEnvVars.length > 0 && (
-                  <div className="rounded border bg-charcoal-750 px-3 py-2">
-                    <span className="font-medium text-amber-400">{secretEnvVars.length}</span>
-                    <span className="text-text-dimmed"> secret (cannot pull)</span>
-                  </div>
-                )}
+              <div className="flex flex-col gap-1">
+                <Header3>Pull Environment Variables</Header3>
+                <Paragraph className="text-sm">
+                Choose which environment variables to import from Vercel. This runs as a one time pull to prefill your project with the variables it needs. You’ll be able to pull again later, or enable automatic syncing before each build if you prefer.
+                If you are using Supabase or Neon branching, <TextLink href="https://trigger.dev/docs/vercel-integration#supabase-and-neon-database-branching" target="_blank" rel="noopener noreferrer">read the docs</TextLink> for the recommended setup.
+                </Paragraph>
               </div>
-
               <div className="flex items-center justify-between rounded border bg-charcoal-800 p-3">
                 <div>
                   <Label>Pull all environment variables now</Label>
@@ -1052,6 +1050,7 @@ export function VercelOnboardingModal({
                 onDiscoverEnvVarsChange={setDiscoverEnvVars}
                 atomicBuilds={atomicBuilds}
                 onAtomicBuildsChange={setAtomicBuilds}
+                disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
               />
 
               <FormButtons

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

@@ -1759,16 +1759,18 @@ export class VercelIntegrationRepository {
     vercelProjectId: string,
     teamId?: string | null
   ): ResultAsync<void, VercelApiError> {
-    return wrapVercelCall(
+    return wrapVercelCallWithRecovery(
       client.projects.updateProject({
         idOrName: vercelProjectId,
         ...(teamId && { teamId }),
         requestBody: {
           autoAssignCustomDomains: false,
         },
       }),
+      VercelSchemas.updateProject,
       "Failed to disable autoAssignCustomDomains",
-      { vercelProjectId, teamId }
+      { vercelProjectId, teamId },
+      toVercelApiError
     ).map(() => undefined);
   }
 

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

@@ -632,6 +632,11 @@ function ConnectedVercelProjectForm({
   const availableEnvSlugs = getAvailableEnvSlugs(hasStagingEnvironment, hasPreviewEnvironment);
   const availableEnvSlugsForBuildSettings = getAvailableEnvSlugsForBuildSettings(hasStagingEnvironment, hasPreviewEnvironment);
 
+  const disabledEnvSlugsForBuildSettings: Partial<Record<EnvSlug, string>> | undefined =
+    hasStagingEnvironment && !configValues.vercelStagingEnvironment
+      ? { stg: "Map a custom Vercel environment to Staging to enable this" }
+      : undefined;
+
   const formatSelectedEnvs = (selected: EnvSlug[], availableSlugs: EnvSlug[] = availableEnvSlugs): string => {
     if (selected.length === 0) return "None selected";
     if (selected.length === availableSlugs.length) return "All environments";
@@ -727,12 +732,24 @@ function ConnectedVercelProjectForm({
                     setValue={(value) => {
                       if (!Array.isArray(value)) {
                         const env = customEnvironments?.find((e) => e.id === value);
-                        setConfigValues((prev) => ({
-                          ...prev,
-                          vercelStagingEnvironment: env
-                            ? { environmentId: env.id, displayName: env.slug }
-                            : null,
-                        }));
+                        setConfigValues((prev) => {
+                          const next = {
+                            ...prev,
+                            vercelStagingEnvironment: env
+                              ? { environmentId: env.id, displayName: env.slug }
+                              : null,
+                          };
+                          // When clearing the staging mapping, strip "stg" from build settings
+                          if (!env) {
+                            next.pullEnvVarsBeforeBuild = prev.pullEnvVarsBeforeBuild.filter(
+                              (s) => s !== "stg"
+                            );
+                            next.discoverEnvVars = prev.discoverEnvVars.filter(
+                              (s) => s !== "stg"
+                            );
+                          }
+                          return next;
+                        });
                       }
                     }}
                     items={[{ id: "", slug: "None" }, ...customEnvironments]}
@@ -770,6 +787,7 @@ function ConnectedVercelProjectForm({
                   setConfigValues((prev) => ({ ...prev, atomicBuilds: slugs }))
                 }
                 envVarsConfigLink={`/orgs/${organizationSlug}/projects/${projectSlug}/env/${environmentSlug}/environment-variables`}
+                disabledEnvSlugs={disabledEnvSlugsForBuildSettings}
               />
 
               {/* Warning: autoAssignCustomDomains must be disabled for atomic deployments */}

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

@@ -85,8 +85,8 @@ export function createDefaultVercelIntegrationData(
   return {
     config: {
       atomicBuilds: ["prod"],
-      pullEnvVarsBeforeBuild: ["prod", "stg", "preview"],
-      discoverEnvVars: ["prod", "stg", "preview"],
+      pullEnvVarsBeforeBuild: ["prod", "preview"],
+      discoverEnvVars: ["prod", "preview"],
       vercelStagingEnvironment: null,
     },
     syncEnvVarsMapping: {},

docs/config/extensions/overview.mdx

@@ -57,6 +57,7 @@ Trigger.dev provides a set of built-in extensions that you can use to customize
 | [additionalPackages](/config/extensions/additionalPackages)           | Install additional npm packages in your build image                            |
 | [syncEnvVars](/config/extensions/syncEnvVars)                         | Automatically sync environment variables from external services to Trigger.dev |
 | [syncVercelEnvVars](/config/extensions/syncEnvVars#syncVercelEnvVars) | Automatically sync environment variables from Vercel to Trigger.dev            |
+| [syncSupabaseEnvVars](/config/extensions/syncEnvVars#syncSupabaseEnvVars) | Automatically sync environment variables from Supabase to Trigger.dev          |
 | [esbuildPlugin](/config/extensions/esbuildPlugin)                     | Add existing or custom esbuild extensions to customize your build process      |
 | [emitDecoratorMetadata](/config/extensions/emitDecoratorMetadata)     | Enable `emitDecoratorMetadata` in your TypeScript build                        |
 | [audioWaveform](/config/extensions/audioWaveform)                     | Add Audio Waveform to your build image                                         |