██████╗██╗      ██████╗ ██╗   ██╗██████╗ ███████╗██╗      █████╗ ██████╗ ███████╗    ██████╗ ██████╗
██╔════╝██║     ██╔═══██╗██║   ██║██╔══██╗██╔════╝██║     ██╔══██╗██╔══██╗██╔════╝    ██╔══██╗╚════██╗
██║     ██║     ██║   ██║██║   ██║██║  ██║█████╗  ██║     ███████║██████╔╝█████╗      ██████╔╝ █████╔╝
██║     ██║     ██║   ██║██║   ██║██║  ██║██╔══╝  ██║     ██╔══██║██╔══██╗██╔══╝      ██╔══██╗██╔═══╝
╚██████╗███████╗╚██████╔╝╚██████╔╝██████╔╝██║     ███████╗██║  ██║██║  ██║███████╗    ██║  ██║███████╗
 ╚═════╝╚══════╝ ╚═════╝  ╚═════╝ ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝    ╚═╝  ╚═╝╚══════╝

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

// lib/r2.ts — server-only client. Never import this into client components.
import { S3Client } from "@aws-sdk/client-s3";

export const r2 = new S3Client({
  region: "auto", // required by the SDK, ignored by R2
  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
  credentials: {
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
  },
});

export const R2_BUCKET = process.env.R2_BUCKET!;

// app/api/media/[key]/route.ts
import { GetObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { auth } from "@clerk/nextjs/server";
import { NextRequest, NextResponse } from "next/server";
import { r2, R2_BUCKET } from "@/lib/r2";

export async function GET(req: NextRequest, { params }: { params: { key: string } }) {
  const { userId } = await auth();
  if (!userId) return new NextResponse("Unauthorized", { status: 401 });

  // Authorize: only let a user fetch their own object (key is namespaced by userId).
  if (!params.key.startsWith(`${userId}/`)) {
    return new NextResponse("Forbidden", { status: 403 });
  }

  const url = await getSignedUrl(
    r2,
    new GetObjectCommand({ Bucket: R2_BUCKET, Key: params.key }),
    { expiresIn: 300 }, // 5 minutes — keep it short
  );

  return NextResponse.redirect(url);
}

// app/api/uploads/route.ts — returns a one-time PUT URL
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { auth } from "@clerk/nextjs/server";
import { NextRequest, NextResponse } from "next/server";
import { r2, R2_BUCKET } from "@/lib/r2";

const ALLOWED = new Set(["image/png", "image/jpeg", "image/webp"]);

export async function POST(req: NextRequest) {
  const { userId } = await auth();
  if (!userId) return new NextResponse("Unauthorized", { status: 401 });

  const { filename, contentType } = await req.json();
  if (!ALLOWED.has(contentType)) {
    return new NextResponse("Unsupported media type", { status: 415 });
  }

  // Namespace the key by user so one user can't overwrite another's media.
  const key = `${userId}/${crypto.randomUUID()}-${filename}`;

  const uploadUrl = await getSignedUrl(
    r2,
    new PutObjectCommand({ Bucket: R2_BUCKET, Key: key, ContentType: contentType }),
    { expiresIn: 120 },
  );

  return NextResponse.json({ uploadUrl, key });
}

// client — the PUT must send the SAME Content-Type used to sign the URL
const { uploadUrl, key } = await fetch("/api/uploads", {
  method: "POST",
  body: JSON.stringify({ filename: file.name, contentType: file.type }),
}).then((r) => r.json());

await fetch(uploadUrl, {
  method: "PUT",
  headers: { "Content-Type": file.type }, // must match, or signature mismatch
  body: file,
});

# wrangler.toml
name = "media-gateway"
main = "src/index.ts"

[[r2_buckets]]
binding = "MEDIA"            # -> env.MEDIA
bucket_name = "amani-media"

// src/index.ts
const hasValidHeader = (request: Request, env: Env) =>
  request.headers.get("X-Custom-Auth-Key") === env.AUTH_KEY_SECRET;

function authorize(request: Request, env: Env, key: string): boolean {
  switch (request.method) {
    case "PUT":
    case "DELETE":
      return hasValidHeader(request, env); // writes need the shared secret
    case "GET":
      // e.g. verify a signed session cookie / JWT here instead of an allow-list
      return verifySession(request);
    default:
      return false;
  }
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const key = new URL(request.url).pathname.slice(1);
    if (!authorize(request, env, key)) {
      return new Response("Forbidden", { status: 403 });
    }

    if (request.method === "GET") {
      const object = await env.MEDIA.get(key);
      if (!object) return new Response("Not Found", { status: 404 });
      const headers = new Headers();
      object.writeHttpMetadata(headers);
      headers.set("etag", object.httpEtag);
      return new Response(object.body, { headers });
    }

    if (request.method === "PUT") {
      await env.MEDIA.put(key, request.body);
      return new Response("OK", { status: 201 });
    }

    return new Response("Method Not Allowed", { status: 405 });
  },
};

# the shared secret lives as a Wrangler secret, never in wrangler.toml
npx wrangler secret put AUTH_KEY_SECRET

# Server-only — never NEXT_PUBLIC_*
R2_ACCOUNT_ID=...
R2_ACCESS_KEY_ID=...
R2_SECRET_ACCESS_KEY=...
R2_BUCKET=amani-media

# Worker (Pattern C) — set via `wrangler secret put`, not in wrangler.toml
AUTH_KEY_SECRET=...