How to Integrate OneDrive with V0

Before writing any code, you need to register your application in Azure Active Directory to get the OAuth2 credentials that allow your app to request access to users' OneDrive accounts. This is a one-time setup that takes about 10 minutes. Go to portal.azure.com and sign in with your Microsoft account. Navigate to Azure Active Directory → App registrations → New registration. Give your app a name (e.g., 'My V0 App OneDrive'). Under 'Supported account types', select 'Accounts in any organizational directory and personal Microsoft accounts (Multitenant + personal)' — this allows both personal OneDrive and Microsoft 365 work accounts to connect. For 'Redirect URI', select 'Web' and enter your Vercel deployment URL followed by your callback path: `https://your-app.vercel.app/api/auth/callback/microsoft`. For local development, add a second redirect URI: `http://localhost:3000/api/auth/callback/microsoft`. After registration, note the Application (client) ID displayed on the overview page — this is your `NEXT_PUBLIC_AZURE_CLIENT_ID`. Then go to Certificates & secrets → New client secret. Give it a description and set an expiration (12 or 24 months). Copy the secret value immediately — it is only shown once. This is your `AZURE_CLIENT_SECRET`. Finally, go to API permissions → Add a permission → Microsoft Graph → Delegated permissions. Search for and add: `Files.ReadWrite` (read and write user's OneDrive files), `User.Read` (read user profile), and optionally `offline_access` (to get a refresh token for long-lived sessions). Click 'Grant admin consent' if this is a work account and you have admin rights.

1// Azure App Registration summary:
2// 1. portal.azure.com → Azure Active Directory → App registrations → New registration
3// 2. Name: Your App Name
4// 3. Supported account types: Multitenant + personal (allows both work and personal OneDrive)
5// 4. Redirect URI: https://your-app.vercel.app/api/auth/callback/microsoft
6// 5. After registration: note Application (client) ID
7// 6. Certificates & secrets → New client secret → copy the VALUE (not the ID)
8// 7. API permissions → Add → Microsoft Graph → Delegated:
9//    - Files.ReadWrite
10//    - User.Read
11//    - offline_access

OneDrive access requires users to sign in with Microsoft and grant your app permission to access their files. Implement the OAuth2 authorization code flow with two API routes: one that redirects to Microsoft's login page, and one that handles the callback and exchanges the authorization code for an access token. The authorization URL for Microsoft OAuth2 is `https://login.microsoftonline.com/common/oauth2/v2.0/authorize` with parameters: `client_id`, `response_type=code`, `redirect_uri`, `scope` (space-separated list of permissions: `Files.ReadWrite User.Read offline_access`), and a `state` parameter (a random string for CSRF protection). Create `app/api/auth/microsoft/route.ts` that generates the authorization URL with a random state parameter (stored in a secure HTTP-only cookie for verification), and redirects the user to Microsoft's login page. Create `app/api/auth/callback/microsoft/route.ts` that handles the OAuth callback. It receives the authorization code and state parameter, verifies the state matches the cookie (CSRF protection), exchanges the code for tokens by calling `POST https://login.microsoftonline.com/common/oauth2/v2.0/token` with your client credentials, and stores the access token and refresh token securely (in an HTTP-only cookie or your database). For a simpler approach, use the `next-auth` library with the Microsoft Entra ID (Azure AD) provider — it handles the entire OAuth2 flow including CSRF protection, token storage, and refresh token rotation automatically. Ask V0 to generate the NextAuth configuration for Microsoft provider.

1// app/api/auth/microsoft/route.ts — Initiate OAuth2 flow
2import { NextResponse } from 'next/server'
3import crypto from 'crypto'
4
5export async function GET() {
6  const clientId = process.env.NEXT_PUBLIC_AZURE_CLIENT_ID!
7  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback/microsoft`
8  const state = crypto.randomBytes(16).toString('hex')
9
10  const authUrl = new URL('https://login.microsoftonline.com/common/oauth2/v2.0/authorize')
11  authUrl.searchParams.set('client_id', clientId)
12  authUrl.searchParams.set('response_type', 'code')
13  authUrl.searchParams.set('redirect_uri', redirectUri)
14  authUrl.searchParams.set('scope', 'Files.ReadWrite User.Read offline_access')
15  authUrl.searchParams.set('state', state)
16  authUrl.searchParams.set('response_mode', 'query')
17
18  const response = NextResponse.redirect(authUrl.toString())
19  response.cookies.set('oauth_state', state, {
20    httpOnly: true,
21    secure: process.env.NODE_ENV === 'production',
22    maxAge: 600, // 10 minutes
23    path: '/',
24  })
25  return response
26}
27
28// app/api/auth/callback/microsoft/route.ts — Handle OAuth callback
29export async function GET(request: Request) {
30  const { searchParams } = new URL(request.url)
31  const code = searchParams.get('code')
32  const state = searchParams.get('state')
33
34  const tokenResponse = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
35    method: 'POST',
36    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
37    body: new URLSearchParams({
38      client_id: process.env.NEXT_PUBLIC_AZURE_CLIENT_ID!,
39      client_secret: process.env.AZURE_CLIENT_SECRET!,
40      code: code!,
41      redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback/microsoft`,
42      grant_type: 'authorization_code',
43    }),
44  })
45
46  const tokens = await tokenResponse.json()
47
48  const response = NextResponse.redirect(`${process.env.NEXT_PUBLIC_APP_URL}/dashboard`)
49  response.cookies.set('ms_access_token', tokens.access_token, {
50    httpOnly: true,
51    secure: true,
52    maxAge: tokens.expires_in,
53    path: '/',
54  })
55  if (tokens.refresh_token) {
56    response.cookies.set('ms_refresh_token', tokens.refresh_token, {
57      httpOnly: true,
58      secure: true,
59      maxAge: 60 * 60 * 24 * 30, // 30 days
60      path: '/',
61    })
62  }
63  return response
64}

With the OAuth2 flow working, create the Microsoft Graph API routes for OneDrive file operations. The Microsoft Graph base URL is `https://graph.microsoft.com/v1.0`. All requests use the user's access token in the Authorization header: `Authorization: Bearer {accessToken}`. Create a route for listing files at `app/api/onedrive/files/route.ts`. This route reads the access token from the request cookie, calls the Microsoft Graph `/me/drive/root/children` endpoint to list root folder contents, and returns file metadata. For subfolder navigation, accept a `folderId` query parameter and call `/me/drive/items/{folderId}/children` instead. Create a file upload route at `app/api/onedrive/upload/route.ts`. The Microsoft Graph API supports simple upload for files under 4MB using `PUT /me/drive/root:/{filename}:/content` with the file content in the request body. For larger files, use the resumable upload session API. Accept a FormData POST with the file and target path. Create a download URL route at `app/api/onedrive/download/route.ts`. Rather than proxying file content through your API (which adds latency for large files), fetch the `@microsoft.graph.downloadUrl` property from the file item, which is a pre-authorized direct download URL valid for a few hours. Create a share link route at `app/api/onedrive/share/route.ts` that calls `POST /me/drive/items/{itemId}/createLink` with a type of 'view' or 'edit' to generate shareable links for OneDrive files.

1// app/api/onedrive/files/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3
4export async function GET(request: NextRequest) {
5  const accessToken = request.cookies.get('ms_access_token')?.value
6  if (!accessToken) {
7    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
8  }
9
10  const { searchParams } = new URL(request.url)
11  const folderId = searchParams.get('folderId')
12
13  const endpoint = folderId
14    ? `https://graph.microsoft.com/v1.0/me/drive/items/${folderId}/children`
15    : 'https://graph.microsoft.com/v1.0/me/drive/root/children'
16
17  const params = new URLSearchParams({
18    '$select': 'id,name,size,lastModifiedDateTime,file,folder,@microsoft.graph.downloadUrl,webUrl',
19    '$orderby': 'name',
20    '$top': '100',
21  })
22
23  const response = await fetch(`${endpoint}?${params}`, {
24    headers: { Authorization: `Bearer ${accessToken}` },
25  })
26
27  if (response.status === 401) {
28    return NextResponse.json({ error: 'Token expired', code: 'TOKEN_EXPIRED' }, { status: 401 })
29  }
30
31  const data = await response.json()
32  return NextResponse.json({
33    files: data.value || [],
34    nextLink: data['@odata.nextLink'] || null,
35  })
36}
37
38// app/api/onedrive/upload/route.ts
39export async function POST(request: NextRequest) {
40  const accessToken = request.cookies.get('ms_access_token')?.value
41  if (!accessToken) {
42    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
43  }
44
45  const formData = await request.formData()
46  const file = formData.get('file') as File
47  const folderPath = formData.get('folderPath') as string || ''
48
49  if (!file) {
50    return NextResponse.json({ error: 'No file provided' }, { status: 400 })
51  }
52
53  const fileBuffer = await file.arrayBuffer()
54  const uploadPath = folderPath
55    ? `/me/drive/root:/${folderPath}/${file.name}:/content`
56    : `/me/drive/root:/${file.name}:/content`
57
58  const uploadResponse = await fetch(`https://graph.microsoft.com/v1.0${uploadPath}`, {
59    method: 'PUT',
60    headers: {
61      Authorization: `Bearer ${accessToken}`,
62      'Content-Type': file.type || 'application/octet-stream',
63    },
64    body: fileBuffer,
65  })
66
67  const uploadedFile = await uploadResponse.json()
68  return NextResponse.json({ file: uploadedFile }, { status: uploadResponse.ok ? 200 : 400 })
69}

Add all Azure app credentials to Vercel. Go to Vercel Dashboard → your project → Settings → Environment Variables. Add `NEXT_PUBLIC_AZURE_CLIENT_ID` with your Azure app's Application (client) ID. This needs the `NEXT_PUBLIC_` prefix because the OAuth2 authorization URL is constructed client-side or in your API route. Add `AZURE_CLIENT_SECRET` without any `NEXT_PUBLIC_` prefix — this server-only credential is used to exchange authorization codes for tokens and must never reach the browser. Add `NEXT_PUBLIC_APP_URL` with your Vercel deployment URL (e.g., `https://your-app.vercel.app`) — this is used as the base for OAuth redirect URIs. Ensure your Azure app registration includes your Vercel deployment URL as an allowed redirect URI. In the Azure portal → your app registration → Authentication → Redirect URIs, add `https://your-app.vercel.app/api/auth/callback/microsoft`. If you have preview deployments on different URLs, you can add those too, or use a single stable production URL. After deployment, test the full OAuth2 flow: click the Microsoft sign-in button, sign in with your Microsoft account, grant permissions when prompted, and verify you are redirected back to your app with access to your OneDrive files. The file browser should list your OneDrive root folder contents. For enterprise applications where users belong to a specific Microsoft 365 tenant (company), replace `common` in the OAuth2 URLs with your specific tenant ID for enhanced security and to restrict access to only your organization's accounts.

1// Vercel Dashboard → Settings → Environment Variables:
2// NEXT_PUBLIC_AZURE_CLIENT_ID = your-azure-app-client-id
3// AZURE_CLIENT_SECRET = your-azure-client-secret-value
4// NEXT_PUBLIC_APP_URL = https://your-app.vercel.app
5
6// Azure Portal → App Registration → Authentication:
7// Add redirect URI: https://your-app.vercel.app/api/auth/callback/microsoft
8// Also add: http://localhost:3000/api/auth/callback/microsoft (for local dev)
9
10// Microsoft Graph API limits:
11// Simple upload (PUT): max 4 MB per file
12// Large file upload sessions: up to 250 GB
13// Rate limit: 10,000 requests per 10 minutes per app per tenant