How to Integrate Lovable with Backblaze B2 Cloud Storage

Log in to your Backblaze account and navigate to the B2 Cloud Storage section from the left sidebar. Click 'Create a Bucket' to set up your storage container. Choose a globally unique bucket name (bucket names must be unique across all B2 users), set the privacy to 'Private' (public buckets allow unauthenticated access — always use private for application storage and control access through your Edge Function), and leave the default settings for file versioning and lifecycle rules unless you have specific requirements. After creating the bucket, note your Bucket Name and the Endpoint URL shown in the bucket details — B2 endpoints follow the format s3.us-west-004.backblazeb2.com where the region number varies based on your bucket's location. You will need this exact endpoint URL for the Edge Function configuration. B2 buckets are assigned to regions at creation and cannot be moved. Next, create Application Key credentials for API access. In the B2 console sidebar, go to 'App Keys' and click 'Add a New Application Key'. Give it a descriptive name (e.g., lovable-app-key), select 'Allow access to Bucket' and choose your specific bucket (this is the least-privilege approach — the key can only access that one bucket). Set the key capabilities you need: readFiles (download), writeFiles (upload), deleteFiles (delete), listAllBucketNames (required for S3-compatible listing). Set a file prefix if you want to further restrict the key to a specific folder path within the bucket. After clicking 'Create New Key', Backblaze shows the Key ID and Application Key values. The Application Key is shown only once — copy both values immediately to a secure location before closing this page. The Key ID is your equivalent to AWS Access Key ID, and the Application Key is your equivalent to AWS Secret Access Key.

B2 credentials must never appear in source code — they belong exclusively in Lovable's Cloud Secrets panel. Open your Lovable project and click the '+' button next to the Preview area to open the Cloud tab. Navigate to Secrets and add the following entries. Add B2_KEY_ID with the value of your Application Key ID (the shorter identifier that looks like 001abc123def). Add B2_APPLICATION_KEY with the Application Key value (the longer random string). Add B2_BUCKET_NAME with your bucket name (e.g., my-app-uploads). Add B2_ENDPOINT with the S3-compatible endpoint URL for your bucket region (e.g., https://s3.us-west-004.backblazeb2.com). Add B2_REGION with just the region identifier extracted from the endpoint (e.g., us-west-004 — required for AWS signature computation). To add each secret: click the '+' or 'Add secret' button, type the key name exactly as shown above (the Edge Function code references these exact names via Deno.env.get()), paste the value, and save. Key names are case-sensitive. Having the endpoint and region as separate secrets rather than hardcoding them in the Edge Function source code is good practice — if you ever need to move the bucket to a different B2 region (which requires creating a new bucket), you only update the secrets rather than changing and redeploying the function code. Lovable's platform holds SOC 2 Type II certification and encrypts all secrets at rest.

Backblaze B2's S3-compatible API uses the same AWS Signature Version 4 authentication and the same request format as AWS S3, but pointed at B2's endpoint instead of amazonaws.com. In a Deno Edge Function, you can either use the AWS SDK v3 (which Deno supports via npm: specifier) with B2's endpoint configured, or manually construct the signed requests. Using the AWS SDK v3 with B2's endpoint is the most reliable approach — the SDK handles signature computation, retry logic, and error parsing. In Deno, import from npm: prefix: import { S3Client, PutObjectCommand, GetObjectCommand } from 'npm:@aws-sdk/client-s3'. The S3Client is configured with the B2 endpoint, region, and credentials from environment variables. All standard S3 SDK operations (PutObject for upload, ListObjects for listing, DeleteObject for delete, GetObject for download) work against B2 without modification. For generating pre-signed download URLs (the primary way to give users temporary access to private B2 files), use the @aws-sdk/s3-request-presigner package with the same S3Client configured for B2. The getSignedUrl function generates a time-limited URL that allows direct browser download without going through the Edge Function for each download — important for large files where streaming through the Edge Function would hit size limits. The Edge Function handles the same action-based dispatch pattern as other storage integrations: list, upload, get-download-url, and delete actions, each making the appropriate S3-compatible API call against B2.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { S3Client, PutObjectCommand, ListObjectsV2Command, DeleteObjectCommand } from 'npm:@aws-sdk/client-s3'
3import { getSignedUrl } from 'npm:@aws-sdk/s3-request-presigner'
4import { GetObjectCommand } from 'npm:@aws-sdk/client-s3'
5
6const corsHeaders = {
7  'Access-Control-Allow-Origin': '*',
8  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
9  'Access-Control-Allow-Methods': 'POST, OPTIONS',
10}
11
12serve(async (req) => {
13  if (req.method === 'OPTIONS') {
14    return new Response('ok', { headers: corsHeaders })
15  }
16
17  const endpoint = Deno.env.get('B2_ENDPOINT')
18  const region = Deno.env.get('B2_REGION')
19  const keyId = Deno.env.get('B2_KEY_ID')
20  const appKey = Deno.env.get('B2_APPLICATION_KEY')
21  const bucket = Deno.env.get('B2_BUCKET_NAME')
22
23  if (!endpoint || !region || !keyId || !appKey || !bucket) {
24    return new Response(
25      JSON.stringify({ error: 'Missing B2 environment variables' }),
26      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
27    )
28  }
29
30  const s3Client = new S3Client({
31    endpoint,
32    region,
33    credentials: { accessKeyId: keyId, secretAccessKey: appKey },
34    forcePathStyle: true, // Required for B2 S3-compatible API
35  })
36
37  try {
38    const { action, key, prefix, content, contentType } = await req.json()
39
40    if (action === 'list') {
41      const cmd = new ListObjectsV2Command({ Bucket: bucket, Prefix: prefix || '' })
42      const result = await s3Client.send(cmd)
43      return new Response(
44        JSON.stringify({ files: result.Contents ?? [], prefixes: result.CommonPrefixes ?? [] }),
45        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
46      )
47
48    } else if (action === 'upload') {
49      const fileBytes = Uint8Array.from(atob(content), c => c.charCodeAt(0))
50      const cmd = new PutObjectCommand({
51        Bucket: bucket,
52        Key: key,
53        Body: fileBytes,
54        ContentType: contentType || 'application/octet-stream',
55      })
56      await s3Client.send(cmd)
57      return new Response(
58        JSON.stringify({ success: true, key }),
59        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
60      )
61
62    } else if (action === 'get-download-url') {
63      const cmd = new GetObjectCommand({ Bucket: bucket, Key: key })
64      const url = await getSignedUrl(s3Client, cmd, { expiresIn: 3600 })
65      return new Response(
66        JSON.stringify({ url }),
67        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
68      )
69
70    } else if (action === 'delete') {
71      const cmd = new DeleteObjectCommand({ Bucket: bucket, Key: key })
72      await s3Client.send(cmd)
73      return new Response(
74        JSON.stringify({ success: true }),
75        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
76      )
77    }
78
79    return new Response(
80      JSON.stringify({ error: `Unknown action: ${action}` }),
81      { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
82    )
83
84  } catch (error) {
85    return new Response(
86      JSON.stringify({ error: error.message }),
87      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
88    )
89  }
90})

With the Edge Function deployed, build the React components for file management. The frontend pattern is the same as with other storage providers: use supabase.functions.invoke() to call the backblaze-storage Edge Function with the appropriate action and parameters, then update component state based on the response. For file listings, the component calls the list action with an optional prefix to show files in a virtual folder structure. B2 (like S3) does not have real folders — it uses key prefixes that simulate folder structure. A file at path uploads/user123/photo.jpg appears in a listing of the uploads/user123/ prefix. The list action returns both files (Contents) and common prefixes (virtual folders) for navigation. For file uploads, convert the selected File object to base64 using FileReader.readAsDataURL(), strip the data URL prefix to get raw base64, and send it to the Edge Function with the target key (path) and content type. Organize keys with a structure that includes the user ID to prevent cross-user access issues: uploads/{userId}/{filename} or by category: docs/{userId}/{filename}. For downloads, get a pre-signed URL from the Edge Function's get-download-url action and open it in a new browser tab. Pre-signed URLs from B2 expire in 1 hour by default (configurable). The user downloads the file directly from B2's CDN — not through your Edge Function — which avoids the Edge Function's request size limits. For production apps, store file metadata (key, original filename, size, content type, upload timestamp, user ID) in a Supabase table alongside the B2 object key. This lets you build search, filtering, and user-specific file listings entirely from Supabase queries without calling B2 for metadata operations.