Basecamp

Open your browser and navigate to https://integrate.37signals.com. Sign in with your Basecamp account credentials. Click 'Register an application' (or 'New App'). Fill in the form: - Application name: your app's name (e.g., 'Acme Team Dashboard') - Company/your name: your company name - Website URL: your company or product website - Redirect URI: this is the HTTPS URL of the Firebase Cloud Function you are about to create — for now, enter a placeholder like https://us-central1-YOUR-PROJECT.cloudfunctions.net/basecampOAuth and update it after deploying the function - Product description: briefly describe what the app does After submitting, 37signals will display your Client ID and Client Secret. Copy both to a secure location — your password manager, not a notes file. The client secret is shown only once in some flows, so do not navigate away before saving it. Also note your Basecamp Account ID. When you log into Basecamp, your URL is https://3.basecamp.com/ACCOUNT_ID — the number after the domain is your account ID. This appears in every API endpoint URL. If you manage multiple accounts, you need the ID for each account you want to query.

The Firebase Cloud Function is the heart of this integration. It does three things: (1) handles the OAuth callback from Basecamp after the user approves access, (2) exchanges the authorization code for an access token and refresh token, and (3) provides a /token endpoint your FlutterFlow app can call to get a fresh access token at any time. In your Firebase project's console, go to Functions and click 'Get started' or 'Add function'. In the Firebase Functions code editor (or your local Firebase project if you develop locally), create the function shown in the code block below. Deploy it using the Firebase console deploy button or your usual deployment method. After deploying, go back to integrate.37signals.com and update the redirect URI in your app registration to the actual deployed function URL: https://us-central1-YOUR-PROJECT.cloudfunctions.net/basecampOAuth. To trigger the initial OAuth flow, your FlutterFlow app needs to open a browser to the Basecamp authorization URL. Use a Custom Action (Dart) with the url_launcher package to open: https://launchpad.37signals.com/authorization/new?type=web_server&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_FUNCTION_URL. The user approves access in their Basecamp browser session, gets redirected to your Cloud Function, and the function completes the exchange. From that point on, FlutterFlow calls your /token endpoint (or you cache the token in Firestore) to get a valid Bearer token.

1// Firebase Cloud Function — Basecamp OAuth broker (Node.js, index.js)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5admin.initializeApp();
6const db = admin.firestore();
7
8const CLIENT_ID = functions.config().basecamp.client_id;
9const CLIENT_SECRET = functions.config().basecamp.client_secret;
10const REDIRECT_URI = functions.config().basecamp.redirect_uri;
11
12// Step 1: OAuth callback — exchange code for token
13exports.basecampOAuth = functions.https.onRequest(async (req, res) => {
14  const code = req.query.code;
15  if (!code) { res.status(400).send('Missing code'); return; }
16
17  try {
18    const tokenRes = await axios.post(
19      'https://launchpad.37signals.com/authorization/token',
20      null,
21      { params: { type: 'web_server', client_id: CLIENT_ID,
22          client_secret: CLIENT_SECRET, redirect_uri: REDIRECT_URI, code } }
23    );
24    const { access_token, refresh_token, expires_in } = tokenRes.data;
25    await db.collection('basecampTokens').doc('default').set({
26      access_token, refresh_token,
27      expires_at: Date.now() + (expires_in * 1000)
28    });
29    res.send('Authorization complete. You can close this tab.');
30  } catch (e) {
31    res.status(500).send('Token exchange failed: ' + e.message);
32  }
33});
34
35// Step 2: Token endpoint called by FlutterFlow
36exports.basecampToken = functions.https.onRequest(async (req, res) => {
37  res.set('Access-Control-Allow-Origin', '*');
38  const doc = await db.collection('basecampTokens').doc('default').get();
39  const { access_token, refresh_token, expires_at } = doc.data();
40
41  if (Date.now() > expires_at - 60000) {
42    // Refresh the token
43    const r = await axios.post(
44      'https://launchpad.37signals.com/authorization/token',
45      null,
46      { params: { type: 'refresh', client_id: CLIENT_ID,
47          client_secret: CLIENT_SECRET, refresh_token } }
48    );
49    await db.collection('basecampTokens').doc('default').update({
50      access_token: r.data.access_token,
51      expires_at: Date.now() + (r.data.expires_in * 1000)
52    });
53    res.json({ token: r.data.access_token });
54  } else {
55    res.json({ token: access_token });
56  }
57});

Open your FlutterFlow project. In the left navigation, click API Calls → + Add → Create API Group. Name it 'Basecamp'. In the Base URL field, enter: https://3.basecampapi.com/YOUR_ACCOUNT_ID — replace YOUR_ACCOUNT_ID with the numeric ID from your Basecamp URL. This URL is account-scoped, not shared across all Basecamp accounts. Now add the headers in the Headers tab. You need two: 1. Authorization: Bearer {{access_token}} — this is a variable header, meaning the value comes from a FlutterFlow variable (explained next) 2. User-Agent: FlutterFlowApp/1.0 (youremail@company.com) — this is a static string; 37signals requires a User-Agent on every API request and rejects blank or generic ones In the Variables tab of the API Group (not the individual API Calls), add a group-level variable named access_token (String type). This variable will be passed in from your app's state every time you make a Basecamp API call. Your app fetches a valid token from the Firebase Cloud Function's /token endpoint and stores it in App State; then every API Call in this group picks it up automatically. To set up the token fetch: create a simple 'Initialize Basecamp' API Call inside the same group that calls https://us-central1-YOUR-PROJECT.cloudfunctions.net/basecampToken. On app launch (or before your first Basecamp call), trigger this call, parse the $.token JSON path from the response, and set it as an App State variable. All subsequent Basecamp API Group calls reference that App State variable for the Authorization header.

1// API Group configuration reference:
2// Group name: Basecamp
3// Base URL: https://3.basecampapi.com/YOUR_ACCOUNT_ID
4// Variables: access_token (String)
5// Headers:
6//   Authorization: Bearer {{access_token}}
7//   User-Agent: FlutterFlowApp/1.0 (you@company.com)
8//
9// Token fetch call (separate API Group pointing to Firebase):
10// Base URL: https://us-central1-YOUR-PROJECT.cloudfunctions.net
11// Call: GET /basecampToken
12// JSON Path: $.token → App State variable 'basecampToken'

Inside the Basecamp API Group, click + Add API Call. Name it 'Get Projects'. Set the method to GET and the endpoint to projects.json (the full URL resolves to https://3.basecampapi.com/ACCOUNT_ID/projects.json). Basecamp appends .json to most endpoints — do not forget this, as the endpoint without it returns HTML instead of JSON. In the Response & Test tab, paste a sample Basecamp projects response. Basecamp returns an array of project objects with fields like id, name, description, status, and updated_at. Click Generate JSON Paths. Useful paths: $[*].id, $[*].name, $[*].description, $[*].status. Map these to a Data Type you create called 'BasecampProject' with fields: id (Integer), name (String), description (String), status (String). For to-do lists, add a second API Call: 'Get ToDo Lists'. The endpoint pattern is buckets/{{project_id}}/todosets/{{todoset_id}}/todolists.json — Basecamp's API nests resources under 'buckets' (synonymous with projects in the API). First call /projects.json and note the todoset id from each project's dock property (it's nested), or call the bucket directly. A simpler approach for beginners: call buckets/{{project_id}}/todolists.json and pass the project ID you selected. Create a Data Type 'BasecampTodoList' with fields: id (Integer), title (String), completed_ratio (String). Map the JSON paths accordingly. Basecamp includes a completed_ratio field showing completion percentage as a string like '3/10' — great for progress indicators. Don't forget to pass the access_token group variable when testing. In the test panel, FlutterFlow prompts for variable values — enter the current valid token from your Cloud Function to see live results.

1// JSON Path mappings after pasting sample response:
2// GET /projects.json:
3// $[*].id           → BasecampProject.id (Integer)
4// $[*].name         → BasecampProject.name (String)
5// $[*].description  → BasecampProject.description (String)
6// $[*].status       → BasecampProject.status (String)
7//
8// GET /buckets/{{project_id}}/todolists.json:
9// $[*].id              → BasecampTodoList.id (Integer)
10// $[*].title           → BasecampTodoList.title (String)
11// $[*].completed_ratio → BasecampTodoList.completed_ratio (String)

On your main screen, add a ListView widget. Select it and open the Backend Query tab in the right panel. Set the query to API Call → Get Projects. FlutterFlow will call this on page load, passing the access_token from App State via the group variable. Inside the ListView, add a ListTile. Select the title Text widget → Set from Variable → 'Project Item → name'. Add the description below it similarly. For navigation: add an On Tap action to the ListTile → Navigate To → [new screen: ToDoListsScreen]. Create that screen with two parameters: project_id (Integer) and project_name (String). Pass the tapped project's id and name. On ToDoListsScreen, add another ListView backed by Get ToDo Lists, passing the project_id parameter as the API Call variable. Inside the to-do list's ListView items, you can show the completed_ratio string or parse it to display a LinearProgressBar. FlutterFlow's conditional visibility widgets let you show a green checkmark for lists with '0 remaining' status. To create a to-do via POST: add a POST API Call 'Create ToDo' with endpoint buckets/{{project_id}}/todolists/{{todolist_id}}/todos.json. Body: {"content": "{{title}}", "due_on": "{{due_date}}"}. On a form screen, wire a Button's action to this API Call, passing the relevant variables. The 201 response body contains the created todo object — map $.id to confirm creation. Keep the 50 req/sec limit in mind. If your ListView renders 20 items and each fires a sub-request for nested resources, you can hit the limit. Use paginated fetches and avoid firing API calls in a widget's build cycle — trigger them with explicit user actions or page-load queries instead.

1// POST /buckets/{{project_id}}/todolists/{{todolist_id}}/todos.json
2// Method: POST
3// Headers: inherited from API Group (Bearer + User-Agent)
4// Body (JSON):
5{
6  "content": "{{title}}",
7  "due_on": "{{due_date}}",
8  "notify": false
9}

Basecamp access tokens expire — typically after about two weeks. Your Firebase Cloud Function handles refresh automatically (the /token endpoint checks expiry and refreshes before serving the token), but your FlutterFlow app needs to handle the case where a 401 is returned mid-session if the cached token in App State is stale. Add error handling to every API Call action: in the Action Flow Editor, after the API Call node, add an If/Else conditional on the API response code. If the code is 401, add an action to call your token fetch API Call again, update the App State variable, and retry the original call once. This covers most 'session expired' scenarios. For 429 Too Many Requests (rate limit exceeded), add a Wait action (FlutterFlow's built-in Delay action) of 1-2 seconds before retrying. The Basecamp response includes RateLimit-Remaining and RateLimit-Reset headers — you cannot easily read response headers in FlutterFlow's standard API Call binding, but the Cloud Function proxy can read them and return the retry-after value in the JSON body if needed. Log errors to Firestore or a simple Snack Bar so users know when the app is rate-limited. A 'Refreshing data...' loading state during retries prevents users from thinking the app crashed. Test these flows in FlutterFlow's Test Mode by temporarily setting a wrong token to trigger a 401, then watching the retry logic execute. If you find this Cloud Function setup too complex for your timeline, RapidDev's team sets up FlutterFlow OAuth integrations like this every week — you can book a free scoping call at rapidevelopers.com/contact to discuss whether a pre-built solution fits your needs.

1// Action Flow pattern (describe in FlutterFlow Action Flow Editor):
2// 1. Call API: Get Projects (or any Basecamp call)
3// 2. Condition: API Response Code == 401
4//    TRUE branch:
5//      a. Call API: Fetch Token (Firebase /basecampToken)
6//      b. Update App State: basecampToken = response.token
7//      c. Call API: Get Projects (retry with fresh token)
8//    FALSE branch:
9//      a. Condition: API Response Code == 429
10//         TRUE: Delay 2 seconds → retry once
11//         FALSE: Bind response to ListView (success path)