Mastering BYOB Storage (Cloudflare R2 Integration)

Every modern web application needs file storage—whether for user avatars, document uploads, or media assets. BYOB provides a seamless, 1-click integration with Cloudflare R2, automatically wiring it directly into your SvelteKit projects.

This post explores our architecture for secure, fast, and scalable object storage.

TLDR

1-click enablement of Cloudflare R2 buckets.
Secure proxying via the STORAGE binding in SvelteKit +server.ts routes.
App-signed URLs for private, secure sharing.

The `STORAGE` Binding

Instead of managing raw S3 credentials, access keys, and complex environment variables, BYOB leverages Cloudflare Worker bindings. When you enable storage for a project, we automatically attach an R2 bucket to the worker runtime as the STORAGE binding.

This means your SvelteKit backend code can access the bucket natively via a server helper without network overhead:

typescript

// src/lib/server/storage.ts
import { error, type RequestEvent } from '@sveltejs/kit';

export function getStorage(event: RequestEvent) {
  const bucket = event.platform?.env?.STORAGE;
  if (!bucket) throw error(503, 'File storage is not connected.');
  return bucket;
}

Security First: Proxied Server Routes

A common anti-pattern in modern web dev is exposing raw presigned S3 URLs directly to the browser, or worse, hardcoding credentials into the client bundle.

BYOB enforces a secure-by-default proxy pattern. All uploads and downloads go through your SvelteKit server routes (e.g., /api/storage/upload).

Authentication: Your server route verifies the user's session (via Better Auth) before interacting with the bucket.
Validation: File types and sizes are checked securely on the server.
Secrecy: Cloudflare credentials never leave the worker environment.

App-Signed URLs

When you need to share private files, BYOB supports generating app-signed route URLs. Rather than generating a direct R2 presigned URL (which exposes the bucket endpoint), we generate a signed URL that points back to your SvelteKit app (e.g., /api/storage/file?token=xyz).

The SvelteKit route validates the token and streams the file from the STORAGE binding. This keeps your domain consistent and allows you to add custom tracking or authorization logic on the fly.

Supabase Storage Support

Cloudflare R2 is our native, highly-optimized storage path. However, if your project explicitly uses Supabase, BYOB also supports Supabase Storage alongside Supabase's PostgreSQL database. When Supabase Storage is in use, the AIR coding skills load the appropriate byob_supabase knowledge, generating the correct Supabase client code and bucket policy patterns instead of R2 bindings. The two paths are distinct — you choose one based on your database and infrastructure decisions.

Summary

With BYOB Storage, you get the global performance of Cloudflare R2 combined with the secure, developer-friendly architecture of SvelteKit server routes. It's object storage, simplified.

Mastering BYOB Storage (Cloudflare R2 Integration)