Triggering tasks from Supabase database webhooks

You can create a new project by running the following command in your terminal using the Supabase CLI:

supabase init

If your project does not already have package.json or/and tsconfig.json files (e.g. if you are using Deno), create them manually and add them to your project root folder.

Both of these files are required for the Trigger.dev SDK to work correctly.

{
  "devDependencies": {
    // This should be the version of typescript you are using
    "typescript": "^5.6.2"
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "strict": true,
    "outDir": "dist",
    "skipLibCheck": true,
    "lib": ["DOM", "DOM.Iterable"],
    "noEmit": true
  },
  "include": ["./src/**/*.ts", "trigger.config.ts"]
}

The easiest way to get started is to use the CLI. It will add Trigger.dev to your existing project, create a /trigger folder and give you an example task.

Run this command in the root of your project to get started:

It will do a few things:

1. Log you into the CLI if you’re not already logged in.
2. Create a trigger.config.ts file in the root of your project.
3. Ask where you’d like to create the /trigger directory.
4. Create the /trigger directory with an example task, /trigger/example.[ts/js].

Install the “Hello World” example task when prompted. We’ll use this task to test the setup.

The CLI dev command runs a server for your tasks. It watches for changes in your /trigger directory and communicates with the Trigger.dev platform to register your tasks, perform runs, and send data back and forth.

It can also update your @trigger.dev/* packages to prevent version mismatches and failed deploys. You will always be prompted first.

The CLI dev command spits out various useful URLs. Right now we want to visit the Test page

You should see our Example task in the list

Press the “Run test” button

Congratulations, you should see the run page which will live reload showing you the current state of the run.

If you go back to your terminal you’ll see that the dev command also shows the task status and links to the run log.

First, go to your Trigger.dev project dashboard and copy the prod secret key from the API keys page.

Then, in Supabase, select the project you want to use, navigate to ‘Project settings’

Add TRIGGER_SECRET_KEY

Now create a new edge function using the Supabase CLI. We will call it database-webhook.

supabase functions new database-webhook

Replace the database-webhook placeholder code with the following code:

import "jsr:@supabase/functions-js/edge-runtime.d.ts";
// Import the Trigger.dev SDK - replace "<your-sdk-version>" with the version of the SDK you are using, e.g. "3.0.0". You can find this in your package.json file.
import { tasks } from "npm:@trigger.dev/[email protected]/v3";
// Import your task type from your /trigger folder
import type { helloWorldTask } from "../../../src/trigger/example.ts";
//     👆 **type-only** import

console.log("Hello from 'database-webhook' function!");

Deno.serve(async (req) => {
  // Listens for incoming JSON requests
  const payload = await req.json();
  // Triggers the "hello-world" task with the payload
  await tasks.trigger<typeof helloWorldTask>(
    // Your task id
    "hello-world",
    // Your task payload. This will be the data you receive from the database webhook
    payload
  );
  return new Response("ok");
});

This code sets up a Deno server that listens for incoming JSON requests, triggers a “hello-world” task, logs the received payload, and responds with “ok”. This setup is typical for a webhook endpoint that processes incoming data and triggers some action (in this case, the “hello-world” task) based on that data.

Now deploy your edge function with the following command:

supabase functions deploy database-webhook

Follow the CLI instructions, selecting the same project you added your prod secret key to, and once complete you should see your new edge function deployment in your Supabase edge functions dashboard.

There will be a link to the dashboard in your terminal output, or you can find it at this URL:

https://supabase.com/dashboard/project/<your-project-id>/functions

Next, in your Supabase project dashboard, click on ‘Table Editor’

In this example we will call our table skynet.

Add a new column called name with the type text.

By default, Supabase edge functions require a JSON Web Token (JWT) in the authorization header. This is to ensure that only authorized users can access your edge functions.

In your Supabase project dashboard, click ‘Project settings’

Then, go to ‘Database’

Your database webhook is now ready to use.

The next step is to deploy your hello-world task to Trigger.dev cloud.

To do this, run the following command in the terminal:

Your database-webhook edge function is now set up to trigger the hello-world task every time a new row is inserted into your skynet table.

To do this, go back to your Supabase project dashboard, click on ‘Table Editor’

Add a new item under name, with the value Sarah Connor (this can be any string).

Go back to your edge function dashboard

Then, check your cloud.trigger.dev project ‘Runs’ list

Inside that run you will see the payload that was sent from the database webhook, including the name and other table information.

Congratulations, you have successfully triggered a task from a Supabase edge function using a database webhook!