feat(buildExtensions): syncSupabaseEnvVars build extension

.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/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 {
@@ -731,7 +732,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 +776,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 +805,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 +841,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>

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                                         |

docs/config/extensions/syncEnvVars.mdx

@@ -220,3 +220,72 @@ The extension syncs the following environment variables (with optional prefix):
 - `POSTGRES_PRISMA_URL` - Connection string optimized for Prisma
 - `POSTGRES_HOST`, `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DATABASE`
 - `PGHOST`, `PGHOST_UNPOOLED`, `PGUSER`, `PGPASSWORD`, `PGDATABASE`
+
+### syncSupabaseEnvVars
+
+The `syncSupabaseEnvVars` build extension syncs environment variables from your Supabase project to Trigger.dev. It uses [Supabase Branching](https://supabase.com/docs/guides/deployment/branching) to automatically detect branches and build the appropriate database connection strings and API keys for your environment.
+
+<AccordionGroup>
+<Accordion title="Setting up authentication">
+You need to set the `SUPABASE_ACCESS_TOKEN` and `SUPABASE_PROJECT_ID` environment variables, or pass them
+as arguments to the `syncSupabaseEnvVars` build extension.
+
+You can generate a `SUPABASE_ACCESS_TOKEN` in your Supabase [dashboard](https://supabase.com/dashboard/account/tokens).
+</Accordion>
+
+<Accordion title="Running in Vercel environment">
+When running the build from a Vercel environment (determined by checking if the `VERCEL`
+environment variable is present), this extension is skipped entirely.
+</Accordion>
+</AccordionGroup>
+
+<Note>
+  For `prod` and `dev` environments, this extension uses credentials from your default Supabase
+  branch. For `preview` and `staging` environments, it matches the git branch name to a Supabase
+  branch and syncs the corresponding database connection strings and API keys.
+</Note>
+
+```ts
+import { defineConfig } from "@trigger.dev/sdk";
+import { syncSupabaseEnvVars } from "@trigger.dev/build/extensions/core";
+
+export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
+  build: {
+    // This will automatically use the SUPABASE_ACCESS_TOKEN and SUPABASE_PROJECT_ID environment variables
+    extensions: [syncSupabaseEnvVars()],
+  },
+});
+```
+
+Or you can pass in the token, project ID, and other options as arguments:
+
+```ts
+import { defineConfig } from "@trigger.dev/sdk";
+import { syncSupabaseEnvVars } from "@trigger.dev/build/extensions/core";
+
+export default defineConfig({
+  project: "<project ref>",
+  // Your other config settings...
+  build: {
+    extensions: [
+      syncSupabaseEnvVars({
+        projectId: "your-supabase-project-id",
+        supabaseAccessToken: "your-supabase-access-token", // optional, we recommend to keep it as env variable
+        branch: "your-branch-name", // optional, defaults to ctx.branch
+        envVarPrefix: "MY_PREFIX_", // optional, prefix for all synced env vars
+      }),
+    ],
+  },
+});
+```
+
+The extension syncs the following environment variables (with optional prefix):
+
+- `DATABASE_URL`, `POSTGRES_URL`, `SUPABASE_DB_URL` — PostgreSQL connection strings
+- `PGHOST`, `PGPORT`, `PGUSER`, `PGPASSWORD`, `PGDATABASE` — Individual connection parameters
+- `SUPABASE_URL` — Supabase API URL
+- `SUPABASE_ANON_KEY` — Anonymous API key
+- `SUPABASE_SERVICE_ROLE_KEY` — Service role API key
+- `SUPABASE_JWT_SECRET` — JWT secret

docs/vercel-integration.mdx

@@ -104,10 +104,9 @@ The following variables are excluded from the Vercel → Trigger.dev sync:
 
 You can control sync behavior per-variable from your project's Vercel settings. Deselecting a variable prevents its value from being updated during future syncs.
 
-<Tip>
-  For dynamic environment variables (e.g., from NeonDB branching), use the `syncEnvVars` build
-  extension instead. Learn more about [environment variables](/deploy-environment-variables).
-</Tip>
+### Supabase and Neon database branching
+
+If you use [Supabase Branching](https://supabase.com/docs/guides/deployment/branching) or [Neon Database Branching](https://neon.tech/docs/guides/branching-intro) for preview environments, disable syncing for database env vars on the Environment Variables page and use the [syncSupabaseEnvVars](/config/extensions/syncEnvVars#syncsupabaseenvvars) or [syncNeonEnvVars](/config/extensions/syncEnvVars#syncneonenvvars) build extensions instead. These extensions automatically resolve the correct branch-specific credentials at build time.
 
 ## Atomic deployments
 

packages/build/src/extensions/core.ts

@@ -5,3 +5,4 @@ export * from "./core/aptGet.js";
 export * from "./core/ffmpeg.js";
 export * from "./core/neonSyncEnvVars.js";
 export * from "./core/vercelSyncEnvVars.js";
+export * from "./core/syncSupabaseEnvVars.js";