Algolia

Log in to your Algolia dashboard at dashboard.algolia.com. In the left sidebar, click 'API Keys.' You will see three types of keys: 'Admin API Key' (labeled with a warning — this has full write access and must never leave your server), 'Search-Only API Key' (explicitly safe for client-side use, labeled 'Can only be used to perform search operations'), and any custom keys you have created. Copy the Search-Only API Key and your Application ID (shown at the top of the API Keys page, a short alphanumeric string like 'YourAppId'). These two values are what go into FlutterFlow's API Group headers. If you want to restrict the search-only key further — for example, to a specific index or to include only certain response fields — click 'New API Key' and configure an index-restricted key. The restriction is optional but reduces scope if the key is ever exposed. Never copy the Admin API Key for FlutterFlow — that key can delete your entire index and must only ever exist inside a server-side environment like a Firebase Cloud Function.

In your FlutterFlow project, click 'API Calls' in the left navigation toolbar. Click '+ Add' → 'Create API Group.' Name the group 'AlgoliaSearch.' In the 'Base URL' field, enter `https://{APP_ID}-dsn.algolia.net` — replace `{APP_ID}` with your actual Algolia Application ID. For example, if your Application ID is `ABCD1234`, the base URL is `https://ABCD1234-dsn.algolia.net`. Note the `-dsn` part — this is the read-optimized DSN routing endpoint that gives you the lowest latency globally. Do not use the plain `.algolia.net` base URL for search calls. Now click the 'Headers' tab inside the API Group. Click '+ Add Header' and add: Name = `X-Algolia-Application-Id`, Value = your Application ID (e.g., `ABCD1234`). Add a second header: Name = `X-Algolia-API-Key`, Value = your search-only API key. Add a third header: Name = `Content-Type`, Value = `application/json`. These three headers are sent with every API Call in this group. Click 'Save.' The group is now configured. Both Algolia headers are safe to store here because the search-only key is designed for client exposure — this is different from how you handle other API keys in FlutterFlow.

1{
2  "api_group_name": "AlgoliaSearch",
3  "base_url": "https://{YOUR_APP_ID}-dsn.algolia.net",
4  "headers": [
5    { "name": "X-Algolia-Application-Id", "value": "{YOUR_APP_ID}" },
6    { "name": "X-Algolia-API-Key", "value": "{YOUR_SEARCH_ONLY_KEY}" },
7    { "name": "Content-Type", "value": "application/json" }
8  ]
9}

Inside the 'AlgoliaSearch' API Group, click '+ Add' → 'Create API Call.' Name it 'SearchIndex.' Set the method to POST. In the 'Endpoint' field, enter `/1/indexes/{index}/query` — replace `{index}` with your actual Algolia index name (for example `/1/indexes/products/query`). Click 'Variables' and add a variable: name = `searchQuery`, type = String, required = true. This variable will be filled in at runtime from the user's search input. Click 'Body' and set body type to JSON. Enter the following body: `{ "query": "{{searchQuery}}" }`. You can also add optional parameters to the body to customize search behavior — for example, `"hitsPerPage": 10` to limit results and `"typoTolerance": true` (enabled by default). Click 'Response & Test.' In the test input field for `searchQuery`, type a word that should match records in your index. Click 'Test API Call.' A successful call returns a 200 status with a JSON body containing a `hits` array. Each item in `hits` has an `objectID` field (Algolia's internal ID) plus all the fields from your original records. Click 'Generate JSON Paths.' FlutterFlow creates path extractors for `$.hits` (the array) and `$.hits[0].{fieldName}` for each field in the first hit. In your FlutterFlow Data Types (App Settings → Custom Data Types), define a SearchResult type with fields matching your Algolia record schema (title, description, imageUrl, etc.).

1{
2  "api_call_name": "SearchIndex",
3  "method": "POST",
4  "endpoint": "/1/indexes/products/query",
5  "variables": [
6    { "name": "searchQuery", "type": "String", "required": true }
7  ],
8  "body": {
9    "query": "{{searchQuery}}",
10    "hitsPerPage": 10,
11    "attributesToRetrieve": ["title", "description", "imageUrl", "price"]
12  },
13  "response_json_paths": [
14    { "field": "hits", "path": "$.hits", "type": "List<SearchResult>" },
15    { "field": "nbHits", "path": "$.nbHits", "type": "Integer" }
16  ]
17}

Navigate to your search page in FlutterFlow. Add a TextField widget at the top of the page — give it a label like 'Search' and a search icon prefix. Below it, add a ListView. Click the ListView and open the Backend Query panel → '+ Add Query' → 'API Request' → select 'AlgoliaSearch → SearchIndex.' Map the `searchQuery` variable to the TextField's current value using the variable picker. This creates a backend query that automatically re-fires when the text field value changes. For the search-as-you-type debounce — to avoid firing a request on every single keystroke — create a page state variable (String, named `debouncedQuery`, default empty string). On the TextField's onChange action, add 'Wait' (200ms) then 'Update Page State' to set `debouncedQuery` to the TextField value. Point the ListView backend query to the `debouncedQuery` page variable instead of the TextField directly. This 200ms delay means search only fires after the user pauses typing. Inside the ListView, add a Card widget and inside it, add Text widgets bound to the result fields from 'Item from Repeating Widget' → your SearchResult Data Type fields (result.title, result.description, etc.). For image fields, use an Image widget bound to result.imageUrl.

The search-only key in FlutterFlow lets users search but cannot add or update records. All indexing (pushing data into Algolia) must happen server-side using the Admin API key, which must never go in the FlutterFlow client. Set up indexing in a Firebase Cloud Function triggered by Firestore or Supabase writes. For Firestore: create a Cloud Function triggered by `onDocumentCreated` (and `onDocumentUpdated`, `onDocumentDeleted`) for your data collection. Inside the function, use the Algolia JavaScript client (`algoliasearch` package) with the Admin API key stored in the function's environment variables. On create/update, call `index.saveObject()` with the document data and the Firestore document ID as `objectID`. On delete, call `index.deleteObject()`. This keeps Algolia in sync automatically whenever your source data changes. Deploy the function to Firebase. The FlutterFlow app only ever reads from Algolia using the search-only key — writing always goes through the function. If you want help setting up the Firestore-to-Algolia sync pipeline, RapidDev's team works on FlutterFlow integrations like this regularly — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function: sync Firestore writes to Algolia
2// Add package: algoliasearch
3const functions = require('firebase-functions');
4const algoliasearch = require('algoliasearch');
5
6const client = algoliasearch(
7  process.env.ALGOLIA_APP_ID,
8  process.env.ALGOLIA_ADMIN_KEY   // Admin key — server-side only
9);
10const index = client.initIndex('products');
11
12// Index new documents
13exports.onProductCreated = functions.firestore
14  .document('products/{productId}')
15  .onCreate(async (snapshot, context) => {
16    const data = snapshot.data();
17    await index.saveObject({ objectID: context.params.productId, ...data });
18  });
19
20// Update modified documents
21exports.onProductUpdated = functions.firestore
22  .document('products/{productId}')
23  .onUpdate(async (change, context) => {
24    const data = change.after.data();
25    await index.saveObject({ objectID: context.params.productId, ...data });
26  });
27
28// Remove deleted documents
29exports.onProductDeleted = functions.firestore
30  .document('products/{productId}')
31  .onDelete(async (snapshot, context) => {
32    await index.deleteObject(context.params.productId);
33  });