Outlook 365 API

Open the Azure Portal at portal.azure.com and sign in with your Microsoft 365 admin or developer account. In the left sidebar, click 'Azure Active Directory', then 'App registrations', then '+ New registration'. Give your app a name (e.g., 'FlutterFlow Mail App'), set the Supported account type to 'Accounts in this organizational directory only' (or 'Accounts in any organizational directory' if you want multi-tenant), and paste a Redirect URI — for now use `https://your-cloud-function-url/oauth/callback` (you'll fill this in properly after deploying the Cloud Function in Step 2). Click Register. Once created, note your **Application (client) ID** — you'll need this throughout. Now click 'API permissions' in the left menu → '+ Add a permission' → 'Microsoft Graph' → 'Delegated permissions'. Search for and add: `Mail.Read`, `Mail.Send`, and `offline_access`. Click 'Add permissions'. Then grant admin consent if your tenant requires it (the blue 'Grant admin consent' button). Next, click 'Certificates & secrets' → '+ New client secret'. Set an expiry (12 or 24 months), click Add, and immediately copy the **Value** — this is your Client Secret and Azure will never show it again. Store it securely (you'll paste it into your Cloud Function environment variables in the next step, never into FlutterFlow).

The Azure Client Secret must never be placed in FlutterFlow — it needs to live in a backend function that handles the token exchange. Open your Firebase project, navigate to Functions, and create a new Cloud Function. You'll implement two endpoints: `/oauth/callback` (receives the auth code from Microsoft's login redirect, exchanges it for access + refresh tokens, returns them to the app) and `/oauth/refresh` (accepts a refresh token, returns a new access token). In the Cloud Function code, load the Client Secret from Firebase environment config (`functions.config().azure.client_secret`) — not hardcoded. Use the `axios` or built-in `https` module to POST to `https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token` with grant_type `authorization_code` or `refresh_token`. Return the token response to FlutterFlow as JSON. After deploying, copy the callback endpoint URL (e.g., `https://us-central1-your-project.cloudfunctions.net/oauth/callback`) and go back to Azure Portal → your App Registration → Authentication → add this as a Redirect URI. Update the Redirect URI entry you set in Step 1 to this real URL. Set your Firebase config: `firebase functions:config:set azure.client_id='YOUR_ID' azure.client_secret='YOUR_SECRET' azure.tenant_id='YOUR_TENANT'`

1// index.js (Firebase Cloud Function)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5const CLIENT_ID = functions.config().azure.client_id;
6const CLIENT_SECRET = functions.config().azure.client_secret;
7const TENANT_ID = functions.config().azure.tenant_id;
8const REDIRECT_URI = functions.config().azure.redirect_uri;
9const TOKEN_URL = `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`;
10
11// Exchange auth code for tokens
12exports.oauthCallback = functions.https.onRequest(async (req, res) => {
13  const { code } = req.query;
14  try {
15    const params = new URLSearchParams({
16      client_id: CLIENT_ID,
17      client_secret: CLIENT_SECRET,
18      code,
19      redirect_uri: REDIRECT_URI,
20      grant_type: 'authorization_code',
21    });
22    const { data } = await axios.post(TOKEN_URL, params.toString(), {
23      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
24    });
25    // Return tokens to app (deep link or response)
26    res.json({ access_token: data.access_token, refresh_token: data.refresh_token, expires_in: data.expires_in });
27  } catch (e) {
28    res.status(500).json({ error: e.message });
29  }
30});
31
32// Refresh access token
33exports.oauthRefresh = functions.https.onRequest(async (req, res) => {
34  const { refresh_token } = req.body;
35  try {
36    const params = new URLSearchParams({
37      client_id: CLIENT_ID,
38      client_secret: CLIENT_SECRET,
39      refresh_token,
40      grant_type: 'refresh_token',
41    });
42    const { data } = await axios.post(TOKEN_URL, params.toString(), {
43      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
44    });
45    res.json({ access_token: data.access_token, expires_in: data.expires_in });
46  } catch (e) {
47    res.status(500).json({ error: e.message });
48  }
49});

Back in FlutterFlow, you need to send the user to Microsoft's login page and capture the auth code when they return. First, set up two App State variables: `msAccessToken` (String, persisted) and `msRefreshToken` (String, persisted). These will hold the tokens after the OAuth dance. In the Action Flow Editor of your 'Sign in with Microsoft' button, add a **Launch URL** action. Build the authorization URL dynamically using a Set from Custom Function that constructs: `https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize?client_id={clientId}&response_type=code&redirect_uri={encodedCallbackUrl}&scope=Mail.Read%20Mail.Send%20offline_access&response_mode=query`. Set the Launch URL to open in an in-app browser (use the `url_launcher` custom action or FlutterFlow's built-in Launch URL with External Browser option). When Microsoft redirects back to your Cloud Function callback, the function exchanges the code for tokens and returns them. Your Cloud Function can then redirect to your app's deep link (e.g., `yourapp://oauth/callback?access_token=...`) or you can handle this with a separate API Call from the app that polls a Firestore document the Cloud Function writes to. The deep-link approach requires configuring a custom URL scheme in FlutterFlow's App Settings → URL Scheme. Once the access token arrives in the app, store it in `msAccessToken` App State via a Set App State action. Store the refresh token in `msRefreshToken`. Add a separate action chain on app startup to check if the access token is expired (compare stored expiry timestamp to current time) and call the `/oauth/refresh` Cloud Function if needed.

Click **API Calls** in the FlutterFlow left nav, then click **+ Add** → **Create API Group**. Name it 'Microsoft Graph'. Set the Base URL to `https://graph.microsoft.com/v1.0`. In the Headers section, add one shared header: Key = `Authorization`, Value = `Bearer [accessToken]` where `[accessToken]` is an API Group variable. Click the Variables tab, add a variable named `accessToken` (String type). Back in the Headers section, set the Authorization value to `Bearer {{accessToken}}`. Now add the first API Call inside this group: click **+ Add API Call**, name it 'Get Inbox Messages'. Set method to GET, path to `/me/messages`. Add query parameters: `$top=20`, `$select=subject,from,receivedDateTime,bodyPreview`, `$orderby=receivedDateTime desc`. Click **Test** — you'll need to paste a valid access token in the variable field. If you get a 200 response, click 'Generate JSON Paths' and create paths for: `$.value[*].subject`, `$.value[*].from.emailAddress.address`, `$.value[*].receivedDateTime`, `$.value[*].bodyPreview`. Add a second API Call: name it 'Send Mail'. Method = POST, path = `/me/sendMail`. In the Body section, set type to JSON and use this template: ```json { "message": { "subject": "{{subject}}", "body": { "contentType": "HTML", "content": "{{body}}" }, "toRecipients": [{ "emailAddress": { "address": "{{toEmail}}" } }] } } ``` Add variables: `subject`, `body`, `toEmail` (all String).

1{
2  "group": "Microsoft Graph",
3  "baseUrl": "https://graph.microsoft.com/v1.0",
4  "headers": {
5    "Authorization": "Bearer {{accessToken}}"
6  },
7  "calls": [
8    {
9      "name": "Get Inbox Messages",
10      "method": "GET",
11      "path": "/me/messages",
12      "queryParams": {
13        "$top": "20",
14        "$select": "subject,from,receivedDateTime,bodyPreview",
15        "$orderby": "receivedDateTime desc"
16      }
17    },
18    {
19      "name": "Send Mail",
20      "method": "POST",
21      "path": "/me/sendMail",
22      "body": {
23        "message": {
24          "subject": "{{subject}}",
25          "body": { "contentType": "HTML", "content": "{{body}}" },
26          "toRecipients": [{ "emailAddress": { "address": "{{toEmail}}" } }]
27        }
28      }
29    }
30  ]
31}

On your inbox screen, add a ListView widget. In the Backend Query tab, set the data source to your 'Get Inbox Messages' API Call. Pass the `msAccessToken` App State variable as the `accessToken` argument. Map the JSON path results to child widgets: a Text widget for the subject, another for the sender address, and a subtitle Text for `bodyPreview`. Add a refresh button that re-runs the query — useful for pulling new messages. For the compose screen, add a Column with three TextFields: To Email, Subject, and Body (use a multiline TextField for the body). Add a Send button. In its Action Flow Editor, add an **API Request** action pointing at your 'Send Mail' API Call. Pass `msAccessToken` as the `accessToken` variable, and bind the TextField values to `toEmail`, `subject`, and `body` respectively. After the API Call action, add a **Conditional Action**: if the API response code is 202, show a SnackBar 'Email sent!', clear the form, and navigate back. If the response code is 401, trigger your token-refresh flow (call the `/oauth/refresh` Cloud Function, update `msAccessToken` in App State, retry the send). This 401 handler prevents silent failures when the access token expires mid-session. If you'd rather skip building the token refresh logic yourself, RapidDev's team handles FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

Microsoft access tokens expire after approximately 60 minutes. You need a proactive check on every screen that calls Graph. Create a custom Dart function (left nav → Custom Code → + Add → Function) named `isTokenExpired` that compares a stored expiry timestamp (in App State as `msTokenExpiry`, an integer UNIX timestamp) to `DateTime.now().millisecondsSinceEpoch`. If within 5 minutes of expiry, return true. In the Action Flow Editor of any screen that makes Graph calls, add an **If/Else** condition at the start: if `isTokenExpired()` returns true, first run the Refresh API Call (point a separate API Call at your Cloud Function's `/oauth/refresh` endpoint, pass `msRefreshToken`, update `msAccessToken` and `msTokenExpiry` in App State), then proceed to the actual Graph call. This ensures users never hit a 401 mid-flow. To test the complete OAuth flow, use FlutterFlow's Test Mode (Ctrl/Cmd + R → 'Test' in the top bar) which produces a real device build. The Microsoft login page, deep-link redirect, and IMAP/SMTP operations all require a real device build — they won't work in FlutterFlow's web Run mode. Install the TestFlight (iOS) or APK (Android) build on your device, tap 'Sign in with Microsoft', complete the login, and verify that emails appear in the ListView and that sending works.

1// Custom Dart Function: isTokenExpired
2// Arguments: tokenExpiry (int — UNIX ms timestamp)
3// Return type: bool
4bool isTokenExpired(int tokenExpiry) {
5  final now = DateTime.now().millisecondsSinceEpoch;
6  // Return true if token expires within 5 minutes
7  return now >= tokenExpiry - (5 * 60 * 1000);
8}