How to Integrate FlutterFlow with HubSpot CRM

HubSpot deprecated API keys in November 2022 — all new integrations require a Private App access token. To create one: log into HubSpot → click your account name (top-right) → Settings (gear icon) → Integrations → Private Apps → Create private app. Give it a name (e.g., FlutterFlowMobile) and a description. Under Scopes, select the permissions your app needs: crm.objects.contacts.read, crm.objects.contacts.write, crm.objects.deals.read, crm.objects.deals.write, crm.objects.companies.read. Click Create app. HubSpot shows the access token once — copy it immediately. Store it in Firebase Functions config: firebase functions:config:set hubspot.access_token='pat-na1-YOUR_TOKEN'. The access token does not expire (unlike OAuth tokens) and is scoped to only the permissions you selected. If you need to add permissions later, edit the Private App scopes and a new token is generated. Revoke the old token from the Private Apps list when you generate a new one.

Create a Cloud Function named hubspot that accepts POST requests from FlutterFlow with an action parameter. The function uses the HubSpot access token to call HubSpot's CRM API v3 at https://api.hubapi.com. Actions to handle: getContacts (GET /crm/v3/objects/contacts with properties and limit), createContact (POST /crm/v3/objects/contacts), getDeals (GET /crm/v3/objects/deals with pipeline and stage), createDeal (POST /crm/v3/objects/deals), updateDeal (PATCH /crm/v3/objects/deals/{id}), associateContactToDeal (PUT /crm/v3/associations/contact/deal/{contactId}/to/{dealId}/contact_to_deal). After fetching data, write to Firestore for offline access.

1// functions/index.js — HubSpot CRM proxy
2// Install: cd functions && npm install axios
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const axios = require('axios');
6
7admin.initializeApp();
8
9const HS_BASE = 'https://api.hubapi.com';
10
11function hubspotHeaders() {
12  return {
13    Authorization: `Bearer ${functions.config().hubspot.access_token}`,
14    'Content-Type': 'application/json',
15  };
16}
17
18exports.hubspot = functions.https.onRequest(async (req, res) => {
19  res.set('Access-Control-Allow-Origin', '*');
20  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
21
22  const { action, contactId, dealId, data, limit = 50 } = req.body;
23  const db = admin.firestore();
24  const headers = hubspotHeaders();
25  let result;
26
27  try {
28    if (action === 'getContacts') {
29      const r = await axios.get(`${HS_BASE}/crm/v3/objects/contacts`, {
30        headers,
31        params: {
32          limit,
33          properties: 'firstname,lastname,email,phone,company,lifecyclestage',
34          archived: false,
35        },
36      });
37      const contacts = r.data.results.map((c) => ({
38        id: c.id,
39        firstName: c.properties.firstname || '',
40        lastName: c.properties.lastname || '',
41        email: c.properties.email || '',
42        phone: c.properties.phone || '',
43        company: c.properties.company || '',
44        lifecycleStage: c.properties.lifecyclestage || 'lead',
45      }));
46      // Cache in Firestore
47      const batch = db.batch();
48      contacts.forEach((contact) => {
49        batch.set(db.collection('hs_contacts').doc(contact.id), {
50          ...contact, cachedAt: admin.firestore.FieldValue.serverTimestamp(),
51        });
52      });
53      await batch.commit();
54      result = contacts;
55
56    } else if (action === 'createContact') {
57      const r = await axios.post(`${HS_BASE}/crm/v3/objects/contacts`, {
58        properties: {
59          firstname: data.firstName,
60          lastname: data.lastName,
61          email: data.email,
62          phone: data.phone,
63          company: data.company,
64          hs_lead_status: 'NEW',
65          lifecyclestage: 'lead',
66        },
67      }, { headers });
68      const created = {
69        id: r.data.id,
70        ...data,
71        lifecycleStage: 'lead',
72      };
73      await db.collection('hs_contacts').doc(r.data.id).set({
74        ...created, cachedAt: admin.firestore.FieldValue.serverTimestamp(),
75      });
76      result = created;
77
78    } else if (action === 'getDeals') {
79      const r = await axios.get(`${HS_BASE}/crm/v3/objects/deals`, {
80        headers,
81        params: {
82          limit,
83          properties: 'dealname,amount,dealstage,pipeline,closedate,hs_deal_stage_probability',
84          archived: false,
85        },
86      });
87      const deals = r.data.results.map((d) => ({
88        id: d.id,
89        name: d.properties.dealname || 'Untitled Deal',
90        amount: parseFloat(d.properties.amount || 0),
91        stage: d.properties.dealstage || 'appointmentscheduled',
92        pipeline: d.properties.pipeline || 'default',
93        closeDate: d.properties.closedate || null,
94        probability: parseFloat(d.properties.hs_deal_stage_probability || 0),
95      }));
96      const batch = db.batch();
97      deals.forEach((deal) => {
98        batch.set(db.collection('hs_deals').doc(deal.id), {
99          ...deal, cachedAt: admin.firestore.FieldValue.serverTimestamp(),
100        });
101      });
102      await batch.commit();
103      result = deals;
104
105    } else if (action === 'updateDeal') {
106      await axios.patch(
107        `${HS_BASE}/crm/v3/objects/deals/${dealId}`,
108        { properties: { dealstage: data.stage, amount: data.amount?.toString() } },
109        { headers }
110      );
111      await db.collection('hs_deals').doc(dealId).update({
112        stage: data.stage, cachedAt: admin.firestore.FieldValue.serverTimestamp(),
113      });
114      result = { success: true };
115    }
116
117    res.json({ success: true, data: result });
118  } catch (err) {
119    const msg = err.response?.data?.message || err.message;
120    console.error('HubSpot CF error:', msg);
121    res.status(500).json({ success: false, error: msg });
122  }
123});

In FlutterFlow, go to API Manager → Add API Group → name it HubSpotProxy. Set Base URL to your Cloud Function URL. Method: POST. Header: Content-Type: application/json. Add API Calls: getContacts with body {"action": "getContacts", "limit": 50}, createContact with body {"action": "createContact", "data": {"firstName": "[firstName]", "lastName": "[lastName]", "email": "[email]", "phone": "[phone]", "company": "[company]"}}. Test each call and verify the response. Build the lead capture form: add a page or bottom sheet with TextFields for first name, last name, company, email, and phone. Add a Page State variable for each field. The Submit Button Action Flow: call createContact API with the Page State values → on success show SnackBar 'Contact added to HubSpot' → navigate to the Contacts page or dismiss the sheet. This is the core use case: a salesperson meets someone at an event, opens the app, and creates a HubSpot contact in under 30 seconds.

Create a Deals page in FlutterFlow with a Backend Query reading from hs_deals Firestore collection, ordered by closeDate ascending. Display deals in a ListView showing: deal name (bold), amount (formatted as currency), stage (as a colored badge using Conditional Value), and close date. For stage updating: when the user taps a deal item, navigate to a DealDetail page passing the deal document reference as a parameter. On the DealDetail page, show all deal properties and add a DropDown for the deal stage populated with your HubSpot pipeline stages. The standard HubSpot default pipeline stages are: appointmentscheduled (Appointment Scheduled), qualifiedtobuy (Qualified To Buy), presentationscheduled (Presentation Scheduled), decisionmakerboughtin (Decision Maker Bought-In), contractsent (Contract Sent), closedwon (Closed Won), closedlost (Closed Lost). When the user selects a new stage from the DropDown: call updateDeal API with the deal ID and new stage, show a SnackBar 'Stage updated in HubSpot', and update the local Firestore hs_deals document.

HubSpot workflows can trigger webhooks when deal or contact properties change — for example, when a deal is marked Closed Won in the HubSpot web interface, trigger a webhook to your Cloud Function to update Firestore. Create a separate Cloud Function named hubspotWebhook to receive these events. Register it in HubSpot: your HubSpot account → Automation → Workflows → create or edit a workflow → Actions → Send a webhook → POST to your Cloud Function URL. The webhook payload includes the object type (contact or deal), the record ID, and the properties that changed. Your Cloud Function handler: verify the webhook signature using the HubSpot client secret (from Private App settings → Auth), extract the record ID, fetch the latest record from HubSpot API, and update the corresponding Firestore document. FlutterFlow's real-time Firestore listener picks up the change within 1-2 seconds — the deals pipeline view updates automatically when a deal moves stages in HubSpot.