Why We Ditched the 70MB AWS SDK for Native Web Crypto in Next.js 15 Edge Routes

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

// app/api/upload/presigned/route.ts

async function hmacSha256(key: ArrayBuffer, data: string): Promise<ArrayBuffer> {
  const cryptoKey = await crypto.subtle.importKey(
    "raw",
    key,
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"]
  );
  return crypto.subtle.sign("HMAC", cryptoKey, new TextEncoder().encode(data));
}

async function sha256Hex(data: string): Promise<string> {
  const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(data));
  return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, '0')).join('');
}

function toHexString(buf: ArrayBuffer): string {
  return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, '0')).join('');
}

async function createPresignedPutUrl(
  key: string,
  contentType: string,
  expiresSeconds = 600
): Promise<string> {
  const host = `${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`;
  const region = "auto";
  const service = "s3";
  const now = new Date();

  // Format timestamps: YYYYMMDD & YYYYMMDDTHHMMSSZ
  const dateStamp = now.toISOString().replace(/[-:]/g, '').slice(0, 8);
  const amzDate = now.toISOString().replace(/[-:]/g, '').replace(/\.\d+Z$/, 'Z');
  const credential = `${process.env.R2_ACCESS_KEY_ID}/${dateStamp}/${region}/${service}/aws4_request`;

  const queryParams = new URLSearchParams({
    "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
    "X-Amz-Credential": credential,
    "X-Amz-Date": amzDate,
    "X-Amz-Expires": String(expiresSeconds),
    "X-Amz-SignedHeaders": "content-type;host",
  });

  // 1. SigV4 requires query parameters to be strictly sorted
  const sortedQS = [...queryParams.entries()]
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join('&');

  const canonicalHeaders = `content-type:${contentType}\nhost:${host}\n`;
  const encodedKey = key.split('/').map(encodeURIComponent).join('/');

  // 2. Build the Canonical Request
  const canonicalRequest = [
    "PUT",
    `/${process.env.R2_BUCKET_NAME}/${encodedKey}`,
    sortedQS,
    canonicalHeaders,
    "content-type;host",
    "UNSIGNED-PAYLOAD",
  ].join('\n');

  const canonicalRequestHash = await sha256Hex(canonicalRequest);

  // 3. Build the String to Sign
  const stringToSign = [
    "AWS4-HMAC-SHA256",
    amzDate,
    `${dateStamp}/${region}/${service}/aws4_request`,
    canonicalRequestHash,
  ].join('\n');

  // 4. Derive the Signing Key (kSecret -> kDate -> kRegion -> kService -> kSigning)
  let signingKey = await hmacSha256(
    new TextEncoder().encode(`AWS4${process.env.R2_SECRET_ACCESS_KEY}`).buffer as ArrayBuffer,
    dateStamp
  );
  signingKey = await hmacSha256(signingKey, region);
  signingKey = await hmacSha256(signingKey, service);
  signingKey = await hmacSha256(signingKey, "aws4_request");

  // 5. Calculate Final Signature
  const signature = toHexString(await hmacSha256(signingKey, stringToSign));

  return `https://${host}/${process.env.R2_BUCKET_NAME}/${encodedKey}?${sortedQS}&X-Amz-Signature=${signature}`;
}

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

const ALLOWED_PREFIXES = new Set([
  "wallpapers/full",
  "wallpapers/thumbs",
]);

export async function POST(request: NextRequest) {
  // 1. Strict Auth Verification
  const authHeader = request.headers.get("authorization");
  const uploadSecret = process.env.UPLOAD_SECRET;

  if (!uploadSecret || authHeader !== `Bearer ${uploadSecret}`) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { filename, contentType = "image/webp", prefix = "wallpapers/full" } = await request.json();

  // 2. Prevent SVG/HTML/executable file uploads
  if (!ALLOWED_CONTENT_TYPES.has(contentType)) {
    return NextResponse.json({ error: "Disallowed content type" }, { status: 400 });
  }

  // 3. Enforce directory isolation and sanitize filename
  const targetPrefix = ALLOWED_PREFIXES.has(prefix) ? prefix : "wallpapers/full";
  const cleanFilename = filename.replace(/[^a-zA-Z0-9_.-]/g, "_");
  const key = `${targetPrefix}/${Date.now()}_${cleanFilename}`;

  // 4. Generate a 10-minute expiring URL
  const uploadUrl = await createPresignedPutUrl(key, contentType, 600);
  const publicUrl = `${process.env.R2_PUBLIC_DOMAIN}/${key}`;

  return NextResponse.json({
    uploadUrl,
    key,
    publicUrl,
    method: "PUT",
  });
}

async function uploadWallpaper(file: File) {
  // Step 1: Request presigned URL from Next.js API (takes ~15ms)
  const res = await fetch("/api/upload/presigned", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${ADMIN_TOKEN}`,
    },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
      prefix: "wallpapers/full",
    }),
  });

  const { uploadUrl, publicUrl } = await res.json();

  // Step 2: Stream raw bytes directly to Cloudflare R2
  const uploadRes = await fetch(uploadUrl, {
    method: "PUT",
    headers: {
      "Content-Type": file.type,
    },
    body: file,
  });

  if (!uploadRes.ok) {
    throw new Error("Direct R2 upload failed");
  }

  console.log("Uploaded successfully to:", publicUrl);
  return publicUrl;
}