Canva

Go to developers.canva.com and sign in with your Canva account. Click 'Create an integration' and fill in the integration name, description, and logo. Under OAuth 2.0 settings, add your Firebase Cloud Function URL as the redirect URI (you'll deploy the function in the next step — use a placeholder like https://us-central1-your-project.cloudfunctions.net/canvaOAuth for now and update it after deployment). Select the OAuth scopes your app needs: at minimum 'design:content:read' to list designs, 'asset:read' to access brand assets, and 'design:content:write' or 'design:meta:read' depending on your use case. After saving, copy the Client ID (public) and the Client Secret (private, shown only once — store it in your password manager immediately). The Client ID can go into your Firebase Cloud Function's environment config; the Client Secret must be stored as a Firebase Secret — never in plaintext.

This is the core of the Canva integration — the proxy that handles everything sensitive: OAuth token exchange, token storage, refresh, and export status polling with backoff. The Firebase Cloud Function is deployed to your Firebase project (Blaze plan required for outbound HTTP calls in Cloud Functions). The proxy exposes three endpoints: (1) /canvaOAuth — the OAuth redirect URI that Canva calls with the authorization code; this function exchanges the code for tokens using Canva's token endpoint and stores them securely in Firestore keyed to a session or user ID. (2) /canvaApi — a pass-through that attaches the current access token (refreshing it if expired) to any Canva Connect API request and returns the response to FlutterFlow. (3) /canvaExport — triggers a POST /exports job, polls GET /exports/{exportId} with exponential backoff until status is 'success', and returns the download URL. Store your Canva Client ID and Client Secret as Firebase Secrets using the Firebase CLI: firebase functions:secrets:set CANVA_CLIENT_ID and firebase functions:secrets:set CANVA_CLIENT_SECRET. Set CANVA_REDIRECT_URI to your deployed function URL. Deploy the functions and update your Canva integration's redirect URI with the actual deployed URL. If you'd prefer to skip building this proxy yourself, RapidDev's team sets up FlutterFlow integrations like this routinely — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function — canvaExport endpoint (Node.js)
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const fetch = require('node-fetch');
5const admin = require('firebase-admin');
6
7const CANVA_CLIENT_ID = defineSecret('CANVA_CLIENT_ID');
8const CANVA_CLIENT_SECRET = defineSecret('CANVA_CLIENT_SECRET');
9
10// Poll export job with exponential backoff
11async function pollExport(accessToken, exportId, maxAttempts = 10) {
12  let delay = 2000; // start at 2 seconds
13  for (let i = 0; i < maxAttempts; i++) {
14    await new Promise((r) => setTimeout(r, delay));
15    const res = await fetch(
16      `https://api.canva.com/rest/v1/exports/${exportId}`,
17      { headers: { Authorization: `Bearer ${accessToken}` } }
18    );
19    const data = await res.json();
20    if (data.job?.status === 'success') {
21      return data.job?.urls?.[0] ?? null;
22    }
23    if (data.job?.status === 'failed') throw new Error('Export failed');
24    delay = Math.min(delay * 1.5, 15000); // cap at 15 seconds
25  }
26  throw new Error('Export timed out');
27}
28
29exports.canvaExport = onRequest(
30  { secrets: [CANVA_CLIENT_ID, CANVA_CLIENT_SECRET] },
31  async (req, res) => {
32    res.set('Access-Control-Allow-Origin', '*');
33    if (req.method === 'OPTIONS') return res.status(204).send('');
34
35    const { designId, format, userId } = req.body;
36    // Retrieve stored access token from Firestore
37    const db = admin.firestore();
38    const tokenDoc = await db.collection('canvaTokens').doc(userId).get();
39    const accessToken = tokenDoc.data()?.accessToken;
40    if (!accessToken) return res.status(401).json({ error: 'Not authenticated' });
41
42    // Start export job
43    const exportRes = await fetch('https://api.canva.com/rest/v1/exports', {
44      method: 'POST',
45      headers: {
46        Authorization: `Bearer ${accessToken}`,
47        'Content-Type': 'application/json',
48      },
49      body: JSON.stringify({
50        design_id: designId,
51        format: { type: format || 'png' },
52      }),
53    });
54    const exportData = await exportRes.json();
55    const exportId = exportData.job?.id;
56    if (!exportId) return res.status(500).json({ error: 'Export job creation failed' });
57
58    const downloadUrl = await pollExport(accessToken, exportId);
59    return res.json({ url: downloadUrl });
60  }
61);

With the proxy running, set up FlutterFlow API Calls that communicate with your Firebase Functions — not with Canva directly. In FlutterFlow, click API Calls in the left navigation, then + Add → Create API Group. Name it 'CanvaProxy' and set the Base URL to your Firebase Cloud Functions base URL (e.g., https://us-central1-your-project.cloudfunctions.net). No shared auth headers are needed here since the proxy handles Canva authentication internally. Add three API Calls to the group: 1. 'Get Designs' — GET /canvaApi with a query parameter endpoint set to '/designs' (or pass it as a body param if your proxy uses POST). Parse the response JSON for fields like id, title, thumbnail_url, created_at, and updated_at. Map these into a FlutterFlow Data Type named 'CanvaDesign'. 2. 'Start Export' — POST /canvaExport with a JSON body containing designId (String variable), format (String, e.g., 'png'), and userId (String, the logged-in user's ID). The response will be a JSON object with a url field containing the completed download URL (the proxy blocks until the export is done). 3. 'Get Brand Assets' — GET /canvaApi with the endpoint parameter set to '/assets'. Parse asset fields (id, name, url, type) into a 'CanvaAsset' Data Type. In the Response & Test tab for each call, paste a sample response to auto-generate JSON paths. Test each call using the Test API Call button — you'll need to have at least one OAuth flow completed and a userId stored in Firestore for the export call to work.

1{
2  "Group Name": "CanvaProxy",
3  "Base URL": "https://us-central1-your-project.cloudfunctions.net",
4  "Calls": [
5    {
6      "Name": "Get Designs",
7      "Method": "GET",
8      "Endpoint": "/canvaApi",
9      "Query Params": { "endpoint": "/designs" },
10      "JSON Paths": {
11        "id": "$.items[*].id",
12        "title": "$.items[*].title",
13        "thumbnailUrl": "$.items[*].thumbnail.url",
14        "updatedAt": "$.items[*].updated_at"
15      }
16    },
17    {
18      "Name": "Start Export",
19      "Method": "POST",
20      "Endpoint": "/canvaExport",
21      "Body": {
22        "designId": "[variable:designId]",
23        "format": "[variable:format]",
24        "userId": "[variable:userId]"
25      },
26      "JSON Paths": {
27        "downloadUrl": "$.url"
28      }
29    }
30  ]
31}

The Canva OAuth flow requires the user to open a browser to authorize your app. In FlutterFlow, this is handled by a Custom Action using the url_launcher package. When the user taps 'Connect Canva' in your app, the Custom Action opens the Canva authorization URL in the device's default browser (or a WebView). Your Firebase proxy generates the authorization URL with the correct state parameter and scopes. In FlutterFlow, go to Custom Code → + Add → Action. Name it 'LaunchCanvaOAuth'. Add url_launcher as a dependency in the Dependencies field. The action takes one String argument: authUrl (the full Canva authorization URL returned by your proxy). The Dart code calls launchUrl to open it. The user completes authorization on Canva's website, and Canva redirects to your Firebase Cloud Function redirect URI with the authorization code. The function exchanges the code for tokens and stores them in Firestore. To trigger the flow from FlutterFlow: add a 'Connect Canva' button on your account screen. Set up an Action Flow: first, make an API Call to your proxy's /canvaAuthUrl endpoint (which generates the state-signed auth URL), then pass the returned URL string to the LaunchCanvaOAuth Custom Action. After the user returns to the app (you can detect this with a deep link or by checking Firestore for a token on app resume), show the design gallery.

1import 'package:flutter/material.dart';
2import 'package:url_launcher/url_launcher.dart';
3
4Future<void> launchCanvaOAuth(String authUrl) async {
5  final uri = Uri.parse(authUrl);
6  if (await canLaunchUrl(uri)) {
7    await launchUrl(
8      uri,
9      mode: LaunchMode.externalApplication, // opens in system browser
10    );
11  } else {
12    throw Exception('Could not launch Canva authorization URL: $authUrl');
13  }
14}

With the API Calls configured, build the design gallery screen in FlutterFlow. Add a ListView widget to your screen. In the Generate Dynamic Children section, select Backend Query and choose your 'Get Designs' API Call from the CanvaProxy group. Pass the current user's ID if your proxy requires it for authentication. FlutterFlow will iterate over the list of CanvaDesign items returned. For each list item, add a Card widget containing: a Network Image widget bound to the CanvaDesign.thumbnailUrl field; a Text widget for the design title bound to CanvaDesign.title; and an 'Export' button. On the Export button's On Tap action, open a bottom sheet asking the user to choose a format (PNG or PDF), then call the 'Start Export' API Call with the selected design's ID, the chosen format, and the current user's ID. While the export is in progress, show a CircularProgressIndicator. When the API Call returns the download URL, either open it with a url_launcher Custom Action (for viewing in browser) or download it to the device using the http package in a Custom Action. For pulling brand assets into a separate tab, follow the same pattern with the 'Get Brand Assets' call and a separate GridView layout. Filter assets by type (image, video, audio) using a FlutterFlow Conditional Visibility rule on each card. Respect Canva's per-minute rate limits — avoid batch-exporting multiple designs simultaneously; queue exports sequentially using a Page State variable to track export progress.