Nexmo (Vonage API)

Open the Vonage API Dashboard at dashboard.nexmo.com and navigate to the top-right account name to reveal your API Key and API Secret. For simple SMS you only need these two values. If you want WhatsApp, Viber, or other channels, go to the 'Your Applications' section in the left sidebar, click 'Create a new application', give it a name, enable the 'Messages' capability, and click 'Generate public and private key' — your browser will download a `private.key` file immediately (save it — you cannot re-download it). Copy the Application ID shown on the confirmation screen. Decide which path you need before writing any Cloud Function code. The SMS API (`rest.nexmo.com/sms/json`) sends a POST with `api_key`, `api_secret`, `from`, `to`, and `text` as query or form parameters — it's the fastest path and takes about ten minutes end-to-end. The Messages API (`api.nexmo.com/v1/messages`) handles omnichannel but requires a JWT signed from the Application ID and the `private.key` file; plan an extra 15–20 minutes for the signing step in your Cloud Function. Also note the original Nexmo branding is now Vonage — the API endpoints still use `nexmo.com` domains but the dashboard, SDKs, and docs all say Vonage. If you see tutorials referencing Nexmo, they still apply directly.

This is the critical security step. Because the Vonage API Secret and application private key are full sending credentials, they must never appear in FlutterFlow's API Calls panel or in any Dart file — both ship inside the compiled app binary. A Firebase Cloud Function runs on Google's servers, not on the user's device, so you can safely store secrets there using Firebase environment configuration or Secret Manager. In the Firebase console, open your project and go to Functions → Get started (you need the Blaze pay-as-you-go plan for outbound HTTP). In your Cloud Functions codebase (index.js), install the Vonage Node.js SDK: `@vonage/server-sdk`. Write an HTTPS-callable function named `sendSms` (or `sendMessage` for the Messages API) that: 1. Accepts a JSON body with `{to, text}` (add a `channel` field if you want multi-channel). 2. Initialises the Vonage SDK with the API Key and API Secret from `process.env` (set via `firebase functions:config:set` or Secret Manager). 3. Calls `vonage.sms.send(...)` or the Messages API client. 4. Returns `{status, messageId}` in the response body. Deploy with `firebase deploy --only functions`. After deployment the console shows your function's HTTPS trigger URL — copy it. This URL is what FlutterFlow will call; it's safe to embed in the app because it's your own endpoint with no inherent credential.

1// Firebase Cloud Function (Node.js 18+)
2const { onRequest } = require('firebase-functions/v2/https');
3const { setGlobalOptions } = require('firebase-functions/v2');
4const { Vonage } = require('@vonage/server-sdk');
5
6setGlobalOptions({ region: 'us-central1' });
7
8// Set secrets: firebase functions:secrets:set VONAGE_API_KEY VONAGE_API_SECRET
9exports.sendSms = onRequest(
10  { secrets: ['VONAGE_API_KEY', 'VONAGE_API_SECRET'] },
11  async (req, res) => {
12    res.set('Access-Control-Allow-Origin', '*');
13    if (req.method === 'OPTIONS') {
14      res.set('Access-Control-Allow-Methods', 'POST');
15      res.set('Access-Control-Allow-Headers', 'Content-Type');
16      return res.status(204).send('');
17    }
18
19    const { to, text, from } = req.body;
20    if (!to || !text) {
21      return res.status(400).json({ error: 'Missing to or text' });
22    }
23
24    const vonage = new Vonage({
25      apiKey: process.env.VONAGE_API_KEY,
26      apiSecret: process.env.VONAGE_API_SECRET,
27    });
28
29    try {
30      const result = await vonage.sms.send({
31        to,
32        from: from || 'FlutterApp',
33        text,
34      });
35      const msg = result.messages[0];
36      if (msg.status === '0') {
37        return res.json({ success: true, messageId: msg['message-id'] });
38      } else {
39        return res.status(422).json({ success: false, errorText: msg['error-text'] });
40      }
41    } catch (err) {
42      return res.status(500).json({ error: err.message });
43    }
44  }
45);

Now wire up FlutterFlow to call your Cloud Function. In the FlutterFlow editor, click API Calls in the left navigation sidebar (the plug icon). Click + Add at the top and select Create API Group. Name it `VonageProxy`. In the Base URL field paste your Firebase Cloud Function HTTPS trigger URL — for example `https://us-central1-myproject.cloudfunctions.net`. Do NOT include the function name yet; that goes in the individual API Call. With the group created, click + Add again inside it and choose Create API Call. Name it `SendSms`. Set the Method to POST. In the Path field type `/sendSms`. Open the Body tab, set the Body Type to JSON, and enter the body template: ```json {"to": "[toNumber]", "text": "[messageText]"} ``` Now open the Variables tab. Create two variables: `toNumber` (type String, no default) and `messageText` (type String, no default). In the body, replace the hard-coded values with the variable syntax using double brackets: `[toNumber]` and `[messageText]`. Click the Response & Test tab. In the Test Values section enter a real phone number you own and a test message, then click Test API Call. If the Cloud Function proxy is running correctly, you should see a 200 response with `{"success":true,"messageId":"..."}`. Click 'Generate JSON Paths' on the successful response to create JSON path shortcuts: `$.success` (Boolean) and `$.messageId` (String). These are what you'll bind in the Action Flow Editor when wiring up your send button. For the Messages API / WhatsApp channel, add a second API Call in the same group called `SendWhatsApp` with path `/sendMessage` and body `{"to":"[to]","text":"[text]","channel":"whatsapp"}` — update your Cloud Function accordingly.

1{
2  "Group": "VonageProxy",
3  "Base URL": "https://us-central1-YOUR_PROJECT.cloudfunctions.net",
4  "Calls": [
5    {
6      "name": "SendSms",
7      "method": "POST",
8      "path": "/sendSms",
9      "body_type": "JSON",
10      "body": {
11        "to": "[toNumber]",
12        "text": "[messageText]"
13      },
14      "variables": [
15        { "name": "toNumber", "type": "String" },
16        { "name": "messageText", "type": "String" }
17      ],
18      "json_paths": [
19        { "name": "success", "path": "$.success" },
20        { "name": "messageId", "path": "$.messageId" }
21      ]
22    }
23  ]
24}

With the API Call ready, build a simple compose screen in FlutterFlow. Add a Column widget to a new Page (name it 'SendMessage'). Inside the column add two TextField widgets — one bound to an App State String variable called `recipientNumber` (initialize to empty string) and one bound to `messageText`. Add a Button widget below and label it 'Send SMS'. Select the Button, open the Actions panel on the right, and click + Add Action. Scroll to the Backend/Database section and choose API Call. Select the VonageProxy group and the SendSms call. In the variable bindings, map `toNumber` to the App State `recipientNumber` and `messageText` to the App State `messageText` variable. Add a second action chained After first action completes → Conditional action on the response. Use the `$.success` JSON path result as the condition. If true: show a SnackBar with the text 'Message sent!' and clear the text fields (set App State `messageText` to ''). If false: show a SnackBar with an error message by binding the response body or a static 'Send failed, check the number.' message. For the recipient number field, use a PhoneNumberTextField widget if available (or a plain TextField with keyboard type set to Phone). Remind users to include the country code with `+` prefix (e.g. `+14155552671`) — Vonage requires E.164 format and rejects numbers without the leading `+`. If you want to show a loading indicator while the API Call is in flight, add a Conditional widget that checks a Boolean App State variable `isSending` and overlay a CircularProgressIndicator. Set `isSending` to true at the start of the action chain and back to false after the SnackBar.

Vonage calls your webhook URL whenever a message is delivered (or fails) and whenever an inbound SMS arrives on your Vonage number. FlutterFlow cannot receive webhooks directly because it's a client app running on a device — there's no persistent public URL. The solution is another Firebase Cloud Function that acts as the webhook receiver. In the Vonage API Dashboard, go to your account settings and find the 'Default SMS Settings' section. Paste your Cloud Function URL into the Delivery Receipt URL field (e.g. `https://us-central1-myproject.cloudfunctions.net/vonageDlr`). For inbound SMS, set the Inbound SMS URL field to another function URL (e.g. `/vonageInbound`). Write a second Cloud Function `vonageDlr` that receives a POST from Vonage with fields `messageId`, `status`, `to`, and `timestamp`. Write these to a Firestore collection `delivery_receipts` keyed by `messageId`. Then in FlutterFlow, when you call SendSms and get back a `messageId`, store it in a Firestore document for that session. On the confirmation screen, use a Firestore stream widget filtered on that `messageId` — when Vonage fires the DLR and your Cloud Function writes to Firestore, the Flutter UI updates automatically in real time without polling. For inbound SMS (replies), write a third Cloud Function `vonageInbound` that receives `from`, `to`, `text`, and `messageId` and writes them into a Firestore `messages` collection. Your FlutterFlow chat or inbox screen can then query this collection and show replies. Note: If you're on a Vonage Messages API flow (WhatsApp etc.), delivery webhook configuration is on the Vonage Application settings page under 'Status URL' and 'Inbound URL' rather than the default SMS settings.

1// Cloud Function: receive Vonage DLR webhook
2exports.vonageDlr = onRequest(async (req, res) => {
3  const { messageId, status, to, timestamp } = req.body;
4  if (messageId) {
5    await admin.firestore().collection('delivery_receipts').doc(messageId).set({
6      status,
7      to,
8      timestamp: timestamp || Date.now(),
9      updatedAt: admin.firestore.FieldValue.serverTimestamp(),
10    });
11  }
12  // Vonage expects 200 OK quickly
13  res.sendStatus(200);
14});

Send a real test SMS from your FlutterFlow app (in Run mode on a device or via the FlutterFlow Test Mode APK). Watch the Cloud Function logs in the Firebase console (Functions → Logs) for the raw Vonage response. Check that `messages[0].status === '0'` in the response — a status of '0' means queued for delivery, not that it's been delivered to the handset yet (delivery confirmation comes from the webhook). A non-zero status string like '6' means the number is unreachable and '7' means a blacklisted number. For the Messages API (WhatsApp) path, make sure the recipient has opted in to receive WhatsApp messages from your Vonage number — WhatsApp enforces user consent strictly and will reject messages to users who haven't started a conversation or received a template message approval. Check the Vonage dashboard under 'Messages & Dispatch' to see sent message status and WhatsApp template approval status. For web builds of your FlutterFlow app, CORS applies: the Cloud Function's `Access-Control-Allow-Origin: *` header (shown in the code above) handles preflight requests. If you see `XMLHttpRequest error` on web, open your browser's developer tools, check the Network tab, and confirm the preflight OPTIONS request is returning 204 with the correct CORS headers from your Cloud Function. If you plan to scale beyond casual use, note Vonage's default SMS throughput is approximately 1 message per second per long code number. For higher volumes, contact Vonage to upgrade your throughput or use a short code. Check current limits in the Vonage developer documentation since these caps change with account tier.