Configure your Supabase account to send authentication emails with Cocoonmail. Set up an SMTP connection to send all of your Supabase emails with Cocoonmail. There are two big benefits to using Cocoonmail for sending your Supabase emails:
1

More control over design

You can use Cocoonmail’ design editor to create (and then easily edit) beautiful transactional emails instead of having to code them with HTML.
2

Better visibility of sent emails

You get full visibility on which emails are being sent, when, and to whom in your Cocoonmail account. Supabase doesn’t offer this view.

​
Set up Cocoonmail SMTP in Supabase

Go to your Authentication settings in Supabase (Project Settings -> Authentication) to tell Supabase to send emails using Cocoonmail’ SMTP service. Scroll down and 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” fields. However, these values will always be overwritten by the values set in your Cocoonmail templates from the next step. In the SMTP Provider Settings section enter the following data:
FieldValue
Hostsmtp.cocoonmail.com
Port number587
Usernamecocoonmail
PasswordAn API key copied from your API settings in Cocoonmail
Local Development Note that for the interval and rate limit settings, you will be bound by Cocoonmail’ API rate limit of 10 requests per second. One final step is to check that the “Confirm email” toggle is turned on in the Email section in Authentication -> Providers.

​
Create Transactional emails in Cocoonmail

Next, create new transactional emails for each of the emails listed in Supabase (Authentication -> Email Templates). Read our guide for creating transactional emails In Cocoonmail, go to the Transactional page and click New. Alternatively, you can select one of our many ready-made templates from the Templates page. Local Development You can then use the Cocoonmail editor to create nicely-designed templates or make them as simple as you like. You can even save styles so you can easily apply consistent branding to all of your emails. Local Development For each Cocoonmail 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 Cocoonmail:
Supabase emailVariables available in Cocoonmail
Confirm signupconfirmationUrl
Invite userconfirmationUrl
Magic LinkconfirmationUrl
Change Email AddressconfirmationUrl, oldEmail, newEmail
Reset PasswordconfirmationUrl
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. Local Development 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 Cocoonmail.
Make sure you set up at least the Confirm signup and Magic Link templates in Supabase, otherwise emails will not be sent.
Cocoonmail SMTP integrations work a bit differently than 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 Cocoonmail 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 Cocoonmail, 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: Local Development With the integration set up, all authentication emails will be sent via Cocoonmail, 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 Cocoonmail editor.
To view all sends of your transactional emails, click through to the email from the Transactional page in Cocoonmail, where you’ll find the Metrics page containing a table showing all sends and some statistics.

​
Important notes

  • You need to add a template in Cocoonmail and set up the email in Supabase for at least the Confirm signup and Magic Link templates.
  • The subject in Supabase templates is always overwritten by the subject added to the corresponding template in Cocoonmail.
  • The sender name and sender email configured in your Supabase SMTP settings are always overwritten by the sender details added to your templates in Cocoonmail.
  • Any Supabase email not set up with the correct API-like payload will fail to send.