How to Integrate Box with V0

Before writing any code, you need to create a Box application in the Box Developer Console and configure it for OAuth2 authentication. This gives you the Client ID and Client Secret your API routes will use. Go to the Box Developer Console at developer.box.com, sign in with your Box account, and click Create New App. Choose Custom App as the app type and select User Authentication (OAuth 2.0) as the authentication method. Give the app a name like 'My V0 App'. After creating the app, you will land on the app's configuration page. The most critical step is configuring Redirect URIs — Box uses these to verify where to send users after they authorize your app. Add two redirect URIs: https://your-app.vercel.app/api/box/callback for production, and http://localhost:3000/api/box/callback for local development. Replace 'your-app.vercel.app' with your actual Vercel deployment URL. Copy the Client ID and Client Secret from the OAuth2 Parameters section. The Client ID is public (you will use it in the authorization URL) but the Client Secret is sensitive — it proves to Box that your API routes are the legitimate owner of this Box app. Store both in Vercel environment variables. Also check the Application Scopes section. Enable the scopes your app needs: Read all files and folders (for listing and downloading), Write all files and folders (for uploading), and Manage shared links (for generating download links). Only enable the minimum scopes you need. One Box-specific limitation compared to other storage providers: Box requires app review and approval before users outside your own Box enterprise can authorize the app. During development and for internal tools, you can use the app with users from your own Box account. For apps used by external Box accounts, you need to submit the app for review.

Box OAuth2 follows the standard Authorization Code flow: your app redirects users to Box's authorization page, the user approves, Box redirects back to your callback URL with an authorization code, and your callback route exchanges the code for access and refresh tokens. Create two API routes: app/api/box/auth/route.ts to initiate the authorization flow, and app/api/box/callback/route.ts to handle the redirect from Box and exchange the code for tokens. The auth route builds the Box authorization URL with your Client ID, the callback redirect URI, and a state parameter (a random value you generate and store in a cookie to prevent CSRF attacks). It then redirects the user to Box's authorization page at account.box.com/api/oauth2/authorize. The callback route receives the authorization code in the URL query parameters. It makes a POST request to Box's token endpoint at api.box.com/oauth2/token, exchanging the code for access_token and refresh_token. Store these tokens — typically in your database linked to the user's account, or in a secure HTTP-only cookie for simpler single-user apps. Box access tokens expire after 60 minutes. The refresh token is valid for 60 days but rotates on each use — every time you use a refresh token to get a new access token, Box issues a new refresh token too. Your token storage must handle this rotation or users will be forced to re-authorize after 60 days. For the box-node-sdk, create a BoxClient using BoxSDK.getTokensAuthorizationCodeGrant() in the callback route and BoxSDK.getBasicClient() or a persistent token store for subsequent requests.

1// app/api/box/auth/route.ts
2import { NextResponse } from 'next/server';
3import { cookies } from 'next/headers';
4import crypto from 'crypto';
5
6export async function GET() {
7  const state = crypto.randomBytes(16).toString('hex');
8
9  const cookieStore = await cookies();
10  cookieStore.set('box_oauth_state', state, {
11    httpOnly: true,
12    secure: process.env.NODE_ENV === 'production',
13    maxAge: 600,
14    path: '/',
15  });
16
17  const params = new URLSearchParams({
18    client_id: process.env.BOX_CLIENT_ID!,
19    redirect_uri: process.env.BOX_REDIRECT_URI!,
20    response_type: 'code',
21    state,
22  });
23
24  return NextResponse.redirect(
25    `https://account.box.com/api/oauth2/authorize?${params.toString()}`
26  );
27}
28
29// app/api/box/callback/route.ts
30import { NextRequest, NextResponse } from 'next/server';
31import { cookies } from 'next/headers';
32
33export async function GET(request: NextRequest) {
34  const { searchParams } = new URL(request.url);
35  const code = searchParams.get('code');
36  const state = searchParams.get('state');
37
38  const cookieStore = await cookies();
39  const savedState = cookieStore.get('box_oauth_state')?.value;
40
41  if (!state || state !== savedState) {
42    return NextResponse.json({ error: 'Invalid state' }, { status: 400 });
43  }
44
45  const tokenResponse = await fetch('https://api.box.com/oauth2/token', {
46    method: 'POST',
47    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
48    body: new URLSearchParams({
49      grant_type: 'authorization_code',
50      client_id: process.env.BOX_CLIENT_ID!,
51      client_secret: process.env.BOX_CLIENT_SECRET!,
52      code: code!,
53      redirect_uri: process.env.BOX_REDIRECT_URI!,
54    }),
55  });
56
57  const tokens = await tokenResponse.json();
58
59  cookieStore.set('box_access_token', tokens.access_token, {
60    httpOnly: true,
61    secure: process.env.NODE_ENV === 'production',
62    maxAge: 3600,
63    path: '/',
64  });
65
66  return NextResponse.redirect(new URL('/dashboard', request.url));
67}

With authentication working, create the API routes for core Box file operations: listing folder contents, uploading files, downloading files, and generating shared links. Install the Box Node.js SDK: npm install box-node-sdk. The SDK provides a typed client for all Box API operations. Create app/api/box/files/route.ts with a GET handler that lists files in a folder. The folder ID '0' is the root folder. The SDK's client.folders.getItems() method returns a paginated list of files and subfolders. Create app/api/box/upload/route.ts with a POST handler that receives a file from a multipart form upload, then uses client.files.uploadFile() to upload it to the specified Box folder. Remember Vercel's 4.5MB body limit — for larger files, you can use the Box Chunked Upload API which splits large files into chunks, but this is significantly more complex to implement. Create app/api/box/download/route.ts with a GET handler that accepts a fileId query parameter and returns a temporary pre-authenticated download URL using client.files.getDownloadURL(). This URL is valid for a short time and can be used in browser download links or img src attributes. For each route, retrieve the Box access token from wherever you stored it (cookie, database, etc.) and initialize the Box SDK client with BoxSDK.getBasicClient(accessToken). Handle token refresh if the 401 Unauthorized response indicates an expired token.

1// app/api/box/files/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import BoxSDK from 'box-node-sdk';
4import { cookies } from 'next/headers';
5
6export async function GET(request: NextRequest) {
7  const { searchParams } = new URL(request.url);
8  const folderId = searchParams.get('folderId') ?? '0';
9
10  const cookieStore = await cookies();
11  const accessToken = cookieStore.get('box_access_token')?.value;
12
13  if (!accessToken) {
14    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
15  }
16
17  const sdk = new BoxSDK({
18    clientID: process.env.BOX_CLIENT_ID!,
19    clientSecret: process.env.BOX_CLIENT_SECRET!,
20  });
21
22  const client = sdk.getBasicClient(accessToken);
23
24  try {
25    const items = await client.folders.getItems(folderId, {
26      fields: 'id,name,type,size,modified_at,shared_link',
27    });
28
29    return NextResponse.json({
30      items: items.entries.map((item: any) => ({
31        id: item.id,
32        name: item.name,
33        type: item.type,
34        size: item.size ?? 0,
35        modifiedAt: item.modified_at,
36      })),
37      totalCount: items.total_count,
38    });
39  } catch (error: any) {
40    if (error.statusCode === 401) {
41      return NextResponse.json({ error: 'Token expired' }, { status: 401 });
42    }
43    return NextResponse.json({ error: 'Failed to list files' }, { status: 500 });
44  }
45}

Add your Box credentials to Vercel so they are available in your deployed API routes. Go to Vercel Dashboard → Settings → Environment Variables and add the following variables for Production, Preview, and Development scopes. BOX_CLIENT_ID: the Client ID from your Box App's OAuth2 Parameters. This is technically public (it appears in the authorization URL) but storing it as an environment variable lets you swap apps without code changes. BOX_CLIENT_SECRET: the Client Secret. This is a true secret — never prefix with NEXT_PUBLIC_ and never commit to Git. It proves to Box that your callback route is authorized to exchange codes for tokens. BOX_REDIRECT_URI: the full callback URL for your current environment. Use https://your-app.vercel.app/api/box/callback for Production and http://localhost:3000/api/box/callback for Development. This must exactly match what you configured in the Box Developer Console — any mismatch causes a redirect_uri_mismatch error. For local development, add these to a .env.local file in your project root. The BOX_REDIRECT_URI for local development must be http://localhost:3000/api/box/callback, and you must also add localhost:3000/api/box/callback to your Box App's redirect URI list in the Developer Console. After saving variables, redeploy your app. Test the OAuth2 flow by visiting /api/box/auth in your browser — it should redirect to the Box authorization page.

With the API routes working, use V0 to generate the file management interface. Box file management UIs typically involve a folder navigator on the left, a file list in the main area, and action buttons for upload, download, and sharing. V0 generates excellent table and list components with Tailwind CSS. Ask it to create a file explorer that calls your /api/box/files endpoint to populate the file list. Include click handlers on folders to navigate into subdirectories (passing the folder ID to the API route), and download buttons on files that call /api/box/download. For file upload, V0 can create a drag-and-drop zone or a simple file input. The component should send a POST request to /api/box/upload with the file as FormData. Show a progress indicator and success/error states. One important note about V0's output for this use case: Box file permissions and access levels are complex. V0 will generate the UI structure correctly but will not know about your specific Box folder hierarchy or permission model. After generating, manually verify that folder IDs in hardcoded examples match your actual Box folder structure. For complex enterprise document management implementations with custom Box workflows, approval chains, or metadata templates, RapidDev's team can help design the architecture and implement the Box API integration end-to-end.