MongoDB Atlas

Log in to cloud.mongodb.com and open your project. If you don't have a cluster yet, click 'Create' and select the M0 free tier (shared, 512 MB) in your preferred cloud region — M0 is sufficient for development. For production, M10+ gives you dedicated resources and replica set connections. Once the cluster is ready, click 'Database Access' in the left sidebar and add a new database user. Choose 'Password' authentication and create a strong, randomly generated password — this is the credential your Cloud Function will use to connect, so make it at least 20 characters with mixed case, numbers, and symbols. Set the user's built-in role to 'readWrite' scoped to the specific database name you'll use (e.g., 'myapp'). Do not use the Atlas admin role for the app user — scope it to the minimum necessary. Next, click 'Network Access' in the left sidebar. Click '+ Add IP Address.' If your proxy runs on Firebase Cloud Functions (which uses dynamic GCP IPs), you must either use 0.0.0.0/0 (allow all) with a strong database password, or set up a VPC peering/private endpoint for production (considerably more complex). The Atlas documentation recommends 0.0.0.0/0 with SCRAM auth for serverless dynamic-IP scenarios, which is acceptable when combined with a strong password. If you're using a fixed-IP proxy or know your proxy's egress IP, enter that specific address instead. Finally, click 'Clusters' and then 'Connect' on your cluster. Choose 'Connect your application,' select Node.js as the driver, and copy the connection string. It will look like: mongodb+srv://appuser:<password>@cluster0.abc123.mongodb.net/. Replace <password> with your user's actual password and append the database name before the query string: mongodb+srv://appuser:yourpassword@cluster0.abc123.mongodb.net/myapp. Store this full string securely — you'll paste it into the Cloud Function's environment in the next step.

The Cloud Function is the heart of this integration. It holds your Atlas connection string in an environment variable (never in source code), opens a pooled connection to Atlas using the official mongodb Node.js driver, and exposes simple REST endpoints that FlutterFlow can call. In your Firebase project's Cloud Functions folder, update package.json to include 'mongodb' as a dependency — FlutterFlow never touches this file; it's purely server-side. Create or update your functions/index.js with the proxy code shown below. The key design decisions are: (1) initialize the MongoClient outside the request handler so it's reused across warm function invocations (cold starts are expensive if you reconnect on every request); (2) store the connection string in Firebase environment config or Secret Manager, never in the code; (3) expose separate GET and POST endpoints so FlutterFlow can map them to read and write operations cleanly. For the GET /items endpoint, the function runs a find() query with an optional query parameter for filtering (e.g., ?category=shoes) and returns up to 50 documents as a JSON array. For the POST /items endpoint, it reads req.body and runs insertOne(), returning the new document's insertedId. You can extend the pattern with PUT /items/:id for updates and DELETE /items/:id for deletes as your app requires. Set the Atlas connection string as a Firebase environment variable: in the Firebase CLI, run firebase functions:config:set mongo.uri='mongodb+srv://...' or use Firebase Functions v2's defineSecret() with Google Secret Manager. Then deploy the functions and note the HTTPS trigger URL for each endpoint — you'll enter these as the Base URL and endpoint paths in FlutterFlow's API Calls panel in Step 3. Once deployed, test the GET endpoint by opening its URL in your browser. You should see a JSON array (possibly empty if the collection is new). Test the POST endpoint with a sample JSON body using your browser's DevTools fetch or a REST client. Confirm both return correct responses before moving to FlutterFlow.

1// Firebase Cloud Function proxy for MongoDB Atlas
2// functions/index.js
3
4const functions = require('firebase-functions');
5const { MongoClient } = require('mongodb'); // add 'mongodb' to package.json dependencies
6
7// Connection string stored in environment config:
8// firebase functions:config:set mongo.uri='mongodb+srv://user:pass@cluster.mongodb.net/myapp'
9const MONGO_URI = functions.config().mongo?.uri || process.env.MONGO_URI;
10const DB_NAME = 'myapp';      // your database name
11const COLLECTION = 'items';   // adjust per endpoint
12
13// Reuse client across warm invocations
14let client;
15async function getDb() {
16  if (!client || !client.topology?.isConnected()) {
17    client = new MongoClient(MONGO_URI);
18    await client.connect();
19  }
20  return client.db(DB_NAME);
21}
22
23// GET /mongoProxy/items — list documents
24exports.mongoGetItems = functions.https.onRequest(async (req, res) => {
25  res.set('Access-Control-Allow-Origin', '*');
26  res.set('Access-Control-Allow-Headers', 'Content-Type, X-Proxy-Token');
27  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
28
29  try {
30    const db = await getDb();
31    const filter = {};
32    // Optional: filter by query param, e.g. ?category=shoes
33    if (req.query.category) filter.category = req.query.category;
34
35    const docs = await db.collection(COLLECTION)
36      .find(filter)
37      .limit(50)
38      .toArray();
39
40    // Convert _id ObjectId to string for JSON serialisation
41    const results = docs.map(d => ({ ...d, _id: d._id.toString() }));
42    res.status(200).json(results);
43  } catch (err) {
44    res.status(500).json({ error: err.message });
45  }
46});
47
48// POST /mongoProxy/items — insert a document
49exports.mongoCreateItem = functions.https.onRequest(async (req, res) => {
50  res.set('Access-Control-Allow-Origin', '*');
51  res.set('Access-Control-Allow-Headers', 'Content-Type, X-Proxy-Token');
52  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
53  if (req.method !== 'POST') { res.status(405).json({ error: 'POST only' }); return; }
54
55  try {
56    const db = await getDb();
57    const doc = req.body; // FlutterFlow sends JSON body
58    const result = await db.collection(COLLECTION).insertOne(doc);
59    res.status(200).json({ insertedId: result.insertedId.toString() });
60  } catch (err) {
61    res.status(500).json({ error: err.message });
62  }
63});

With the proxy live, configure FlutterFlow to call it. Open your FlutterFlow project and click 'API Calls' in the left navigation panel. Click the '+ Add' button and choose 'Create API Group.' Name it 'MongoDBProxy.' In the Base URL field, enter the root of your Cloud Functions URL: https://us-central1-<your-project-id>.cloudfunctions.net. Leave Authentication on 'No Auth' — the Atlas credentials are inside the Cloud Function, not in FlutterFlow. For the read operation, click '+ Add API Call' inside the MongoDBProxy group. Name it 'GetItems' and set the HTTP method to GET. In the Endpoint field, type /mongoGetItems. If your Cloud Function supports query parameters for filtering (e.g., category), click the Variables tab, add a variable named 'category' (Type: String), and reference it in the endpoint as /mongoGetItems?category={{category}} — FlutterFlow will URL-encode it automatically. For the write operation, click '+ Add API Call' and name it 'CreateItem.' Set the method to POST and the endpoint to /mongoCreateItem. In the Headers tab, add Content-Type: application/json. Switch to the Body tab, set Body Type to JSON, and define the document structure you want to insert. For example, if you're creating product records: {"name": "{{productName}}", "price": {{price}}, "category": "{{category}}"}. Define each field as a Variable in the Variables tab. Now test both API Calls. Click the Response & Test tab on GetItems, click 'Test API Call,' and confirm you see your collection's documents (or an empty array for a new collection). Click 'Generate from Response' to auto-create JSON Paths from the returned document structure. For a document with name and price fields, you'll get JSON Paths like $[0].name and $[0].price — but for a ListView you'll need to bind to the whole array. FlutterFlow handles list responses by letting you bind a ListView's 'Backend Query' directly to the API Call, which iterates the returned array automatically. For nested documents or arrays within a document, use dot notation in JSON Paths: $.address.city or $.tags[0] for example.

1// Sample API Call configuration reference
2// API Group: MongoDBProxy
3// Base URL: https://us-central1-<project-id>.cloudfunctions.net
4//
5// GET call: GetItems
6// Endpoint: /mongoGetItems?category={{category}}
7// Variables: category (String, optional)
8//
9// POST call: CreateItem
10// Endpoint: /mongoCreateItem
11// Headers: Content-Type: application/json
12// Body (JSON):
13{
14  "name": "{{productName}}",
15  "price": "{{price}}",
16  "category": "{{category}}",
17  "createdAt": "{{timestamp}}"
18}
19//
20// Example JSON Paths from GET response:
21// Item name: $[*].name   (for list binding)
22// Item price: $[*].price
23// Item ID:    $[*]._id

Now connect the API Calls to your actual UI. For displaying a list of MongoDB documents, select a ListView widget on your page canvas. In the properties panel on the right, open 'Backend Query.' Choose 'API Call,' select the MongoDBProxy group, and pick GetItems. If your endpoint supports a category filter variable, bind it to a state variable or a Dropdown widget on the page. FlutterFlow will now render one child widget per document returned in the array. Inside the ListView's child widget (usually a Container or Card), add Text widgets for each field. Set each Text widget's value to 'From Variable → API Response → [JSON Path]' and select the path you generated in Step 3 (e.g., $[*].name). Repeat for price, category, and any other fields. The result is a fully data-driven list that fetches fresh data from Atlas every time the page loads. For insert operations, add a floating action button or a form page. On the form's Submit button, open the Action Flow Editor. Add an 'API Call' action, select MongoDBProxy → CreateItem. For each variable (productName, price, category), bind it to the corresponding TextField state variable on the form. After the API Call action, add a 'Navigate Back' action to return to the list page, which will re-query Atlas and show the new document. For update and delete operations, add corresponding Cloud Function endpoints following the same pattern (PUT /mongoUpdateItem/:id and DELETE /mongoDeleteItem/:id), then mirror them as additional API Calls in the MongoDBProxy group. Bind the document _id (returned by GetItems as a string) to the endpoint path using a Variable, and wire the actions to swipe-to-dismiss or long-press gestures on ListView items. If you want real-time updates (new documents appearing without a page reload), the proxy pattern doesn't support WebSocket push natively — that requires a different architecture like Firebase Realtime Database or Supabase's realtime channels. For most content apps, a pull-to-refresh on the ListView or a periodic timer re-fetch is sufficient.

Before going live, add two layers of protection to the proxy. First, validate the requester's identity. If your FlutterFlow app uses Firebase Authentication, pass the Firebase Auth ID token (available in FlutterFlow as currentJwtToken in the Authentication section of the Action Flow) as an Authorization: Bearer header in your API Calls. In the Cloud Function, call admin.auth().verifyIdToken(token) to confirm the request is from an authenticated user. Reject unauthenticated requests with a 401. This prevents anyone without an account in your app from querying Atlas via the proxy. Second, never put the Atlas connection string in the Cloud Function source code. If you haven't already, migrate from functions.config() to Firebase Functions v2 secrets: add defineSecret('MONGO_URI') and reference process.env.MONGO_URI in the function. Run 'firebase deploy --only functions' to push the updated code. The secret is now stored in Google Secret Manager and is not visible in the Firebase Console or your source control. For error handling in FlutterFlow, add conditional actions after each API Call in the Action Flow Editor. Use the 'API Response → Status Code' condition: if the status is not 200, show a SnackBar with an error message or navigate to an error page. If the status is 200 but the array is empty, show an empty-state widget (FlutterFlow supports conditional visibility based on a list's length being zero). Finally, test the full flow on a real device. FlutterFlow's Run mode in the browser will work for GET requests because the Cloud Function sends CORS headers. POST requests from Run mode also work. But if you've added any Custom Actions alongside this integration, those require device testing. In FlutterFlow, click the device icon in the top bar to start Test Mode on a connected device, or download the APK/IPA from the Build menu. Walk through the full CRUD cycle: view list, create item, verify it appears, attempt an unauthorized request to confirm rejection. If you want RapidDev to review the proxy security before launch, they offer a free scoping call at rapidevelopers.com/contact.

1// Cloud Function with Firebase Auth token verification
2const admin = require('firebase-admin');
3admin.initializeApp();
4
5exports.mongoGetItems = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
8  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
9
10  // Verify Firebase Auth ID token
11  const authHeader = req.headers.authorization || '';
12  if (!authHeader.startsWith('Bearer ')) {
13    res.status(401).json({ error: 'Missing auth token' });
14    return;
15  }
16  try {
17    const token = authHeader.split('Bearer ')[1];
18    const decoded = await admin.auth().verifyIdToken(token);
19    const uid = decoded.uid; // use this to filter by user if needed
20
21    const db = await getDb();
22    const docs = await db.collection(COLLECTION)
23      .find({ userId: uid }) // filter by authenticated user
24      .limit(50)
25      .toArray();
26    const results = docs.map(d => ({ ...d, _id: d._id.toString() }));
27    res.status(200).json(results);
28  } catch (err) {
29    res.status(401).json({ error: 'Invalid auth token' });
30  }
31});