How to Connect Your FlutterFlow Project to a Third-Party Database

Before configuring anything in FlutterFlow, determine which of three patterns fits your database. Pattern 1 — Native Supabase Integration: if your database is Supabase (PostgreSQL hosted at supabase.com), use FlutterFlow's built-in integration. This is the best option — FlutterFlow has a dedicated Supabase query builder, supports real-time subscriptions, and handles auth automatically. Pattern 2 — API Manager (REST API): if your database has an HTTP REST API (Airtable's REST API, a Hasura GraphQL/REST endpoint, a custom REST API you've already built, or a managed database with REST like PlanetScale's Data API), use FlutterFlow's API Manager to call it directly. The database API handles authentication. Pattern 3 — Cloud Function Proxy: if your database has no HTTP API (MySQL, PostgreSQL, MongoDB, SQL Server, Redis), or if it is behind a firewall, or if you need connection pooling, you must build a Cloud Function that connects to the database server-side via a SDK and exposes REST endpoints for FlutterFlow. Never connect directly from the client — putting database connection strings or credentials in a Flutter app is a critical security vulnerability.

If your database is Supabase, skip the Cloud Function entirely — FlutterFlow has a direct integration. Go to Settings → Integrations → Supabase. Enter your Supabase Project URL (from Supabase Dashboard → Settings → API → Project URL, format: https://{ref}.supabase.co) and the Anon Key (public key, safe for client use — from the same Settings → API page). Click Connect. FlutterFlow validates the connection and shows your Supabase tables. Now, when you add a Backend Query on any page or widget, you see a Supabase Query option alongside Firestore. The query builder shows your table names, lets you add WHERE conditions, ORDER BY, LIMIT, and JOIN-like relationships. For Row Level Security: every table should have RLS enabled in Supabase Dashboard — FlutterFlow's Supabase integration sends the user's JWT automatically when a user is logged in via Supabase Auth, so RLS policies based on auth.uid() work without additional configuration. For real-time: FlutterFlow supports Supabase real-time subscriptions — enable Replication for the table in Supabase Dashboard → Database → Replication and check 'Subscribe to database changes' in the Backend Query settings.

For databases with REST APIs, use FlutterFlow's API Manager without any Cloud Function. Example: connecting to Airtable. Go to API Manager → Add API Group → name it Airtable. Set Base URL to https://api.airtable.com/v0/{your-base-id} (find your Base ID in Airtable's API documentation at airtable.com/api — it starts with 'app'). Under Headers, add Authorization: Bearer YOUR_AIRTABLE_TOKEN (get a Personal Access Token from airtable.com/create/tokens with data.records:read scope). Add an individual API Call named listRecords. Method: GET. Path: /{tableId} (your table name or ID). Add Query Parameters: filterByFormula=[FIELD]='value' (optional filter), maxRecords=100, sort[0][field]=Name&sort[0][direction]=asc. Click Test — the response shows your Airtable records as JSON. In the response inspector, mark the fields you need: records[].id, records[].fields.Name, records[].fields.Email, etc. Create a page with a Backend Query using listRecords. Add a ListView bound to the records array using Generate Dynamic Children. Each child displays the fields you extracted.

1// API Group: Airtable
2// Base URL: https://api.airtable.com/v0/appYOUR_BASE_ID
3// Header: Authorization: Bearer YOUR_PERSONAL_ACCESS_TOKEN
4//
5// Endpoint: listRecords
6// Method: GET
7// Path: /tblYOUR_TABLE_ID
8// Query Params:
9//   maxRecords = 100
10//   sort[0][field] = Name
11//   sort[0][direction] = asc
12//
13// Optional filter param (add as variable):
14//   filterByFormula = AND({Status}='Active')
15//
16// Response JSON path for binding:
17//   records          → array of records
18//   records[].id     → Airtable record ID
19//   records[].fields.Name
20//   records[].fields.Email
21//   records[].fields.Status
22//
23// Endpoint: createRecord
24// Method: POST
25// Body:
26// {
27//   "fields": {
28//     "Name": "[name]",
29//     "Email": "[email]",
30//     "Status": "Active"
31//   }
32// }

For databases without REST APIs (MySQL, PostgreSQL, MongoDB, SQL Server), build a Cloud Function that connects via Node.js drivers and exposes REST endpoints. The Cloud Function acts as a bridge: FlutterFlow sends a POST request to the Cloud Function specifying what data to fetch or write, the Cloud Function executes the database query using the database SDK, and returns the results as JSON. The database connection string and credentials live only in Firebase Functions config — they are never exposed to the client. Use connection pooling (pg Pool for PostgreSQL, mysql2 createPool for MySQL) to reuse database connections across function invocations rather than creating a new connection for every request.

1// functions/index.js — PostgreSQL proxy via Cloud Function
2// Install: cd functions && npm install pg
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const { Pool } = require('pg');
6
7admin.initializeApp();
8
9// Connection pool — reused across warm invocations
10const pool = new Pool({
11  host: functions.config().db.host,
12  port: functions.config().db.port || 5432,
13  database: functions.config().db.name,
14  user: functions.config().db.user,
15  password: functions.config().db.password,
16  max: 5,           // max connections in pool
17  idleTimeoutMillis: 10000,
18  ssl: { rejectUnauthorized: false }, // Required for cloud DB providers
19});
20
21exports.dbProxy = functions.https.onRequest(async (req, res) => {
22  res.set('Access-Control-Allow-Origin', '*');
23  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
24
25  const { action, params } = req.body;
26  let result;
27
28  try {
29    const client = await pool.connect();
30    try {
31      if (action === 'getUsers') {
32        const r = await client.query(
33          'SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT $1',
34          [params?.limit || 50]
35        );
36        result = r.rows;
37      } else if (action === 'getUserById') {
38        const r = await client.query(
39          'SELECT * FROM users WHERE id = $1',
40          [params.userId]
41        );
42        result = r.rows[0];
43      } else if (action === 'createUser') {
44        const r = await client.query(
45          'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',
46          [params.name, params.email]
47        );
48        result = r.rows[0];
49      } else if (action === 'updateUser') {
50        await client.query(
51          'UPDATE users SET name = $1 WHERE id = $2',
52          [params.name, params.userId]
53        );
54        result = { success: true };
55      } else {
56        res.status(400).json({ error: 'Unknown action' });
57        return;
58      }
59    } finally {
60      client.release();
61    }
62    res.json({ success: true, data: result });
63  } catch (err) {
64    console.error('DB error:', err);
65    res.status(500).json({ success: false, error: err.message });
66  }
67});
68
69// Set config: firebase functions:config:set \
70//   db.host='your.db.host' db.name='mydb' \
71//   db.user='dbuser' db.password='dbpass'

External databases (Airtable, MySQL, PostgreSQL) do not support real-time listeners or offline access. If a user opens your FlutterFlow app without internet connectivity, they see a blank page. Add Firestore caching to solve this. In your Cloud Function (or in a separate scheduled Cloud Function), after fetching data from the external database, write it to a Firestore mirror collection. For example, after getUsers returns records, loop through them and write each to Firestore users_cache/{id}. In FlutterFlow, your primary Backend Query reads from users_cache (Firestore) for instant offline-capable display. A secondary Background sync triggers the Cloud Function every 15-30 minutes via a Firestore timestamp comparison: if lastSyncedAt is more than 15 minutes ago, call the sync Cloud Function. Add a pull-to-refresh gesture on your lists that forces a Cloud Function call and refreshes the Firestore cache. This architecture gives you offline support, instant loading, and fresh data on demand — the best of both worlds.