Mailgun API

Log in to your Mailgun account at app.mailgun.com. Click 'Sending' → 'Domains' in the left nav, then click 'Add New Domain'. Enter your domain (e.g., `mail.yourapp.com` — Mailgun recommends a subdomain to avoid affecting your main domain's SPF/DKIM). Choose the region: US (api.mailgun.net) or EU (api.eu.mailgun.net). Note this choice — you must use the matching base URL in all subsequent API calls, and the US/EU endpoints are not interchangeable. After adding the domain, Mailgun displays the DNS records you need to add: two TXT records (SPF and DKIM), and optionally a CNAME for tracking. Go to your DNS provider (Cloudflare, Namecheap, etc.) and add these records exactly as shown. DNS propagation typically takes 5–30 minutes. Return to Mailgun, click 'Verify DNS Settings', and wait for all records to show green checkmarks. Once verified, find your Mailgun API key: click your account avatar → 'API Keys' → copy the 'Private API key' (starts with `key-`). Also note your 'Sending API Key' — this is a more restricted key you can use if you only need to send. Store this key somewhere secure (like a password manager) — you'll paste it into your Cloud Function's environment variables in the next step, never into FlutterFlow.

Open your Firebase project, go to Functions, and create a new HTTP Cloud Function named `sendEmail`. This function will receive a JSON POST from FlutterFlow containing `{to, subject, html}`, add the Mailgun credentials, convert the data to form fields, and POST to Mailgun on your behalf. The Mailgun API key is stored in Firebase environment config, not hardcoded. The function uses `form-data` npm package to build the multipart/form-data body that Mailgun requires. Install it as a dependency by adding it to your functions/package.json (`"form-data": "^4.0.0"`). Use `axios` for the HTTP call. After writing the function code, deploy it with `firebase deploy --only functions:sendEmail`. Copy the deployed function URL (visible in the Firebase console under Functions, e.g., `https://us-central1-your-project.cloudfunctions.net/sendEmail`). You'll paste this URL as the base URL in your FlutterFlow API Group in Step 3. Set the Firebase environment config before deploying: `firebase functions:config:set mailgun.api_key='key-yourprivatekey' mailgun.domain='mail.yourapp.com' mailgun.from='YourApp <hello@yourapp.com>' mailgun.region='us'` For EU accounts, change the region to 'eu' — the function code will use `api.eu.mailgun.net` when region is 'eu'.

1// index.js (Firebase Cloud Function)
2const functions = require('firebase-functions');
3const axios = require('axios');
4const FormData = require('form-data');
5
6const MAILGUN_API_KEY = functions.config().mailgun.api_key;
7const MAILGUN_DOMAIN = functions.config().mailgun.domain;
8const MAILGUN_FROM = functions.config().mailgun.from;
9const MAILGUN_REGION = functions.config().mailgun.region || 'us';
10const BASE_URL = MAILGUN_REGION === 'eu'
11  ? 'https://api.eu.mailgun.net/v3'
12  : 'https://api.mailgun.net/v3';
13
14exports.sendEmail = functions.https.onRequest(async (req, res) => {
15  // Allow CORS for FlutterFlow web builds
16  res.set('Access-Control-Allow-Origin', '*');
17  if (req.method === 'OPTIONS') {
18    res.set('Access-Control-Allow-Methods', 'POST');
19    res.set('Access-Control-Allow-Headers', 'Content-Type');
20    return res.status(204).send('');
21  }
22
23  const { to, subject, html, text } = req.body;
24  if (!to || !subject || (!html && !text)) {
25    return res.status(400).json({ error: 'Missing required fields: to, subject, html/text' });
26  }
27
28  const form = new FormData();
29  form.append('from', MAILGUN_FROM);
30  form.append('to', to);
31  form.append('subject', subject);
32  if (html) form.append('html', html);
33  if (text) form.append('text', text);
34
35  try {
36    const response = await axios.post(
37      `${BASE_URL}/${MAILGUN_DOMAIN}/messages`,
38      form,
39      {
40        auth: { username: 'api', password: MAILGUN_API_KEY },
41        headers: form.getHeaders()
42      }
43    );
44    return res.status(200).json({ id: response.data.id, message: response.data.message });
45  } catch (err) {
46    const status = err.response?.status || 500;
47    return res.status(status).json({ error: err.response?.data || err.message });
48  }
49});

In FlutterFlow, click **API Calls** in the left nav, then **+ Add** → **Create API Group**. Name it 'Mailgun Proxy'. Set the Base URL to your Cloud Function URL from Step 2 (e.g., `https://us-central1-your-project.cloudfunctions.net`). You don't need shared headers on the API Group level since your Cloud Function doesn't require authentication — the Mailgun key is handled server-side. Click **+ Add API Call** inside the group. Name it 'Send Email'. Set method to **POST**, path to `/sendEmail`. In the Body section, set the body type to **JSON** (since you're calling your Cloud Function, not Mailgun directly — your function accepts JSON and translates to form-data internally). Add body fields: - `to` (String variable) - `subject` (String variable) - `html` (String variable) Click the **Variables** tab and add three variables: `toEmail`, `subject`, `htmlBody` — all String type. Map them in the body: `"to": "{{toEmail}}"`, `"subject": "{{subject}}"`, `"html": "{{htmlBody}}"`. Click **Test** and paste sample values for each variable. You should get a 200 response with a Mailgun message ID in the body. If you get an error, check the Cloud Function logs in the Firebase console for the exact Mailgun error message — it's much more informative than the generic error FlutterFlow shows.

1{
2  "group": "Mailgun Proxy",
3  "baseUrl": "https://us-central1-YOUR-PROJECT.cloudfunctions.net",
4  "calls": [
5    {
6      "name": "Send Email",
7      "method": "POST",
8      "path": "/sendEmail",
9      "bodyType": "JSON",
10      "body": {
11        "to": "{{toEmail}}",
12        "subject": "{{subject}}",
13        "html": "{{htmlBody}}"
14      },
15      "variables": [
16        { "name": "toEmail", "type": "String" },
17        { "name": "subject", "type": "String" },
18        { "name": "htmlBody", "type": "String" }
19      ]
20    }
21  ]
22}

Add a compose screen to your FlutterFlow app with the following widgets in a Column: a **TextField** for the recipient email (label 'To'), a **TextField** for the subject line, a **TextField** for the message body (set Multiline to true, Min Lines to 5), and a **Button** labeled 'Send Email'. Select the Send Email button and open the **Action Flow Editor** (right-click → Actions, or the Actions panel on the right). Click **+ Add Action** → **Backend/API Call**. Select your 'Mailgun Proxy' API Group, then 'Send Email' API Call. In the variable mapping: - `toEmail` → TextField value for the To field - `subject` → TextField value for the Subject field - `htmlBody` → TextField value for the Body field (wrap in `<p>` tags if you want HTML formatting) After the API Call action, add a **Conditional Action**: check `response.statusCode == 200`. If true: show a SnackBar with 'Email sent!', then clear all three TextFields (Set Value → empty string). If false: show a SnackBar with 'Failed to send — please try again' and optionally log the error to your Supabase/Firestore error log. If this integration is going into a customer-facing product and you want it built and tested properly, RapidDev's team handles FlutterFlow email integrations every week — free scoping call at rapidevelopers.com/contact.

Mailgun's API returns a small JSON object on success: `{"id": "<message-id@domain>", "message": "Queued. Thank you."}`. In FlutterFlow's API Call response section, click 'Generate JSON Paths' after a successful test and create paths for `$.id` and `$.message`. You can use the `id` path to store the Mailgun message ID in a local state variable, which is useful for debugging (you can look up that ID in Mailgun's Logs dashboard to see delivery status). For error handling, the most common errors are: - **401 Unauthorized**: wrong API key or wrong region base URL (US key hitting EU endpoint). Your Cloud Function will surface this as a 401 from Mailgun. - **400 Bad Request / 'no recipient'**: usually means the body format was wrong (JSON instead of form-data). Since your Cloud Function handles form-data internally, this should not happen — but double-check the function code uses `FormData`, not raw JSON. - **'Domain not found'** or **'Sandbox restrictions'**: your domain is still unverified, or you're using the sandbox domain and the recipient isn't on the authorized list. In FlutterFlow, add a second conditional branch in your Action Flow Editor: if `response.statusCode` is not 200, parse the error body's `$.error` field and show it in a Dialog or SnackBar so the user (or you as the developer) can understand what went wrong. During development, print the full error to FlutterFlow's Debug console via a Debug Message action.