Box

Go to developer.box.com and click 'My Apps' → 'Create New App'. Choose 'Custom App' as the app type and 'Server Authentication (with JWT)' as the authentication method. Give your app a name like 'Bubble Integration'. After creating the app, go to the app's Configuration page. You will see an 'Add and Manage Public Keys' section — click 'Generate a Public/Private Keypair'. Box will prompt you to install two-factor authentication on your Box developer account if you haven't already. After confirming, Box downloads a JSON config file automatically. Save this file — it contains your App ID, client secret, RSA private key, and passphrase. This is the only time you can download it; if you lose it, you must generate a new keypair. Also in the Configuration page, set the App Access Level to 'App + Enterprise Access' (not just App Access) if you need to manage files across the organization, or 'App Access Only' if the JWT service account should only see files it creates. Next, go to the 'Application Scopes' section and enable: - Read all files and folders stored in Box - Write all files and folders stored in Box - Manage enterprise properties Save the app configuration. Important note: you now have credentials, but the app is NOT authorized to make API calls yet. The next mandatory step is Box Admin Console authorization.

This is the step that breaks every first-time Box integrator. Even with a perfectly configured Custom App and valid JWT credentials, every API call will return 'App not authorized' until a Box Administrator completes this step. Log into your Box account as an Administrator. Go to the Admin Console (click your name → Admin Console, or navigate to app.box.com/master). In the left sidebar, click 'Apps'. Select the 'Custom Apps Manager' tab. You should see your newly created Box app in the list of pending apps. Click on it, review the permissions, and click 'Authorize'. If your app does not appear in the list, confirm that the app was created under your organization's Box account (not a personal account) and that you gave the box_admin email the same domain as your organization. After authorization, Box creates a 'Service Account' user for your app. Files created by the JWT app are owned by this service account. If you need the service account to access existing files in a specific folder, you must add the service account as a Collaborator on that folder in Box (or create files in folders the service account owns). Note the Service Account email shown in the Admin Console — you will use it to share Box folders with the app's service account.

Box's JWT signing requires RSA cryptography with the private key from your downloaded config file. You will deploy a Supabase Edge Function (or Cloudflare Worker) that holds this config and returns short-lived access tokens to Bubble. In your Supabase project, go to Edge Functions → New Function. Name it `box-token`. The function reads your Box JWT config from an environment variable, constructs the JWT assertion, and exchanges it for an access token: ```javascript // supabase/functions/box-token/index.ts import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'; import { create } from 'https://deno.land/x/djwt@v2.8/mod.ts'; import { importPKCS8 } from 'https://deno.land/x/jose@v4.15.4/index.ts'; const boxConfig = JSON.parse(Deno.env.get('BOX_JWT_CONFIG') || '{}'); serve(async (req) => { const privateKey = await importPKCS8(boxConfig.boxAppSettings.appAuth.privateKey, 'RS256'); const now = Math.floor(Date.now() / 1000); const assertion = await create( { alg: 'RS256', typ: 'JWT', kid: boxConfig.boxAppSettings.appAuth.publicKeyID }, { iss: boxConfig.boxAppSettings.clientID, sub: boxConfig.enterpriseID, box_sub_type: 'enterprise', aud: 'https://api.box.com/oauth2/token', jti: crypto.randomUUID(), exp: now + 60 }, privateKey ); const tokenRes = await fetch('https://api.box.com/oauth2/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer', assertion, client_id: boxConfig.boxAppSettings.clientID, client_secret: boxConfig.boxAppSettings.clientSecret }) }); const data = await tokenRes.json(); return new Response(JSON.stringify({ access_token: data.access_token, expires_in: data.expires_in }), { headers: { 'Content-Type': 'application/json' } }); }); ``` Set the environment variable `BOX_JWT_CONFIG` to the contents of your downloaded JSON config file. In Bubble, create a data type called `BoxConfig` with two fields: `access_token` (text) and `expires_at` (date). This will cache the token so you don't call the proxy on every API request. Create one BoxConfig record manually with placeholder values — it will be updated by a Backend Workflow.

1// supabase/functions/box-token/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3import { create } from 'https://deno.land/x/djwt@v2.8/mod.ts';
4import { importPKCS8 } from 'https://deno.land/x/jose@v4.15.4/index.ts';
5
6const boxConfig = JSON.parse(Deno.env.get('BOX_JWT_CONFIG') || '{}');
7
8serve(async (req) => {
9  const privateKey = await importPKCS8(boxConfig.boxAppSettings.appAuth.privateKey, 'RS256');
10  const now = Math.floor(Date.now() / 1000);
11
12  const assertion = await create(
13    { alg: 'RS256', typ: 'JWT', kid: boxConfig.boxAppSettings.appAuth.publicKeyID },
14    {
15      iss: boxConfig.boxAppSettings.clientID,
16      sub: boxConfig.enterpriseID,
17      box_sub_type: 'enterprise',
18      aud: 'https://api.box.com/oauth2/token',
19      jti: crypto.randomUUID(),
20      exp: now + 60
21    },
22    privateKey
23  );
24
25  const tokenRes = await fetch('https://api.box.com/oauth2/token', {
26    method: 'POST',
27    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
28    body: new URLSearchParams({
29      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
30      assertion,
31      client_id: boxConfig.boxAppSettings.clientID,
32      client_secret: boxConfig.boxAppSettings.clientSecret
33    })
34  });
35
36  const data = await tokenRes.json();
37  return new Response(JSON.stringify({ access_token: data.access_token, expires_in: data.expires_in }), {
38    headers: { 'Content-Type': 'application/json' }
39  });
40});

In Bubble, go to Plugins tab → Add plugins → install the API Connector by Bubble if not already installed. Create two API Connector groups: **Group 1: Box Metadata** - Name: 'Box Metadata' - Shared header: `Authorization` → value: `Bearer <paste token for testing>` → **Private** checkbox checked - Add a call named 'List Folder Items': - Method: GET - URL: `https://api.box.com/2.0/folders/0/items` - Query params: `fields` = `id,name,type,size,modified_at`, `limit` = `100` - Use as: Data - Initialize call: run with real token — Bubble detects the `entries` array The root folder ID is `"0"` (the digit zero) — use this in the URL path for root access. **Group 2: Box Upload** - Name: 'Box Upload' - Same Authorization header (Private) - Base area: `https://upload.box.com/api/2.0` - Add a call named 'Upload File': - Method: POST - URL: `https://upload.box.com/api/2.0/files/content` - Body type: Form-data (multipart) - Use as: Action **Token refresh Backend Workflow (paid plan required):** Go to Backend Workflows → New API Workflow named `Refresh Box Token`: 1. Action: Plugins → API Connector → call the proxy endpoint to get a new access_token 2. Action: Data → Make changes to BoxConfig (the cached record) → set access_token = Step 1 result's access_token, set expires_at = Current date/time + 3,000 seconds 3. Schedule this workflow to run every 50 minutes via Settings → API → Schedule recurring event Update the Bubble API Connector to read the access_token from the BoxConfig Thing dynamically — set the Authorization header value to 'Bearer ' + [BoxConfig's access_token from database search].

1{
2  "method": "GET",
3  "url": "https://api.box.com/2.0/folders/0/items",
4  "headers": {
5    "Authorization": "Bearer <private>"
6  },
7  "params": {
8    "fields": "id,name,type,size,modified_at",
9    "limit": "100"
10  }
11}

Now connect the Box API Connector calls to your Bubble UI. **Add more API calls to the Box Metadata group:** - 'Get Shared Link': POST `https://api.box.com/2.0/files/{fileId}` with body `{"shared_link": {"access": "open"}}` — creates a publicly accessible shared link. Set Use as: Action. - 'Search Files': GET `https://api.box.com/2.0/search` with query param `query` = `<dynamic>` — full-text search across all Box content. Set Use as: Data. **File browser repeating group:** 1. Add a Repeating Group to your page 2. Type of content: Box Metadata - List Folder Items (the API data type) 3. Data source: Get data from external API → Box Metadata - List Folder Items 4. Inside RG cells: Text = current cell's name, Text = current cell's type 5. Conditional: if type = 'folder', show a folder icon; if type = 'file', show a file icon **Share button workflow:** 1. Button labeled 'Share' inside the repeating group 2. On click: Action → Plugins → Box Metadata → Get Shared Link → set fileId = current cell's id 3. Next action: Set App State 'box_shared_url' = result of Step 1's shared_link url 4. Next action: Copy to clipboard → box_shared_url **Folder navigation:** - Add a Custom State 'current_folder_id' (text, default '0') to the page - When a folder row is clicked: set current_folder_id = current cell's id - Update the RG data source to use current_folder_id instead of hardcoded '0' - Add a Back button: on click, set current_folder_id to the parent folder ID (store navigation history in a List state) **Privacy rules:** If you create any data types storing Box file IDs, names, or URLs, go to Data tab → Privacy and add rules ensuring only the record creator can read the data.

1{
2  "method": "POST",
3  "url": "https://api.box.com/2.0/files/<dynamic-fileId>",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "shared_link": {
10      "access": "open"
11    }
12  }
13}