Microsoft Power BI

Open the Azure portal (portal.azure.com) and navigate to Azure Active Directory → App registrations → New registration. Give the app a name like 'Bubble Power BI Embed', set the supported account type to 'Accounts in this organizational directory only', and leave the redirect URI blank for a service-to-service flow. Click Register. After registration, copy three values from the Overview tab: the Application (client) ID, the Directory (tenant) ID, and the Object ID. You will need all three in your Bubble configuration. Next, go to Certificates & secrets → Client secrets → New client secret. Add a description, choose an expiry period, and click Add. Copy the Value immediately — it is only shown once. This is your Azure client_secret. Now go to API permissions → Add a permission → APIs my organization uses → search for 'Power BI Service'. Select 'Delegated permissions' and add Report.Read.All and Dataset.Read.All. Then click 'Grant admin consent for [your tenant]'. The status column must show a green checkmark — without admin consent, every API call will return 401 Unauthorized. Finally, go to your Power BI workspace in the Power BI service (app.powerbi.com), open the workspace settings, and add the Azure AD application as a Member. This step is separate from the Azure AD API permissions and is the most commonly missed step — GenerateToken returns 403 until the service principal is a workspace member.

1{
2  "azure_ad_values_to_copy": {
3    "tenant_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
4    "client_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
5    "client_secret": "[copy immediately — shown only once]"
6  },
7  "required_permissions": [
8    "Power BI Service → Report.Read.All",
9    "Power BI Service → Dataset.Read.All"
10  ],
11  "admin_consent": "required"
12}

In your Bubble app, click the Plugins tab in the left sidebar. If you do not already have it, click 'Add plugins', search for 'API Connector' (the plugin by Bubble), and click Install. Inside the API Connector, click 'Add another API'. Name this API group 'Azure AD Token'. Set the base URL to https://login.microsoftonline.com. Leave authentication as 'None' — you will include all credentials in the request body. Click 'Add another call' inside this group. Name the call 'Get Access Token'. Set the method to POST. Set the endpoint path to /[YOUR_TENANT_ID]/oauth2/v2.0/token — replace [YOUR_TENANT_ID] with the actual tenant ID you copied from Azure AD. In the Body section, change the body type to 'Form data' (not JSON — the Azure AD token endpoint requires application/x-www-form-urlencoded). Add five body parameters: grant_type (value: client_credentials), client_id (your Azure app client ID, Private checkbox unchecked — this is a public identifier), client_secret (your Azure client secret, Private checkbox CHECKED — this is the sensitive credential), scope (value: https://analysis.windows.net/powerbi/api/.default), and a fifth param for any optional assertion if needed. Mark client_secret as Private. This single checkbox is what keeps your Azure secret off the browser and out of Bubble's API Connector logs visible to admin users. Set 'Use as' to 'Action'. Click 'Initialize call'. Bubble will make a real POST request — it needs a successful 200 response to detect the response shape. You should see a JSON response containing access_token, token_type (Bearer), and expires_in. If you see 'There was an issue setting up your call', the most common causes are: wrong tenant_id in the endpoint path, missing admin consent on the Azure AD app, or client_secret containing special characters that need URL encoding in form data.

1{
2  "method": "POST",
3  "url": "https://login.microsoftonline.com/{{tenant_id}}/oauth2/v2.0/token",
4  "body_type": "form_data",
5  "body_params": {
6    "grant_type": "client_credentials",
7    "client_id": "{{client_id}}",
8    "client_secret": "<private>",
9    "scope": "https://analysis.windows.net/powerbi/api/.default"
10  },
11  "use_as": "Action"
12}

Click 'Add another API' in the API Connector to create a second API group. Name it 'Power BI REST API'. Set the base URL to https://api.powerbi.com/v1.0/myorg. Add a shared header to this group: Key = Authorization, Value = Bearer [leave empty for now — you will populate it dynamically from a Bubble Workflow], and check the Private checkbox. This header is marked Private so that Bubble never logs the Bearer token in the API Connector response panel. Add three calls inside this group: 1. 'List Workspaces' — GET /groups. Use as Data. Initialize this call using a real access token (you can temporarily hardcode one from Postman or the Azure AD token call above, then remove it after initialization). This call returns a JSON array of workspace objects with id and name fields that you can browse in Bubble. 2. 'List Reports in Workspace' — GET /groups/[workspaceId]/reports. Use as Data. Use a real workspace ID for initialization. Returns report objects with id, name, datasetId, and embedUrl fields. 3. 'Generate Embed Token' — POST /groups/[workspaceId]/reports/[reportId]/GenerateToken. Method POST, body type JSON, body: {"accessLevel": "view"}. Use as Action. Initialize with real workspace and report IDs. Returns {"token": "...", "tokenId": "...", "expiration": "2024-..."}. For all three calls, the Authorization header value will be passed dynamically from a Bubble Workflow — the Initialize call needs a real token to succeed, but in production the token comes from the Bubble database after the Azure AD token exchange runs. If GenerateToken returns 403, the most common cause is that the Azure AD service principal has not been added as a Member of the Power BI workspace — go to app.powerbi.com → workspace → settings → add the app as Member.

1{
2  "api_group": "Power BI REST API",
3  "base_url": "https://api.powerbi.com/v1.0/myorg",
4  "shared_headers": [
5    {
6      "key": "Authorization",
7      "value": "Bearer {{access_token_from_workflow}}",
8      "private": true
9    }
10  ],
11  "calls": [
12    {
13      "name": "List Workspaces",
14      "method": "GET",
15      "path": "/groups",
16      "use_as": "Data"
17    },
18    {
19      "name": "Generate Embed Token",
20      "method": "POST",
21      "path": "/groups/{{workspaceId}}/reports/{{reportId}}/GenerateToken",
22      "body": { "accessLevel": "view" },
23      "use_as": "Action"
24    }
25  ]
26}

Now connect the two API groups in a Bubble Workflow so that clicking a button or loading a page fetches a live embed token. Create a button on your page labelled 'Load Report'. Open the Workflow editor and add an event: 'When Button Load Report is clicked'. Add actions in this order: Action 1: 'Plugins → Azure AD Token - Get Access Token'. This runs the Azure AD token call. When the action completes, the result (access_token) is available as the 'result of step 1'. Action 2: 'Make changes to a Thing' — create or update a database record of a new data type called 'PowerBI Token' with fields: access_token (text), embed_token (text), embed_url (text), token_expires_at (date), report_id (text). Set access_token = 'Result of Step 1's access_token'. Action 3: 'Plugins → Power BI REST API - Generate Embed Token'. In the Authorization dynamic field, enter 'Bearer ' followed by 'Result of Step 1's access_token'. Set workspaceId and reportId to the correct IDs (you can store these in Option Sets or App State for flexibility). When complete, the result contains token and expiration. Action 4: 'Make changes to a Thing' — update the PowerBI Token record: embed_token = 'Result of Step 3's token', embed_url = [the embedUrl from your List Reports call or a fixed URL], token_expires_at = 'Current date/time' + 55 minutes (use Bubble's date arithmetic: 'Current date/time + 3300 seconds'). On page load, add a conditional check: 'When page is loaded → if PowerBI Token's token_expires_at < Current date/time → run the full workflow chain to refresh the token.' This entire chain runs server-side. The embed token appears in the Bubble database and is available to the HTML element on the page — the Azure client_secret never leaves Bubble's servers.

1// Workflow action sequence (Bubble visual editor — not actual code)
2// Event: Button 'Load Report' is clicked
3//
4// Step 1: Plugins → Azure AD Token - Get Access Token
5//   (no params needed — client_id, client_secret in API Connector)
6//
7// Step 2: Create a new PowerBI Token
8//   access_token = Step 1's access_token
9//
10// Step 3: Plugins → Power BI REST API - Generate Embed Token
11//   Authorization = "Bearer " + Step 1's access_token
12//   workspaceId = App State workspaceId
13//   reportId = App State reportId
14//
15// Step 4: Make changes to PowerBI Token
16//   embed_token = Step 3's token
17//   embed_url = Step 3's embedUrl (or stored embedUrl from List Reports)
18//   token_expires_at = Current date/time + 3300 seconds

Add an HTML element to your Bubble page (from the Add menu, search 'HTML'). Resize it to the dimensions you want for the report viewer — for example, 900 x 600 pixels. Inside the HTML element, paste the code below. The key dynamic values are the embed_token and embed_url — you need to pull these from the Bubble database using Bubble's dynamic text expressions. In Bubble's HTML editor, place your cursor where the embed token should go, then click 'Insert dynamic data' and select 'Do a search for PowerBI Token → First item's embed_token'. Do the same for the embed URL. These dynamic expressions are evaluated server-side when Bubble renders the page, so the token is injected into the HTML before it reaches the browser. The powerbi-client library (loaded from Microsoft's CDN) handles rendering the report, zoom controls, full-screen toggle, and filter pane — you do not need to write any custom JavaScript beyond the embed configuration shown below. If you want the report to reload when the embed token is refreshed (after the Workflow in step 4 runs), add a 'Trigger workflow on page load' condition: 'When PowerBI Token's embed_token is changed → re-render HTML element' using Bubble's 'Reset relevant inputs' action or a conditional visibility toggle.

1<!-- Paste into Bubble HTML element -->
2<div id="reportContainer" style="width:100%;height:600px;"></div>
3
4<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.23.1/dist/powerbi.min.js"></script>
5<script>
6  var models = window['powerbi-client'].models;
7  var embedConfiguration = {
8    type: 'report',
9    id: '[REPORT_ID]',
10    embedUrl: '[DYNAMIC: PowerBI Token first item embed_url]',
11    accessToken: '[DYNAMIC: PowerBI Token first item embed_token]',
12    tokenType: models.TokenType.Embed,
13    settings: {
14      panes: {
15        filters: { expanded: false, visible: true }
16      },
17      background: models.BackgroundType.Transparent
18    }
19  };
20  var container = document.getElementById('reportContainer');
21  var report = powerbi.embed(container, embedConfiguration);
22</script>

Embed tokens expire after approximately 60 minutes. Without automatic refresh, the report iframe will go blank mid-session and users will need to reload the page manually. To prevent this, set up a Bubble Backend Workflow that runs the token chain every 55 minutes. Note: Backend Workflows (also called API Workflows with scheduling) require a paid Bubble plan. If you are on the free plan, you can only refresh the token on page load — but sessions longer than 60 minutes will fail. To create the scheduled workflow: 1. Go to Settings tab → API → check 'This app exposes a Workflow API'. This enables the Backend Workflows section. 2. In the left sidebar, click 'Backend workflows'. Click 'Add a new API workflow'. Name it 'Refresh Power BI Token'. 3. Inside this workflow, add the same three-action chain from step 4 (Get Access Token → GenerateToken → update PowerBI Token record). 4. After saving, click the clock icon on the workflow to create a recurring schedule: run every 55 minutes. Alternatively, trigger the refresh from the client side: add a Bubble Workflow that runs every 55 minutes using the 'Schedule current workflow to run again in X seconds' action within a recurring server-side event, or use a page-level timer with 'Trigger API workflow' to call the backend endpoint. For high-traffic Bubble apps where many users are viewing the same report, use one shared embed token stored in the database (refreshed by the scheduler) rather than generating a unique token per user per session. This reduces WU consumption significantly — each token generation call consumes WUs, and generating hundreds of tokens per hour will add up quickly on Bubble's usage-based pricing.

1// Backend Workflow: 'Refresh Power BI Token'
2// Settings → API → expose Workflow API → enabled
3// Backend Workflows → New API Workflow → 'Refresh Power BI Token'
4//
5// Action 1: Azure AD Token - Get Access Token
6// Action 2: Power BI REST API - Generate Embed Token
7//   Authorization = "Bearer " + Step 1's access_token
8//   workspaceId = [App data workspaceId]
9//   reportId = [App data reportId]
10// Action 3: Make changes to PowerBI Token
11//   embed_token = Step 2's token
12//   token_expires_at = Current date/time + 3300 seconds
13//
14// Scheduled: every 55 minutes (3300 seconds)