SendGrid API

Log in to your SendGrid account and complete two critical setup tasks before writing any code. First, verify your sender identity — SendGrid will refuse all email sends with a 403 Forbidden error if your sender is not verified. There are two options: single-sender verification (Settings → Sender Authentication → Single Sender Verification → Create New Sender) works for testing and small scale; domain authentication (Settings → Sender Authentication → Authenticate Your Domain) is required for production and better deliverability. Follow the DNS record instructions SendGrid provides — this typically takes 5-30 minutes to propagate. Once your sender is verified, create a scoped API key. Navigate to Settings → API Keys → Create API Key. Give it a descriptive name like 'FlutterFlow App - Mail Send'. Under permissions, choose 'Restricted Access' and enable only 'Mail Send' → Full Access. Leave all other permissions at No Access. This limits the blast radius if the key is ever compromised — it can only send email, not read contacts, manage templates, or access analytics. Click Create & View. Copy the API key immediately — SendGrid only shows it once. Store it temporarily in a secure notes app. You will paste it into your Cloud Function environment variables in the next step. Never paste it into FlutterFlow.

The proxy is the core of this integration. It receives a simple JSON payload from FlutterFlow — typically just the recipient email, a template ID, and dynamic data — and assembles the full nested SendGrid payload server-side before calling `https://api.sendgrid.com/v3/mail/send` with your API key in the Authorization header. For Firebase Cloud Functions: in your Firebase project, create a new HTTPS function. Store your SendGrid API key using Firebase environment config (`firebase functions:config:set sendgrid.key=SG.yourkey`) or as a Secret in the Firebase Console (Functions → Secrets). The function accepts a POST body with `to_email`, `to_name`, `template_id`, and `template_data`, builds the SendGrid payload, and calls the API. Return a simple `{ success: true }` for a 202 response or an error object for failures. For Supabase Edge Functions: navigate to Edge Functions in your Supabase Dashboard, click New Function, name it `send-email`, and write the Deno function. Store the API key in Supabase Secrets (Settings → Edge Functions → Secrets) as `SENDGRID_API_KEY`. Both approaches result in a deployed URL that FlutterFlow will call. CRITICAL: SendGrid returns HTTP 202 Accepted (not 200 OK) for a successful mail send. Your proxy should pass this status through, and you need to teach FlutterFlow to treat 202 as success. If your proxy normalizes to 200, make that explicit in your code comments.

1// Firebase Cloud Function: SendGrid email proxy
2// Deploy with: firebase deploy --only functions
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5
6exports.sendEmail = functions.https.onRequest(async (req, res) => {
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Methods', 'POST');
9  res.set('Access-Control-Allow-Headers', 'Content-Type');
10  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
11  if (req.method !== 'POST') { res.status(405).json({ error: 'Method not allowed' }); return; }
12
13  const SENDGRID_API_KEY = process.env.SENDGRID_API_KEY;
14  const FROM_EMAIL = 'hello@yourdomain.com'; // must be verified in SendGrid
15  const FROM_NAME = 'Your App Name';
16
17  const { to_email, to_name = '', template_id, template_data = {} } = req.body;
18  if (!to_email || !template_id) {
19    res.status(400).json({ error: 'to_email and template_id are required' });
20    return;
21  }
22
23  const payload = {
24    personalizations: [{ to: [{ email: to_email, name: to_name }], dynamic_template_data: template_data }],
25    from: { email: FROM_EMAIL, name: FROM_NAME },
26    template_id: template_id,
27  };
28
29  try {
30    const sgRes = await fetch('https://api.sendgrid.com/v3/mail/send', {
31      method: 'POST',
32      headers: {
33        'Authorization': `Bearer ${SENDGRID_API_KEY}`,
34        'Content-Type': 'application/json',
35      },
36      body: JSON.stringify(payload),
37    });
38    // SendGrid returns 202 for success (no body)
39    if (sgRes.status === 202) {
40      res.status(200).json({ success: true, message: 'Email queued for delivery' });
41    } else {
42      const errorBody = await sgRes.json();
43      res.status(sgRes.status).json({ success: false, error: errorBody });
44    }
45  } catch (err) {
46    res.status(500).json({ success: false, error: err.message });
47  }
48});

Dynamic Templates let your marketing or content team update email subject lines, body copy, and design directly in SendGrid without requiring any changes to your FlutterFlow app or proxy code. This is especially valuable for welcome emails, newsletters, and promotional messages where copy needs frequent iteration. In SendGrid, navigate to Email API → Dynamic Templates → Create a Dynamic Template. Give it a name like 'Welcome Email'. Click Add Version and choose the Design Editor or Code Editor. In the Design Editor, you can use SendGrid's drag-and-drop builder to create the email layout. Use Handlebars syntax to insert dynamic variables: `{{first_name}}` for the user's name, `{{app_name}}` for your app name, and so on. For simple transactional emails, the Code Editor (HTML + text) gives you more control. Create a minimal welcome email that uses `{{first_name}}`, `{{cta_url}}`, and any other variables your FlutterFlow app will pass in `dynamic_template_data`. After saving, note the Template ID — it looks like `d-32characters`. This is the value you will pass as `template_id` in your FlutterFlow API Call payload. The template ID is not a secret — it is a public identifier for the email design. Create separate templates for each email type your app sends: welcome, order confirmation, password reset, appointment reminder. Having separate template IDs for each keeps your analytics clean and lets you A/B test individual email types without affecting others.

With the proxy deployed and templates ready, create the FlutterFlow API Call that connects your app to the email-sending backend. This call goes to your proxy URL, not to SendGrid directly. In FlutterFlow, click API Calls in the left navigation. Click + Add → Create API Group. Name it 'Email Service' and set the Base URL to your Cloud Function or Edge Function URL (e.g., `https://us-central1-your-project.cloudfunctions.net`). Add a header: `Content-Type: application/json`. Click Save. Click + Add → Create API Call. Set the Name to 'Send Email', the Method to POST, and the Endpoint to `/sendEmail` (or your function path). In the Variables tab, click + Add Variable and create: `to_email` (String), `to_name` (String), `template_id` (String), and `first_name` (String) — adjust the last one based on what your specific template uses. In the Request Body tab, set the body format to JSON and enter: `{ "to_email": "{{ to_email }}", "to_name": "{{ to_name }}", "template_id": "{{ template_id }}", "template_data": { "first_name": "{{ first_name }}" } }`. Add any additional fields your Dynamic Template uses. In the Response & Test tab, click Test, fill in your own email as `to_email`, the welcome template ID as `template_id`, and your name as `first_name`. Click Run Test. If your proxy is set up correctly, you should receive a `{ success: true }` response and find a real email in your inbox within a few minutes. If you see a 403 error, your sender identity is not verified. If you see a 401, your API key is wrong or not being injected into the proxy correctly.

1{
2  "method": "POST",
3  "endpoint": "/sendEmail",
4  "headers": {
5    "Content-Type": "application/json"
6  },
7  "body": {
8    "to_email": "{{ to_email }}",
9    "to_name": "{{ to_name }}",
10    "template_id": "{{ template_id }}",
11    "template_data": {
12      "first_name": "{{ first_name }}",
13      "app_name": "Your App Name"
14    }
15  }
16}

Connect the Send Email API Call to the appropriate moments in your FlutterFlow app's user journey, and handle both success and failure states gracefully so users are not left confused if something goes wrong. Navigate to the screen where you want to trigger an email — for example, the registration success screen or a form submission confirmation page. Click on the primary button or use the On Page Load trigger if the email should fire automatically. In the right panel, click the Actions tab and + Add Action. Select 'Backend/API Call', choose the Email Service group, and select Send Email. In the Set Variables section, bind `to_email` to the current user's email (available as a FlutterFlow variable if you use Supabase Auth or Firebase Auth — look for Auth User Email or the user's email field from your database). Bind `to_name` to the user's display name. Set `template_id` to the template ID string for this specific email type (e.g., `d-welcome-template-id`). After the API Call action, add a Conditional action that checks the API response. Use the JSON Path `$.success` to check the value — if `true`, show a success Snackbar like 'Check your inbox!'. If the response indicates failure or the call errors out, show a gentle error Snackbar like 'We could not send the confirmation email. Please check your inbox settings or contact support.' For critical emails like password resets, avoid silent failures. For non-critical emails like promotional confirmations, a fire-and-forget pattern (no response check, no UI feedback) is acceptable and simpler to implement. Match the UX treatment to the email's importance in the user journey.

SendGrid returns HTTP 202 Accepted for a successful mail send — this is different from the 200 OK that most APIs return. It means the email has been accepted into SendGrid's delivery queue, not that it has been delivered. Delivery happens asynchronously, and most emails arrive within seconds to a few minutes, though busy queues or blocklisted domains can cause delays. If your proxy normalizes SendGrid's 202 to a 200 response (as shown in the code example in Step 2), FlutterFlow will see a 200 OK and you can treat it as success straightforwardly. If your proxy passes through the raw 202, you need to configure FlutterFlow's response handling to accept 202 as a success status — in the API Call's Response & Test tab, the response code checking is primarily for documentation; the actual handling is in your Action's conditional logic based on the body content. For production apps, configure SendGrid's Event Webhook to receive delivery status updates: in the SendGrid dashboard go to Settings → Mail Settings → Event Webhook, enter your Cloud Function URL (you will need a separate function for this), and enable the Delivered, Bounce, and Spam Report events. Log bounces and spam reports to your Firestore or Supabase database so you can stop emailing invalid addresses and protect your sender reputation. If you need help setting up the webhook-based delivery monitoring or the full proxy architecture, RapidDev's team builds FlutterFlow + SendGrid integrations regularly and offers a free scoping call at rapidevelopers.com/contact. Sender reputation issues can be difficult to recover from once they start, so getting the delivery monitoring right early is worth the effort.

1// Firebase Cloud Function: handle SendGrid delivery webhooks
2// Add this as a separate function alongside sendEmail
3exports.sendgridWebhook = functions.https.onRequest(async (req, res) => {
4  if (req.method !== 'POST') { res.status(405).send(''); return; }
5
6  const events = req.body; // array of SendGrid event objects
7  const db = admin.firestore();
8
9  for (const event of events) {
10    const { email, event: eventType, timestamp, reason } = event;
11    if (eventType === 'bounce' || eventType === 'spamreport') {
12      await db.collection('email_issues').add({
13        email,
14        event_type: eventType,
15        reason: reason || '',
16        occurred_at: new Date(timestamp * 1000),
17        logged_at: admin.firestore.FieldValue.serverTimestamp(),
18      });
19      console.warn(`Email issue: ${eventType} for ${email}`);
20    }
21  }
22  res.status(200).send('OK');
23});