Belajar HonoJS - Middleware & Built-in Helpers

#Pendahuluan

Setelah di episode 6 kita memahami schema validation, pada episode ini kita akan memahami middleware — lapisan kode yang berjalan sebelum handler utama, digunakan untuk logging, autentikasi, CORS, compression, dan banyak lagi. Hono memiliki built-in middleware yang sangat lengkap.

#Konsep Middleware di Hono

Middleware adalah fungsi yang berjalan sebelum handler — bisa memodifikasi request, menambahkan header, menghitung timing, atau memblokir request yang tidak valid.

Middleware berjalan sebelum handler

app.use('*', logger())
app.use('/api/*', auth())
app.get('/', (c) => c.text('Hello'))  // handler

#Built-in Middleware

CORS configuration

import { cors } from 'hono/cors'
 
app.use('*', cors({
  origin: ['https://example.com', 'https://app.example.com'],
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
}))

#jwt() — JWT Verification

JWT middleware

import { jwt } from 'hono/jwt'
 
app.use('/api/*', jwt({ secret: process.env.JWT_SECRET }))
 
app.get('/api/profile', (c) => {
  const payload = c.get('jwtPayload')
  return c.json({ userId: payload.sub })
})

#compress() — Response Compression

Gzip/deflate compression

import { compress } from 'hono/compress'
 
app.use('*', compress())

#logger() — Request Logging

Request logging ke console

import { logger } from 'hono/logger'
 
app.use('*', logger())

Output: <-- GET / | 200 | 3ms

#secureHeaders() — Security Headers

Security headers otomatis

import { secureHeaders } from 'hono/secure-headers'
 
app.use('*', secureHeaders())

Menambahkan: X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, dll.

#rateLimiter() — Rate Limiting

Rate limiting per IP

import { rateLimiter } from 'hono/rate-limiter'
 
app.use('*', rateLimiter({
  windowMs: 60000,
  limit: 100,
}))

#Custom Middleware

#Timing Middleware

Response timing middleware

const timing = async (c: any, next: any) => {
  const start = Date.now()
  await next()
  const ms = Date.now() - start
  c.header('X-Response-Time', `${ms}ms`)
}
 
app.use('*', timing)

#Auth Middleware

Custom auth middleware

const auth = async (c: any, next: any) => {
  const token = c.req.header('Authorization')?.split(' ')[1]
  if (!token) {
    return c.json({ error: 'Unauthorized' }, 401)
  }
  // verify token
  await next()
}

#Middleware Ordering

Urutan middleware penting — request melewati middleware dari atas ke bawah:

Middleware ordering

app.use('*', logger())        // 1. logging
app.use('*', cors())           // 2. CORS
app.use('*', secureHeaders())  // 3. security headers
app.use('/api/*', jwt({...}))  // 4. JWT (hanya /api/*)
app.use('*', compress())       // 5. compression
app.get('/', handler)          // 6. handler

Note

Middleware yang dipasang lebih awal berjalan lebih dulu. Untuk logging, pasang logger() paling awal. Untuk JWT, pasang setelah CORS agar preflight request tidak diblokir.

#Penutup

Pada episode 7 ini, kalian telah memahami middleware di Hono — built-in middleware untuk kebutuhan umum dan custom middleware untuk kebutuhan spesifik.

Inti yang harus dibawa pulang:

Built-in: cors, jwt, compress, logger, secureHeaders, rateLimiter.
Custom middleware: fungsi async yang menerima c dan next.
Middleware ordering mempengaruhi urutan eksekusi.
app.use() untuk apply middleware ke semua atau route tertentu.

Di episode 8 selanjutnya kita akan memahami database integration dengan Drizzle ORM — setup Drizzle di proyek Hono, definisi schema, query builder, dan integrasi dengan Cloudflare D1. Sampai jumpa di episode 8!