Miro

Log in to Miro and go to miro.com/app/settings/user-profile/apps. Click 'Create new app'. Give your app a name — something like 'FlutterFlow Integration' — and select the team or workspace it belongs to. Click Create app. In your new app's settings page, you will see your Client ID and Client Secret. Copy both values — you will add them to your Cloud Function environment variables in the next step. The Client Secret must never appear in FlutterFlow or in your app bundle. Scroll down to the 'Permissions' section and enable the scopes your app needs. For reading boards and items, enable `boards:read` and `board:item:read`. For writing content, also enable `boards:write` and `board:item:write`. Only enable the scopes you actually need — fewer scopes means a more limited risk surface if credentials are ever compromised. Scroll to the 'Redirect URI for OAuth 2.0' section. Add the redirect URI for your Cloud Function — it will look like `https://us-central1-your-project.cloudfunctions.net/miroAuth/callback`. This is the URL that Miro will redirect to after the user authorizes your app, carrying the authorization code that your function exchanges for an access token. Note the exact URL format: your Cloud Function name followed by `/callback`. Save the app settings. You now have a Client ID, Client Secret, and the OAuth 2.0 flow configured. The Client ID is safe to reference in your FlutterFlow app; the Client Secret must go only to the Cloud Function.

Open the Firebase Console and navigate to your project's Functions section. Create a new Cloud Function named `miroProxy`. Set the trigger to HTTP. In the Runtime environment variables section, add three variables: `MIRO_CLIENT_ID` (your app's Client ID from Step 1), `MIRO_CLIENT_SECRET` (your app's Client Secret), and `MIRO_REDIRECT_URI` (your function's callback URL, e.g. `https://us-central1-your-project.cloudfunctions.net/miroProxy/callback`). The Cloud Function handles two responsibilities: (1) the OAuth authorization flow — when your FlutterFlow app initiates login, it opens the Miro authorization URL in a WebView, the user approves, and Miro redirects to your function's `/callback` path carrying a code, which the function exchanges for an access token and stores in Firestore; and (2) the API proxy — FlutterFlow calls the function's `/boards` or `/boards/{id}/items` path, the function reads the stored access token from Firestore, checks if it is expired and refreshes if needed, then forwards the request to Miro with the Authorization header. Paste the Node.js code below and deploy. The function URL (e.g. `https://us-central1-your-project.cloudfunctions.net/miroProxy`) is your FlutterFlow API Group's Base URL. Access tokens expire after a set period — Miro's OAuth provides a refresh token to get a new access token without re-authorizing. The function checks the token's expiry on each request and automatically refreshes it, so your FlutterFlow app never needs to handle token management. If you'd rather skip building the full OAuth flow, RapidDev's team implements FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

1const functions = require('firebase-functions');
2const fetch = require('node-fetch');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6const CLIENT_ID = process.env.MIRO_CLIENT_ID;
7const CLIENT_SECRET = process.env.MIRO_CLIENT_SECRET;
8const REDIRECT_URI = process.env.MIRO_REDIRECT_URI;
9
10// Step 1: Initiate OAuth — return the Miro authorization URL
11exports.miroProxy = functions.https.onRequest(async (req, res) => {
12  res.set('Access-Control-Allow-Origin', '*');
13  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
14  res.set('Access-Control-Allow-Headers', 'Content-Type');
15
16  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
17
18  const path = req.path;
19
20  // OAuth callback handler
21  if (path === '/callback') {
22    const code = req.query.code;
23    const tokenRes = await fetch('https://api.miro.com/v1/oauth/token', {
24      method: 'POST',
25      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
26      body: new URLSearchParams({
27        grant_type: 'authorization_code',
28        client_id: CLIENT_ID,
29        client_secret: CLIENT_SECRET,
30        code,
31        redirect_uri: REDIRECT_URI
32      })
33    });
34    const tokens = await tokenRes.json();
35    // Store tokens in Firestore (keyed by user/team)
36    await admin.firestore().collection('miro_tokens').doc('default').set({
37      access_token: tokens.access_token,
38      refresh_token: tokens.refresh_token,
39      expires_at: Date.now() + (tokens.expires_in * 1000)
40    });
41    res.send('Authorization successful. Return to the app.');
42    return;
43  }
44
45  // All other paths: proxy to Miro API with stored token
46  const tokenDoc = await admin.firestore().collection('miro_tokens').doc('default').get();
47  let { access_token, refresh_token, expires_at } = tokenDoc.data() || {};
48
49  // Auto-refresh if expired
50  if (!access_token || Date.now() > expires_at - 60000) {
51    const refreshRes = await fetch('https://api.miro.com/v1/oauth/token', {
52      method: 'POST',
53      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
54      body: new URLSearchParams({
55        grant_type: 'refresh_token',
56        client_id: CLIENT_ID,
57        client_secret: CLIENT_SECRET,
58        refresh_token
59      })
60    });
61    const refreshed = await refreshRes.json();
62    access_token = refreshed.access_token;
63    await admin.firestore().collection('miro_tokens').doc('default').update({
64      access_token,
65      expires_at: Date.now() + (refreshed.expires_in * 1000)
66    });
67  }
68
69  const miroRes = await fetch(`https://api.miro.com/v2${path}${req.url.includes('?') ? req.url.substring(req.url.indexOf('?')) : ''}`, {
70    method: req.method,
71    headers: {
72      'Authorization': `Bearer ${access_token}`,
73      'Content-Type': 'application/json'
74    },
75    body: req.method !== 'GET' ? JSON.stringify(req.body) : undefined
76  });
77
78  const data = await miroRes.json();
79  res.status(miroRes.status).json(data);
80});

In your FlutterFlow project, click API Calls in the left navigation. Click + Add → Create API Group. Name the group 'Miro' and set the Base URL to your Cloud Function URL from Step 2 (for example, `https://us-central1-your-project.cloudfunctions.net/miroProxy`). Because the OAuth token management happens inside the Cloud Function, FlutterFlow needs no Authorization headers — the API Group has no shared headers to configure. Inside the Miro API Group, create the following API Calls: 1. 'GetBoards' — Method: GET. Endpoint: `/boards`. No variables needed for a simple board list. This returns a paginated list of boards the authorized user has access to. 2. 'GetBoardItems' — Method: GET. Endpoint: `/boards/{{ boardId }}/items`. Add a variable named `boardId` (String). Add optional query parameters: `type=sticky_note` to filter to only sticky notes, or leave blank for all item types. This returns items on a specific board. Test each Call. For GetBoards, click Test → Run and confirm the response contains a `data` array with board objects including `id`, `name`, and `modifiedAt`. For GetBoardItems, enter a board ID from the GetBoards response in the boardId test field and confirm item data returns. Now generate JSON Paths from both responses. In the API Call's Response & Test tab, click 'Generate JSON Paths from Sample' after a successful test. FlutterFlow will create named response fields for each JSON path, which you will bind to Custom Data Type fields in the next step.

1// API Call configurations:
2
3// GetBoards:
4// Method: GET
5// Path: /boards
6// No body, no variables
7
8// Response JSON paths:
9// Board IDs:      $.data[*].id
10// Board names:    $.data[*].name
11// Modified at:    $.data[*].modifiedAt
12// View links:     $.data[*].viewLink
13
14// GetBoardItems:
15// Method: GET
16// Path: /boards/{{ boardId }}/items?type=sticky_note
17// Variable: boardId (String)
18
19// Response JSON paths:
20// Item IDs:       $.data[*].id
21// Item type:      $.data[*].type
22// Item content:   $.data[*].data.content
23// Item color:     $.data[*].style.fillColor

In your FlutterFlow project, click the Data Types section in the left navigation. Create a Custom Data Type named 'MiroBoard' with fields: `id` (String), `name` (String), `modifiedAt` (String), and `viewLink` (String — the URL to view the board in Miro). Create a second Custom Data Type named 'MiroItem' with fields: `id` (String), `type` (String), `content` (String — the text of the sticky note), and `fillColor` (String — the background color). Navigate to your boards screen. In the Action Flow Editor, wire the screen's On Load event to call the Miro → GetBoards API Call. After the call completes, store the boards list in an App State variable of type List (using the MiroBoard Custom Data Type). Add a ListView widget to the screen and set it to generate children from the App State boards list. In the list item template, add a Card with Text widgets bound to `board.name` and `board.modifiedAt`. Add a tap action on each card: navigate to a detail screen and pass the `board.id` as a parameter. On the board detail screen, wire the On Load event to call GetBoardItems with the passed `boardId` parameter. Store the items in an App State List of MiroItem. Add a ListView that renders each sticky note as a colored card — use the `item.fillColor` value to set the card's background color conditionally (FlutterFlow's Color field supports dynamic values from data), and display `item.content` in a Text widget with HTML stripped. For the WebView embed alternative: if you don't need native list rendering and just want users to see an interactive board, skip the API integration entirely. In Miro, click Share → Embed → copy the embed link. Add a WebView widget to a screen in FlutterFlow and set the URL to the Miro embed link. Users can pan, zoom, and interact with the full board without any API setup.

1// JSON path binding for MiroBoard:
2// id:           $.data[*].id
3// name:         $.data[*].name
4// modifiedAt:   $.data[*].modifiedAt
5// viewLink:     $.data[*].viewLink
6
7// JSON path binding for MiroItem:
8// id:           $.data[*].id
9// type:         $.data[*].type
10// content:      $.data[*].data.content
11// fillColor:    $.data[*].style.fillColor
12
13// Note: content may contain HTML like <p>Text</p>
14// Strip tags with a Custom Function:
15// String stripHtml(String html) {
16//   return html.replaceAll(RegExp(r'<[^>]*>'), '').trim();
17// }

Miro's OAuth access tokens expire after a period defined in the OAuth response's `expires_in` field (check current Miro documentation for the exact duration). The Cloud Function you deployed in Step 2 automatically handles token refresh using the stored refresh token, so FlutterFlow should not encounter 401 errors in normal operation. However, if the refresh token itself expires (which happens if the user has not authorized the app for an extended period) or if it is revoked in Miro, your Cloud Function will return a 401 and you will need to re-initiate the OAuth flow. In your FlutterFlow action flows, add an error check after each Miro API Call. If the response HTTP status is 401, show a message to the user ('Your Miro session has expired — please reconnect') and offer a 'Reconnect Miro' button. This button opens the Miro authorization URL in a WebView: `https://miro.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=boards:read+board:item:read`. After the user authorizes, the Cloud Function's callback handler stores the new tokens in Firestore and subsequent API calls succeed again. Add a pull-to-refresh gesture on all board and item list screens. Miro's generous 1,000 requests per minute rate limit means you can safely refresh on every pull-to-refresh without hitting limits, even for active teams checking the board frequently. Add a visible 'Last updated' timestamp below the list header so users know how current the data is. For boards that update frequently, consider a periodic background refresh: use FlutterFlow's Timer action on the screen to call GetBoardItems every 30-60 seconds while the screen is open. At 1,000 req/min this is well within limits and gives users a near-real-time view of board changes.