Email

Information

This boilerplate comes with a set of custom transactional emails that are used for various purposes including: welcome emails, free trial expired, free trial reminder, subscription cancelled and downgraded to free plan etc.

These emails are coded in MJML. Thus, these emails can be customised using code. Feel free to use an [Email Editor] to preview and further customise the emails.

FYI: You can also use the Loops UI to create emails.

Prerequisites

Before uploading and customising the emails, please make sure to replace the logo URL in the emails. You can use a tool like [Imgur] to host the image and then use the URL in the emails.

You can just use find and replace to replace the following logo URL using an IDE such as VSCode:

https://www.dropbox.com/scl/fi/jl1x1515g2nrv1xkm578u/o.jpg?rlkey=7cr2k0lgvyk9l005s9h5ibjuw&st=j84o176l&raw=1

You can also refer to the official documentation of [Loops] to learn more about how to create and customise emails with Supabase.

Setting up Loops

Creating a Loops account

You can sign up for a free account at [Loops].

Set up Loops SMTP in Supabase

Please refer to the [Loops SMTP] documentation to learn more about how to set up Loops SMTP in Supabase.

Setting up Supabase Emails

Supabase has a set of built-in emails that are used for various purposes such as sign up, email confirmation, etc.

However, in order to track the metrics of each email and customise them, we’ll be connecting to Loops.

Download all the email templates [here] required for the Supabase Emails, e.g., Confirm Email Change, Password Reset, etc..
Follow the steps outlined in the video below to create a new email in Loops and then repeat the process for the other Supabase emails from the .ZIP file:

TL / DR: You just have to create the email in Loops, add the PAYLOAD to the email in Supabase and add the appropiate path for the URL. For example, for the Confirm Signup email, we need to use the following:

{
  "transactionalId": "[YOUR_TRANSACTIONAL_ID]",
  "email": "{{ .Email }}", // user who should receive the email
  "dataVariables": {
    "upgradeUrl": "{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup" // path to the confirm.ts file to authenticate the user
  }
}

🚫

Do NOT remove the quotes around variables such as the {{ .Email }}, etc. Otherwise, the emails will fail to send.

In order for the authentication to work we need to use a token_hash inside the URL. Here are the paths for each email:

For the Confirm Signup email, we need to use the following path:

{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup

For the Magic Link email, we need to use the following path:

{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink

For the Change Email Address email, we need to use the following path:

{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email_change

For the Reset Password email, we need to use the following path:

{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery

Setting Up Custom Transactional Emails (Optional)

FYI: Including these custom transactional emails is optional but provides a more pleasant user experience.

In this step, we’ll have to create various transactional emails based on the email.config.ts file.

Download all the email templates [here] required for the Custom Transactional Emails, e.g., Free Trial Expired, Free Trial Reminder, etc..
Follow the steps outlined in the video below to create a new email in Loops and then repeat the process for the other emails from the .ZIP file:

🚫

In order for the emails to work, please do the following: replace the transactionalId in email.config.ts with the email we just created in Loops and publish the email in Loops.

Setting Up Emails For Cron Jobs

The email setup for cron jobs is a bit different because inside Supabase Edge Functions, we don’t have access to our existing email templates as it’s an isolated environment.

In our case, we’ll just be setting up the downgraded-to-free-plan email - so if the users subscription or free trial has expired and he’s downgraded to the free plan.

You can download the downgraded-to-free-plan email [here]

TL / DR: You just have to create the email in Loops and add the transactionalId inside the _sendLoopsEmail function in our manage-free-trials and manage-subscriptions Supabase Edge Functions.

User authentication Stripe