Adobe Creative Cloud

Open developer.adobe.com in your browser and sign in with your Adobe ID. Click Create new project, then Add API, and choose the Adobe service you want to use — Content (for CC Libraries), Photoshop, or Firefly. For server-to-server integrations (which is what you need for a mobile app backend), select OAuth Server-to-Server as the credential type. Adobe will generate a Client ID and a Client Secret. Copy both values immediately — you will store them in your Firebase or Supabase environment variables, never in FlutterFlow. Also note the scopes granted to your credential: CC Libraries access needs the openid, creative_sdk, and profile scopes; Photoshop and Firefly have their own scope strings shown in the developer console. Keep this browser tab open; you will need the base URL shown for each API you added. For the Content API the base URL is https://cc-api-storage.adobe.io; for Photoshop and Firefly it is https://image.adobe.io. If you are on a trial Creative Cloud plan, some APIs may show as unavailable — confirm access in the developer console before building. Adobe applies per-service rate quotas that vary by product; check the current limits in Adobe's API documentation rather than relying on hardcoded numbers.

Because the Adobe client secret must never appear in your FlutterFlow project, you need a backend function that performs the OAuth 2.0 client credentials exchange and returns an access token. In your Firebase console open Functions → Get started, or in your Supabase project open Edge Functions. The function posts to Adobe's token endpoint (https://ims-na1.adobelogin.com/ims/token/v3) with your client_id, client_secret, and grant_type=client_credentials, plus the required scope string. Adobe responds with an access_token and expires_in value (typically 3600 seconds). Your function returns just the access_token (and optionally the expiry) as a JSON response. Store the client_id and client_secret as environment variables in Firebase (using firebase functions:config:set or the new Secrets Manager) or in Supabase's Edge Function secrets panel — never hardcode them in the function source. Deploy the function and copy its HTTPS URL. You will call this URL from FlutterFlow to obtain a fresh token whenever the app launches or detects a 401 response from Adobe. This single proxy step is the entire security foundation of the integration; every other API Call in FlutterFlow will use the token it returns.

1// Firebase Cloud Function — token exchange proxy (Node.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.adobeToken = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
8
9  const clientId = process.env.ADOBE_CLIENT_ID;
10  const clientSecret = process.env.ADOBE_CLIENT_SECRET;
11  const scope = process.env.ADOBE_SCOPE || 'openid,creative_sdk';
12
13  try {
14    const params = new URLSearchParams({
15      grant_type: 'client_credentials',
16      client_id: clientId,
17      client_secret: clientSecret,
18      scope: scope,
19    });
20    const resp = await axios.post(
21      'https://ims-na1.adobelogin.com/ims/token/v3',
22      params.toString(),
23      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
24    );
25    res.json({ access_token: resp.data.access_token, expires_in: resp.data.expires_in });
26  } catch (err) {
27    res.status(500).json({ error: 'token_fetch_failed', detail: err.message });
28  }
29});

In FlutterFlow, click API Calls in the left navigation bar, then click the + Add button and choose Create API Group. Name the first group Adobe Content API and set the Base URL to https://cc-api-storage.adobe.io. In the Headers section click + Add Header and create a key named Authorization. Set its value to Bearer {{token}} — the double curly-brace syntax tells FlutterFlow this is a runtime variable. Click + Add Variable for the group and name it token (type String). This variable will be populated from App State every time you call any endpoint in this group. Create a second API Group named Adobe Token Proxy and set its Base URL to your deployed Cloud Function URL (e.g. https://us-central1-your-project.cloudfunctions.net). Inside this group add an API Call named getToken, method GET, with no additional headers. This call returns the access_token you will store in App State. If you also need Photoshop or Firefly, create a third API Group named Adobe Image API with Base URL https://image.adobe.io, the same Authorization header with {{token}}, and the same token variable. To add individual API Calls inside the Content group: click + Add API Call, name it listLibraries, method GET, endpoint /api/v1/libraries. Add any required query variables (such as selector=assets). Click Save. Repeat for each endpoint you need (e.g. getLibraryAssets at /api/v1/libraries/{{libraryId}}/assets). Use the Response & Test tab to paste a sample Adobe JSON response and let FlutterFlow auto-generate the JSON Paths you will use for data binding.

1// Example API Call config for listing CC Library assets
2{
3  "method": "GET",
4  "endpoint": "/api/v1/libraries/{{libraryId}}/assets",
5  "headers": {
6    "Authorization": "Bearer {{token}}",
7    "X-Api-Key": "{{clientId}}"
8  },
9  "query_params": {
10    "selector": "assets"
11  }
12}

Before your CC Library screen can display images, FlutterFlow needs a valid Adobe access token. Go to App Values (left nav → App State) and create a String variable named adobeToken and a DateTime (or integer) variable named adobeTokenExpiry. These will persist across screens while the app is running. Now wire the token fetch into your main screen's OnPageLoad Action Flow. Open the Actions panel for your Screen (select the screen in the widget tree, then click the Actions tab). Add an action: Backend/API Call → select Adobe Token Proxy → getToken. In the Action output, map the returned access_token to the adobeToken App State variable. Also set adobeTokenExpiry to the current time plus the expires_in value (in seconds) so the app knows when to refresh. Next, add a Conditional Action: if adobeToken is empty OR current time is past adobeTokenExpiry, run the token fetch above; otherwise skip to the library list call. This way a screen re-visit within the token's valid window does not trigger an unnecessary network round-trip. For the CC Library list call, add another Backend/API Call action referencing the Adobe Content API listLibraries endpoint, and pass adobeToken from App State into the token variable. Map the response array to a page-level variable of type List of JSON that your ListView will consume. On 401 responses, add an error branch that clears adobeToken and re-runs the token fetch before retrying.

For the asset catalog screen: add a GridView widget and set its data source to the library assets list variable from Step 4. Inside each grid cell place an Image widget and bind its network URL to the JSON path for the asset's href or rendition URL (e.g. $.assets[0].asset.href). You may need to parse nested structures — use the JSON Path auto-generator in FlutterFlow's Response & Test tab for accuracy. Add a Text widget for the asset name bound to $.assets[0].asset.name. For Photoshop or Firefly jobs, the pattern is fundamentally different from a standard REST request-response. First, you submit the job: create an API Call in the Adobe Image API group (POST /pie/psdService/remove-background or the relevant Firefly endpoint) with a JSON body containing the input asset URL and output storage location. Adobe responds immediately with a status URL and a job ID — it does NOT return the processed image yet. Store the status URL in a page-level variable. Second, you poll the status: create a second API Call (GET {{statusUrl}}) and add a Timer action on the screen set to fire every 5 seconds. Each time the Timer fires, call the status endpoint. Check the response's status field — when it equals 'succeeded', the outputs array contains the final image URL. At that point, cancel the timer, store the image URL, and bind it to an Image widget to reveal the result. Add a maximum poll count (e.g. 20 attempts) as a safeguard so the timer does not loop indefinitely if Adobe's job queue is slow. Display a CircularProgressIndicator or animated widget while polling so users know the job is running.

Adobe access tokens are short-lived (typically 1 hour). Wire a 401 handler into every Adobe API Call's error branch in the Action Flow Editor: when the response code is 401, clear adobeToken in App State, call the proxy to fetch a new token, then retry the failed API Call once. This prevents the app from silently showing empty screens after a token expires mid-session. For the Firefly endpoint specifically, surface Adobe's usage terms in your UI. Firefly-generated images carry Adobe content and usage licensing terms — they are not royalty-free for all commercial purposes by default. Add a small disclaimer text under generated images and link to Adobe's current terms page. This protects you legally and sets correct user expectations. Test your integration on an actual device or APK, not just FlutterFlow's web Run mode. Custom Code and some API-triggered behaviors can differ between the preview iframe and a real Flutter build. For web builds specifically, be aware that Adobe's APIs may block browser-origin requests with CORS headers — since all API Calls in your integration route through a proxy or direct Bearer calls, test in Chrome DevTools Network tab to verify no CORS rejections appear. For native iOS/Android builds, CORS is not enforced by the OS. Finally, verify the App Store privacy labels for your iOS build: if you are displaying or storing Adobe user library data, this counts as user-generated content and must be declared.