Canva

Go to developers.canva.com and sign in with your Canva Teams account. Click 'Create an integration' and fill in your app name and description. Under 'OAuth 2.0 settings', add your redirect URI — this must point to a specific Bubble page you will create to receive the authorization code (for example, `https://yourapp.bubbleapps.io/oauth-callback`). Copy your Client ID and Client Secret to a safe place. In the 'Scopes' section, enable `design:content:read` and `asset:read` — these are the minimum permissions needed to browse designs and their thumbnails. Note that `design:content:write` is needed if you plan to create or duplicate designs. Back in Bubble, add two new fields to the User data type: `canva_access_token` (text), `canva_refresh_token` (text), and `canva_token_expiry` (date). These will store each user's OAuth credentials securely in your Bubble database.

PKCE (Proof Key for Code Exchange) is mandatory for Canva OAuth — a standard client_secret-only authorization will be rejected. You need to generate a `code_verifier` (a random string of 43–128 characters) and a `code_challenge` (the SHA-256 hash of the code_verifier, base64url-encoded) before sending the user to Canva. In Bubble, the cleanest way is to use the Toolbox plugin (available from the Bubble Plugin Marketplace): install it, then add a 'Run JavaScript' action in a Button click workflow. The JavaScript generates the code_verifier, stores it in an App State (so the Backend Workflow can retrieve it during callback), computes the SHA-256 hash using the Web Crypto API, and redirects the user to the Canva authorization URL. The authorization URL format is: `https://www.canva.com/api/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=design:content:read+asset:read&code_challenge=GENERATED_CHALLENGE&code_challenge_method=S256`. Store the code_verifier in a Bubble App State called `canva_code_verifier` so the token-exchange Backend Workflow can read it. If you prefer not to use JavaScript, a custom Bubble plugin can handle the crypto operations — RapidDev's team has built hundreds of Bubble apps with OAuth integrations like this; a free scoping call at rapidevelopers.com/contact can help if the PKCE step feels daunting.

1// Toolbox plugin — Run JavaScript action
2// Generates PKCE code_verifier and code_challenge, redirects to Canva OAuth
3
4function base64urlEncode(buffer) {
5  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
6    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
7}
8
9async function startCanvaOAuth() {
10  // Generate code_verifier: 96 random bytes → base64url
11  const verifierBytes = crypto.getRandomValues(new Uint8Array(96));
12  const codeVerifier = base64urlEncode(verifierBytes);
13
14  // SHA-256 hash → base64url
15  const encoder = new TextEncoder();
16  const data = encoder.encode(codeVerifier);
17  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
18  const codeChallenge = base64urlEncode(hashBuffer);
19
20  // Store verifier in sessionStorage for callback retrieval
21  sessionStorage.setItem('canva_code_verifier', codeVerifier);
22
23  const params = new URLSearchParams({
24    response_type: 'code',
25    client_id: 'YOUR_CLIENT_ID',
26    redirect_uri: 'https://yourapp.bubbleapps.io/oauth-callback',
27    scope: 'design:content:read asset:read',
28    code_challenge: codeChallenge,
29    code_challenge_method: 'S256'
30  });
31
32  window.location.href = 'https://www.canva.com/api/oauth/authorize?' + params.toString();
33}
34
35startCanvaOAuth();

Create a new Bubble page called `oauth-callback`. This is the page your users land on after approving access in Canva. In the page's 'Page is loaded' event, add a 'Run a Backend Workflow' action — this Backend Workflow will handle the token exchange. First, go to Bubble's Settings → API tab, enable 'This app exposes a Workflow API,' and then open the Backend Workflows editor. Create a new workflow called 'Canva Token Exchange.' This workflow receives the URL parameter `code` (which Canva appends automatically) and a `state` parameter if you used one. In the workflow, add an API call step: POST to `https://api.canva.com/rest/v1/oauth/token` with body type `application/x-www-form-urlencoded` and these fields: `grant_type=authorization_code`, `code=[the code parameter]`, `redirect_uri=[your callback URL]`, `client_id=[your Client ID]`, `client_secret=[your Client Secret]`, `code_verifier=[retrieved from App State or sessionStorage]`. The response contains `access_token`, `refresh_token`, and `expires_in` (seconds). Save all three to the current User's record: `canva_access_token`, `canva_refresh_token`, and calculate `canva_token_expiry` as current date/time + expires_in seconds. After saving, redirect the user to your main app page. Note: Backend Workflows require a Bubble paid plan.

1{
2  "endpoint": "POST https://api.canva.com/rest/v1/oauth/token",
3  "headers": {
4    "Content-Type": "application/x-www-form-urlencoded"
5  },
6  "body": {
7    "grant_type": "authorization_code",
8    "code": "<dynamic: URL parameter 'code'>",
9    "redirect_uri": "https://yourapp.bubbleapps.io/oauth-callback",
10    "client_id": "<your_client_id>",
11    "client_secret": "<private>",
12    "code_verifier": "<dynamic: App State 'canva_code_verifier'>"
13  },
14  "response_fields": [
15    "access_token",
16    "refresh_token",
17    "expires_in",
18    "token_type"
19  ]
20}

Go to Plugins tab → Add plugins → search for 'API Connector' (by Bubble) and install it. Click 'API Connector' in your plugins list, then 'Add another API.' Name it 'Canva Connect.' Set the base URL to `https://api.canva.com/rest/v1`. Under 'Shared headers,' add one header: key `Authorization`, value `Bearer [Current User's canva_access_token]`. Check the 'Private' checkbox — this ensures the token travels server-to-server and never appears in browser requests. Now click 'Add a call' and configure it: Name it 'Get Designs,' set method to GET, and set the URL to `/designs`. Add URL parameters: `type` (optional, e.g., `presentation`), `query` (optional search string), `page_size` (set default `20`), and `continuation` (for pagination). Under 'Use as,' choose 'Data' — this lets you bind the response to a repeating group. Click 'Initialize call': Bubble needs a real successful response to auto-detect the field structure. Make sure your test user has a valid access token saved in their User record before clicking Initialize. If the call returns a valid response, Bubble will list the fields it found: `items[].id`, `items[].title`, `items[].thumbnail.url`, `items[].owner.name`, `items[].created_at`, `items[].updated_at`. Expand the `items` array in the response definition and mark it as the list type.

1{
2  "api_name": "Canva Connect",
3  "base_url": "https://api.canva.com/rest/v1",
4  "shared_headers": [
5    {
6      "key": "Authorization",
7      "value": "Bearer <dynamic: Current User's canva_access_token>",
8      "private": true
9    }
10  ],
11  "calls": [
12    {
13      "name": "Get Designs",
14      "method": "GET",
15      "path": "/designs",
16      "parameters": [
17        { "key": "type", "value": "<dynamic>", "optional": true },
18        { "key": "query", "value": "<dynamic>", "optional": true },
19        { "key": "page_size", "value": "20" },
20        { "key": "continuation", "value": "<dynamic>", "optional": true }
21      ],
22      "use_as": "Data"
23    }
24  ]
25}

Add a new Bubble page or section for your brand-asset library. Add a Repeating Group element and set its data source to 'Get Designs from Canva Connect — items' (the list returned by your API call). Set the layout to Grid or Extended Vertical List depending on your design preference. Inside the repeating group cell, add an Image element: set its dynamic source to 'Current cell's Canva Connect Get Designs items — thumbnail_url'. Canva thumbnail URLs are pre-signed and expire in approximately five minutes — never save them to Bubble's database. Always bind them directly from the current API response in real time. Add a Text element for the design title (dynamic: `items — title`). Add an Input and a Dropdown above the repeating group for search and type filtering — wire the Input's value to the `query` parameter and the Dropdown's value to the `type` parameter. Add a 'Load more' button wired to the `continuation` value from the last response to support pagination. On page load, trigger a workflow that first checks whether the user's `canva_token_expiry` is less than 5 minutes away — if so, call the token refresh Backend Workflow before running the Get Designs call.

Create a second Backend Workflow called 'Refresh Canva Token.' This workflow accepts one input: `user` (type User). It POSTs to `https://api.canva.com/rest/v1/oauth/token` with body type `application/x-www-form-urlencoded` and these fields: `grant_type=refresh_token`, `refresh_token=[input user's canva_refresh_token]`, `client_id=[your Client ID]`, `client_secret=[your Client Secret]`. The response returns a new `access_token`, `refresh_token`, and `expires_in`. After the API call, add a 'Make changes to a Thing' step: update the input user's `canva_access_token` with the new token, `canva_refresh_token` with the new refresh token, and `canva_token_expiry` with current date/time + expires_in seconds. Call this Backend Workflow from two places: on page load when expiry is within 5 minutes, and as a pre-step in any workflow that makes a Canva API call. This pattern ensures your tokens are always fresh without requiring users to re-authorize. The Canva access token expires in 1 hour — without this refresh step, your repeating group will silently stop loading after the first hour.

1{
2  "endpoint": "POST https://api.canva.com/rest/v1/oauth/token",
3  "headers": {
4    "Content-Type": "application/x-www-form-urlencoded"
5  },
6  "body": {
7    "grant_type": "refresh_token",
8    "refresh_token": "<dynamic: input user's canva_refresh_token>",
9    "client_id": "<your_client_id>",
10    "client_secret": "<private>"
11  },
12  "response_fields": [
13    "access_token",
14    "refresh_token",
15    "expires_in"
16  ]
17}