MongoDB

Log into cloud.mongodb.com and navigate to your project. In the left sidebar, find 'Data API' under the App Services section (it may also appear under your cluster's 'Connect' options depending on your Atlas UI version). Click 'Enable the Data API' — you will be asked to select which data sources (clusters) to enable it on; select your cluster. Once enabled, Atlas shows you a Data API base URL that looks like `https://data.mongodb-api.com/app/{app-id}/endpoint/data/v1`. Copy this URL — you will use it as the base URL in your FlutterFlow API Group. Next, create an API key by clicking 'Create API Key'. Give it a descriptive name like 'FlutterFlow-ReadOnly'. Atlas generates a key string starting with characters you should treat as sensitive — copy it immediately because it is only shown once. For reading data in FlutterFlow (fetching documents to display), you can use this key directly in the API Call header. For writing data (insertOne, updateOne, deleteOne), create a separate key with write access that you will store only in your Cloud Function — never in FlutterFlow itself. Note that the Atlas Data API availability and UI may vary by Atlas tier and region; if you do not see the Data API option, check MongoDB's current documentation at mongodb.com/docs/atlas/api/data-api/ for your specific tier.

In FlutterFlow, click 'API Calls' in the left navigation panel, then click '+ Add' → 'Create API Group'. Name the group 'MongoDB'. Set the Base URL to your Atlas Data API URL: `https://data.mongodb-api.com/app/{your-app-id}/endpoint/data/v1` — replace `{your-app-id}` with the actual app ID from your Atlas console. In the 'Headers' section, add two shared headers that will apply to all calls in this group: `api-key` set to your read-only API key value, and `Content-Type` set to `application/json`. Now add your first API Call inside this group: click '+ Add API Call', name it 'FindDocuments', and set the method to POST and the endpoint to `/action/find`. Switch to the 'Variables' tab and add variables for `collection` (String), `filter` (String, optional — a JSON filter object), and `limit` (Integer, default 20). Switch to the 'Body' tab, set body type to JSON, and enter the body template. The `dataSource` field must match your cluster name (usually 'Cluster0'), `database` must match your database name, and `collection` uses the `{{ collection }}` variable. Add a `filter` field mapping to `{{ filter }}` and a `limit` field mapping to `{{ limit }}`.

1{
2  "dataSource": "Cluster0",
3  "database": "your-database-name",
4  "collection": "{{ collection }}",
5  "filter": {{ filter }},
6  "limit": {{ limit }}
7}

Switch to the 'Response & Test' tab on your FindDocuments call. You need to run a real test to generate the JSON Path mappings. Fill in the test variable values: set `collection` to the name of a collection you have already created in Atlas (e.g. 'products'), set `filter` to `{}` (to fetch all documents), and set `limit` to 5. Click 'Test API Call'. If everything is configured correctly, you will see a JSON response like `{ "documents": [{ "_id": { "$oid": "..." }, "name": "...", "price": 29.99 }, ...] }`. FlutterFlow will offer to auto-generate JSON Paths — click 'Generate JSON Paths'. Next, create a Data Type to hold the parsed document. Go to 'Data Types' in the left panel and create a new type called 'MongoProduct' (or whatever matches your collection). Add fields matching the document fields you care about: for a product, that might be `id` (String, mapped from `$._id.$oid`), `name` (String), `price` (Double). Back in the API Call, go to the JSON Paths section and map `$.documents` to a List of MongoProduct. Map the nested field `$._id.$oid` to the `id` field — the `$oid` wrapper is MongoDB's way of representing ObjectIDs and you must extract the inner string, not use the `{ "$oid": "..." }` object directly. With this mapped, you can bind the API Call response to a ListView and access individual fields on each item.

Reading data with the read-only API key in FlutterFlow is fine — the key grants limited access and displaying documents publicly is acceptable for many apps. Writing data is different. An `insertOne` or `updateOne` key that lives in FlutterFlow ships to every device, and any malicious user can use it to write arbitrary data to your MongoDB database. The safe pattern: route all write operations through a Firebase Cloud Function (or Supabase Edge Function) that holds a separate write-capable API key in its environment config. FlutterFlow POSTs the write payload to the Cloud Function, the Function adds the `api-key` header and forwards the request to the Atlas Data API. For reading-only apps or apps where the write risk is acceptable (internal tools with no public users), you can add the write calls directly in FlutterFlow using the same API Group but a different API key — but this is not recommended for consumer apps. For the `updateOne` call, pay close attention to the filter: to update a specific document by its ID, the filter must use `{ "_id": { "$oid": "your-id-string" } }` — passing the `_id` as a plain string will fail with a 400 error. Store the `$oid` string from the find response in a page variable, then construct the filter body with it before calling update. If you're building the proxy function, the Cloud Function simply receives the body from FlutterFlow, appends `{ 'api-key': process.env.MONGO_WRITE_KEY }` to the request headers, and forwards to `https://data.mongodb-api.com/app/{app-id}/endpoint/data/v1/action/insertOne` using `fetch` or the axios library. Deploy the Function and add a second API Call in FlutterFlow pointing to the Function URL instead of Atlas directly.

1// Firebase Cloud Function proxy for MongoDB writes (Node.js)
2const { onRequest } = require('firebase-functions/v2/https');
3const axios = require('axios');
4
5exports.mongoWrite = onRequest({ cors: true }, async (req, res) => {
6  if (req.method !== 'POST') return res.status(405).send('Method Not Allowed');
7
8  const { action, ...body } = req.body;
9  // action = 'insertOne' | 'updateOne' | 'deleteOne'
10  const validActions = ['insertOne', 'updateOne', 'deleteOne'];
11  if (!validActions.includes(action)) {
12    return res.status(400).json({ error: 'Invalid action' });
13  }
14
15  const url = `https://data.mongodb-api.com/app/${process.env.MONGO_APP_ID}/endpoint/data/v1/action/${action}`;
16  try {
17    const response = await axios.post(url, body, {
18      headers: {
19        'api-key': process.env.MONGO_WRITE_KEY,
20        'Content-Type': 'application/json',
21      },
22    });
23    return res.status(200).json(response.data);
24  } catch (err) {
25    const status = err.response?.status || 500;
26    return res.status(status).json({ error: err.response?.data || err.message });
27  }
28});

With the API calls working, connect them to your FlutterFlow UI. For reading: select a ListView widget on your page, open its properties, and set the 'Backend Query' to your MongoDB FindDocuments API Call. Pass the collection name as a constant variable and the filter as a dynamic variable if users can filter data. Each ListTile inside the ListView can now bind its fields to the API response — click the 'field binding' icon next to a Text widget, navigate through API Response → FindDocuments → documents → [index] → name (or whichever field you mapped). For a Card with an image, bind the image URL field the same way. For update flows, you need to pass the document's `_id` through your UI. When a user taps a list item to edit it, navigate to the edit page and pass the document's `id` field (the `$oid` string you extracted) as a page parameter. On the edit page, when the user submits, construct the update filter in a 'Set Variable' action before calling the write API: build the JSON string `{"_id": {"$oid": "<passed-id>"}}` using string interpolation with the page parameter. Pass this as the `filter` body field in your write call (either direct or proxied). If you pass the `_id` as a plain string without the `$oid` wrapper, Atlas will return a 400 error saying no matching document was found — this is one of the most common MongoDB+FlutterFlow mistakes and it is easy to miss. If you'd rather skip debugging this, RapidDev's team sets up MongoDB integrations in FlutterFlow regularly — free scoping call at rapidevelopers.com/contact.