How to Integrate FlutterFlow with Salesforce CRM

In your Salesforce org, go to Setup (gear icon top-right) → App Manager → New Connected App. Fill in: Connected App Name (e.g., FlutterFlowMobile), Contact Email (your email), Enable OAuth Settings (check the box), Callback URL (https://login.salesforce.com/services/oauth2/success). Under Selected OAuth Scopes, add: Access and manage your data (api), Perform requests at any time (refresh_token, offline_access). Save. Salesforce takes 2-10 minutes to activate the app. After activation, click Manage → View Consumer Key and Consumer Secret — copy both. These are your client_id and client_secret for OAuth. In your Firebase project, go to Cloud Functions → open your functions/index.js file (or create it) and store these as environment config: run firebase functions:config:set salesforce.client_id='YOUR_ID' salesforce.client_secret='YOUR_SECRET' salesforce.username='your@email.com' salesforce.password='yourpassword+securitytoken' from your terminal. The security token is found in Salesforce: Settings (top-right avatar) → My Personal Information → Reset My Security Token.

Create a Cloud Function named salesforce that authenticates with Salesforce's username-password OAuth flow and proxies requests. The function accepts a POST request from FlutterFlow with a JSON body specifying the Salesforce operation: {action: 'getContacts'}, {action: 'createLead', data: {...}}, {action: 'updateOpportunity', id: '...', data: {...}}. The function first calls Salesforce's token endpoint to get a fresh access_token and instance_url, then uses those to make the actual API call, then returns the result to FlutterFlow. Cache the access token in Firestore (with the expiry time) and reuse it until 5 minutes before expiry to avoid a new OAuth call on every request.

1// functions/index.js — Salesforce Cloud Function proxy
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5
6admin.initializeApp();
7
8const SF_CONFIG = {
9  loginUrl: 'https://login.salesforce.com',
10  apiVersion: 'v58.0',
11};
12
13// Get or refresh Salesforce access token
14async function getSalesforceToken() {
15  const db = admin.firestore();
16  const tokenDoc = await db.collection('_sf_tokens').doc('current').get();
17  const now = Date.now();
18
19  // Reuse cached token if valid for 5+ more minutes
20  if (tokenDoc.exists) {
21    const { accessToken, instanceUrl, expiresAt } = tokenDoc.data();
22    if (expiresAt > now + 300000) {
23      return { accessToken, instanceUrl };
24    }
25  }
26
27  // Request new token via username-password flow
28  const cfg = functions.config().salesforce;
29  const params = new URLSearchParams({
30    grant_type: 'password',
31    client_id: cfg.client_id,
32    client_secret: cfg.client_secret,
33    username: cfg.username,
34    password: cfg.password,
35  });
36  const resp = await axios.post(
37    `${SF_CONFIG.loginUrl}/services/oauth2/token`,
38    params.toString(),
39    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
40  );
41
42  const { access_token, instance_url } = resp.data;
43  // Cache token — Salesforce tokens valid for ~2 hours
44  await db.collection('_sf_tokens').doc('current').set({
45    accessToken: access_token,
46    instanceUrl: instance_url,
47    expiresAt: now + 7200000, // 2 hours
48  });
49  return { accessToken: access_token, instanceUrl: instance_url };
50}
51
52exports.salesforce = functions.https.onRequest(async (req, res) => {
53  res.set('Access-Control-Allow-Origin', '*');
54  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
55
56  try {
57    const { action, id, data, query } = req.body;
58    const { accessToken, instanceUrl } = await getSalesforceToken();
59    const base = `${instanceUrl}/services/data/${SF_CONFIG.apiVersion}`;
60    const headers = { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' };
61
62    let result;
63    if (action === 'getContacts') {
64      const soql = `SELECT Id,Name,Email,Phone,Account.Name FROM Contact ORDER BY LastModifiedDate DESC LIMIT 50`;
65      const r = await axios.get(`${base}/query?q=${encodeURIComponent(soql)}`, { headers });
66      result = r.data.records;
67    } else if (action === 'createLead') {
68      const r = await axios.post(`${base}/sobjects/Lead`, data, { headers });
69      result = r.data;
70    } else if (action === 'updateOpportunity') {
71      await axios.patch(`${base}/sobjects/Opportunity/${id}`, data, { headers });
72      result = { success: true };
73    } else if (action === 'getOpportunities') {
74      const soql = `SELECT Id,Name,StageName,Amount,CloseDate,AccountId FROM Opportunity ORDER BY LastModifiedDate DESC LIMIT 50`;
75      const r = await axios.get(`${base}/query?q=${encodeURIComponent(soql)}`, { headers });
76      result = r.data.records;
77    }
78    res.json({ success: true, data: result });
79  } catch (err) {
80    console.error('Salesforce CF error:', err.response?.data || err.message);
81    res.status(500).json({ success: false, error: err.message });
82  }
83});

In FlutterFlow, go to API Manager → Add API Group. Name it SalesforceProxy. Set the Base URL to your deployed Cloud Function URL — it looks like https://us-central1-{your-project}.cloudfunctions.net. Set the Method to POST. Under Headers, add Content-Type: application/json. Add an individual API Call named getContacts. Under Request Body, add a JSON body: {"action": "getContacts"}. Click Test — the response should show your Salesforce contacts as a JSON array. Similarly add createLead with body {"action": "createLead", "data": {"FirstName": "[firstName]", "LastName": "[lastName]", "Company": "[company]", "Email": "[email]"}} using FlutterFlow's variable syntax [variableName] for the dynamic fields. Add updateOpportunity with body {"action": "updateOpportunity", "id": "[opportunityId]", "data": {"StageName": "[stageName]"}}. Extract response JSON paths: for getContacts, FlutterFlow will parse the data array — mark the fields you need (Id, Name, Email, Phone) in the response inspector.

Create a Contacts page in FlutterFlow. Add a Backend Query to the page using the getContacts API call. Add a ListView widget — in its properties, click Generate Dynamic Children and bind to the query result's data array. Each generated child is a ContactCard component: add a Column widget containing a Text widget bound to item.Name, a Row with an email icon + Text bound to item.Email, a phone icon + Text bound to item.Phone, and a Text bound to item.Account.Name in grey. Add an onTap action to the Column that navigates to a ContactDetail page passing item.Id and item.Name as page parameters. For lead creation: add a floating action button on the Contacts page. On Tap: Show Bottom Sheet containing a form with TextFields for firstName, lastName, company, and email, plus a Submit Button. Submit Button Action Flow: call createLead API with the TextField values, show a SnackBar 'Lead created in Salesforce', dismiss the bottom sheet, and refresh the Backend Query on the parent page.

Mobile apps need offline access — if the user opens the app on the subway with no signal, they should still see their contact list from the last sync. Add a syncSalesforceData Cloud Function that fetches contacts and opportunities from Salesforce and writes them to Firestore collections sf_contacts and sf_opportunities. Schedule it with Cloud Scheduler to run every 15 minutes using a Pub/Sub trigger. In FlutterFlow, change the Backend Query on the Contacts page to use Firestore (read from sf_contacts collection) instead of the direct API call — this gives instant display from Firestore cache. Add a pull-to-refresh gesture on the ListView: On Refresh → call the SalesforceProxy getContacts API → write each contact to Firestore sf_contacts/{id} document. The Cloud Scheduler ensures data stays current even when the user does not manually refresh.