Box

Open the Box Developer Console at developer.box.com and click 'Create New App'. Choose 'Custom App' and on the next screen select 'Server Authentication (with JWT)' — this is the option that allows your server to obtain tokens on behalf of the app or its users without user login prompts. Give your app a name such as 'MyFlutterFlowApp' and click 'Create App'. Once the app is created, open its Configuration tab. Under 'Application Access', choose 'App Access Only' for pure server-to-server operation (where your app manages all content) or 'App + Enterprise Access' if you want to act on behalf of managed Box users. Under 'Application Scopes', enable 'Read and write all files and folders stored in Box'. Scroll down to 'Add and Manage Public Keys' and click 'Generate a Public/Private Keypair' — this downloads a JSON config file containing your client ID, client secret, enterprise ID, and the RSA private key. Store this file securely in a password manager immediately — it is your signing credential and must never be committed to source control or placed inside FlutterFlow. Finally, go to the Box Admin Console (separate from the Developer Console), navigate to Apps → Custom Apps Manager, and click 'Authorize New App'. Paste your client ID and authorize it. Without this admin authorization step, JWT token requests will fail with an 'App not authorized' error even with a perfectly valid config file.

Because Box JWT signing cannot happen in Dart, you need a small server function that holds the config JSON and returns a short-lived Box access token to your FlutterFlow app on request. Firebase Cloud Functions is the most common choice for FlutterFlow projects because many already use Firebase as a backend. In your Firebase project, go to the Functions section and create an HTTPS function. Install the official Box Node.js SDK (box-node-sdk) in your functions directory. Store your entire Box config JSON as a secret in Firebase Secret Manager — name it BOX_CONFIG. In your function code, parse the config, initialize the Box SDK using getPreconfiguredInstance, create an enterprise client, and exchange it for an access token. Return that token as JSON. Add Firebase Auth verification to the function so only authenticated app users can request Box tokens — without this guard, anyone who discovers your function URL could request tokens. The function receives the user's Firebase ID token in the Authorization header and verifies it before proceeding. Deploy the function and note its URL — you will paste this into a FlutterFlow API Call in the next step.

1// functions/index.js — Box token proxy
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const BoxSDK = require('box-node-sdk');
5
6admin.initializeApp();
7
8exports.getBoxToken = functions.https.onRequest(async (req, res) => {
9  // Verify Firebase ID token from Authorization header
10  const authHeader = req.headers.authorization || '';
11  const idToken = authHeader.replace('Bearer ', '');
12  try {
13    await admin.auth().verifyIdToken(idToken);
14  } catch (err) {
15    return res.status(401).json({ error: 'Unauthorized' });
16  }
17
18  try {
19    const configStr = process.env.BOX_CONFIG; // set via Firebase Secret Manager
20    const config = JSON.parse(configStr);
21    const sdk = BoxSDK.getPreconfiguredInstance(config);
22    const client = sdk.getAppAuthClient('enterprise');
23    const tokenInfo = await client.exchangeToken(['root_readwrite']);
24    res.json({ access_token: tokenInfo.accessToken });
25  } catch (err) {
26    console.error('Box token error:', err);
27    res.status(500).json({ error: 'Failed to get Box token' });
28  }
29});

In FlutterFlow, open the App State section from the left nav. Create a new String variable called boxAccessToken with an initial value of empty string. This variable will hold the short-lived token returned by your proxy function and will be referenced by the Authorization header in every Box API call. Next, create an API Call to your Firebase Cloud Function proxy. Click API Calls in the left nav → + Add → Create API Call (not API Group, since this is a single standalone endpoint). Name it 'GetBoxToken', set Method to POST, and paste your Cloud Function URL as the endpoint. In the Headers tab, add Authorization with value Bearer {{userFirebaseToken}} so you can pass the logged-in user's Firebase ID token. In Response & Test, test the call and generate the JSON Path $.access_token. In your app's initialization flow (for example, in the Page Load action of your home page), add an API Call action that calls GetBoxToken. Pass the current user's Firebase ID token (available in FlutterFlow as Authentication → Current User → JWT Token) as the userFirebaseToken variable. After the API Call action, add a Set App State action that sets boxAccessToken to the value at JSON Path $.access_token from the response. Box tokens expire after approximately one hour. For production apps, handle 401 responses by re-fetching the token automatically: add a conditional branch in your action flows that detects status code 401 from any Box API call, re-runs the GetBoxToken action, updates App State, and then retries the failed request.

Click API Calls in the left nav, then click + Add → Create API Group. Name it 'BoxMetadata' and set the Base URL to https://api.box.com/2.0. In the Headers tab of this group, add the shared header: Key = Authorization, Value = Bearer {{accessToken}}. Under Variables, add accessToken as a String variable — you will bind this to your boxAccessToken App State variable at call time. Inside the BoxMetadata group, add your first API Call: name it 'ListFolderItems', Method GET, Endpoint /folders/{{folderId}}/items?fields=id,name,type,size,modified_at. Add a Variable named folderId of type String. A critical note: Box's root folder ID is the string '0' (the digit zero) — not an empty string, not '/', just '0'. Passing anything else returns a 404. In Response & Test, paste a sample Box items response and click Generate JSON Paths to get paths like $.entries[*].id, $.entries[*].name, and $.entries[*].type. Add a second call inside BoxMetadata: name it 'CreateSharedLink', Method PUT, Endpoint /files/{{fileId}}, Content-Type application/json, Body {"shared_link": {"access": "open"}}. Add a Variable named fileId. For uploads, create a second API Group named 'BoxUpload' with Base URL https://upload.box.com/api/2.0. Add the same Authorization header. Inside, create an API Call named 'UploadFile', Method POST, Endpoint /files/content. Configure a multipart form body with two parts: one named 'attributes' containing the JSON string {"name":"{{fileName}}","parent":{"id":"{{parentId}}"}} and one named 'file' containing the binary content variable. This two-group setup is required because Box uses two different hostnames — mixing them causes 404 errors.

1// API Call reference (for documentation — enter these values in FlutterFlow UI)
2
3// BoxMetadata Group: https://api.box.com/2.0
4// Shared header: Authorization: Bearer {{accessToken}}
5
6// ListFolderItems
7// GET /folders/{{folderId}}/items?fields=id,name,type,size,modified_at
8// JSON Paths: $.entries[*].id | $.entries[*].name | $.entries[*].type
9// Root folderId = "0"
10
11// CreateSharedLink  
12// PUT /files/{{fileId}}
13// Body: {"shared_link": {"access": "open"}}
14// Response JSON Path: $.shared_link.url
15
16// BoxUpload Group: https://upload.box.com/api/2.0
17// Shared header: Authorization: Bearer {{accessToken}}
18
19// UploadFile
20// POST /files/content
21// Multipart body:
22//   attributes: {"name":"{{fileName}}","parent":{"id":"{{parentId}}"}}
23//   file: [binary content]

Add a new page to your FlutterFlow project — call it 'BoxFiles'. Add a ListView widget to the page. In its Backend Query, select API Call → BoxMetadata → ListFolderItems. When prompted for variables, bind accessToken to your boxAccessToken App State variable and folderId to the page parameter (or hardcode '0' for the root folder). Inside the ListView template, add a Row widget containing an Icon and two Text widgets. Bind the first Text to $.entries[*].name and the second to $.entries[*].type. For the Icon, add a conditional that shows a folder icon when type is 'folder' and a document icon when type is 'file'. Add a tap action to the ListView item: use an If/Else action that branches on the type value. If type equals 'folder', navigate to the same BoxFiles page and pass the item's id as the folderId page parameter — this enables drill-down navigation. If type equals 'file', trigger the CreateSharedLink API Call with the item's id as the fileId. Extract $.shared_link.url from the response using a JSON Path action and then use a Launch URL action to open it. For the upload flow, add a floating action button with an Upload Media action (image or file picker). On completion, call BoxUpload → UploadFile with the selected file's bytes, the filename, and the current folderId as the parentId. On success, refresh the ListView using a Refresh widget action.

Test the full flow in FlutterFlow's Run or Test mode for the API calls and navigation. The folder listing and shared link creation work fine in browser preview. However, file upload with a real binary payload is best verified on a real Android or iOS device (not just the canvas preview) because multipart binary handling can differ between the web preview and native builds. If you have just created your Box app, and JWT token requests return an error about authorization or an 'App not authorized' message, go back to Box Admin Console → Apps → Custom Apps and confirm the app appears in the authorized list. Enterprise Box accounts sometimes require the primary admin (not just any admin) to approve new apps — this step is easy to miss. For production deployments, also add token proactive refresh: when the boxAccessToken was last fetched more than 50 minutes ago (store a timestamp in App State alongside the token), automatically call GetBoxToken again before making Box API requests. This prevents mid-session 401 errors when users stay in the app longer than one hour. If the JWT proxy setup feels overwhelming to maintain alongside your FlutterFlow project, RapidDev's team builds FlutterFlow integrations including Box JWT setups every week — book a free scoping call at rapidevelopers.com/contact.