# How to integrate Microsoft Azure with Bubble

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

## TL;DR

Connecting Bubble to Microsoft Azure uses the API Connector with Azure API keys or OAuth2 for Active Directory. Common integrations include Azure Blob Storage for files, Cognitive Services for AI features, and Azure AD for enterprise authentication. This tutorial covers the API Connector setup for Azure's most useful services.

## Overview: Integrating Microsoft Azure with Bubble

Azure offers enterprise cloud services that extend Bubble's capabilities. This tutorial covers connecting to Azure's most relevant services for Bubble apps: Blob Storage for files, Cognitive Services for AI-powered features like text analysis and image recognition, and Azure Active Directory for enterprise single sign-on.

## Before you start

- A Microsoft Azure account with an active subscription
- API keys for the Azure services you want to use
- The API Connector plugin installed in Bubble
- Basic understanding of REST APIs

## Step-by-step guide

### 1. Get your Azure API keys and endpoints

Log in to portal.azure.com. Navigate to the service you want to integrate (e.g., Cognitive Services, Blob Storage). In the service's resource page, go to Keys and Endpoint. Copy the endpoint URL and one of the API keys. For Blob Storage, you also need the storage account name and access key from the Access Keys section.

**Expected result:** You have the API endpoint and authentication key for your Azure service.

### 2. Configure the API Connector for Azure Cognitive Services

In Bubble, go to Plugins → API Connector. Add a new API named Azure Cognitive Services. Set Authentication to None (you will pass the key in headers). Add a shared header: Ocp-Apim-Subscription-Key with your Azure API key (mark as Private). Create an API call for text analysis: POST to https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/sentiment with a JSON body containing your text.

```
{
  "documents": [
    {
      "id": "1",
      "language": "en",
      "text": "This product is amazing and I love using it every day!"
    }
  ]
}
```

> Pro tip: Mark the API key header as Private in the API Connector so it is never sent to the browser.

**Expected result:** The API call returns sentiment analysis results from Azure Cognitive Services.

### 3. Set up Azure Blob Storage for file upload

For Blob Storage, the approach is similar to AWS S3 — use Shared Access Signatures (SAS) tokens to generate temporary upload URLs. Create an Azure Function that generates SAS tokens, or use the REST API directly with the storage account key. The API call pattern: PUT https://{account}.blob.core.windows.net/{container}/{blob}?{SAS_token} with the file content as the body.

**Expected result:** Files from your Bubble app are uploaded to Azure Blob Storage.

### 4. Integrate Azure AD for enterprise authentication

For enterprise single sign-on, configure the API Connector with OAuth2 User-Agent Flow. Set the authorization URL to https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/authorize and the token URL to https://login.microsoftonline.com/{tenant_id}/oauth2/v2.0/token. Set the scope to openid profile email. Register your Bubble app in Azure AD's App registrations with the redirect URI.

**Expected result:** Enterprise users can log in to your Bubble app using their Azure AD credentials.

### 5. Display Azure data in your Bubble app

Once API calls are configured and initialized, use them as data sources in Repeating Groups (for Data type calls) or as actions in workflows (for Action type calls). For example, display Cognitive Services results in Text elements, show Blob Storage file lists in Repeating Groups, or trigger analysis on button clicks.

**Expected result:** Azure service data is displayed and used throughout your Bubble app.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "Azure Cognitive Services",
  "authentication": "None (key in header)",
  "shared_headers": {
    "Ocp-Apim-Subscription-Key": "YOUR_AZURE_KEY (Private)",
    "Content-Type": "application/json"
  },
  "calls": [
    {
      "name": "Analyze Sentiment",
      "type": "Action",
      "method": "POST",
      "url": "https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/sentiment",
      "body": {
        "documents": [{"id": "1", "language": "en", "text": "[dynamic_text]"}]
      }
    },
    {
      "name": "Extract Key Phrases",
      "type": "Action",
      "method": "POST",
      "url": "https://your-resource.cognitiveservices.azure.com/text/analytics/v3.1/keyPhrases",
      "body": {
        "documents": [{"id": "1", "language": "en", "text": "[dynamic_text]"}]
      }
    },
    {
      "name": "Analyze Image",
      "type": "Action",
      "method": "POST",
      "url": "https://your-resource.cognitiveservices.azure.com/vision/v3.2/analyze?visualFeatures=Categories,Description,Tags",
      "body": {"url": "[image_url]"}
    }
  ]
}
```

## Common mistakes

- **Exposing Azure API keys in client-side code** — Anyone with your API key can make calls to Azure services on your account, potentially incurring costs or accessing data Fix: Always mark API key headers as Private in the API Connector, which keeps them server-side
- **Using the wrong Azure endpoint region** — Azure services are region-specific. Using an endpoint URL from a different region than where your resource is deployed will fail Fix: Copy the exact endpoint URL from your Azure resource's Keys and Endpoint page
- **Not handling Azure rate limits** — Azure services have rate limits based on your pricing tier. Exceeding them returns 429 errors Fix: Check your Azure pricing tier's rate limits and add error handling in Bubble for 429 responses

## Best practices

- Always mark Azure API keys as Private in the API Connector to keep them server-side
- Use the exact endpoint URL from your Azure resource to ensure correct region routing
- Start with Azure's free tier to test your integration before committing to a paid tier
- Add error handling for common Azure response codes (401, 403, 429)
- Use Azure Functions as middleware when direct API integration is too complex
- Monitor Azure costs in the portal to avoid unexpected charges

## Frequently asked questions

### Which Azure services work best with Bubble?

Cognitive Services (text/image AI), Blob Storage (files), Azure AD (enterprise auth), and Azure Functions (custom backend logic) are the most commonly integrated with Bubble.

### How much does Azure integration cost?

Azure offers a free tier for most services. Cognitive Services includes 5,000 free transactions per month. Blob Storage costs about $0.018/GB/month. Costs scale with usage.

### Can I use Azure instead of Supabase or Firebase as my backend?

Technically yes, but Bubble's native database is usually simpler. Azure is best used to complement Bubble with specific services like AI, enterprise auth, or large-scale file storage.

### Do I need an Azure subscription?

Yes, but you can start with a free Azure account that includes $200 in credits and 12 months of free services.

### Can I use Azure OpenAI Service with Bubble?

Yes. Azure OpenAI has the same API format as OpenAI but hosted on Azure with enterprise compliance. Configure it in the API Connector with your Azure OpenAI endpoint and key. RapidDev can help build AI-powered features using Azure services.

### Is Azure more complex than AWS for Bubble integration?

They are comparable in complexity. Azure's Cognitive Services API is simpler than AWS's equivalent. Blob Storage and S3 are similar. Choose based on your existing infrastructure and preferences.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-microsoft-azure-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-microsoft-azure-in-bubble