Plivo

Open the Plivo console at console.plivo.com and log in. On the dashboard Overview page, you'll see your **Auth ID** and **Auth Token** displayed at the top. The Auth ID looks like a string of uppercase letters and numbers (e.g., `MAXXXXXXXXXXXXXXXXXX`). The Auth Token is a longer alphanumeric string. Copy both — you'll add them as Firebase environment secrets in the next step. The Auth ID is used in two places in the Plivo API: as the HTTP Basic auth username AND as part of the URL path (`/v1/Account/{AUTH_ID}/Message/`). This is a common confusion point — if you see a 401 or 404 when testing, verify that the Auth ID in the URL path and the username both match your console Auth ID exactly. Next, buy a phone number to use as the sender. In the left sidebar, click Numbers → Buy a Number. Select your country, number type (long code, toll-free, or short code depending on your use case and destination), and click Search. Select a number and click Buy. The number appears in your Numbers list in E.164 format (e.g., `+12025550147`) — copy it. This is the `src` field in your SMS API call. Note: for some countries and use cases (especially in the US), you need to register your number for 10DLC (A2P 10-digit long code) compliance before sending marketing or commercial messages. The Plivo console has a Registration section for this. For international destinations, check Plivo's country-specific documentation for alphanumeric sender ID rules — some countries don't allow long-code numbers as senders.

This step is the security foundation of the integration. The Plivo Auth Token is a full sending credential — if it ships inside your compiled Flutter app, anyone who decompiles it can send SMS messages billed to your account. A Firebase Cloud Function runs server-side and can store secrets safely. In the Firebase console, open your project and go to Functions → Get Started (you need the Blaze plan for outbound HTTP). In your Cloud Functions project directory, create an HTTPS function named `sendSms`. The function receives a POST from your FlutterFlow app with `{to, text}` in the JSON body, validates the inputs, constructs a Plivo API request with your Auth ID and Auth Token (from environment variables), and returns a success/error response. Plivo's SMS endpoint is: `POST https://api.plivo.com/v1/Account/{AUTH_ID}/Message/` with HTTP Basic auth (`Authorization: Basic base64(AUTH_ID:AUTH_TOKEN)`) and a JSON body: `{"src": "your_number", "dst": "recipient_number", "text": "message"}`. Key implementation notes: the `dst` (destination) field must be in E.164 format with a `+` prefix. The `src` field must be your purchased Plivo number. The response body includes `message_uuid` — an array with one UUID string that you can store to track delivery later. HTTP 202 Accepted means the message was queued for sending. Deploy with `firebase deploy --only functions`. After deployment, copy the HTTPS trigger URL from the Functions dashboard — this URL is what FlutterFlow calls and is safe to embed in the app.

1// Firebase Cloud Function: Plivo SMS proxy (Node.js 18+)
2const { onRequest } = require('firebase-functions/v2/https');
3const { setGlobalOptions } = require('firebase-functions/v2');
4
5setGlobalOptions({ region: 'us-central1' });
6
7// Set secrets:
8// firebase functions:secrets:set PLIVO_AUTH_ID PLIVO_AUTH_TOKEN PLIVO_FROM_NUMBER
9exports.sendSms = onRequest(
10  { secrets: ['PLIVO_AUTH_ID', 'PLIVO_AUTH_TOKEN', 'PLIVO_FROM_NUMBER'] },
11  async (req, res) => {
12    // CORS for web builds
13    res.set('Access-Control-Allow-Origin', '*');
14    if (req.method === 'OPTIONS') {
15      res.set('Access-Control-Allow-Methods', 'POST');
16      res.set('Access-Control-Allow-Headers', 'Content-Type');
17      return res.status(204).send('');
18    }
19
20    const { to, text } = req.body;
21    if (!to || !text) {
22      return res.status(400).json({ error: 'Missing to or text' });
23    }
24
25    const authId = process.env.PLIVO_AUTH_ID;
26    const authToken = process.env.PLIVO_AUTH_TOKEN;
27    const fromNumber = process.env.PLIVO_FROM_NUMBER;
28    const credentials = Buffer.from(`${authId}:${authToken}`).toString('base64');
29
30    const plivoUrl = `https://api.plivo.com/v1/Account/${authId}/Message/`;
31
32    try {
33      const response = await fetch(plivoUrl, {
34        method: 'POST',
35        headers: {
36          'Authorization': `Basic ${credentials}`,
37          'Content-Type': 'application/json',
38        },
39        body: JSON.stringify({
40          src: fromNumber,
41          dst: to,
42          text: text,
43        }),
44      });
45
46      const data = await response.json();
47
48      if (response.status === 202) {
49        return res.status(200).json({
50          success: true,
51          messageUuid: data.message_uuid?.[0] ?? '',
52        });
53      } else {
54        return res.status(response.status).json({
55          success: false,
56          error: data.error || 'Plivo API error',
57        });
58      }
59    } catch (err) {
60      return res.status(500).json({ error: err.message });
61    }
62  }
63);

With the Cloud Function deployed and tested, connect FlutterFlow to it. In the FlutterFlow editor, click API Calls in the left navigation sidebar. Click + Add at the top and select Create API Group. Name it `PlivoProxy`. Set the Base URL to your Firebase Cloud Function's HTTPS trigger URL root — for example `https://us-central1-myproject.cloudfunctions.net`. Do not include `/sendSms` in the base URL yet; that goes in the individual API Call path. With the PlivoProxy group created, click + Add inside the group → Create API Call. Name it `SendSms`. Set the Method to POST. In the Path field enter `/sendSms`. Open the Body tab, set Body Type to JSON, and enter the body template: ```json {"to": "[recipientNumber]", "text": "[messageText]"} ``` Open the Variables tab and add two String variables: `recipientNumber` (no default) and `messageText` (no default). Update the body template to use the variable syntax with double square brackets: `[recipientNumber]` and `[messageText]`. Open the Response & Test tab. In the Test Values section enter a real phone number you own (E.164 format with + prefix) and a short test message. Click Test API Call. If the Cloud Function is running correctly, you should see HTTP 200 with `{"success":true,"messageUuid":"..."}`. Click 'Generate JSON Paths' on the successful response to create `$.success` (Boolean) and `$.messageUuid` (String) shortcut paths. If you ever need to add a second call to the same proxy — for example a `/send-voice` endpoint — you can add another API Call to this same group without redoing the base URL setup. The PlivoProxy group is your general Plivo gateway from FlutterFlow.

1{
2  "Group": "PlivoProxy",
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": "[recipientNumber]",
12        "text": "[messageText]"
13      },
14      "variables": [
15        { "name": "recipientNumber", "type": "String" },
16        { "name": "messageText",    "type": "String" }
17      ],
18      "json_paths": [
19        { "name": "success",     "path": "$.success" },
20        { "name": "messageUuid", "path": "$.messageUuid" }
21      ]
22    }
23  ]
24}

Create an SMS compose screen in FlutterFlow. Add a new Page named 'SendSms'. Inside, place a Column with two TextField widgets — one for the recipient phone number (App State String: `recipientNumber`, keyboard type: Phone) and one for the message text (App State String: `smsMessage`, max lines: 4). Below the text fields, add a Button labeled 'Send SMS'. Select the Send SMS button, open the Actions panel, and click + Add Action. Choose Backend/Database → API Call. Select the PlivoProxy group and the SendSms API Call. Bind the `recipientNumber` variable to the App State `recipientNumber` and the `messageText` variable to the App State `smsMessage`. Chain a second action after the API Call completes. Add a Conditional Action using the `$.success` JSON path result as the condition: - If true: show a SnackBar ('SMS sent successfully!') and optionally clear the message text field (Set App State `smsMessage` to ''). Optionally navigate back to the previous screen. - If false: show a SnackBar ('Send failed — check the phone number and try again') binding the error message if available. For better user experience, add a loading indicator. Create a Boolean App State variable `isSending` (default: false). At the start of the action flow, add a Set App State action to set `isSending` to true. After the SnackBar action, set it back to false. Wrap the Send button in a Conditional widget that shows a CircularProgressIndicator when `isSending` is true and the button when false. Remind users on the recipient field label that the phone number must include the country code with a + prefix — Plivo requires E.164 format (e.g., +14155552671) and returns an error for numbers formatted otherwise. You can add a prefix icon or hint text on the TextField to communicate this.

Plivo calls your webhook URL when a message is delivered (or fails) and when an inbound SMS arrives on your Plivo number. Since FlutterFlow is a client app running on a device, it can't directly receive webhooks — use a Firebase Cloud Function as the webhook receiver, writing updates to Firestore for FlutterFlow to stream. In the Firebase console, create a second Cloud Function named `plivoDlr` (Delivery Receipt). Plivo sends a GET or POST request to your webhook URL with parameters `MessageUUID`, `Status`, `To`, `From`, and `MobileCountryCode`. Your function writes these to a Firestore collection `delivery_receipts` keyed by `MessageUUID`. Return HTTP 200 immediately. Configure the webhook in the Plivo console: go to your phone number → Number Configuration. Set the 'Message URL' to your `plivoDlr` Cloud Function HTTPS URL and the 'Message Method' to POST. For inbound messages, create a third Cloud Function `plivoInbound` that receives the incoming SMS parameters (`From`, `To`, `Text`) and writes them to a Firestore `inbound_messages` collection. In FlutterFlow, after a successful `SendSms` API Call, store the returned `messageUuid` (from the `$.messageUuid` JSON path) in an App State variable. On a confirmation screen, add a Firestore stream query on the `delivery_receipts` collection filtered by `MessageUUID == currentMessageUuid`. When Plivo fires the webhook and the Cloud Function writes to Firestore, the FlutterFlow stream updates the UI in real time, showing 'Delivered' when the status arrives. For a simpler implementation without Firestore streaming, just show the 'SMS Sent' SnackBar immediately after the 202 response from the Cloud Function — delivery receipts are optional for basic use cases.

1// Firebase Cloud Function: Plivo DLR webhook receiver
2exports.plivoDlr = onRequest(async (req, res) => {
3  // Plivo sends GET or POST with form params
4  const params = req.method === 'POST' ? req.body : req.query;
5  const { MessageUUID, Status, To, From } = params;
6
7  if (MessageUUID) {
8    await admin.firestore()
9      .collection('delivery_receipts')
10      .doc(MessageUUID)
11      .set({
12        status: Status,
13        to: To,
14        from: From,
15        updatedAt: admin.firestore.FieldValue.serverTimestamp(),
16      });
17  }
18  res.sendStatus(200); // Plivo expects a quick 200
19});

Test from a real FlutterFlow Run Mode session (open a browser tab in Run mode, or use Test Mode APK on a device). Enter a valid E.164 phone number in the recipient field and a short message, then tap Send. Watch the Firebase console Function logs in real time to see the raw request and Plivo API response. For trial accounts, Plivo restricts message delivery to whitelisted numbers only. If the SMS doesn't arrive, check the Plivo console under Messages → Message Logs. The log shows the message status and any error reasons. Common statuses: 'queued', 'sent', 'delivered', 'undelivered'. An 'undelivered' status with a reason of 'Sandbox Mode' means the destination number hasn't been whitelisted on your trial account — go to Plivo → Numbers → Sandbox/Whitelist and add the test number. For web builds of your FlutterFlow app, the browser enforces CORS on the Cloud Function call. The CORS headers in the Cloud Function code above (`Access-Control-Allow-Origin: *`) handle this, but confirm by opening your browser's developer tools Network tab during a web Run mode test — look for the OPTIONS preflight returning 204 and the POST returning 200. Once testing is complete on trial, add funds to your Plivo account and test a delivery to a non-whitelisted number to confirm the full production flow. Monitor the Plivo console Message Logs for your first few production sends to verify delivery rates before scaling up message volume.