OneDrive

Go to portal.azure.com and sign in with your Azure account. In the search bar, type 'App registrations' and select it. Click 'New registration'. Configure the app: - Name: 'Bubble OneDrive Integration' (or any descriptive name) - Supported account types: 'Accounts in this organizational directory only' (for a single Microsoft 365 tenant) or 'Accounts in any organizational directory' (if building a multi-tenant app) - Redirect URI: leave blank for now (add later when implementing delegated OAuth for per-user access) Click 'Register'. After creation, note three values from the Overview page — you need all three: - **Application (client) ID** — your OAuth Client ID - **Directory (tenant) ID** — your organization's Azure AD tenant identifier - **Object ID** — not needed for this integration Now add Microsoft Graph permissions. Go to 'API permissions' in the left menu → 'Add a permission' → 'Microsoft Graph' → 'Application permissions' (for client credentials flow) or 'Delegated permissions' (for per-user flow). Add: - `Files.ReadWrite.All` — read and write all files - `Sites.Read.All` — read SharePoint sites (optional, if you need SharePoint access) - `User.Read` — read user profile After adding the permissions, you will see them listed with 'Status: Not granted for {tenant name}'. This status must change before any API calls work. Do NOT click 'Grant admin consent for {tenant}' here unless you are a Global Administrator — ask your organization's IT admin to do this in the next step. Finally, create a Client Secret: go to 'Certificates & secrets' → 'New client secret'. Give it a description, set expiry (24 months is standard), and click 'Add'. Copy the secret VALUE immediately — it is shown only once.

A Global Administrator of the Azure AD tenant must explicitly grant consent for your app to use the Files.ReadWrite.All permission. Adding the permission in the app registration is not sufficient — admin consent is a separate mandatory approval. If you are the Global Administrator: in the Azure portal, go to Azure Active Directory → App registrations → find your app → API permissions. Click 'Grant admin consent for {your tenant name}'. A confirmation dialog appears — click 'Yes'. After a few seconds, the Status column changes from 'Not granted' to a green checkmark 'Granted for {tenant name}'. If you are NOT the Global Administrator: contact your organization's IT department or the person who manages Azure/Microsoft 365 for your organization. They need to: 1. Log into portal.azure.com as a Global Administrator 2. Navigate to Azure Active Directory → App registrations → find your app by name or Application ID 3. Click 'API permissions' → 'Grant admin consent for {tenant}' 4. Confirm the approval This step cannot be automated, skipped, or worked around. Until admin consent is granted, every API call returns a 403 'Insufficient privileges' error regardless of how correctly the credentials are configured. This is Microsoft's security requirement for apps accessing organizational data. After admin consent is granted, confirm by checking the API permissions page — all requested permissions should show a green checkmark under Status.

Set up Bubble to exchange Client ID and Client Secret for a Microsoft Graph access token and cache it for use across API calls. First, add the token endpoint to the API Connector. In Bubble, go to Plugins → API Connector → Add another API. Name it 'Microsoft Graph Auth'. Add a call named 'Get Access Token': - Method: POST - URL: `https://login.microsoftonline.com/{your-tenant-id}/oauth2/v2.0/token` - Body type: Form-data - Body fields: - `client_id`: your Azure AD Application Client ID (Private) - `client_secret`: your Azure AD Client Secret value (Private) - `scope`: `https://graph.microsoft.com/.default` - `grant_type`: `client_credentials` Call configuration: ```json { "method": "POST", "url": "https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token", "body": { "client_id": "<private>", "client_secret": "<private>", "scope": "https://graph.microsoft.com/.default", "grant_type": "client_credentials" } } ``` Set Use as: Action. Initialize call — it should return `access_token` and `expires_in`. Click Save. Create a Bubble data type called `GraphConfig` with two fields: `access_token` (text), `expires_at` (date). Create one record manually with placeholder values. In Backend Workflows, create `Refresh Graph Token`: 1. Action: Plugins → Microsoft Graph Auth → Get Access Token 2. Action: Data → Make changes to GraphConfig → set access_token = Step 1's access_token, expires_at = Current date/time + 3,000 seconds Set up a recurring scheduled API Workflow to run `Refresh Graph Token` every 50 minutes (Settings → API → Schedule recurring events). Note: scheduling requires a paid Bubble plan. Now add the main Graph API Connector. Add another API group named 'Microsoft Graph': - Shared header: `Authorization` → `Bearer [GraphConfig's access_token from search]` → **Private** checkbox checked - The Authorization value is dynamic — it reads the cached token from the GraphConfig data type

1{
2  "method": "POST",
3  "url": "https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/token",
4  "headers": {
5    "Content-Type": "application/x-www-form-urlencoded"
6  },
7  "body": {
8    "client_id": "<private>",
9    "client_secret": "<private>",
10    "scope": "https://graph.microsoft.com/.default",
11    "grant_type": "client_credentials"
12  }
13}

In the 'Microsoft Graph' API Connector group, add the key calls you need for OneDrive operations. **Call 1: List OneDrive root contents** - Name: `List Drive Root` - Method: GET - URL: `https://graph.microsoft.com/v1.0/me/drive/root/children` - Query params: `$select` = `id,name,size,lastModifiedDateTime,folder,file` - Use as: Data - Initialize call: run with real token. Bubble detects `value` array with file/folder objects. Request config: ```json { "method": "GET", "url": "https://graph.microsoft.com/v1.0/me/drive/root/children", "headers": { "Authorization": "Bearer <private>" }, "params": { "$select": "id,name,size,lastModifiedDateTime,folder,file" } } ``` For accessing a specific user's drive in a multi-user scenario, replace `/me/drive` with `/users/{userId}/drive`. For SharePoint document library access, use `/sites/{siteId}/drives` to list libraries, then `/drives/{driveId}/root/children` to list contents. **Call 2: Create sharing link** - Name: `Create Sharing Link` - Method: POST - URL: `https://graph.microsoft.com/v1.0/me/drive/items/{itemId}/createLink` - Body type: JSON - Body fields: `type` (text, value 'view'), `scope` (text, value 'organization') - Use as: Action - Initialize call with a real file ID from the listing response **Call 3: List SharePoint sites (optional)** - Name: `Search Sites` - Method: GET - URL: `https://graph.microsoft.com/v1.0/sites` - Query params: `search` = `<dynamic>` - Use as: Data The `$select` parameter is critical for Bubble performance: Graph returns up to 30+ fields per file item by default. Without `$select`, a folder with 100 files returns a large payload that costs significantly more Bubble WUs to process. Always use `$select` with the minimum fields your UI needs.

1{
2  "method": "GET",
3  "url": "https://graph.microsoft.com/v1.0/me/drive/root/children",
4  "headers": {
5    "Authorization": "Bearer <private>"
6  },
7  "params": {
8    "$select": "id,name,size,lastModifiedDateTime,folder,file"
9  }
10}

Connect the Graph API calls to Bubble UI elements to create a working OneDrive file browser and upload workflow. **File browser repeating group:** 1. Add a Repeating Group element to your page 2. Type of content: Microsoft Graph - List Drive Root (API data type) 3. Data source: Get data from external API → Microsoft Graph - List Drive Root 4. Inside cells: Text = current cell's name, Text = format as text of current cell's lastModifiedDateTime 5. Conditional formatting: if current cell has a `folder` field → show folder icon; if it has a `file` field → show file icon 6. Share button inside cells: click → Action → Create Sharing Link → set itemId = current cell's id → set App State 'share_url' = result's webUrl **File upload workflow:** For small files (under 4 MB), the Graph simple upload endpoint works directly: - Add a File Uploader element and an Upload button - On button click: Backend Workflow or client-side Action to call Graph PUT endpoint Add a new API call to the Microsoft Graph group: - Name: `Upload Small File` - Method: PUT - URL: `https://graph.microsoft.com/v1.0/me/drive/root:/{filename}:/content` - Body type: Binary - Use as: Action For the file path in the URL, you can make `{filename}` dynamic by constructing the URL in the workflow action. After a successful upload, create a OneDriveFile Bubble data type record with: `file_name` (text), `graph_item_id` (text — the id from the upload response), `uploaded_by` = Current User, `uploaded_at` = Current date/time. **Privacy rules**: Go to Data tab → Data types → OneDriveFile → Privacy. Add a rule: Current User is uploaded_by → Allow find in searches: Yes, Allow reading all fields: Yes. Without privacy rules, any authenticated user can query OneDriveFile records. **Token refresh check**: Before any API call, add a conditional: if GraphConfig's expires_at < Current date/time → run the Refresh Graph Token Backend Workflow → then proceed with the API call. This proactive check prevents 401 errors from expired tokens. RapidDev's team has built Bubble apps integrating Microsoft 365 including OneDrive and SharePoint — for complex multi-user OAuth flows or SharePoint integration architecture, book a free scoping call at rapidevelopers.com/contact.

1{
2  "method": "PUT",
3  "url": "https://graph.microsoft.com/v1.0/me/drive/root:/<dynamic-filename>:/content",
4  "headers": {
5    "Authorization": "Bearer <private>",
6    "Content-Type": "<dynamic-content-type>"
7  }
8}