Motivation

Supabase only supports a handful of authentication-related emails internally, which are often inadequate for production applications. This guide will show you how to build a robust notification system on top of Supabase that can:

1. Send Custom Notifications, e.g. User engagement notifications, system alerts, collaboration notifications.

2. Send Across Multiple Channels, e.g. Emails, SMS, In-App.

You can find the complete code for this guide in our GitHub repository.

Let's Get Started

Instead of hacking together multiple services and libraries, we will be leveraging:

• NotificationAPI which handles the integration and delivery of notifications across different channels.

• Supabase Edge Functions to securely integrate with NotificationAPI.

1. Backend Implementation

First, install NotificationAPI's server SDK:

npm

Now, let's create a sample Supabase Edge Function to send a welcome notification:

supabase functions new send-welcome-notification

Here's the sample code for this function. The code receives an email and optionally a phone number of a recipient, then commands the NotificationAPI library to send the welcome notification to the recipient.

import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import notificationapi from "npm:notificationapi-node-server-sdk";

notificationapi.init(
  Deno.env.get("NOTIFICATIONAPI_CLIENT_ID"),
  Deno.env.get("NOTIFICATIONAPI_CLIENT_SECRET")
);

serve(async (req) => {
  const { firstName, userId, email, phoneNumber } = await req.json();

  await notificationapi.send({
    notificationId: "welcome",
    user: {
      id: email,
      email: email,
      number: phoneNumber,
    },
    mergeTags: {
      // these are the dynamic parameters that are used in the notificaiton content
      firstName,
    },
  });

  return new Response(JSON.stringify({ success: true }), {
    headers: { "Content-Type": "application/json" },
  });
});

2. NotificationAPI Configuration

1. Create a NotificationAPI account.

2. Create a notification called "welcome" and toggle on the channels you wish (Email, SMS, …)

3. Optional: Design the template using the visual editor.

3. Test and Deploy

1. Set up your NotificationAPI client ID and Secret in environment variables in supabase/functions/send-welcome-notification/.env:

NOTIFICATIONAPI_CLIENT_ID=your_client_id
NOTIFICATIONAPI_CLIENT_SECRET

You can get these values from NotificationAPI's dashboard. Keep these values secure. This client ID and secret can be used to read and send notifications.

2. Start Supabase and run the function locally:

supabase start

supabase functions serve send-welcome-notification --env-file

3. Test the function using cURL or the Supabase client:

curl -i --request POST 'http://localhost:54321/functions/v1/send-welcome-notification' \
--header 'Authorization: Bearer YOUR_ANON_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "firstName": "Rick",
    "email": "YOUR_EMAIL_ADDRESS"
}'

Or test using the Supabase client in your application:

await supabase.functions.invoke('send-notification', {
  body: {
    firstName: 'Rick',
    email: "YOUR_EMAIL_ADDRESS"
  }
})

If you are planning to send SMS, also pass the phoneNumber parameter to your edge function with a + sign followed by 10 digits, e.g. +15005005555.

4. Once you've verified the function works locally, you can deploy it:

4. Customize the Templates

In order to change how your notifications look like, you can edit them from the NotificationAPI dashboard without coding.

In our code example, we passed the firstName parameter to your notification. You can display this parameter in a template by placing a {{firstName}} anywhere in the template designs.

5. Optional: Front-end Steps for In-app Notifications

For in-app notifications (popups, notification center, badges, etc.), NotificationAPI provides a complete React SDK with pre-built components. Instead of building these features from scratch, you can use their ready-made solutions: NotificationAPI React SDK documentation.

Conclusion

In this guide, we've shown how to build a robust notification system by combining Supabase's serverless infrastructure with NotificationAPI's comprehensive notification features. Instead of spending weeks building custom notification functionality, you can implement a production-ready solution in minutes.

You can find the complete code for this guide in our GitHub repository.

Feel free to fork the repository, submit issues, or contribute improvements. For more examples and use cases, check out our documentation.