Membuat Middleware di Cloudflare Workers (Auth, Logging, Rate Limit)

AI Insights

Generate a summary and suggested tags for this post.

Middleware adalah kode yang dijalankan sebelum handler utama — biasa dipakai untuk autentikasi, logging, rate limit, atau transform request/response. Di Cloudflare Workers, cara paling clean pakai Hono.

Middleware di Cloudflare Workers

Konsep Middleware

Request masuk → middleware 1 → middleware 2 → handler → response.

Setiap middleware bisa:

Blok request (misal 401 kalau ga login)
Modif request/response
Log
Continue ke middleware/handler berikutnya

Setup dengan Hono

npm install hono

import { Hono } from "hono";

const app = new Hono();

1. Logging Middleware

app.use("*", async (c, next) => {
  const start = Date.now();
  console.log(`→ ${c.req.method} ${c.req.path}`);
  await next();
  const ms = Date.now() - start;
  console.log(`← ${c.res.status} (${ms}ms)`);
});

Lihat log real-time: npx wrangler tail.

2. Authentication Middleware (API Key)

app.use("/api/*", async (c, next) => {
  const key = c.req.header("x-api-key");
  if (key !== c.env.API_KEY) {
    return c.json({ error: "Unauthorized" }, 401);
  }
  await next();
});

3. Bearer Token / JWT Middleware

import { jwt } from "hono/jwt";

app.use("/api/private/*", jwt({ secret: "your-secret-key" }));

app.get("/api/private/profile", (c) => {
  const payload = c.get("jwtPayload"); // decoded JWT
  return c.json(payload);
});

4. Rate Limit Middleware (KV-based)

app.use("/api/*", async (c, next) => {
  const ip = c.req.header("cf-connecting-ip") || "unknown";
  const key = `rl:${ip}`;

  const count = parseInt(await c.env.KV.get(key) || "0");
  if (count >= 60) {
    return c.json({ error: "Rate limit exceeded" }, 429);
  }

  await c.env.KV.put(key, String(count + 1), { expirationTtl: 60 });
  await next();
});

5. CORS Middleware (Built-in Hono)

import { cors } from "hono/cors";

app.use("/api/*", cors({
  origin: ["https://mydomain.com"],
  allowMethods: ["GET", "POST", "PUT", "DELETE"],
  allowHeaders: ["Content-Type", "Authorization"],
}));

6. Response Transform Middleware

Tambah header custom di semua response:

app.use("*", async (c, next) => {
  await next();
  c.res.headers.set("X-Powered-By", "Cloudflare Workers");
  c.res.headers.set("X-Response-Time", Date.now().toString());
});

Urutan Middleware

Urutan penting! Susun dari luar ke dalam:

app.use("*", loggerMiddleware);      // 1. Log semua request
app.use("*", corsMiddleware);         // 2. Set CORS
app.use("/api/*", rateLimitMiddleware); // 3. Rate limit khusus /api
app.use("/api/*", authMiddleware);    // 4. Auth khusus /api

app.get("/api/data", (c) => c.json({ ... })); // 5. Handler

Contoh Lengkap

import { Hono } from "hono";
import { cors } from "hono/cors";
import { logger } from "hono/logger";

const app = new Hono();

app.use("*", logger());
app.use("*", cors());

app.use("/api/*", async (c, next) => {
  const auth = c.req.header("authorization");
  if (auth !== `Bearer ${c.env.API_KEY}`) {
    return c.json({ error: "Unauthorized" }, 401);
  }
  await next();
});

app.get("/", (c) => c.text("Public"));
app.get("/api/secret", (c) => c.json({ secret: "value" }));

export default app;

Kesimpulan

Middleware = pattern wajib untuk aplikasi Workers yang serius. Pakai Hono biar clean & pattern-nya mirip Express. Susun urutan dari generic → specific, dan pisah middleware per concern (auth, log, rate limit).