Sending emails with Supabase and Plunk

Supabase, the open-source Google Firebase alternative is a fantastic platform to power your applications. With built-in features like authentication, database and storage, it is a great solution for building a modern app.

Supabase does however not provide a way to send emails to your users. This is where Plunk comes in. Plunk is the developer friendly email platform that makes it easy to send emails from your applications.

In this tutorial, you will set up an email automation that sends a welcome email to your users when they create an account.

How does Plunk work

Plunk actions are email automations triggered by events. These events can be triggered through the Plunk API or by using one of the many client libraries. In this tutorial, you will use the Node.js client to trigger an event.

You can already create a new project on the Plunk dashboard to get started.

1. Track an event

When you are building with Supabase, you integrate their API or one of the many client libraries into your own code. This is by far the easiest way to link Supabase and Plunk together. Let's say we want to trigger an event every time we have a new signup in our Next.js application that uses Supabase.

All we need to do is add our Plunk client next to our Supabase client and we are ready to start sending emails!

Install it just like you did with your Supabase client and you are ready to rumble!

yarn add @plunk/node

Head over to your Plunk dashboard's API settings and copy your public key. You will need it to send events from your application to Plunk. Now you can create a Plunk client, just like you did with Supabase!

import Plunk from "@plunk/node";

const plunk_sk = process.env.NEXT_PUBLIC_PLUNK_PK;

if (!plunk_sk) {
  throw new Error();
}

export const plunk = new Plunk(plunk_sk);

After that, you can start using it in your code like this.

const handleSignup = async (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();

  // Create the account in Supabase
  const { error } = await supabase.auth.signUp({
    email: "hello@useplunk.com", 
    password: password
  });

  if (error) {
    return alert(error.message);
  }

  // Send the event to Plunk
  await plunk.events.track({
    email: "hello@useplunk.com",
    event: "account-created",
  });

  alert("Account created!");
};

Now that our account-created events are being sent to Plunk, we can use them to create automated workflows that trigger every time someone creates an account. Allowing us to send them a friendly welcome email!

You can also find the complete example setup in the Plunk examples repository

2. Creating our template

Let's head over to our Plunk dashboard and create a new email template. Plunk templates are easy to write and automatically converted into the complex HTML that email clients understand.

You can try out the editor if you want to see how it works.

Save your template once you have that perfect design and let's link it all together with an action!

3. Creating an action

Actions are your automated workflows. They link together your events and templates and allow you to send emails automatically.

You can create as many actions as you want . Find the create button on the actions tab. Give your action a name, select your account-created event and the template you just saved.

We suggest you also toggle the Run once toggle, just to make sure users only receive a single email when they sign up!

4. Personalising it

A great email should always be personalised. Luckily, you can easily do this with Plunk! All we need to do is associate data to our users that we can then use in our templates. Let's say that you also collect their name during the signup process and you want to store that information in Plunk.

Changing our event publish function

await plunk.events.track({
    email: "hello@useplunk.com",
    event: "account-created",
    data: {
      name: "Plunk",
    }
});

Updating our template

By also adding the data parameter to our Plunk event, we can store extra data about our users and use it in our emails. Let's update the template you created in the previous steps.

Variables are automatically inserted in emails if they exist are linked to the user. All you need to do is let Plunk know where it should place them. For this you make use of the {{variable}} syntax. Where you replace the word variable with the name of the variable you want to insert. In our case that would look something like this {{name}}

Variables are supported in both the subject and the body of the email, making it really easy to personalize the emails you are sending out! Because let's be honest, who doesn't want to see their name in an email?

Some common questions

What else can I use Plunk for?

Plunk is also a great tool for sending transactional emails. You can use it to send completely customisable emails with a single API call. You can find more information about this in our docs.

Do I really need email marketing?

We know, marketing is a pain. Don't underestimate it's power though! Especially email marketing is still very effective in 2024. Several statistics show us that content marketing through email, like newsletters, is still the most effective way to reach your users.