# How to connect Bubble with Google Drive

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Connecting Bubble to Google Drive uses the API Connector with OAuth2 User-Agent Flow. Once configured, your app can upload files to Drive, list folder contents, and let users download files directly. This tutorial covers the full OAuth2 setup, file upload API calls, and displaying Drive files in your app.

## Overview: Integrating Bubble with Google Drive

Google Drive integration lets your Bubble app store files in users' Drive accounts, list their files, and create collaborative document workflows. This tutorial uses the API Connector plugin with Google's Drive API v3 and OAuth2 for user-level access.

## Before you start

- A Google Cloud Console project with the Drive API enabled
- OAuth2 credentials (Client ID and Client Secret) configured in Google Cloud
- The API Connector plugin installed in your Bubble app
- Basic understanding of API Connector setup in Bubble

## Step-by-step guide

### 1. Set up Google OAuth2 credentials

Go to console.cloud.google.com. Create a new project or select an existing one. Navigate to APIs & Services → Library and enable the Google Drive API. Go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client ID. Set the application type to Web application. Add your Bubble app's URL as an Authorized redirect URI: https://yourapp.bubbleapps.io/api/1.1/oauth_redirect. Copy the Client ID and Client Secret.

**Expected result:** You have Google OAuth2 credentials with Drive API access enabled.

### 2. Configure the API Connector with OAuth2

In Bubble, go to Plugins → API Connector. Add a new API. Name it Google Drive. Set Authentication to OAuth2 User-Agent Flow. Enter the Client ID, Client Secret, Authorization URL (https://accounts.google.com/o/oauth2/v2/auth), and Token URL (https://oauth2.googleapis.com/token). Set the scope to https://www.googleapis.com/auth/drive.file. Add a Login/Signup link to let users authorize your app.

> Pro tip: Use the drive.file scope instead of the full drive scope — it limits access to only files your app creates or that the user opens with your app.

**Expected result:** The API Connector is configured for Google OAuth2 with Drive permissions.

### 3. Create an API call to upload files to Drive

In the API Connector, add a new call called Upload File. Set it as an Action. Method: POST. URL: https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart. Set the Content-Type header to multipart/related. The body needs two parts: JSON metadata (filename, mimeType) and the file content. For simpler implementation, use the resumable upload approach or a plugin that handles multipart encoding.

```
{
  "name": "uploaded-from-bubble.pdf",
  "mimeType": "application/pdf",
  "parents": ["root"]
}
```

**Expected result:** The API call uploads files from your Bubble app to the user's Google Drive.

### 4. List files from Google Drive

Add another API call called List Files. Set it as Data. Method: GET. URL: https://www.googleapis.com/drive/v3/files?fields=files(id,name,mimeType,webViewLink,iconLink,modifiedTime)&orderBy=modifiedTime desc. Initialize the call by clicking Initialize and authenticating. Bubble maps the response structure. You can now use Get data from an external API → Google Drive - List Files as a Repeating Group data source.

**Expected result:** Your Repeating Group displays files from the user's Google Drive with names, types, and links.

### 5. Display and download Drive files

Add a Repeating Group with type Google Drive - List Files. In each cell, display the file name, type icon (using iconLink), and last modified date. Add a Link element pointing to webViewLink to let users open files in Google Drive. For direct downloads, construct a download URL: https://www.googleapis.com/drive/v3/files/{fileId}?alt=media with the file's id.

**Expected result:** Users can see their Google Drive files and open or download them from your Bubble app.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "Google Drive",
  "authentication": "OAuth2 User-Agent Flow",
  "credentials": {
    "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",
    "client_secret": "YOUR_CLIENT_SECRET",
    "authorization_url": "https://accounts.google.com/o/oauth2/v2/auth",
    "token_url": "https://oauth2.googleapis.com/token",
    "scope": "https://www.googleapis.com/auth/drive.file"
  },
  "calls": [
    {
      "name": "List Files",
      "type": "Data",
      "method": "GET",
      "url": "https://www.googleapis.com/drive/v3/files",
      "params": {
        "fields": "files(id,name,mimeType,webViewLink,iconLink,modifiedTime)",
        "orderBy": "modifiedTime desc",
        "pageSize": "20"
      }
    },
    {
      "name": "Upload File",
      "type": "Action",
      "method": "POST",
      "url": "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart",
      "content_type": "multipart/related"
    },
    {
      "name": "Delete File",
      "type": "Action",
      "method": "DELETE",
      "url": "https://www.googleapis.com/drive/v3/files/[file_id]"
    }
  ]
}
```

## Common mistakes

- **Using the full drive scope instead of drive.file** — The full drive scope gives your app access to ALL files in the user's Drive, which is unnecessarily broad and may cause Google to require additional verification Fix: Use https://www.googleapis.com/auth/drive.file which limits access to files created by your app or explicitly opened by the user
- **Not adding the correct redirect URI in Google Cloud** — OAuth fails if the redirect URI does not exactly match what Google expects, resulting in a redirect_uri_mismatch error Fix: Add https://yourapp.bubbleapps.io/api/1.1/oauth_redirect as an Authorized redirect URI in your Google Cloud credentials
- **Forgetting to initialize the API call before using it** — Bubble needs to map the API response structure before you can use it as a data source — uninitalized calls show no data Fix: Click Initialize on each API call and authenticate with a test Google account to let Bubble learn the response format

## Best practices

- Use the drive.file scope for minimal permissions
- Always initialize API calls before using them in your app
- Handle OAuth token expiration gracefully with refresh token logic
- Cache file lists in a custom state to reduce API calls
- Add error handling for cases when the user revokes OAuth access
- Test with a non-personal Google account during development

## Frequently asked questions

### Do I need a Google Workspace account for this?

No. Any Google account can use the Drive API. However, Google may require app verification if you want to use sensitive scopes or serve more than 100 users.

### Will this use Bubble Workload Units?

Yes. Each API call through the API Connector uses WUs. Listing files and uploading files each count as API actions with associated WU costs.

### Can I upload files larger than 5MB?

Yes, using the resumable upload approach. Set uploadType=resumable in the URL and follow Google's resumable upload protocol for files over 5MB.

### How do I handle token expiration?

Bubble's OAuth2 User-Agent Flow automatically handles token refresh using the refresh token. If the user revokes access, they need to re-authenticate through your app.

### Can I create Google Docs or Sheets from Bubble?

Yes. Use the Drive API's files.create endpoint with the appropriate mimeType (application/vnd.google-apps.document for Docs, application/vnd.google-apps.spreadsheet for Sheets). RapidDev can help build complex Google Workspace integrations.

### Is the user's data secure?

Yes. OAuth2 means your app never sees the user's Google password. The access token is stored server-side in Bubble. Using the drive.file scope limits what your app can access.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-bubble-with-google-drive
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-bubble-with-google-drive