How to Integrate Lovable with OneDrive

All OneDrive API access requires an Azure Active Directory application registration. Go to portal.azure.com and sign in. In the search bar, type 'App registrations' and click the result. Click 'New registration'. Give the app a name (e.g., 'Lovable OneDrive Integration'), select 'Accounts in this organizational directory only' for single-tenant apps or 'Accounts in any organizational directory' for multi-tenant. For the redirect URI, select 'Web' and enter a placeholder URL for now (you can update this later if using delegated auth). Click Register. After registration, you land on the app's overview page. Note the Application (client) ID — this is your OAuth2 client ID. Also note the Directory (tenant) ID — this identifies your Azure AD tenant. These values are needed for authentication. Next, create a client secret. Go to Certificates & Secrets → New client secret. Enter a description ('Lovable production') and choose an expiry period (24 months is common — shorter is more secure, but requires rotation). Click Add. The secret value is shown only once — copy it immediately. This is your OAuth2 client secret. Finally, configure API permissions for OneDrive access. Go to API Permissions → Add a permission → Microsoft Graph. Choose Application permissions (for server-to-server access without user login). Add: Files.Read.All (for reading files), Files.ReadWrite.All (for reading and writing files), and Sites.Read.All (if you need SharePoint access). Click 'Grant admin consent for [your organization]' — this authorization step is required for Application permissions to work. Without it, all API calls return a 'Authorization_RequestDenied' error.

Open your Lovable project's Cloud tab (click '+' next to Preview) and navigate to Secrets. Add the following credentials for Microsoft Graph access. Add AZURE_CLIENT_ID with your Application (client) ID from the Azure portal. Add AZURE_CLIENT_SECRET with the client secret value you copied. Add AZURE_TENANT_ID with your Directory (tenant) ID. Optionally add ONEDRIVE_USER_ID with the Microsoft user ID (or user principal name like user@organization.com) of the OneDrive account your app should access — this scopes the app to a specific user's OneDrive rather than searching across the entire organization. For each secret: click 'Add secret', enter the key name exactly as shown (case-sensitive), paste the value without surrounding whitespace, and save. These three values are all that is needed for the OAuth2 client credentials flow — the Edge Function uses them to obtain Microsoft Graph access tokens automatically. Client secrets in Azure AD expire after the period you chose (e.g., 24 months). When a secret expires, all API calls fail with authentication errors. Set a calendar reminder well before expiry to rotate the secret: generate a new client secret in Azure portal, update AZURE_CLIENT_SECRET in Lovable's Cloud Secrets, and the Edge Function will use the new secret on the next invocation. Lovable's encrypted secrets storage (SOC 2 Type II certified) ensures these credentials are protected at rest.

The Edge Function authenticates with Azure AD using the OAuth2 client credentials flow and then makes Microsoft Graph API calls for OneDrive operations. The client credentials flow is straightforward: POST to Azure's token endpoint with the client ID, secret, and Graph scope, receiving a Bearer access token valid for 1 hour. Microsoft Graph API for OneDrive uses a consistent URL structure. For a specific user's OneDrive: https://graph.microsoft.com/v1.0/users/{userId}/drive/root for the root, https://graph.microsoft.com/v1.0/users/{userId}/drive/root:/{path}: for path-based access, and https://graph.microsoft.com/v1.0/users/{userId}/drive/items/{itemId} for ID-based access. The /children endpoint lists folder contents. The /content endpoint streams file contents. Graph API responses for drive items include rich metadata: name, size, lastModifiedDateTime, createdDateTime, file (for files, includes mimeType and hashes), folder (for folders, includes childCount), and @microsoft.graph.downloadUrl (a temporary pre-authenticated download URL). The downloadUrl is a direct download link that expires in a few minutes and works without any additional authorization headers — perfect for triggering browser downloads. For file uploads, Graph API accepts the file content as the request body with the Content-Type matching the file's MIME type. For files under 4 MB, use the simple upload endpoint: PUT to https://graph.microsoft.com/v1.0/users/{userId}/drive/root:/{path}/{filename}:/content. For larger files, use the resumable upload session (createUploadSession endpoint) which supports chunked uploads.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const GRAPH_BASE = 'https://graph.microsoft.com/v1.0'
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Access-Control-Allow-Methods': 'POST, OPTIONS',
9}
10
11async function getGraphToken(): Promise<string> {
12  const tenantId = Deno.env.get('AZURE_TENANT_ID')!
13  const clientId = Deno.env.get('AZURE_CLIENT_ID')!
14  const clientSecret = Deno.env.get('AZURE_CLIENT_SECRET')!
15
16  const params = new URLSearchParams({
17    grant_type: 'client_credentials',
18    client_id: clientId,
19    client_secret: clientSecret,
20    scope: 'https://graph.microsoft.com/.default',
21  })
22
23  const res = await fetch(
24    `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
25    { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: params }
26  )
27  const data = await res.json()
28  if (!data.access_token) throw new Error(`Auth failed: ${data.error_description ?? JSON.stringify(data)}`)
29  return data.access_token
30}
31
32serve(async (req) => {
33  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
34
35  try {
36    const token = await getGraphToken()
37    const userId = Deno.env.get('ONEDRIVE_USER_ID')!
38    const driveBase = `${GRAPH_BASE}/users/${userId}/drive`
39    const authHeader = { Authorization: `Bearer ${token}` }
40
41    const { action, path, itemId, filename, content, contentType } = await req.json()
42
43    let result: unknown
44
45    if (action === 'list-folder') {
46      const endpoint = path && path !== '/'
47        ? `${driveBase}/root:/${encodeURIComponent(path)}:/children`
48        : `${driveBase}/root/children`
49      const res = await fetch(`${endpoint}?$select=id,name,size,file,folder,lastModifiedDateTime,@microsoft.graph.downloadUrl&$top=100`,
50        { headers: authHeader })
51      result = await res.json()
52
53    } else if (action === 'get-download-url') {
54      const res = await fetch(
55        `${driveBase}/items/${itemId}?$select=name,@microsoft.graph.downloadUrl`,
56        { headers: authHeader }
57      )
58      const item = await res.json() as Record<string, unknown>
59      result = { url: item['@microsoft.graph.downloadUrl'], name: item.name }
60
61    } else if (action === 'upload') {
62      const bytes = Uint8Array.from(atob(content), c => c.charCodeAt(0))
63      const uploadPath = path ? `${path}/${filename}` : filename
64      const res = await fetch(
65        `${driveBase}/root:/${encodeURIComponent(uploadPath)}:/content`,
66        {
67          method: 'PUT',
68          headers: { ...authHeader, 'Content-Type': contentType || 'application/octet-stream' },
69          body: bytes,
70        }
71      )
72      result = await res.json()
73
74    } else if (action === 'create-sharing-link') {
75      const res = await fetch(`${driveBase}/items/${itemId}/createLink`, {
76        method: 'POST',
77        headers: { ...authHeader, 'Content-Type': 'application/json' },
78        body: JSON.stringify({ type: 'view', scope: 'anonymous' }),
79      })
80      result = await res.json()
81
82    } else if (action === 'delete') {
83      await fetch(`${driveBase}/items/${itemId}`, { method: 'DELETE', headers: authHeader })
84      result = { success: true }
85    } else {
86      throw new Error(`Unknown action: ${action}`)
87    }
88
89    return new Response(JSON.stringify(result), {
90      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
91    })
92  } catch (err) {
93    return new Response(
94      JSON.stringify({ error: err instanceof Error ? err.message : 'Unknown error' }),
95      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
96    )
97  }
98})

With the Edge Function deployed, build the React file browser for OneDrive content. Microsoft Graph returns drive items in a consistent structure — each item has an id (unique item identifier), name, and either a file object (for files, containing mimeType) or folder object (for folders, containing childCount). Use these to distinguish files from folders and render appropriate icons. For folder navigation, maintain a path state string (e.g., '/Projects/Q1 Reports') and call the list-folder action with that path. Provide a breadcrumb component that shows the current path segments and allows clicking any ancestor to navigate back. Store the full path in state — OneDrive paths are human-readable strings unlike Box's numeric IDs. For file downloads, the @microsoft.graph.downloadUrl field in the list response provides an immediate download URL — no separate API call needed. However, this URL expires quickly (a few minutes). For a 'Download' button that triggers browser download, call the get-download-url action immediately when clicked and programmatically trigger the download: create a temporary anchor element, set href to the URL, and click it. For file uploads from the React component, read the File object as base64 using FileReader.readAsDataURL() (remove the data URL prefix), send it with the filename and content type to the Edge Function's upload action, and specify the current path as the destination folder. After upload, refresh the folder listing to show the new file. For SharePoint document libraries (different from personal OneDrive), the Graph API uses a slightly different path structure: /sites/{siteId}/drive/root instead of /users/{userId}/drive/root. If your users need to access shared SharePoint document libraries in addition to personal OneDrive files, RapidDev can help extend the Edge Function to support SharePoint site drives.