Lovable: Send SMS and Email Notifications from Lovable.dev

YouTube Walkthrough

In this tutorial, we’ll learn how to implement secure SMS and email notifications in your Lovable.dev application. We’ll use Pingram for sending notifications and Supabase edge functions to ensure secure implementation.

Why Use 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: Set Up Pingram

First, create a Pingram account. The service offers a generous free tier:

• 100 SMS messages per month
• 3,000 emails per month

No credit card required, and everything works out of the box.

Step 2: Modify and use this prompt

• Replace [When X happens] with the event that triggers the notification
• Replace [to recipient] with who should receive the notification, possibly explaining how Lovable should retreive their email and phone number
• If you have a back-end different from Supabase, replace the [a Supabase edge function]
• Replace [YOUR_API_KEY] with your Pingram API key (pingram_sk_...)

Sample Prompt:

[When X happens], send an SMS and Email notification [to recipient] using the following code from [a Supabase edge function]:

import { Pingram } from 'npm:pingram';

const pingram = new Pingram({
  apiKey: Deno.env.get('PINGRAM_API_KEY')
});

await pingram.email.send({
  type: 'alert',
  to: 'recipient@example.com',
  subject: 'New contact form submission received',
  html: '<p>New contact form submission received.</p>'
});

await pingram.sms.send({
  type: 'alert',
  to: '+15005550006',
  message: 'New contact form submission received.'
});

Security Best Practices

When implementing notifications, follow these security guidelines:

1. Control Message Recipients

   • Either limit who can receive messages (e.g., only to your team)
   • Or control what the message says (use static templates)

2. Never Trust User Input

   • Don’t include user-provided content in notification messages
   • Use static templates for message content

3. Implement Rate Limiting

   • Add limits to how many notifications a user can trigger
   • Consider implementing user authentication for sensitive operations

Monitoring and Analytics

Pingram provides built-in monitoring features:

• View delivery status
• Track open rates
• Monitor error rates
• Analyze notification performance

Conclusion

By following this guide, you’ve learned how to:

1. Set up secure notification handling using edge functions
2. Implement both SMS and email notifications
3. Follow security best practices
4. Monitor notification delivery

Remember to always handle sensitive operations like sending notifications through backend services, never directly from the frontend.

Feedback and support

If you have any questions or need help implementing notifications in your Lovable.dev application, feel free to reach out to us at support@pingram.io. We’re here to help you create the best notification experience for your users.