Zoho CRM

Go to api-console.zoho.com and sign in with your Zoho account. Click '+ Add Client' and choose 'Self Client' from the client type options — this is Zoho's server-to-server OAuth option designed for backend integrations where there is no interactive user login. Once the self-client is created, you'll see a Client ID and Client Secret in the client details panel. Copy both — the Client Secret is a server credential and goes into your Firebase Cloud Function, not into FlutterFlow. To generate the initial refresh token, click the 'Generate Code' tab in the self-client panel. In the Scope field, enter the scopes your FlutterFlow app needs — for CRM access, use `ZohoCRM.modules.leads.CREATE,ZohoCRM.modules.leads.READ,ZohoCRM.modules.deals.READ,ZohoCRM.modules.contacts.READ`. Set the Time Duration to the maximum (e.g. 10 minutes). Click 'Create' and copy the generated grant code immediately — it expires in the time you chose. Now exchange this grant code for a refresh token by making a POST request to Zoho's token endpoint. You can do this from any HTTP client (the Postman web app or even your browser's fetch console): POST to `https://accounts.zoho.com/oauth/v2/token` (use `.eu`, `.in`, or `.com.au` for other regions) with form body params `grant_type=authorization_code`, `client_id=[your client id]`, `client_secret=[your client secret]`, and `code=[your grant code]`. The response includes a `refresh_token` — copy it. This is the long-lived secret that goes into Firebase. The initial `access_token` in this response expires in 3,600 seconds.

1// Exchange grant code for refresh token (run once, outside FlutterFlow)
2POST https://accounts.zoho.com/oauth/v2/token
3Content-Type: application/x-www-form-urlencoded
4
5grant_type=authorization_code
6&client_id=YOUR_CLIENT_ID
7&client_secret=YOUR_CLIENT_SECRET
8&code=YOUR_GRANT_CODE
9&redirect_uri=
10

Open your Firebase project in the Firebase Console. Navigate to 'Build → Functions'. The Cloud Function will hold your Zoho Client ID, Client Secret, and Refresh Token — the three values that cannot go inside the Flutter app. Create the function code shown below. It receives an HTTPS GET request from FlutterFlow, calls Zoho's region-appropriate token endpoint with the stored credentials, and returns a fresh access token as JSON. The function uses Firebase environment config to store secrets: in your local Firebase CLI terminal, run `firebase functions:config:set zoho.client_id="..." zoho.client_secret="..." zoho.refresh_token="..." zoho.region="com"` (use `eu`, `in`, or `com.au` instead of `com` for non-US accounts). After deploying, copy the function's HTTPS trigger URL — this is what FlutterFlow will call on app launch. Note: CORS headers are included in the function so that FlutterFlow web builds (running in a browser) can call it. Mobile builds don't need CORS but the headers don't hurt.

1const functions = require('firebase-functions');
2const axios = require('axios');
3
4exports.getZohoCRMToken = functions.https.onRequest(async (req, res) => {
5  res.set('Access-Control-Allow-Origin', '*');
6  if (req.method === 'OPTIONS') {
7    res.set('Access-Control-Allow-Methods', 'GET');
8    res.set('Access-Control-Allow-Headers', 'Content-Type');
9    return res.status(204).send('');
10  }
11
12  const config = functions.config().zoho;
13  const tokenUrl = `https://accounts.zoho.${config.region}/oauth/v2/token`;
14
15  try {
16    const params = new URLSearchParams();
17    params.append('refresh_token', config.refresh_token);
18    params.append('client_id', config.client_id);
19    params.append('client_secret', config.client_secret);
20    params.append('grant_type', 'refresh_token');
21
22    const response = await axios.post(tokenUrl, params);
23    return res.json({
24      access_token: response.data.access_token,
25      expires_in: response.data.expires_in
26    });
27  } catch (err) {
28    console.error('Zoho token error:', err.response?.data || err.message);
29    return res.status(500).json({ error: 'Token refresh failed' });
30  }
31});
32

Open FlutterFlow and go to the left nav → API Calls → '+ Add' → 'Create API Group'. Name it 'ZohoCRM'. Set the Base URL to your region's Zoho APIs endpoint: `https://www.zohoapis.com/crm/v7` for US, or `https://www.zohoapis.eu/crm/v7`, `https://www.zohoapis.in/crm/v7`, or `https://www.zohoapis.com.au/crm/v7` for other regions. This must match the region you used for your token endpoint in the Cloud Function. Under 'Headers', add a shared header at the API Group level: key `Authorization`, value `Zoho-oauthtoken [accessToken]`. Note the exact prefix: it is `Zoho-oauthtoken`, not `Bearer`. This is non-standard and a very common mistake. Add a Variable named `accessToken` of type String, then set the Authorization header value to `Zoho-oauthtoken [accessToken]` using FlutterFlow's variable interpolation. Now add individual API Calls inside the ZohoCRM group: 1. 'getLeads' — Method GET, endpoint `/Leads?fields=Full_Name,Email,Phone,Company,Lead_Status&per_page=50`. Parse the response JSON path `$.data` in the Response & Test tab. 2. 'createLead' — Method POST, endpoint `/Leads`. Add a JSON body with variables: `firstName`, `lastName`, `email`, `phone`, `company`. The POST body must wrap the record in the `data` array: `{"data":[{"First_Name":"[firstName]","Last_Name":"[lastName]","Email":"[email]","Phone":"[phone]","Company":"[company]"}]}`. 3. 'getDeals' — Method GET, endpoint `/Deals?fields=Deal_Name,Stage,Amount,Closing_Date&per_page=50`. Parse `$.data`. In the Response & Test tab for getLeads, paste a sample Zoho CRM response (a JSON with a `data` array containing lead objects) and click 'Generate JSON Paths' to auto-create binding paths.

1{
2  "method": "POST",
3  "endpoint": "/Leads",
4  "headers": {
5    "Authorization": "Zoho-oauthtoken [accessToken]",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "data": [
10      {
11        "First_Name": "[firstName]",
12        "Last_Name": "[lastName]",
13        "Email": "[email]",
14        "Phone": "[phone]",
15        "Company": "[company]",
16        "Lead_Source": "Mobile App"
17      }
18    ]
19  }
20}
21

Create a second API Group in FlutterFlow called 'ZohoTokenService'. Set the Base URL to your Firebase Cloud Function's HTTPS trigger URL (e.g. `https://us-central1-yourproject.cloudfunctions.net`). Add one API Call named `getToken` with Method GET and endpoint path `/getZohoCRMToken`. No headers or body needed. Next, set up App State. Click the puzzle-piece icon in the left nav → 'App State'. Add a String variable named `zohoAccessToken` with an empty initial value. This variable holds the active access token throughout the session. Wire the token fetch to app launch. Click your root page (e.g. HomePage) in the left nav. Open the Actions panel → add an action to the 'On Page Load' trigger → choose 'Backend/API Call' → select `getToken` from ZohoTokenService. In the 'Action Output Variable' section, map `$.access_token` (the JSON path in the Cloud Function response) to the App State variable `zohoAccessToken`. Whenever you use a Zoho CRM API Call in an Action Flow, pass `App State → zohoAccessToken` as the `accessToken` argument. The API Group automatically injects it into the `Authorization: Zoho-oauthtoken` header. For sessions that last longer than an hour, add a 'Refresh Token' action to any page where the user might be active for extended periods. Wire a periodic refresh using FlutterFlow's Timer widget (if needed) or add a proactive token check on page focus events.

With the token flowing, build the CRM UI. On your main page, drag a ListView onto the canvas. Select it → open 'Backend Query' → set 'Query Type' to API Call → choose `getLeads` from the ZohoCRM group. Under 'Variables', pass `App State → zohoAccessToken` as `accessToken`. Under 'Response JSON Path', enter `$.data` so the ListView iterates over each lead in the data array. Inside the ListView, add a Column widget. Add Text widgets for the lead name (bind to `$.Full_Name`) and email (`$.Email`). Add a second Text for phone (`$.Phone`). You can also add a Badge or Chip widget for `$.Lead_Status` to visually indicate the lead stage. For the create-lead form, add a new page called 'NewLeadPage'. Add a Column with TextField widgets for First Name (variable `firstName`), Last Name (`lastName`), Email (`email`), Phone (`phone`), and Company (`company`). Add a Button labeled 'Save Lead'. In the Button's Actions panel: 1. Add a 'Backend/API Call' action → choose `createLead` from ZohoCRM group. 2. Map each TextField to the corresponding variable. 3. Pass `App State → zohoAccessToken` as `accessToken`. 4. After success (check status code 201), show a Snack Bar 'Lead saved to Zoho CRM' and navigate back. 5. After failure, show an Alert Dialog with the error code and message. Zoho CRM returns 201 Created for successful POSTs (not 200), so test for 201 in your conditional actions. The response body from a create includes `$.data[0].details.id` — the new Zoho record ID if you want to store it.

Three runtime issues are common in production Zoho CRM integrations and worth handling explicitly in your FlutterFlow Action Flows. First, token expiry (INVALID_TOKEN / 401): in any Action Flow that calls a Zoho CRM endpoint, add a Conditional Action after the API Call. Check 'Status Code equals 401'. If true, call `getToken` from ZohoTokenService, update `App State → zohoAccessToken`, then re-execute the original API Call. This handles the hourly token expiry transparently. Second, region mismatch errors: if you move to a different Zoho data center or your organization migrates, you'll see `INVALID_TOKEN` even with a freshly minted token because the API domain no longer matches the token issuer. If this happens, verify your Zoho account's data center at zoho.com/accounts → profile → data center, then update both the Cloud Function's region config and the FlutterFlow API Group base URL to match. Third, API credit exhaustion: Zoho CRM limits API calls per hour on a credit-based model — approximately 3,000–10,000 per hour depending on your plan, shared across all users in the organization. A ListView that auto-refreshes every few seconds on multiple devices can exhaust this quickly. Instead, fetch data only on page load and on explicit user pull-to-refresh gestures. Cache the results in App State or Page State variables and use them to populate widgets without re-calling the API on every navigation event. If you'd rather not manage the proxy and token-refresh logic yourself, RapidDev's team builds and maintains FlutterFlow integrations like this routinely — book a free scoping call at rapidevelopers.com/contact.