How to Integrate Backblaze B2 with V0

Start by generating the file upload interface in V0 before working on the B2 API integration. Having the UI ready first lets you test the upload flow visually with mock data before connecting real B2 API calls. In V0's chat, describe the specific upload experience you want. For most applications, this includes a drag-and-drop upload zone that accepts specific file types, a file list showing queued uploads with name, size, and a remove button, upload progress indicators for each file during the upload process, and a completion state showing the uploaded file with its download URL or a link to view it. Ask V0 to generate the upload component as a client component (`'use client'`) since it handles browser file selection events, drag-and-drop interactions, and progress updates. The component should accept an `onUpload` callback prop that receives the FormData to send to your API route — this keeps the API call outside the UI component for testability. Also ask V0 to generate the file list display component that shows uploaded files with their B2 download URLs. Include a copy-to-clipboard button for the download URL, a delete button (which will call a delete API route), and a preview capability for images (using Next.js Image with the B2 URL as the source).

The B2 native API uses a three-step authentication model that is unique to Backblaze. Understanding this flow before coding makes the implementation clearer and helps debug issues when they occur. Step 1 is Account Authorization. Call `GET https://api.backblaze.com/b2api/v2/b2_authorize_account` with HTTP Basic authentication using your Application Key ID as the username and Application Key as the password. The response contains the `authorizationToken` (valid for 24 hours), the `apiUrl` (the base URL for all subsequent API calls, varies by account), and the `downloadUrl` (for downloading files). Step 2 is Get Upload URL. Using the `apiUrl` and `authorizationToken` from Step 1, call `POST {apiUrl}/b2api/v2/b2_get_upload_url` with the `bucketId` in the request body. The response gives you an `uploadUrl` (a specific endpoint for this upload) and an `uploadAuthToken` (a one-time token for this specific upload). This upload URL and token are single-use — you need to get a new one for each file. Step 3 is Upload File. Use the `uploadUrl` from Step 2 to `POST` the file content with headers including the `uploadAuthToken`, the filename (`X-Bz-File-Name`), file content type (`Content-Type`), SHA1 hash of the file content (`X-Bz-Content-Sha1`) for integrity verification, and optionally custom file metadata prefixed with `X-Bz-Info-`. Cache the Step 1 token in your API route (module-level variable) to avoid re-authorizing for every upload. The authorization token is valid for 24 hours and can be reused across multiple upload operations, saving an API round trip per upload.

1// lib/b2.ts — B2 authorization token management
2let cachedAuth: { authorizationToken: string; apiUrl: string; downloadUrl: string; expiresAt: number } | null = null
3
4export async function getB2Authorization() {
5  // Return cached auth if still valid (expires 1 hour before actual expiry to be safe)
6  if (cachedAuth && cachedAuth.expiresAt > Date.now()) {
7    return cachedAuth
8  }
9
10  const keyId = process.env.B2_APPLICATION_KEY_ID!
11  const applicationKey = process.env.B2_APPLICATION_KEY!
12
13  const credentials = Buffer.from(`${keyId}:${applicationKey}`).toString('base64')
14
15  const response = await fetch('https://api.backblaze.com/b2api/v2/b2_authorize_account', {
16    headers: { Authorization: `Basic ${credentials}` },
17  })
18
19  if (!response.ok) {
20    const error = await response.json()
21    throw new Error(`B2 authorization failed: ${error.message}`)
22  }
23
24  const auth = await response.json()
25  cachedAuth = {
26    authorizationToken: auth.authorizationToken,
27    apiUrl: auth.apiUrl,
28    downloadUrl: auth.downloadUrl,
29    expiresAt: Date.now() + (23 * 60 * 60 * 1000), // Cache for 23 hours
30  }
31  return cachedAuth
32}

With the B2 authorization utility in place, create the Next.js API routes for file upload and download. These routes handle the complete B2 native API flow — authorization, getting an upload URL, and executing the upload. Create the upload route at `app/api/b2/upload/route.ts`. This route accepts a POST request with a file in FormData, uses the authorization utility to get a token, calls `b2_get_upload_url` with your bucket ID to get the upload URL and one-time token, computes the SHA1 hash of the file content for B2's integrity verification, and uploads the file with all required headers. Return the uploaded file's `fileId`, `fileName`, and the download URL in the response. Create the download URL generation route at `app/api/b2/download-url/route.ts`. For private buckets, files require a download authorization. This route calls `b2_get_download_authorization` with the file path and a validity period (up to 7 days) to get a pre-authorized download URL. Return this URL to the client. For public buckets, download URLs are simply `{downloadUrl}/file/{bucketName}/{fileName}` — no authorization needed. Create a file list route at `app/api/b2/files/route.ts` that calls `b2_list_file_names` to list files in your bucket. This is useful for building file manager interfaces. Create a delete route at `app/api/b2/delete/route.ts` that accepts a file ID and file name, then calls `b2_delete_file_version` to permanently delete a file from B2.

1// app/api/b2/upload/route.ts
2import { NextRequest, NextResponse } from 'next/server'
3import crypto from 'crypto'
4import { getB2Authorization } from '@/lib/b2'
5
6export async function POST(request: NextRequest) {
7  try {
8    const formData = await request.formData()
9    const file = formData.get('file') as File
10    if (!file) {
11      return NextResponse.json({ error: 'No file provided' }, { status: 400 })
12    }
13
14    const bucketId = process.env.B2_BUCKET_ID!
15    const auth = await getB2Authorization()
16
17    // Step 2: Get upload URL
18    const uploadUrlResponse = await fetch(`${auth.apiUrl}/b2api/v2/b2_get_upload_url`, {
19      method: 'POST',
20      headers: {
21        Authorization: auth.authorizationToken,
22        'Content-Type': 'application/json',
23      },
24      body: JSON.stringify({ bucketId }),
25    })
26
27    if (!uploadUrlResponse.ok) {
28      throw new Error('Failed to get B2 upload URL')
29    }
30
31    const { uploadUrl, authorizationToken: uploadAuthToken } = await uploadUrlResponse.json()
32
33    // Step 3: Upload the file
34    const fileBuffer = await file.arrayBuffer()
35    const fileBytes = new Uint8Array(fileBuffer)
36    const sha1Hash = crypto.createHash('sha1').update(fileBytes).digest('hex')
37
38    // Encode filename for URL safety
39    const fileName = encodeURIComponent(file.name)
40
41    const uploadResponse = await fetch(uploadUrl, {
42      method: 'POST',
43      headers: {
44        Authorization: uploadAuthToken,
45        'X-Bz-File-Name': fileName,
46        'Content-Type': file.type || 'application/octet-stream',
47        'Content-Length': file.size.toString(),
48        'X-Bz-Content-Sha1': sha1Hash,
49      },
50      body: fileBytes,
51    })
52
53    if (!uploadResponse.ok) {
54      const error = await uploadResponse.json()
55      throw new Error(`Upload failed: ${error.message}`)
56    }
57
58    const uploadedFile = await uploadResponse.json()
59    const downloadUrl = `${auth.downloadUrl}/file/${process.env.B2_BUCKET_NAME}/${file.name}`
60
61    return NextResponse.json({
62      fileId: uploadedFile.fileId,
63      fileName: uploadedFile.fileName,
64      downloadUrl,
65      size: uploadedFile.contentLength,
66    })
67  } catch (error) {
68    console.error('B2 upload error:', error)
69    return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
70  }
71}
72
73// app/api/b2/download-url/route.ts — Generate private download URL
74export async function POST(request: NextRequest) {
75  try {
76    const { fileName, validDurationSeconds = 3600 } = await request.json()
77    const bucketId = process.env.B2_BUCKET_ID!
78    const auth = await getB2Authorization()
79
80    const response = await fetch(`${auth.apiUrl}/b2api/v2/b2_get_download_authorization`, {
81      method: 'POST',
82      headers: {
83        Authorization: auth.authorizationToken,
84        'Content-Type': 'application/json',
85      },
86      body: JSON.stringify({
87        bucketId,
88        fileNamePrefix: fileName,
89        validDurationInSeconds: validDurationSeconds,
90      }),
91    })
92
93    const { authorizationToken } = await response.json()
94    const downloadUrl = `${auth.downloadUrl}/file/${process.env.B2_BUCKET_NAME}/${encodeURIComponent(fileName)}?Authorization=${authorizationToken}`
95
96    return NextResponse.json({ downloadUrl })
97  } catch (error) {
98    return NextResponse.json({ error: 'Failed to generate download URL' }, { status: 500 })
99  }
100}

Add your Backblaze B2 credentials to Vercel. Go to Vercel Dashboard → your project → Settings → Environment Variables. Add `B2_APPLICATION_KEY_ID` with your Application Key ID from Backblaze B2. This is the public identifier for your API key (distinct from the key itself). Add `B2_APPLICATION_KEY` with your Application Key — the secret part of the API credential. This must never have the `NEXT_PUBLIC_` prefix. Add `B2_BUCKET_ID` with your bucket's ID (found in the Backblaze B2 bucket list, click on your bucket to see the details). Add `B2_BUCKET_NAME` with your bucket's name (used to construct download URLs). To find your Application Key ID and Application Key: in Backblaze B2, go to App Keys → Add a New Application Key. Give it a name, select your bucket under 'Allow access to Bucket(s)', choose 'Read and Write' for file operations, and click Create New Key. Copy both the keyID and the applicationKey — the applicationKey is only shown once. For public buckets where all uploaded files should be publicly accessible, set your bucket's File Access to 'Public' in the B2 dashboard. Download URLs then follow the pattern `https://f003.backblazeb2.com/file/{bucketName}/{fileName}` (the f003 domain varies by your account region). For private buckets, use the `b2_get_download_authorization` route to generate expiring pre-signed URLs. After deployment, test by uploading a small test file through your application. Verify the file appears in your B2 bucket dashboard and the download URL works correctly. Check the download URL format — for B2 CDN, the URL uses the `f{region}.backblazeb2.com` domain format.

1// Vercel Dashboard → Settings → Environment Variables:
2// B2_APPLICATION_KEY_ID = your_key_id_from_backblaze
3// B2_APPLICATION_KEY = your_application_key_secret
4// B2_BUCKET_ID = your_bucket_id_from_backblaze_dashboard
5// B2_BUCKET_NAME = your-bucket-name
6
7// next.config.ts — allow B2 image domains
8const nextConfig = {
9  images: {
10    remotePatterns: [
11      {
12        protocol: 'https',
13        hostname: '**.backblazeb2.com',
14      },
15    ],
16  },
17}
18export default nextConfig
19
20// B2 bucket access types:
21// Public: download URL is https://f{region}.backblazeb2.com/file/{bucketName}/{fileName}
22// Private: need download authorization token appended as ?Authorization=TOKEN