Supabase

Pingram integrates with Supabase in two ways:

1. Internal Auth Emails - Route Supabase’s built-in authentication emails (password resets, magic links, confirmations) through Pingram’s SMTP to bypass rate limits and gain email analytics.
2. Custom Notifications from Edge Functions - Send custom notifications (emails, SMS, in-app) from your Supabase backend code.

Internal Auth Emails (SMTP)

Hit the “Email rate limit exceeded” error? Route Supabase auth emails through Pingram to remove rate limits and get delivery analytics.

1. Go to Settings > SMTP in your Pingram dashboard
2. Click Integrate with Supabase and authorize
3. Select your project and enter a sender name/email

Your Supabase SMTP settings are automatically configured. Optionally, verify your domain in Settings > Domains to send from your own domain.

Custom Notifications from Edge Functions

Supabase’s internal emails only cover authentication flows. For custom notifications (user engagement, system alerts, collaboration), you need to build your own notification system.

This section shows you how to send custom notifications from Supabase Edge Functions. You can find the complete code in our GitHub repository.

Why Use Edge Functions?

Sending notifications requires API credentials that must stay secret. Frontend code is visible to everyone and can be modified by malicious users. Supabase Edge Functions keep your credentials secure on the server.

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: Pingram 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@pingram.io.