OneDrive

Open portal.azure.com in your browser. In the top search bar, type App registrations and click the result. Click New registration. Give the app a name like FlutterFlow OneDrive App. For Supported account types, choose Accounts in any organizational directory and personal Microsoft accounts — this covers personal OneDrive as well as work accounts. In the Redirect URI field, enter the URL of your backend proxy function (for example https://us-central1-your-project.cloudfunctions.net/oneDriveAuth). Click Register. Once created, copy the Application (client) ID and the Directory (tenant) ID shown on the overview page — you will need both. In the left sidebar, click Certificates & secrets. Click New client secret, give it a description and an expiry period, then click Add. Copy the Value immediately — it is shown only once and is your client secret. This value must never leave your backend function. Next, click API permissions in the left sidebar → Add a permission → Microsoft Graph → Delegated permissions. Search for Files and check Files.ReadWrite.All. Click Add permissions. For apps that also access shared drives or SharePoint, add Sites.Read.All. Individual users will consent to these permissions during the OAuth flow, so admin consent is not required for personal OneDrive scenarios.

Because the Azure AD token endpoint requires your client secret, this step runs entirely outside FlutterFlow on a backend you control. You will deploy a small HTTP function that accepts the OAuth authorization code returned to the user's browser, exchanges it for an access token using the Azure token endpoint, and returns only the access token to FlutterFlow. In the Firebase console, open Functions and create a new HTTP function named oneDriveAuth (or use Supabase Edge Functions if that is your backend). The function accepts a POST request with a code parameter, calls https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token with your client secret, and returns the access_token in the response JSON. Create a second function named oneDriveRefresh that accepts a refresh token, calls the same endpoint with grant_type=refresh_token, and returns a fresh access_token. Store the refresh token server-side — keyed to the user's identifier — and do NOT send it to FlutterFlow. Deploy both functions and note their public HTTPS URLs. Restrict them with a shared API secret header so only your app can call them.

1// Firebase Cloud Function — token exchange proxy
2// functions/index.js (Node.js)
3const functions = require('firebase-functions');
4const axios = require('axios');
5
6const CLIENT_ID = functions.config().azure.client_id;
7const CLIENT_SECRET = functions.config().azure.client_secret;
8const TENANT_ID = functions.config().azure.tenant_id;
9const REDIRECT_URI = functions.config().azure.redirect_uri;
10
11exports.oneDriveAuth = functions.https.onRequest(async (req, res) => {
12  res.set('Access-Control-Allow-Origin', '*');
13  if (req.method === 'OPTIONS') return res.status(204).send('');
14  if (req.method !== 'POST') return res.status(405).send('Method Not Allowed');
15
16  const { code } = req.body;
17  if (!code) return res.status(400).json({ error: 'Missing code' });
18
19  const params = new URLSearchParams({
20    client_id: CLIENT_ID,
21    client_secret: CLIENT_SECRET,
22    code,
23    redirect_uri: REDIRECT_URI,
24    grant_type: 'authorization_code',
25    scope: 'Files.ReadWrite.All offline_access',
26  });
27
28  try {
29    const tokenRes = await axios.post(
30      `https://login.microsoftonline.com/${TENANT_ID}/oauth2/v2.0/token`,
31      params.toString(),
32      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
33    );
34    // Store refreshToken in Firestore; return only access_token
35    res.json({ access_token: tokenRes.data.access_token });
36  } catch (err) {
37    res.status(500).json({ error: err.message });
38  }
39});
40

In FlutterFlow, go to App State in the left nav and create two variables: accessToken (Type: String, default empty) and tokenExpiry (Type: Integer, default 0 — stores the Unix timestamp of expiry). These variables persist across pages and power every Graph API call. Create a new page called OneDriveLogin. Add a Button labeled Sign in with Microsoft. In the Action Flow Editor for that button, add a Launch URL action that opens the Azure authorization URL: https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_FUNCTION_URL&scope=Files.ReadWrite.All+offline_access&response_mode=query The redirect URI points to your backend function. After the function exchanges the code for a token, it can redirect the user back to your app via a deep link (for example myapp://auth?token=ACCESS_TOKEN). In FlutterFlow, configure deep links under Settings & Integrations → Mobile Deployment → Deep Links. On web builds, the function can redirect to a /auth-callback page that reads the token from a URL query parameter using a Custom Action. On the callback page, add an On Page Load action that reads the token from the URL query parameters and calls Set App State to save it to accessToken. Also save the current timestamp plus 3,540 seconds (59 minutes) to tokenExpiry so you know when to refresh. Navigate the user to the main file browser page after the state is saved.

In the FlutterFlow left nav, click API Calls → + Add → Create API Group. Name it MSGraph and set the base URL to https://graph.microsoft.com/v1.0. In the Headers tab, add one header: Key = Authorization, Value = Bearer [accessToken]. Click the small variable chip next to the value field and select App State → accessToken. This dynamically injects the token into every call in this group. Now add your first API Call. Click MSGraph → + Add API Call. Name it listDriveFiles. Set the method to GET and the endpoint to /me/drive/root/children. Switch to the Response & Test tab, paste a sample Graph response (a JSON object with a value array of DriveItem objects), and click Generate JSON Path. FlutterFlow will produce paths like $.value[*].name, $.value[*].id, $.value[*].webUrl, and $.value[*].lastModifiedDateTime. Add a second API Call named uploadFile. Method = PUT, endpoint = /me/drive/root:/{{filename}}:/content. In the Variables tab, add a filename variable (String) and a fileContent variable (String for base64). Set the body type to Binary and bind fileContent. Add a third API Call named createShareLink. Method = POST, endpoint = /me/drive/items/{{itemId}}/createLink. Add an itemId variable. Body = {"type":"view","scope":"anonymous"}. In the Response & Test tab, add JSON path $.link.webUrl to capture the shareable URL.

1// API Group reference — MSGraph
2{
3  "base_url": "https://graph.microsoft.com/v1.0",
4  "headers": {
5    "Authorization": "Bearer {{accessToken}}"
6  },
7  "calls": [
8    {
9      "name": "listDriveFiles",
10      "method": "GET",
11      "endpoint": "/me/drive/root/children",
12      "json_paths": [
13        "$.value[*].name",
14        "$.value[*].id",
15        "$.value[*].webUrl",
16        "$.value[*].lastModifiedDateTime"
17      ]
18    },
19    {
20      "name": "uploadFile",
21      "method": "PUT",
22      "endpoint": "/me/drive/root:/{{filename}}:/content",
23      "body_type": "binary"
24    },
25    {
26      "name": "createShareLink",
27      "method": "POST",
28      "endpoint": "/me/drive/items/{{itemId}}/createLink",
29      "body": { "type": "view", "scope": "anonymous" },
30      "json_paths": ["$.link.webUrl"]
31    }
32  ]
33}
34

Navigate to your main files page. Add a ListView widget. In the Backend Query panel on the right, select API Call → MSGraph → listDriveFiles. Set the list source to the $.value JSON path (the array of DriveItem objects). FlutterFlow will iterate over the array to populate the ListView. Inside the ListView, add a Column containing a Text widget bound to $.name (file name) and a subtitle Text widget bound to $.lastModifiedDateTime. Add an icon button (share icon) at the end of the row. For the share button's action, add a Backend/API Call action → MSGraph → createShareLink, binding itemId to the current list item's $.id. After the call succeeds, add a Copy to Clipboard action bound to the API response JSON path $.link.webUrl, and show a Snackbar with the message Link copied. For uploading, add a FilePicker action to a dedicated Upload button. This returns the selected file as bytes and a file name. Store them in Page State variables (fileBytes and fileName). Then add a Backend/API Call action → MSGraph → uploadFile, binding filename to the fileName Page State variable and fileContent to the fileBytes variable. After a successful upload (response code 200 or 201), trigger a ListView refresh by re-running the listDriveFiles backend query. Note: for files larger than 4 MB, the simple PUT returns a 413 or 400 error. You will need to first call POST /me/drive/root:/{filename}:/createUploadSession (add a fourth API Call for this) to get a one-time uploadUrl, then PUT file chunks to that URL. This multi-step flow is most reliably implemented as a Custom Action in Dart.

The OAuth deep-link redirect only works in a real built app (APK, TestFlight, or published web). Use FlutterFlow's Run mode to generate a quick test build. During active development, bypass the sign-in flow by manually populating the accessToken App State variable with a temporary token from Microsoft Graph Explorer (developer.microsoft.com/graph/graph-explorer) — retrieve one there in two clicks. Remove that hard-coded token before your production release. For production token refresh, add a Custom Action to FlutterFlow: in the left nav → Custom Code → + Add → Action. Name it refreshOneDriveToken. This Dart action reads the tokenExpiry from App State, checks if the current Unix timestamp is within 600 seconds of expiry, and if so makes an HTTP POST to your /oneDriveRefresh Cloud Function URL. The function returns a new access_token; the action saves it to App State accessToken and updates tokenExpiry. Call this Custom Action in an On Page Load trigger on every page that uses OneDrive data, before any API Calls run. This keeps the session alive transparently without the user needing to re-authenticate more than once per session. If setting up and maintaining the OAuth proxy and token refresh infrastructure feels like too much for your current stage, the RapidDev team handles FlutterFlow integrations like this regularly — book a free scoping call at rapidevelopers.com/contact.

1// Custom Action: refreshOneDriveToken
2// FlutterFlow Custom Code → + Add → Action
3import 'package:http/http.dart' as http;
4import 'dart:convert';
5
6Future refreshOneDriveToken() async {
7  final expiry = FFAppState().tokenExpiry; // Unix timestamp
8  final now = DateTime.now().millisecondsSinceEpoch ~/ 1000;
9  if (expiry - now > 600) return; // Still valid for 10+ minutes
10
11  const refreshUrl = 'https://us-central1-your-project.cloudfunctions.net/oneDriveRefresh';
12  final response = await http.post(
13    Uri.parse(refreshUrl),
14    headers: {'Content-Type': 'application/json'},
15    body: jsonEncode({'uid': FFAppState().currentUserId}),
16  );
17
18  if (response.statusCode == 200) {
19    final data = jsonDecode(response.body);
20    FFAppState().update(() {
21      FFAppState().accessToken = data['access_token'];
22      FFAppState().tokenExpiry =
23          DateTime.now().millisecondsSinceEpoch ~/ 1000 + 3540;
24    });
25  }
26}
27