Supabase

Set up an SMTP connection to send all of your Supabase emails with Loops.

There are two big benefits to using Loops for sending your Supabase emails:

1. You can use Loops’ design editor to create (and then easily edit) beautiful transactional emails instead of having to code them with HTML.
2. You get full visibility on which emails are being sent, when, and to whom in your Loops account.

​

Set up Loops SMTP in Supabase

Go to your Authentication settings in Supabase to tell Supabase to send emails using Loops’ SMTP service.

Toggle the “Enable Custom SMTP” option on.

In the Sender details section, you will need to enter some values into the “Sender email” and “Sender name” values. However, these values will always be overwritten by the values set in your Loops templates from the next step.

Next, scroll down to the SMTP Provder Settings section and enter the following data:

Note that for the interval and rate limit settings, you will be bound by Loops’ API rate limit of 10 requests per second.

​

Create Transactional emails in Loops

Next, create new transactional emails for each of the emails listed in Supabase (Authentication > Email Templates).

Read our guide for crating transactional emails

In Loops, go to the Transactional page and click “New”. Alternatively you can select one of our many ready-made templates from the Templates page.

You can then use Loops’ WYSIWYG editor to create styled templates or make them simple as you like.

For each Loops template you create, you need to add data variables, which allow data from Supabase to be inserted into each email.

Here is the list of available data variables you can add to each Supabase email in Loops:

Once you’re done creating the email and adding the data variables, click “Next”. On the next page, click the “Show payload” button to view the API payload for your template. You will need this for the next step.

Make sure to also publish your email! It won’t send unless it’s published.

​

Configure email templates in Supabase

The final step is to make sure your emails in Supabase are configured to send the correct data to Loops.

Loops SMTP integrations work a bit different from most. Instead of sending a text or HTML email body, you set them up to send API-like data.

In Supabase, go to Authentication > Email Templates, then edit each template to contain the payload as shown in the previous step (you can click the clipboard icon in Loops to copy the full payload).

Once pasted into the Message body, you need to add the Supabase message variables into the payload.

Here is an example Confirm signup email template. This payload was copied from the template’s Publish page in Loops, then the {{ .Email }} and {{ .ConfirmationURL }} Supabase variables were added.

{
  "transactionalId": "clvmzp39u035tl50pw7wrl0ri",
  "email": "{{ .Email }}",
  "dataVariables": {
    "confirmationUrl": "{{ .ConfirmationURL }}"
  }
}

Here’s how it looks in the Supabase editor:

With the integration set up, all authentication emails will be sent via Loops, giving you more visibility on your email sends and the great addition of being able to build beautiful and easy-to-update emails in the Loops editor.

​

Important notes

• The subject in Supabase templates is always overwritten by the subject added to the corresponding template in Loops.
• The sender name and sender email configured in your Supabase SMTP settings are always overwritten by the sender details added to your templates in Loops.
• You need to add a template in Loops and set up the email in Supabase for every Supabase template. Any Supabase email not set up with the correct payload will fail to send.