Setup emails

SupaSaaS comes with support for the following populer email providers:

• Loops
• Mailgun

Support for more email providers is planned and coming soon.

Capturing email addresses is crucial to building a successful SaaS product. It allows you to keep in touch with your users, send them updates, and keep them engaged with your product.

This boilerplate comes pre-configured with the ability to do the following:

• Collect email addresses from users and add them to a list
• Send transactional emails
• Send marketing emails

Support for more email providers is coming soon.

Loops setup

Loops is a great email provider that allows you to send transactional and marketing emails from your app.

It's free to get started and their free plan is very generous, giving you up to 1,000 contacts and 2,000 emails per month before you need to upgrade.

Sign up for an account with Loops

In this example we'll be using Loops as our email provider. You can sign up for a free account here. However, you can use any email provider you prefer.

Get your API key

Once you've created and set up your Loops account, you'll need to grab your API key. This is what will allow you to send emails from your server.

You can view the API key section here to generate your API key.

Add to .env

Once you've got the API key, we need to add it to your environment variables.

Head over to your .env file and paste it into the LOOPS_API_KEY variable. It should look like this:

.env
LOOPS_API_KEY="your api key goes here"

Add custom domain

To make sure that your emails don't end up in spam, we need to add a custom domain and configure the necessary DNS records (SPF, DKIM and DMARC).

If you don't do this, there's a high chance that your emails will end up in the spam folder.

Head over to the settings page and click on Domain.

Update the Sending domain with your custom domain. It is recommended to use a subdomain such as mail.yourdomain.com.

Configure DNS records

Loops will then give you detailed instructions on what DNS records you need to configure with your domain provider.

Create a transactional email template

To enable sending transactional emails head over to the Loops transactional page and create a new template.

Give the template a name and fill in the subject and body of the email. Inside the body of the template, you can insert variables that can be passed from the backend to Loops.

In this example, we'll be passing a url variable which holds the url to the magic link authentication.

To add a new variable, click the Insert data variable button and name it url.

Here is a simple example of what the body could look like:

Hey, we just need to verify your e-mail address before we continue.

Please click on the link below!

{{ url }}

Add user as a Loops contact

When a user signs up, you can add them as a contact in Loops. This will allow you to send them marketing emails.

To do this, you can use the addContact function found in @/lib/email/loops.

@/config/auth.ts
import { createLoopsContact } from "@/lib/email/loops";

  events: {
    async signIn(event) {
      if (event.isNewUser && event.user.email) {
        await createLoopsContact({
          email: event.user.email,
          firstName: event.user.name || "",
          lastName: "",
          userGroup: "new-user",
        });
      }
    },
  },

Send an email programmatically

Easily send an email from any part of your app using the Loops client found in @/lib/email/loops.

Once you have made a transactional template, get the transactional id and you can use it by importing the following function wherever your logic requires it.

example.tsx
import { sendTransactionalEmailWithLoops } from "@/lib/email/loops";

await sendTransactionalEmailWithLoops({
    process.env.NEXT_PUBLIC_LOOPS_TRANSACTIONAL_ID || "",    // <-- transactional id
    "john@doe.com",                                          // <-- to email
    {
        loginUrl: "https://myapp.com/login/"                 // <-- add dynamic variables
    }
})

Mailgun

Sign up for an account with Mailgun

Sign up for the $35 per month plan with Mailgun and then immediately cancel it, to downgrade to their free "pay-as-you-go" plan.

If you are sending less than 1,000 emails per month, it'll cost you less than $5.

Get your API key

Once you've created and set up your Mailgun account, you'll need to create your API key. This is what will allow you to send emails from your server.

You can view the API key section here to generate your API key.

Add to .env

Once you've got the API key, we need to add it to your environment variables.

Head over to your .env file and paste it into the MAILGUN_API_KEY variable. It should look like this:

.env
MAILGUN_API_KEY="your api key goes here"

Add custom domain

To make sure that your emails don't end up in spam, we need to add a custom domain and configure the necessary DNS records (SPF, DKIM and DMARC).

If you don't do this, there's a high chance that your emails will end up in the spam folder.

Head over to the sending domains page and click on Add New Domain.

Update the Domain Name with your custom domain. It is recommended to use a subdomain such as mail.yourdomain.com.

Then you need to update the MAILGUN_SENDING_DOMAIN variable in your .env file.

.env
MAILGUN_SENDING_DOMAIN="mail.yourdomain.com"

Configure DNS records

Mailgun will then give you detailed instructions on what DNS records you need to configure with your domain provider.

Ensure these are properly configured and verified before sending emails.

Add user to mailing list

When a user signs up, you can add them to a mailing list in Mailgun. This will allow you to send them marketing emails.

First, create a mailing list in Mailgun and grab the list address.

For example, the a list address might be waitlist@email.yourdomain.com depending on how you set up your sending domain.

Now you can very easily add users to the mailing list by using the addEmailToMailgunList function found in @/lib/email/mailgun.

@/config/auth.ts
import { addEmailToMailgunList } from "@/lib/email/mailgun";
// ...rest of function
events: {
  async signIn(event) {
    if (event.isNewUser && event.user.email) {
      await addEmailToMailgunList(event.user.email, process.env.MAILGUN_LIST_ADDRESS || "");
    }
  },
},

Send an email programmatically

Easily send an email from any part of your app using the sendTransactionalEmailWithMailgun function found in @/lib/email/mailgun.

example.tsx
import { sendTransactionalEmailWithMailgun } from "@/lib/email/mailgun";

await sendTransactionalEmailWithMailgun(
  email,
  "Welcome to our mailing list!",
  "You are now subscribed to our mailing list.",
  "<h1>This is html content for the email</h1>" // Optionally send HTML
);