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.
Prerequisites
- 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
Set up Google OAuth2 credentials
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.
Configure the API Connector with OAuth2
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.
Create an API call to upload files to Drive
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.
1{2 "name": "uploaded-from-bubble.pdf",3 "mimeType": "application/pdf",4 "parents": ["root"]5}Expected result: The API call uploads files from your Bubble app to the user's Google Drive.
List files from Google Drive
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.
Display and download Drive files
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 working example
1{2 "api_name": "Google Drive",3 "authentication": "OAuth2 User-Agent Flow",4 "credentials": {5 "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",6 "client_secret": "YOUR_CLIENT_SECRET",7 "authorization_url": "https://accounts.google.com/o/oauth2/v2/auth",8 "token_url": "https://oauth2.googleapis.com/token",9 "scope": "https://www.googleapis.com/auth/drive.file"10 },11 "calls": [12 {13 "name": "List Files",14 "type": "Data",15 "method": "GET",16 "url": "https://www.googleapis.com/drive/v3/files",17 "params": {18 "fields": "files(id,name,mimeType,webViewLink,iconLink,modifiedTime)",19 "orderBy": "modifiedTime desc",20 "pageSize": "20"21 }22 },23 {24 "name": "Upload File",25 "type": "Action",26 "method": "POST",27 "url": "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart",28 "content_type": "multipart/related"29 },30 {31 "name": "Delete File",32 "type": "Action",33 "method": "DELETE",34 "url": "https://www.googleapis.com/drive/v3/files/[file_id]"35 }36 ]37}Common mistakes when connecting Bubble with Google Drive
Why it's a problem: Using the full drive scope instead of drive.file
How to avoid: Use https://www.googleapis.com/auth/drive.file which limits access to files created by your app or explicitly opened by the user
Why it's a problem: Not adding the correct redirect URI in Google Cloud
How to avoid: Add https://yourapp.bubbleapps.io/api/1.1/oauth_redirect as an Authorized redirect URI in your Google Cloud credentials
Why it's a problem: Forgetting to initialize the API call before using it
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to integrate Google Drive with my Bubble.io app so users can upload files to their Drive and see a list of their files. Can you walk me through the OAuth2 setup, API Connector configuration, and the API calls I need?
Integrate Google Drive with my app. I need users to connect their Google account, upload files to their Drive, and see a list of their recent Drive files in a Repeating Group.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation