Microsoft Azure

Before touching FlutterFlow, you need a publicly reachable HTTPS endpoint. In the Azure Portal, navigate to Function Apps → Create and choose the Consumption (Serverless) plan with Node.js or Python runtime. Once the Function App is provisioned, go to Functions → Create → HTTP trigger and set the Authorization level to 'Function' (which requires an API key in the request) or 'Anonymous' (if you plan to validate tokens yourself). Write the function body: it should accept a JSON request from FlutterFlow, authenticate to downstream Azure services using credentials stored in the Function's Configuration → Application Settings — never in the source code — and return a clean JSON response. For Cosmos DB reads, use the Cosmos DB client library in your Function; for Blob operations, use the Azure Storage SDK. Enable CORS on the Function App itself: in the Azure Portal, go to the Function App → API → CORS and add your FlutterFlow published domain (e.g. https://yourapp.flutterflow.app) and also https://app.flutterflow.io for web preview. Without this, FlutterFlow's web build will receive CORS errors when testing in the browser.

1// Azure Function (Node.js) — HTTP trigger example
2const { CosmosClient } = require('@azure/cosmos');
3
4module.exports = async function (context, req) {
5  // Credentials come from Application Settings, never hardcoded
6  const client = new CosmosClient(process.env.COSMOS_CONNECTION_STRING);
7  const container = client.database('mydb').container('items');
8
9  if (req.method === 'GET') {
10    const { resources: items } = await container.items.readAll().fetchAll();
11    context.res = { body: { items } };
12  } else if (req.method === 'POST') {
13    const newItem = req.body;
14    const { resource: created } = await container.items.create(newItem);
15    context.res = { status: 201, body: created };
16  }
17};

If your Azure Function needs to authenticate users or access other Azure services using OAuth2 (for example, reading from Azure Storage or Graph API on behalf of users), you need to register an app in Azure Active Directory. Go to Azure Portal → Azure Active Directory → App registrations → New registration. Name it (e.g. 'FlutterFlow Gateway'), set the redirect URI for web if needed, then note the Application (client) ID. Under Certificates & secrets, create a new client secret and immediately copy the value — Azure only shows it once. Back in your Function App's Configuration → Application Settings, add these values as environment variables (CLIENT_ID, CLIENT_SECRET, TENANT_ID). Your Function then uses these to mint OAuth2 bearer tokens via the client credentials flow when talking to other Azure services. FlutterFlow never sees these credentials: it only sends an app-level identifier (e.g., a user ID from your own auth system) to the Function, which handles the AAD token exchange entirely server-side. Azure AD tokens expire after approximately one hour; implement token refresh inside the Function, not on the client.

Now configure FlutterFlow to talk to your Azure endpoints. Click API Calls in the left navigation panel, then click the + Add button and choose Create API Group. Give this group a descriptive name, such as 'Azure Functions'. Set the Base URL to your Function App's base URL: https://{app-name}.azurewebsites.net/api. Under Headers, add a header named 'x-functions-key' and set its value to your Function's host key (found in the Azure Portal under your Function → Function Keys → default). This is a publishable-style key that authorizes requests to your Function — it is not the same as your account key or client secret, so it is acceptable to store it in an App Values constant in FlutterFlow. Next, inside the API Group, click + Add API Call. Set the Method to GET, name it 'GetItems', and set the path to /getItems (or whatever your Function endpoint is named). Click the Variables tab and add any query parameters your Function expects (e.g., userId). Switch to the Response & Test tab, paste a sample JSON response from your Function, and click Generate JSON Paths — FlutterFlow will auto-generate the path expressions you'll use to bind data to widgets. Repeat this process to create additional API Calls within the same group: one for POST (creating records), one for PUT (updating), one for DELETE. For Cosmos DB and Blob operations, create a second API Group named 'Azure Blob' with the base URL https://{account}.blob.core.windows.net, and add calls as needed.

1// Sample API Call config (JSON representation)
2{
3  "group_name": "Azure Functions",
4  "base_url": "https://myapp.azurewebsites.net/api",
5  "headers": {
6    "x-functions-key": "{{functionKey}}",
7    "Content-Type": "application/json"
8  },
9  "calls": [
10    {
11      "name": "GetItems",
12      "method": "GET",
13      "path": "/getItems",
14      "variables": ["userId"]
15    },
16    {
17      "name": "CreateItem",
18      "method": "POST",
19      "path": "/createItem",
20      "body": { "name": "{{itemName}}", "quantity": "{{qty}}" }
21    }
22  ]
23}

File uploads to Azure Blob Storage from FlutterFlow require a two-step process because the Blob Storage account key must never leave your backend. First, FlutterFlow calls an Azure Function endpoint (e.g., GET /generateSasUrl?filename=photo.jpg) that generates a short-lived Shared Access Signature URL using the Blob Storage SDK with the account key stored securely in the Function's Application Settings. The Function returns a JSON response containing the SAS URL, which is valid for a configurable period (typically 5–15 minutes). In FlutterFlow, set up this flow in the Action Flow Editor: start with a widget (e.g., an image picker button) → Actions panel → + Add Action → choose 'Upload Photo/Video' to get the file path into a local state variable. Then add a second action: API Call → your 'GenerateSasUrl' call, storing the returned SAS URL in a page-level state variable. Finally, add a third action using a Custom Action (Dart) that performs an HTTP PUT to the SAS URL with the file bytes. The SAS URL itself is not a secret — it is time-limited and scope-limited by design, so it is safe to use in Dart. After the upload, call a second Function endpoint to register the blob path in your Cosmos DB record so you can retrieve it later.

1// Azure Function: generate SAS URL (Node.js)
2const { BlobServiceClient, generateBlobSASQueryParameters, BlobSASPermissions, StorageSharedKeyCredential } = require('@azure/storage-blob');
3
4module.exports = async function (context, req) {
5  const accountName = process.env.BLOB_ACCOUNT_NAME;
6  const accountKey = process.env.BLOB_ACCOUNT_KEY;
7  const containerName = 'uploads';
8  const blobName = req.query.filename;
9
10  const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);
11  const sasToken = generateBlobSASQueryParameters({
12    containerName,
13    blobName,
14    permissions: BlobSASPermissions.parse('cw'),
15    startsOn: new Date(),
16    expiresOn: new Date(Date.now() + 10 * 60 * 1000) // 10 min
17  }, sharedKeyCredential).toString();
18
19  const sasUrl = `https://${accountName}.blob.core.windows.net/${containerName}/${blobName}?${sasToken}`;
20  context.res = { body: { sasUrl } };
21};

Azure services return verbose JSON, so careful mapping in FlutterFlow is essential. After testing your API Calls and confirming they return data, go to each API Call → Response & Test tab → Generate JSON Paths. FlutterFlow will list all the nested fields it detected. For Cosmos DB responses, results typically come under an array you defined in your Function's response shape; for Azure Functions returning Cosmos data, you might wrap them in a top-level 'items' array — set your JSON path to $.items to extract the list. Next, create a FlutterFlow Data Type (left nav → Data Types → + Add) that mirrors the fields in your response. For example, if Cosmos returns { id, name, quantity, updatedAt }, create a Data Type with those four fields using the correct types (String, String, Integer, String/DateTime). Back in your API Call definition, map the JSON path for each field to the corresponding Data Type field. Now when you drag a ListView onto your canvas and set its data source to this API Call, FlutterFlow knows the schema and auto-suggests text fields, image URLs, and date formatters for each column. For the Cosmos DB item detail page, use a Dynamic Route and pass the item id as a parameter, then make a second API Call (GET /getItem?id={{itemId}}) to fetch the full record. This pattern keeps your API calls lean and your widgets reactive.

Run your FlutterFlow app in Test mode first to catch obvious issues, but for full end-to-end validation — especially API Call behavior and any custom Dart actions — use Run mode on a device or emulator. In Test mode, FlutterFlow uses a proxy that can mask certain CORS and auth issues, so a test that passes in the browser may still fail on a real device if your Function's CORS settings are not configured correctly. For auth errors, 401 Unauthorized typically means the 'x-functions-key' header is missing or wrong, or an AAD token has expired. 403 Forbidden usually means the Function key is valid but the token lacks permission on the downstream resource. Build an error state on every page that makes API calls: check the API response code and show a user-friendly message (e.g., 'Session expired — please refresh') rather than a blank screen. Azure Functions on the Consumption plan experience cold starts — the first request after a period of inactivity can take 2–5 seconds. Add a loading indicator (CircularProgressIndicator widget or a shimmer layout) to every screen that awaits an API response. For production apps with latency-sensitive paths, consider moving those Functions to the Premium plan, which keeps instances warm. If you see timeout errors during heavy load, check the Function App's scale-out settings and increase the timeout in host.json.