Get started – Mailtrap Contacts x Supabase

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

  • Seamlessly update your email list 
  • Create segments based on user data
  • Launch personalized email campaigns
  • Measure campaign effectiveness

And in this article, I’ll show you how to:

Note: You can read more about Mailtrap 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. To obtain one, follow these steps:

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

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

  • Copy the token and save it in a secure place.

Creating contacts

Before we start, let me briefly explain the workflow first:

  • A user registers in your app.
  • Their email appears not only in Supabase but also in the Mailtrap 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:

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

  • Inside the function editor, you should see the following serverless function that will send user data to Mailtrap Contacts:

  • However, let’s replace it with the following code snippet:
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:, which is, in this case, 4292 with the ID of the list where you want to add the contact.
  • Then, click on Deploy Function.

Finally, Supabase will build and deploy the Edge Function. 

Step 2. Set up webhooks for contact creation

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

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

  1. Configure the following:
    1. Name: create_contact
    2. Table: users
    3. Events: ✅Insert

  • Configure the following:
    1. Choose Supabase Edge Functions under ‘Webhook configuration’. 
    2. Go for POST under ‘Method.’
    3. Select the previously created function create-contact.
    4. Set the desired timeout (e.g., 5000).

  • Set HTTP headers for Auth:
    1. Content-type – application/json
    2. Authorization – Bearer 
  • Click Create webhook to activate it.

Updating contacts

Here, the flow is quite similar as for 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:

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

  • Inside the function editor, you should see the following serverless function that will send user data to Mailtrap Contacts:

  • However, let’s replace it with the following code snippet, which will:
    • Receive user data from the webhook.
    • Call the Mailtrap API to update existing contact details.
// 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.

Step 2. Set up a webhook for updating contacts

  • If you already don’t 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:
    1. Name: update_contact
    2. Table: profiles
    3. Events: Tick ✅ Update

  • Configure the following:
    1. Type of webhook: HTTP Request
    2. Method: POST
    3. Edge Function: Select the previously created update-contact function
    4. Add HTTP Headers:
      • Content-Type: application/json
      • Authorization: Bearer

Integration demo and testing

Finally, let’s test our webhook configuration. For this, I’ll use the demo app I created in FlatterFlow:

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

  • A new user should appear in the Users page within my Mailtrap Supabase Project.

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

  • However, since my demo app only requires email and password upon registration, it’s all the info the webhook sends to my Mailtrap Contacts page.

  • So, if I go to my FlatterFlow demo app and update the profile name, like so…

  • It should also get updated in my Mailtrap Supabase Project…


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

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us