ElasticSearch

Before writing any code, create an API key in Elasticsearch that has the minimum permissions your search feature needs. In Elastic Cloud, go to Kibana → Management → Security → API Keys and click 'Create API key.' Give it a name like 'flutterflow-search-proxy'. Under 'Index privileges,' specify the index name (for example 'products') and set the privileges to 'read' only — do not grant 'write', 'manage', or cluster-level permissions. Click 'Create' and copy the encoded key (the format is `base64(id:api_key)` and the header value is `ApiKey <encoded-key>`). For self-hosted Elasticsearch, create the key via the REST API: POST `/_security/api_key` with role descriptors limiting to index read. Store this key securely — you will add it to your Cloud Function as an environment variable. Never paste it into FlutterFlow. The entire purpose of this step is to minimize blast radius if the key were ever to be exposed: a read-only, index-scoped key cannot delete data, modify mappings, or access other indexes.

1POST /_security/api_key
2{
3  "name": "flutterflow-search-proxy",
4  "role_descriptors": {
5    "search_only": {
6      "cluster": [],
7      "index": [
8        {
9          "names": ["products"],
10          "privileges": ["read"]
11        }
12      ]
13    }
14  }
15}

In the Firebase console, go to Functions. If this is your first function, click 'Get Started' and follow the setup wizard. You will write the function in Node.js. The function accepts a POST request from FlutterFlow containing the user's search query, validates the caller is authenticated (using the Firebase ID token from the request Authorization header), builds the Elasticsearch Query DSL, calls the Elasticsearch `/_search` endpoint with your stored API key, and returns the results. Create the function as an HTTPS callable (functions.https.onCall) so Firebase Auth tokens are validated automatically. Store your Elasticsearch API key in the function's environment by going to Firebase console → Functions → your function → Environment variables and adding `ES_URL` (your cluster endpoint) and `ES_API_KEY` (the encoded key from Step 1). Deploy the function from the Firebase console's inline editor or via the Firebase CLI. The function should return results in a clean format — an array of objects from hits[].source — rather than the raw Elasticsearch response, which has nested metadata your FlutterFlow widgets do not need.

1// Firebase Cloud Function: Elasticsearch search proxy
2// Runtime: Node.js 20
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5
6exports.searchProducts = functions.https.onCall(async (data, context) => {
7  // Reject unauthenticated callers
8  if (!context.auth) {
9    throw new functions.https.HttpsError(
10      'unauthenticated',
11      'Must be logged in to search.'
12    );
13  }
14
15  const query = data.query || '';
16  const esUrl = process.env.ES_URL;         // e.g. https://my-cluster.es.us-east-1.aws.elastic.cloud:443
17  const esKey = process.env.ES_API_KEY;     // ApiKey <encoded-key>
18  const indexName = 'products';
19
20  const esResponse = await fetch(`${esUrl}/${indexName}/_search`, {
21    method: 'POST',
22    headers: {
23      'Content-Type': 'application/json',
24      'Authorization': `ApiKey ${esKey}`
25    },
26    body: JSON.stringify({
27      size: 10,
28      query: {
29        multi_match: {
30          query: query,
31          fields: ['title^3', 'description'],
32          fuzziness: 'AUTO'
33        }
34      }
35    })
36  });
37
38  if (!esResponse.ok) {
39    const errText = await esResponse.text();
40    throw new functions.https.HttpsError('internal', `Elasticsearch error: ${errText}`);
41  }
42
43  const esData = await esResponse.json();
44
45  // Return only the source fields — not Elasticsearch metadata
46  const results = esData.hits.hits.map(hit => ({
47    id: hit._id,
48    ...hit._source
49  }));
50
51  return { results };
52});

In your FlutterFlow project, click 'API Calls' in the left navigation toolbar. Click '+ Add' → 'Create API Group.' Name it 'ElasticsearchProxy.' For the base URL, use your Firebase Cloud Function callable endpoint — the format is `https://<region>-<project-id>.cloudfunctions.net`. Click 'Save.' Inside the group, click '+ Add' → 'Create API Call.' Name it 'SearchProducts.' Set method to POST. Set the endpoint to `/searchProducts` (matching the function name you deployed). Click 'Variables' and add a variable named `query` (String, required). Click 'Body' and set type to JSON with the body: `{ "data": { "query": "{{query}}" } }` — note the `data` wrapper, which is required by Firebase callable functions. Add a 'Content-Type: application/json' header. Firebase callable functions also require that you pass the user's ID token for authentication. In FlutterFlow, add a header variable named `Authorization` with the value 'Bearer ' followed by the Firebase current user's ID token (available in the variable picker under Authenticated User → ID Token). Click 'Response & Test,' enter a test query, and run the test. If the function validates auth, you may need to pass a real Firebase test token — alternatively, temporarily disable the auth check in your function for initial testing, then re-enable it. Click 'Generate JSON Paths' to extract the results array path: `$.results` (Array of Objects). Define a FlutterFlow custom Data Type matching your search result fields (title, description, id, etc.) and map the JSON path to that type.

1{
2  "api_group": "ElasticsearchProxy",
3  "base_url": "https://<region>-<project-id>.cloudfunctions.net",
4  "calls": [
5    {
6      "name": "SearchProducts",
7      "method": "POST",
8      "endpoint": "/searchProducts",
9      "headers": [
10        { "name": "Content-Type", "value": "application/json" }
11      ],
12      "variables": [
13        { "name": "query", "type": "String", "required": true }
14      ],
15      "body": {
16        "data": { "query": "{{query}}" }
17      },
18      "response_paths": [
19        { "field": "results", "path": "$.result.results", "type": "List<SearchResult>" }
20      ]
21    }
22  ]
23}

In FlutterFlow, go to App Settings → Custom Data Types and define a 'SearchResult' type with fields matching your Elasticsearch document source (for example: id String, title String, description String, price Double). Back in your API Call's Response tab, map the `$.result.results` array to a 'SearchResult' list type. Now build the search UI. Add a TextField widget for user input and a ListView below it. Click the ListView → Backend Query → '+ Add Query' → 'API Call' → select 'ElasticsearchProxy → SearchProducts.' Map the `query` variable to the TextField's value. This creates a query that re-fires whenever the variable changes. To avoid firing a search on every single keystroke — which would flood your Elasticsearch cluster and Firebase Function with requests — use FlutterFlow's debounce pattern: do not bind the search directly to the TextField's onChange. Instead, create a page variable (String, default empty) to hold the current search term. On the TextField's onChange action, use 'Update Page State' to set this variable. Then bind the ListView query to the page state variable using a slight delay via the Action Flow Editor's 'Wait' action (200-300ms) before updating the state. Inside the ListView, add your UI for each result: a Card with Text widgets bound to result.title and result.description, using the 'Item from Repeating Widget' source in the variable picker.

FlutterFlow's browser-based Run mode enforces CORS. Firebase Cloud Functions (HTTPS callable) include CORS headers automatically for calls from Firebase-authenticated clients, so calling a `functions.https.onCall` function from FlutterFlow's Run mode should work without additional CORS configuration. However, if you switch to a plain `functions.https.onRequest` function instead, you must add CORS headers manually using the `cors` npm package. Test your integration in Run mode first. If you see 'XMLHttpRequest error' or a CORS-related failure in the browser console, check that you are using `onCall` (not `onRequest`) or add the cors middleware. For native iOS/Android builds, CORS does not apply — test those with FlutterFlow's Test Mode or by downloading an APK/TestFlight build. Note: custom actions do not run in FlutterFlow's Run/Test preview — but this integration uses only API Calls, which do run in all preview modes.