How to Integrate Bolt.new with OneDrive

The first step for any Microsoft Graph integration is registering an Azure AD application. This gives your Bolt app a client ID and client secret that Microsoft uses to identify your application during the OAuth flow. Log into portal.azure.com and navigate to Azure Active Directory → App registrations → New registration. Fill in the registration form: Name (your app name, e.g., 'MyBoltApp'), Supported account types (choose 'Accounts in any organizational directory and personal Microsoft accounts' for the broadest compatibility — this allows both work and personal OneDrive), Redirect URI (set to 'Web' type and enter your Netlify URL + /api/auth/microsoft/callback, e.g., https://your-app.netlify.app/api/auth/microsoft/callback). After registering, you land on the app's Overview page showing your Application (client) ID — copy this. Then navigate to Certificates & secrets → New client secret, enter a description, set expiry to 24 months, and click Add. Copy the secret Value immediately — it is only shown once. Next, configure API permissions: go to API permissions → Add a permission → Microsoft Graph → Delegated permissions. Add these scopes: Files.ReadWrite (create, read, update, delete user's files), offline_access (enables refresh tokens), and optionally User.Read (to get the user's name and email). Click 'Grant admin consent' if you are testing with a work account — personal accounts grant consent during the OAuth flow automatically.

1# .env
2MICROSOFT_CLIENT_ID=your_azure_ad_application_client_id
3MICROSOFT_CLIENT_SECRET=your_azure_ad_client_secret_value
4MICROSOFT_REDIRECT_URI=https://your-app.netlify.app/api/auth/microsoft/callback
5MICROSOFT_TENANT_ID=common
6
7# After deployment, add to Netlify Dashboard:
8# Site Settings → Environment Variables → add all four above

The OAuth authorization code flow requires two API routes: an initiation route that redirects users to Microsoft's login page, and a callback route that exchanges the authorization code for access tokens. Microsoft's identity platform is OpenID Connect compatible, meaning the same flow works for both login and permission consent. The initiation route (/api/auth/microsoft) builds the authorization URL using your MICROSOFT_CLIENT_ID, MICROSOFT_REDIRECT_URI, and the scopes you need (Files.ReadWrite offline_access User.Read openid). It adds a state parameter — a random value you generate and store in a session cookie — to prevent CSRF attacks. The user is redirected to this URL and sees Microsoft's login screen. The callback route (/api/auth/microsoft/callback) receives the authorization code from Microsoft after the user consents. It validates the state parameter against what you stored (CSRF protection), then makes a POST request to https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token to exchange the code for an access_token, refresh_token, and id_token. Store the tokens securely — access tokens expire in 1 hour, but you can use the refresh token to obtain new ones. For a simple Bolt app, store tokens in an httpOnly cookie or a server-side session. Never store them in localStorage (XSS risk) or client-side state. This OAuth flow only works on a deployed app since the redirect URI must match the registered URL exactly. During Bolt development, you can test the file operation API routes independently using a test access token obtained manually from Microsoft Graph Explorer (graph.microsoft.com) — paste a test token into the API route for development iteration before wiring up the full OAuth flow.

1// app/api/auth/microsoft/route.ts
2import { NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5export async function GET() {
6  const state = crypto.randomBytes(16).toString('hex');
7  const params = new URLSearchParams({
8    client_id: process.env.MICROSOFT_CLIENT_ID!,
9    response_type: 'code',
10    redirect_uri: process.env.MICROSOFT_REDIRECT_URI!,
11    scope: 'Files.ReadWrite offline_access User.Read openid',
12    state,
13  });
14  const authUrl = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?${params}`;
15  const response = NextResponse.redirect(authUrl);
16  response.cookies.set('oauth_state', state, { httpOnly: true, secure: true, maxAge: 600 });
17  return response;
18}
19
20// app/api/auth/microsoft/callback/route.ts
21import { NextRequest, NextResponse } from 'next/server';
22
23export async function GET(request: NextRequest) {
24  const { searchParams } = new URL(request.url);
25  const code = searchParams.get('code');
26  const state = searchParams.get('state');
27  const storedState = request.cookies.get('oauth_state')?.value;
28
29  if (!code || state !== storedState) {
30    return NextResponse.redirect('/login?error=invalid_state');
31  }
32
33  const tokenRes = await fetch(
34    `https://login.microsoftonline.com/common/oauth2/v2.0/token`,
35    {
36      method: 'POST',
37      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
38      body: new URLSearchParams({
39        client_id: process.env.MICROSOFT_CLIENT_ID!,
40        client_secret: process.env.MICROSOFT_CLIENT_SECRET!,
41        code,
42        redirect_uri: process.env.MICROSOFT_REDIRECT_URI!,
43        grant_type: 'authorization_code',
44      }),
45    }
46  );
47  const tokens = await tokenRes.json();
48
49  const response = NextResponse.redirect('/dashboard');
50  response.cookies.set('ms_access_token', tokens.access_token, { httpOnly: true, secure: true, maxAge: 3600 });
51  response.cookies.set('ms_refresh_token', tokens.refresh_token, { httpOnly: true, secure: true, maxAge: 86400 * 30 });
52  response.cookies.delete('oauth_state');
53  return response;
54}

With OAuth tokens in place, use the @microsoft/microsoft-graph-client package to interact with OneDrive. The Graph client handles authentication header injection, request retries, and response parsing. Initialize it with the user's access token from your session cookies. Key Microsoft Graph endpoints for OneDrive: GET /me/drive/root/children (root folder contents), GET /me/drive/items/{itemId}/children (subfolder contents), GET /me/drive/items/{itemId}/content (download file content), PUT /me/drive/root:/{path}:/content (upload a file by path), POST /me/drive/items/{itemId}/createLink (generate a sharing link). The Graph API returns DriveItem objects — each has properties: id, name, size, lastModifiedDateTime, file (if file) or folder (if folder), @microsoft.graph.downloadUrl (temporary download URL). For file listing, the response includes an array of DriveItem objects. Files have a 'file' property with mimeType; folders have a 'folder' property with childCount. Use this to determine the icon to display in your file browser. For large folders, use Graph's pagination: the response may include @odata.nextLink — follow this URL to get the next page of results. File upload uses a simple PUT request for files under 4MB, or the resumable upload session API for larger files. For user uploads in a Bolt app, files up to 4MB work fine with the simple PUT; guide users to use smaller files or implement the resumable session for production apps handling large documents.

1// lib/graph.ts
2import { Client } from '@microsoft/microsoft-graph-client';
3import 'isomorphic-fetch';
4
5export function getGraphClient(accessToken: string): Client {
6  return Client.init({
7    authProvider: (done) => done(null, accessToken),
8  });
9}
10
11export interface DriveItem {
12  id: string;
13  name: string;
14  size?: number;
15  lastModifiedDateTime: string;
16  isFolder: boolean;
17  downloadUrl?: string;
18  mimeType?: string;
19}
20
21// app/api/onedrive/files/route.ts
22import { NextRequest, NextResponse } from 'next/server';
23import { getGraphClient, DriveItem } from '@/lib/graph';
24
25export async function GET(request: NextRequest) {
26  const accessToken = request.cookies.get('ms_access_token')?.value;
27  if (!accessToken) {
28    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
29  }
30
31  const { searchParams } = new URL(request.url);
32  const folderId = searchParams.get('folderId');
33  const client = getGraphClient(accessToken);
34
35  try {
36    const endpoint = folderId
37      ? `/me/drive/items/${folderId}/children`
38      : '/me/drive/root/children';
39
40    const result = await client
41      .api(endpoint)
42      .select('id,name,size,lastModifiedDateTime,file,folder,@microsoft.graph.downloadUrl')
43      .orderby('name')
44      .get();
45
46    const items: DriveItem[] = result.value.map((item: Record<string, unknown>) => ({
47      id: item.id as string,
48      name: item.name as string,
49      size: item.size as number | undefined,
50      lastModifiedDateTime: item.lastModifiedDateTime as string,
51      isFolder: Boolean(item.folder),
52      downloadUrl: item['@microsoft.graph.downloadUrl'] as string | undefined,
53      mimeType: item.file ? (item.file as { mimeType: string }).mimeType : undefined,
54    }));
55
56    return NextResponse.json({ items });
57  } catch (error: unknown) {
58    const e = error as { message: string };
59    return NextResponse.json({ error: e.message }, { status: 500 });
60  }
61}

With the API routes returning OneDrive file data, build the React UI for browsing and selecting files. The file browser needs to handle folder navigation, display file metadata, and allow users to select or download files. A breadcrumb trail shows the current path and allows navigating back to parent folders. State management for the file browser: track the current folderId (null for root), the folder navigation history as a stack (for back navigation and breadcrumb), the list of DriveItems in the current folder, loading state, and error state. When the user clicks a folder, push the current folder to the history stack and set the new folderId. Back button pops from the history stack. For file icons, map MIME types to icons: image/* → image icon, application/pdf → PDF icon, application/vnd.openxmlformats-officedocument.* (Office formats) → Word/Excel/PowerPoint icons, folders use a folder icon. Use text-based emoji or an icon library like Lucide React (which Bolt uses by default) for the icons. File size formatting helper: OneDrive returns size in bytes — convert to KB/MB for display. File date formatting: lastModifiedDateTime is ISO 8601 — format using JavaScript's Intl.DateTimeFormat for locale-appropriate display.

1// Utility functions for the file browser:
2
3function formatFileSize(bytes?: number): string {
4  if (!bytes) return '-';
5  if (bytes < 1024) return `${bytes} B`;
6  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
7  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
8}
9
10function formatDate(isoDate: string): string {
11  return new Intl.DateTimeFormat('en-US', {
12    year: 'numeric',
13    month: 'short',
14    day: 'numeric',
15  }).format(new Date(isoDate));
16}
17
18function getFileIcon(item: { isFolder: boolean; mimeType?: string }): string {
19  if (item.isFolder) return '📁';
20  const mime = item.mimeType || '';
21  if (mime.startsWith('image/')) return '🖼️';
22  if (mime === 'application/pdf') return '📄';
23  if (mime.includes('word')) return '📝';
24  if (mime.includes('spreadsheet') || mime.includes('excel')) return '📊';
25  if (mime.includes('presentation') || mime.includes('powerpoint')) return '📑';
26  return '📎';
27}

Deploy to Netlify so the Microsoft OAuth redirect URI works correctly. The OAuth flow is the only part that cannot be tested in Bolt's WebContainer — file operations (listing, uploading, downloading via Graph API) are outbound HTTPS requests that work in the preview if you have a test access token, but the OAuth initiation → callback flow requires a stable deployed URL. Deploy steps: connect your Bolt project to Netlify via Settings → Applications → Netlify, publish the project. After deployment, note your Netlify URL (e.g., your-app.netlify.app). In Azure AD app registration, verify your Redirect URI matches https://your-app.netlify.app/api/auth/microsoft/callback exactly (including https, no trailing slash). Add your B2 environment variables in Netlify Dashboard → Site Settings → Environment Variables: MICROSOFT_CLIENT_ID, MICROSOFT_CLIENT_SECRET, MICROSOFT_REDIRECT_URI (your Netlify callback URL), MICROSOFT_TENANT_ID. Test the full flow: navigate to your Netlify app, click a 'Connect OneDrive' button that triggers /api/auth/microsoft, complete the Microsoft login, confirm you land back on /dashboard with OneDrive files accessible. Check Netlify function logs if the callback fails — common issues are a mismatched redirect URI or missing client secret. Once authenticated, the file operations continue working on subsequent visits using the refresh token to obtain new access tokens.

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"
11
12# Required environment variables in Netlify Dashboard:
13# MICROSOFT_CLIENT_ID
14# MICROSOFT_CLIENT_SECRET
15# MICROSOFT_REDIRECT_URI = https://your-app.netlify.app/api/auth/microsoft/callback
16# MICROSOFT_TENANT_ID = common