Supabase

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.

Why Use Supabase Edge Functions for Notifications?

When implementing notifications in your application, it’s crucial to handle sensitive operations like sending SMS or emails securely. Frontend code is visible to everyone and can be modified by malicious users. This is why we need to use backend services like Supabase edge functions to handle these operations.

Step 1: Backend Implementation

First, install NotificationAPI’s server SDK in your Supabase project:

npm install notificationapi-node-server-sdk

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. This function receives a recipient’s details and uses NotificationAPI to send a welcome notification.

// supabase/functions/send-welcome-notification/index.ts

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 { email, phoneNumber, mergeTags, userId } = await req.json();

  await notificationapi.send({
    type: 'welcome', // can be any notification you create
    to: {
      id: userId || email, // uniquely identify the user
      email: email,
      number: phoneNumber
    },
    parameters: mergeTags
  });

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

Step 2: NotificationAPI Configuration

1. Create a NotificationAPI account if you don’t have one.
2. Create a notification with the ID welcome (or any other ID you prefer, just make sure to update it in the edge function).
3. Enable the channels you want to use (Email, SMS, etc.).
4. Optionally, design your notification templates using the visual editor. You can use merge tags like {{firstName}} in your templates if you pass them in the mergeTags object.

Step 3: Test and Deploy

1. Set up your NotificationAPI CLIENT_ID and CLIENT_SECRET as environment variables for your Supabase function. Create a .env file in supabase/functions/send-welcome-notification/:

NOTIFICATIONAPI_CLIENT_ID=your_client_id
NOTIFICATIONAPI_CLIENT_SECRET=your_client_secret

You can get these from your NotificationAPI dashboard.

2. Start Supabase locally to test your function:

supabase start
supabase functions serve send-welcome-notification --env-file ./supabase/functions/send-welcome-notification/.env

3. Use cURL or a client of your choice to test the function:

curl -i --request POST 'http://localhost:54321/functions/v1/send-welcome-notification' \
--header 'Authorization: Bearer YOUR_SUPABASE_ANON_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "test@example.com",
    "mergeTags": {
        "firstName": "Alex"
    }
}'

4. Once you’ve confirmed it works, deploy your function to Supabase:

supabase functions deploy send-welcome-notification

Step 4: Customize Templates

You can customize the content and design of your notifications from the NotificationAPI dashboard without changing your code.

In the example above, we passed a firstName merge tag. You can use this in your templates by adding {{firstName}} where you want the name to appear.

Step 5: In-App Notifications

For in-app notifications (like pop-up messages or a notification inbox), NotificationAPI offers a complete React SDK with pre-built UI components. This saves you from building these features from scratch.

Check out the NotificationAPI React SDK documentation to get started.

Security Best Practices

When implementing notifications, follow these security guidelines:

1. Keep Secrets Secure: Never expose your NOTIFICATIONAPI_CLIENT_SECRET on the client-side. Using Supabase Edge Functions helps ensure it remains on the server.

2. Control Message Recipients and Content

   • Either limit who can receive messages (e.g., only to your team).
   • Or control what the message says by using predefined templates and only allowing specific merge tags.

3. Never Trust User Input

   • If you include user-provided content in notification messages, sanitize it to prevent injection attacks or spam. Bad actors could modify the message to send malicious content.

4. Implement Rate Limiting

   • Add limits to how many notifications a user can trigger to prevent abuse of the system. Supabase offers various ways to implement this at the edge function level.

Feedback and Support

If you have any questions or need help with your Supabase integration, feel free to reach out to us at support@notificationapi.com.