Microsoft Teams

Open Microsoft Teams and navigate to the channel where you want to receive notifications — for example, #ops-alerts or #new-signups. Hover over the channel name, click the three-dot (⋯) menu, and select 'Workflows'. In the Workflows dialog, search for 'Post to a channel when a webhook request is received' and click Add. Give the workflow a name like 'FlutterFlow Notifications', confirm the team and channel, and click Add workflow. Teams will generate a webhook URL — it looks like `https://prod-xx.<region>.logic.azure.com:443/workflows/.../triggers/manual/paths/invoke?...`. Copy this URL and save it somewhere safe. This URL is the only credential you need: whoever knows it can post to your channel. Do not publish it in public repositories or embed it in a consumer-facing app without a proxy layer. Note: the older 'Incoming Webhook' connectors are being phased out by Microsoft — always use the Workflows-based webhook for new integrations. If you see a dead webhook URL inherited from an old setup, recreate it through the Workflows app to get a fresh, supported URL.

In your FlutterFlow project, click 'API Calls' in the left navigation panel. Click '+ Add' and select 'Create API Group'. Name the group 'MicrosoftTeams'. For the base URL, enter the first part of your webhook URL up through the domain — however, because Teams Workflows webhook URLs are full paths (not base + path), the cleanest approach for a single webhook is to leave the base URL as `https://prod-xx.<region>.logic.azure.com` and put the rest of the path in the individual API Call below. Alternatively, paste the entire webhook URL as the base URL and leave the endpoint path empty. Either approach works; keep it simple by treating the full webhook URL as the single endpoint. In the Headers section, you do not need to add any Authorization header — the webhook URL itself is the credential. Set the 'Content-Type' header to `application/json` so Teams parses the JSON body correctly. Click 'Save' to create the group. You now have an API Group ready to accept calls pointing at your Teams channel.

1// API Group config (reference, not a file to copy)
2// Group name: MicrosoftTeams
3// Base URL: https://prod-xx.<region>.logic.azure.com
4// Headers:
5//   Content-Type: application/json
6// (No Authorization header needed)

Inside the MicrosoftTeams API Group, click '+ Add API Call'. Name it 'sendChannelMessage'. Set the method to POST. In the endpoint path field, paste the full webhook URL path (everything after the domain). Open the Variables tab and add any variables you want to inject into the message — for example: `message_title` (String), `message_body` (String), `user_email` (String). These become `{{ variable_name }}` placeholders in your request body. Switch to the Body tab, set the body type to 'JSON', and paste an Adaptive Card payload. A simple MessageCard body works for most channel webhooks. Click 'Response & Test', paste a sample response (Teams returns `1` on success), and click 'Test API Call' to confirm the message arrives in your Teams channel. If you receive a 400 Bad Request, the most common cause is a malformed JSON body — verify your Adaptive Card structure is valid. Once the test succeeds, save the API Call.

1{
2  "@type": "MessageCard",
3  "@context": "http://schema.org/extensions",
4  "themeColor": "0076D7",
5  "summary": "{{ message_title }}",
6  "sections": [
7    {
8      "activityTitle": "{{ message_title }}",
9      "activityText": "{{ message_body }}",
10      "facts": [
11        {
12          "name": "User",
13          "value": "{{ user_email }}"
14        }
15      ],
16      "markdown": true
17    }
18  ]
19}

Now connect the API Call to an action in your FlutterFlow app. Find the widget that should trigger the notification — for example, a 'Sign Up' button, a form submission confirmation widget, or a backend trigger. Click the widget to open its properties, then click '+ Add Action' in the Actions panel on the right side. Choose 'Backend/API Call' from the action types. Select your 'MicrosoftTeams' group and the 'sendChannelMessage' call. Map the variables: set `message_title` to a static string like 'New User Registered', set `message_body` to a text field value or a combination of widget state values, and set `user_email` to the current user's email from your auth provider (e.g., `currentUserEmail` from Supabase or Firebase Auth). You can also trigger this notification from a backend trigger or from the Action Flow Editor after a Supabase/Firestore write succeeds — chain it after the data-write action so the notification only fires when the save succeeds. If you want to include dynamic data like a formatted timestamp or a Firestore document field, use a Custom Function to build the string before passing it to the API Call variable.

If you need to post to channels dynamically (not a fixed webhook), send direct messages to specific users, or manage Teams programmatically, you must use the Microsoft Graph API. This requires Azure AD app registration and a client secret — credentials that cannot live in a FlutterFlow client app because they compile into the app bundle and can be extracted. The correct pattern is a Firebase Cloud Function that performs the client-credentials OAuth flow, mints a short-lived access token, and makes the Graph call. Here is how to set it up: In the Azure Portal, go to Azure Active Directory → App registrations → New registration. Give it a name, select 'Accounts in this organizational directory only', and register. In the app's API permissions, add 'ChannelMessage.Send' (Application permission) and grant admin consent. Copy the Application (client) ID, Tenant ID, and create a Client Secret under Certificates & secrets. Store all three in your Firebase Cloud Function's environment config or Secret Manager — never in FlutterFlow. Deploy the Cloud Function below. In FlutterFlow, add a new API Call to your MicrosoftTeams group pointing at your Cloud Function URL, passing message params as body variables. FlutterFlow never touches Azure credentials directly.

1// Firebase Cloud Function — Microsoft Graph proxy (index.js)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5const TENANT_ID = functions.config().teams.tenant_id;
6const CLIENT_ID = functions.config().teams.client_id;
7const CLIENT_SECRET = functions.config().teams.client_secret;
8const TEAM_ID = functions.config().teams.team_id;
9const CHANNEL_ID = functions.config().teams.channel_id;
10
11async function getGraphToken() {
12  const res = await fetch(
13    `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`,
14    {
15      method: 'POST',
16      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
17      body: new URLSearchParams({
18        grant_type: 'client_credentials',
19        client_id: CLIENT_ID,
20        client_secret: CLIENT_SECRET,
21        scope: 'https://graph.microsoft.com/.default',
22      }),
23    }
24  );
25  const data = await res.json();
26  return data.access_token;
27}
28
29exports.sendTeamsMessage = functions.https.onRequest(async (req, res) => {
30  res.set('Access-Control-Allow-Origin', '*');
31  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
32  try {
33    const { content } = req.body;
34    const token = await getGraphToken();
35    const graphRes = await fetch(
36      `https://graph.microsoft.com/v1.0/teams/${TEAM_ID}/channels/${CHANNEL_ID}/messages`,
37      {
38        method: 'POST',
39        headers: {
40          Authorization: `Bearer ${token}`,
41          'Content-Type': 'application/json',
42        },
43        body: JSON.stringify({ body: { content } }),
44      }
45    );
46    const data = await graphRes.json();
47    res.status(200).json({ success: true, id: data.id });
48  } catch (err) {
49    res.status(500).json({ error: err.message });
50  }
51});