Sync Contacts with Supabase

Seamlessly sync your Supabase user base with Mailtrap to update email lists, create segments, launch personalized campaigns, and measure effectiveness.

You can seamlessly sync your Supabase user base with Mailtrap, which allows you to:

• Seamlessly update your email list

• Create segments based on user data

• Launch personalized email campaigns

• Measure campaign effectiveness

In this guide, you'll learn how to:

• Generate a Mailtrap API token

• Create contacts in Supabase and Mailtrap

• Update contacts in Supabase and Mailtrap

• Demo and test the integration

You can read more about Contacts in our dedicated article.

Generate a Mailtrap API token

Whether you want to only create contacts or update them via Mailtrap x Supabase, you'll first need a Mailtrap API token.

1

Access API Tokens

Go to Settings on the left side-bar menu, navigate to API Tokens, and click on Add Token.

Mailtrap Settings page showing API Tokens section with Add Token button highlighted

2

Configure Token Permissions

Enter the desired name, click on Add Token, tick the desired permission checkboxes, and hit Save.

Mailtrap API Token creation dialog with name field and permission checkboxes

3

Copy and Store Token

Copy the token and save it in a secure place.

Mailtrap API Token display showing generated token ready to copy

Creating contacts

Before we start, let me briefly explain the workflow:

• A user registers in your app

• Their email appears not only in Supabase but also in the Contacts page

• Then, you can easily group the new contact into different lists, segments, etc.

Step 1. Create an Edge Function in Supabase

First, let's create an Edge Function containing our Mailtrap API token.

1

Open Edge Functions

Open your Supabase project dashboard and go to Edge Functions.

Supabase project dashboard with Edge Functions navigation highlighted in sidebar

2

Deploy New Function

Click on Deploy a new Function in the upper-right corner and select Via Editor.

Supabase Edge Functions page showing Deploy a new Function button with dropdown menu

3

Add Function Code

Inside the function editor, you should see the default serverless function template.

Supabase Edge Function editor showing default function template code

Replace it with the following code snippet that will send user data to Contacts:

create-contact Edge Function

const MAILTRAP_API_TOKEN = Deno.env.get("MAILTRAP_TOKEN") || "";
const MAILTRAP_ACCOUNT_ID = Deno.env.get("MAILTRAP_ACCOUNT_ID") || "";

const handler = async (req) => {
  const requestData = await req.json();
  const { email } = requestData.record;
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": `Bearer ${MAILTRAP_API_TOKEN}`
    },
    body: JSON.stringify({
      contact: {
        email: email,
        list_ids: [
          4292 // List for New Users
        ]
      }
    })
  };
  return await fetch(`https://mailtrap.io/api/accounts/${MAILTRAP_ACCOUNT_ID}/contacts`, options);
};

Deno.serve(handler);

Replace the variable list_ids: value (4292 in this example) with the ID of the list where you want to add the contact.

Then, click on Deploy Function.

Supabase Edge Function editor with Deploy Function button highlighted

4

Verify Deployment

Supabase will build and deploy the Edge Function.

Supabase Edge Function deployment progress showing build and deploy status

Step 2. Set up webhooks for contact creation

Next, we will create a Supabase Webhook to trigger the Edge Function we just created.

1

Navigate to Database Webhooks

Open your Supabase Dashboard, go to Database Webhooks, and click on Create a new hook.

Supabase Database page with Webhooks section and Create a new hook button

2

Configure Basic Settings

Configure the following:

• Name: create_contact

• Table: users

• Events: ✅ Insert

Supabase webhook configuration form showing name, table, and Insert event checkbox

3

Configure Webhook Type

Configure the following:

• Choose Supabase Edge Functions under 'Webhook configuration'

• Go for POST under 'Method'

• Select the previously created function create-contact

• Set the desired timeout (e.g., 5000)

Supabase webhook configuration showing Edge Functions type, POST method, and function selection

4

Set HTTP Headers

Set HTTP headers for Auth:

• Content-type: application/json

• Authorization: Bearer [your-token]

Click Create webhook to activate it.

Supabase webhook HTTP headers configuration with Content-type and Authorization fields

Updating contacts

Here, the flow is quite similar to creating contacts, with the major difference being the code we'll use.

How it works:

• A registered user updates their name/account info

• The newly updated info appears not only in Supabase but also in the Mailtrap Contacts page

• Then, you can send more personalized emails (e.g., name or state fields)

Step 1. Create an edge function

Again, we start by creating an Edge Function and adding Mailtrap API token to it.

1

Open Edge Functions

Open your Supabase project dashboard and go to Edge Functions.

Supabase project dashboard with Edge Functions navigation highlighted in sidebar

2

Deploy New Function

Click on Deploy a new function in the upper-right corner and select Via Editor.

Supabase Edge Functions page showing Deploy a new function button with dropdown menu

3

Add Function Code

Inside the function editor, you should see the default serverless function template.

Supabase Edge Function editor showing default function template code

Replace it with the following code snippet, which will:

• Receive user data from the webhook

• Call the Mailtrap API to update existing contact details

update-contact Edge Function

// Setup type definitions for built-in Supabase Runtime APIs
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
import { createClient } from 'jsr:@supabase/supabase-js@2';

// Define environment variables (you'll need to set these in Supabase)
const MAILTRAP_API_TOKEN = Deno.env.get("MAILTRAP_TOKEN") || "";
const MAILTRAP_ACCOUNT_ID = Deno.env.get("MAILTRAP_ACCOUNT_ID") || "";

const handler = async (req) => {
  const requestData = await req.json();
  let userEmail;
  try {
    const supabase = createClient(Deno.env.get('SUPABASE_URL'), Deno.env.get('SUPABASE_SERVICE_ROLE_KEY'), {
      auth: {
        autoRefreshToken: false,
        persistSession: false
      }
    });
    // Access auth admin api
    const { data, error } = await supabase.auth.admin.getUserById(requestData.record.id);
    if (error) {
      throw error;
    }
    userEmail = data.user.email;
  } catch (err) {
    // error handling
  }
  const options = {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": `Bearer ${MAILTRAP_API_TOKEN}`
    },
    body: JSON.stringify({
      contact: {
        email: userEmail,
        fields: {
          name: requestData.record.full_name
        },
        unsubscribed: false
      }
    })
  };
  return await fetch(`https://mailtrap.io/api/accounts/${MAILTRAP_ACCOUNT_ID}/contacts/${userEmail}`, options);
};

Deno.serve(handler);

And, of course, click on Deploy updates/Deploy function.

Supabase Edge Function editor with Deploy function button highlighted

Step 2. Set up a webhook for updating contacts

1

Create Webhook

If you don't already have a webhook for updating contacts, open your Supabase Dashboard, go to Database Webhooks, and click on Create a new hook.

Navigate to Integrations → Webhooks and configure the following:

• Name: update_contact

• Table: profiles

• Events: ✅ Update

Supabase webhook configuration form showing name set to update_contact, table set to profiles, and Update event checkbox

2

Configure Webhook Settings

Configure the following:

• Type of webhook: HTTP Request

• Method: POST

• Edge Function: Select the previously created update-contact function

• Add HTTP Headers:

  • Content-Type: application/json

  • Authorization: Bearer [your-token]

Supabase webhook configuration showing HTTP Request type, POST method, Edge Function selection, and HTTP headers

Integration demo and testing

Finally, let's test our webhook configuration. For this example, I'll use a demo app created in FlutterFlow.

1

Create Test Account

First, create an account as if you were a new user.

2

Verify in Supabase

A new user should appear in the Users page within your Supabase Project.

Supabase Authentication Users page showing newly created user in table

3

Verify in Mailtrap

At the same time, a new user also appears in your Mailtrap Contacts page.

Mailtrap Contacts page showing newly synced contact with email address

4

Check Initial Data

Since the demo app only requires email and password upon registration, that's all the info the webhook sends to the Mailtrap Contacts page initially.

Mailtrap contact detail showing only email field populated

5

Update Profile

If you go to your demo app and update the profile name...

6

Verify Update in Supabase

It should get updated in your Supabase Project...

Supabase profiles table showing updated full_name field

7

Verify Update in Mailtrap

And the Mailtrap Contacts Page, so everything works as intended!

Mailtrap Contacts page showing updated contact with name field now populated

Now, every time a new user logs in and updates their name, their information will be logged in your Mailtrap Contacts page. There, you can group them into lists, segment them accordingly, and use Fields to personalize your email campaigns further.