Integrate SendGrid with FlutterFlow by creating a Cloud Function that calls the SendGrid API. The Cloud Function receives the recipient, template ID, and dynamic data from FlutterFlow, then posts to SendGrid's POST /v3/mail/send endpoint using your SendGrid API key stored in environment variables. Never call SendGrid directly from the FlutterFlow client — CORS blocks it and the API key would be exposed.
Send transactional and marketing emails from FlutterFlow via SendGrid and Cloud Functions
SendGrid is the most widely used transactional email API, handling welcome emails, password resets, order confirmations, and marketing newsletters. FlutterFlow cannot call SendGrid directly — CORS blocks client-side API calls and the API key would be embedded in the app binary. The correct architecture: FlutterFlow triggers an action, a Cloud Function receives the request and sends the email via SendGrid's API. Dynamic templates in SendGrid allow you to design pixel-perfect emails with Handlebars variables that FlutterFlow populates with real data (user name, order total, reset link).
Prerequisites
- A SendGrid account with a verified sender identity (free tier: 100 emails/day)
- A Firebase project with Cloud Functions enabled (Blaze billing plan for external API calls)
- Your SendGrid API key from SendGrid Dashboard → Settings → API Keys → Create API Key (select Mail Send permission)
- FlutterFlow project connected to Firebase with at least one user authentication flow
Step-by-step guide
Store the SendGrid API key in Cloud Function environment config
Store the SendGrid API key in Cloud Function environment config
In your Firebase project's Cloud Functions directory, set the SendGrid API key as an environment variable so it never appears in code. In the Google Cloud Console for your project, go to Cloud Functions → your function → Edit → Environment variables and add SENDGRID_API_KEY with your key. Alternatively, use Firebase Functions config: firebase functions:config:set sendgrid.key='SG.yourkey'. For local development, add SENDGRID_API_KEY to your functions/.env.local file. In the Cloud Function code, read it with: const sgMail = require('@sendgrid/mail'); sgMail.setApiKey(process.env.SENDGRID_API_KEY);. Never paste the API key as a string in the function code itself.
Expected result: The Cloud Function can access the SendGrid API key from environment config without the key appearing in source code.
Create the sendEmail Cloud Function
Create the sendEmail Cloud Function
In your Firebase functions/index.js, create an HTTPS Cloud Function named sendEmail. It accepts: to (email address), templateId (SendGrid template ID), and dynamicData (object with template variables). Validate inputs, construct the SendGrid message object: const msg = { to: req.body.to, from: { email: 'noreply@yourapp.com', name: 'YourApp' }, templateId: req.body.templateId, dynamicTemplateData: req.body.dynamicData }. Call await sgMail.send(msg). Return 200 on success. Add a try/catch and return 500 with the error message on failure. Enable CORS in the Cloud Function for FlutterFlow calls: add the cors middleware or set the appropriate headers. In your FlutterFlow API Manager, create an API Group pointing to your Cloud Functions base URL and add a sendEmail API Call (POST method, JSON body with to, templateId, dynamicData fields).
Expected result: The sendEmail Cloud Function deploys and sends a test email when called with a valid recipient and template ID.
Design a dynamic email template in SendGrid
Design a dynamic email template in SendGrid
In the SendGrid Dashboard, go to Email API → Dynamic Templates → Create Template. Name it (e.g., WelcomeEmail). Click Add Version → Design Editor. Build your email with a header image, greeting using {{firstName}}, body text, and a CTA button linking to {{ctaUrl}}. Add any other Handlebars variables your app will provide: {{orderTotal}}, {{productName}}, {{resetLink}}. Click Preview to test with sample data: enter JSON like {"firstName": "Alice", "ctaUrl": "https://yourapp.com/welcome"} in the preview mode. Copy the Template ID from the Dynamic Templates list (format: d-xxxxxxxx). Use this ID as the templateId parameter when calling the sendEmail Cloud Function from FlutterFlow. Create separate templates for: welcome email, order confirmation, password reset, and marketing newsletter.
Expected result: The email template renders correctly in preview mode with sample data substituted into all Handlebars variables.
Trigger emails from FlutterFlow Action Flows
Trigger emails from FlutterFlow Action Flows
Now wire the Cloud Function call to FlutterFlow user actions. For welcome emails: go to the user registration Action Flow (the action that fires after successful sign-up). After the Create Account action, add a Backend Call → API Call → sendEmail. Set the body fields: to = Authenticated User email, templateId = 'd-xxxxxxxx' (your welcome template ID), dynamicData = JSON including firstName (from the name field in your registration form). For order confirmation: in the checkout success Action Flow, call sendEmail with the order template ID and dynamicData including orderTotal, orderItems, shippingAddress. For password reset: trigger the sendEmail call on the Forgot Password form submission, passing a resetLink generated from Firebase Auth's password reset URL.
Expected result: New users receive a welcome email, and completed orders trigger order confirmation emails — all with personalized data from the FlutterFlow app.
Manage subscriber lists and track email engagement
Manage subscriber lists and track email engagement
For marketing newsletters: add a Cloud Function addToEmailList that calls the SendGrid Contacts API: POST /v3/marketing/contacts with { contacts: [{ email, first_name, last_name, custom_fields: { app_plan: 'free' } }], list_ids: ['your-list-id'] }. Call this from FlutterFlow on user signup or when users toggle an email preference Switch. For unsubscribes: call DELETE /v3/marketing/contacts with the contact's email when users opt out. Track engagement: in SendGrid Dashboard → Settings → Mail Settings → Event Webhook, add your Cloud Function URL as the webhook endpoint and select opens, clicks, and unsubscribes. The Cloud Function receives events and updates Firestore emailEvents collection with timestamp and event type. Add an email analytics page to your FlutterFlow admin dashboard backed by this Firestore data.
Expected result: Users can manage their email preferences in-app. The admin can see open rates and unsubscribes in a Firestore-backed analytics dashboard.
Complete working example
1// Cloud Function: sendEmail2// Install: npm install @sendgrid/mail3const functions = require('firebase-functions');4const sgMail = require('@sendgrid/mail');56sgMail.setApiKey(process.env.SENDGRID_API_KEY);78exports.sendEmail = functions.https.onRequest(async (req, res) => {9 // Allow CORS for FlutterFlow API Manager calls10 res.set('Access-Control-Allow-Origin', '*');11 if (req.method === 'OPTIONS') {12 res.set('Access-Control-Allow-Methods', 'POST');13 res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');14 return res.status(204).send('');15 }1617 if (req.method !== 'POST') {18 return res.status(405).json({ error: 'POST only' });19 }2021 const { to, templateId, dynamicData } = req.body;2223 if (!to || !templateId) {24 return res.status(400).json({ error: 'to and templateId required' });25 }2627 const msg = {28 to,29 from: {30 email: 'noreply@yourapp.com',31 name: 'YourApp Team',32 },33 templateId,34 dynamicTemplateData: dynamicData || {},35 };3637 try {38 await sgMail.send(msg);39 return res.status(200).json({ success: true });40 } catch (error) {41 console.error('SendGrid error:', JSON.stringify(error.response?.body));42 return res.status(500).json({43 error: 'Email send failed',44 details: error.response?.body?.errors?.[0]?.message,45 });46 }47});Common mistakes
Why it's a problem: Calling the SendGrid API directly from the FlutterFlow client app
How to avoid: Route all SendGrid API calls through a Cloud Function. The Cloud Function runs server-side with the API key stored in environment variables — never visible to the client.
Why it's a problem: Using a single From address that is not a verified SendGrid sender
How to avoid: In SendGrid Dashboard → Settings → Sender Authentication: either verify a single sender email (quick setup for small projects) or authenticate your entire domain (recommended for production — better deliverability and no SendGrid branding in headers). Use the verified address as your From address in all API calls.
Why it's a problem: Sending marketing emails without an unsubscribe mechanism
How to avoid: Use SendGrid Unsubscribe Groups for all marketing emails. In the email template, include the {{unsubscribe}} or {{unsubscribe_preferences}} Handlebars tag in the footer. Configure the Unsubscribe Group in SendGrid Dashboard → Suppressions → Unsubscribe Groups. This handles the unsubscribe link, confirmation page, and list management automatically.
Best practices
- Test all email templates with multiple email clients (Gmail, Outlook, Apple Mail, mobile Gmail) before launching — email rendering varies significantly between clients
- Use SendGrid's Suppression Lists to never re-email addresses that have previously bounced or marked your email as spam — sending to these addresses damages your sender reputation
- Set up SPF, DKIM, and DMARC records for your sending domain in SendGrid's Domain Authentication — properly authenticated domains get significantly better inbox placement rates
- Add email open and click tracking from day one so you have engagement data to inform content decisions — it is much harder to add retroactively
- Implement rate limiting in your Cloud Function to prevent abuse — if a malicious user can trigger unlimited email sends, they can exhaust your SendGrid quota quickly
- Store a copy of every sent email (recipient, template, timestamp, messageId) in Firestore for debugging delivery issues and auditing
- Use SendGrid's sandbox mode during development: set mail_settings.sandbox_mode.enable = true to validate API calls without actually sending emails
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a FlutterFlow app and want to send transactional emails using SendGrid. Write a Node.js Firebase Cloud Function named sendEmail that: (1) accepts a POST request with fields to, templateId, and dynamicData in the JSON body, (2) sends the email using @sendgrid/mail with the API key from environment variables, (3) handles CORS for FlutterFlow API Manager calls, (4) returns proper error messages including the SendGrid error details. Include input validation.
Add a welcome email to my FlutterFlow registration flow. After the Create Account action in the signup Action Flow, add a Backend Call to my sendEmail Cloud Function API endpoint. Set the body: to = Authenticated User email address, templateId = 'd-xxxxxxxxx' (my SendGrid welcome template), dynamicData = JSON object with firstName from the first name text field and appUrl as a hardcoded string.
Frequently asked questions
Can I use Mailchimp instead of SendGrid with FlutterFlow?
Yes — the pattern is identical. Create a Cloud Function that calls the Mailchimp API (POST /3.0/messages/send for Mandrill/transactional) or the Mailchimp Marketing API for campaign management. Store the Mailchimp API key in Cloud Function environment variables. The FlutterFlow API Group points to your Cloud Function, not directly to Mailchimp. The main difference is that Mailchimp uses a different template system (drag-and-drop campaign editor) and has a separate transactional product called Mandrill for triggered emails.
How do I send attachments via SendGrid from FlutterFlow?
Attach files by uploading them to Firebase Storage first, then including the download URL in the Cloud Function. In the SendGrid API call, add an attachments array: [{ content: base64EncodedFileContent, filename: 'invoice.pdf', type: 'application/pdf', disposition: 'attachment' }]. The Cloud Function downloads the file from the Storage URL, converts it to Base64, and includes it in the email. Avoid attaching files larger than 1MB — they trigger spam filters and slow delivery.
How do I prevent my SendGrid emails from going to spam?
The most impactful steps are: (1) authenticate your sending domain in SendGrid with SPF, DKIM, and DMARC records; (2) warm up your IP gradually — start with low volume and increase slowly; (3) never send to purchased lists or unengaged contacts; (4) keep your bounce rate below 2% and spam complaint rate below 0.1%; (5) use a consistent From address and recognizable sender name; (6) include a clear unsubscribe link in marketing emails. The SendGrid Dashboard → Sender Authentication walkthrough covers the technical setup.
What is the difference between transactional and marketing emails in SendGrid?
Transactional emails are triggered by user actions — welcome, order confirmation, password reset, receipt. They go to one recipient, contain personalized data, and are expected by the user. Marketing emails are bulk sends to subscriber lists — newsletters, promotions, product updates. SendGrid handles both but they follow different rules: transactional emails can be sent to anyone who has interacted with your service; marketing emails require prior opt-in consent (GDPR) and must include an unsubscribe mechanism (CAN-SPAM).
Can I send emails in a language other than English?
Yes — SendGrid Dynamic Templates fully support Unicode, so any language (including right-to-left Arabic and Hebrew) works in the template body. Pass the user's preferred language from your FlutterFlow App State to the Cloud Function as a dynamicData field. In the Cloud Function, select the appropriate template based on language, or use a single template with conditionals: {{#eq language 'es'}}Bienvenido{{else}}Welcome{{/eq}}. The Handlebars conditional syntax supports this in SendGrid Dynamic Templates.
What if I need to send emails at scale with complex automation?
For complex email automation — multi-step drip sequences, behavior-triggered campaigns, A/B testing at scale — the Cloud Function approach becomes complex to manage. At that point, consider using SendGrid Marketing Campaigns automation directly or a dedicated email automation platform (Brevo, Customer.io, Klaviyo). RapidDev can architect the right email infrastructure for your FlutterFlow app based on your sending volume and automation requirements.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation