Middleware Next.js: Usir User Tanpa Token Biar Gak Bobol!

Waduh, Dashboard Lu Masih Bisa Diakses Sembarang Orang?

Pernah gak sih lu udah capek-capek bikin dashboard admin yang keren banget, eh taunya orang asing bisa masuk cuma modal copy-paste URL doang? Asli, itu ngeri banget lur! Rasanya kayak lu udah gembok pintu rumah rapat-rapat, tapi jendela lupa ditutup. Siapa aja bisa nyelonong masuk tanpa permisi.

Di dunia Next.js, ada satu fitur sakti mandraguna yang namanya Middleware. Lu bisa bayangin Middleware ini sebagai satpam komplek yang super tegas. Setiap ada yang mau lewat ke jalan (route) tertentu, si satpam ini bakal nanyain KTP (Token JWT). Kalo gak bawa atau KTP-nya palsu? Ya maap-maap aja, auto depak alias disuruh balik kanan ke halaman login!

Kenapa Harus Middleware? Kenapa Gak di Client Side Aja?

Mungkin lu mikir, 'Ah, ribet amat, kan bisa dicek pake useEffect di tiap halaman?'. Waduh, mending buang jauh-jauh pikiran itu. Kalo lu ngecek di client-side, browser bakal sempet ngerender halaman lu sebelum script auth-nya jalan. Hasilnya? Bakal ada 'flicker' atau penampakan konten rahasia selama sepersekian detik. Gak asik banget kan?

Middleware Next.js jalan di Edge Runtime. Artinya, pengecekan ini dilakuin di level server sebelum halaman bener-bener dikirim ke browser user. Jadi, sebelum user sempet ngelihat apa-apa, si Middleware udah nge-scan duluan. Kalo aman, lanjut. Kalo nggak, langsung di-redirect. Gaskeun kita masuk ke teknisnya!

Persiapan: Kenalan sama Library Jose

Catet nih biar gak lupa. Middleware Next.js itu jalan di Edge Runtime yang super enteng, jadi dia gak support library Node.js standar kayak jsonwebtoken (JWT). Kenapa? Karena library itu biasanya butuh API Node.js yang gak ada di Edge. Solusinya, kita pake library namanya jose. Library ini ringan, kenceng, dan emang didesain buat lingkungan kayak Edge Runtime.

Install dulu lewat terminal kesayangan lu:

npm install jose

Bikin Helper Verifikasi Token

Sebelum kita bikin file middleware-nya, kita butuh satu fungsi buat ngecek apakah token JWT yang dibawa user itu asli atau cuma editan Photoshop. Bikin file baru, misalnya lib/auth.ts.

import { jwtVerify } from 'jose';

export const verifyToken = async (token: string) => {
  try {
    const secret = new TextEncoder().encode(process.env.JWT_SECRET);
    const { payload } = await jwtVerify(token, secret);
    return payload;
  } catch (error) {
    return null;
  }
};

Di sini kita pake TextEncoder karena Edge Runtime butuh secret key dalam bentuk Uint8Array, bukan sekadar string biasa. Kalo tokennya valid, dia bakal balikin data user (payload). Kalo zonk, ya balikin null.

Setting Satpam Utama: middleware.ts

Sekarang saatnya kita bikin file middleware.ts di root project lu (sejajar sama folder app atau src). Inget ya, namanya harus pas, jangan typo!

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { verifyToken } from './lib/auth';

export async function middleware(request: NextRequest) {
  // Ambil token dari cookies
  const token = request.cookies.get('auth_token')?.value;

  // Tentukan path mana aja yang mau diproteksi
  const isDashboardPage = request.nextUrl.pathname.startsWith('/dashboard');

  if (isDashboardPage) {
    if (!token) {
      // Kalo gak ada token, tendang ke login
      return NextResponse.redirect(new URL('/login', request.url));
    }

    const payload = await verifyToken(token);
    if (!payload) {
      // Token ada tapi palsu/expired, tendang juga!
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  return NextResponse.next();
}

Logikanya simpel: kita ambil token dari cookie (karena nyimpen JWT di cookie jauh lebih aman daripada di localStorage biar gak kena serangan XSS). Terus kita cek, kalo user mau ke dashboard tapi gak punya token valid, ya kita paksa dia pindah ke halaman login. Gak usah pake kompromi, wkwk.

Optimasi Pake Matcher

Kalo lu biarin kode di atas gitu aja, Middleware bakal jalan di SETIAP request, termasuk request buat gambar, CSS, dan file font. Ini bisa bikin aplikasi lu agak lemot karena satpamnya nanyain KTP ke tukang paket, tukang bakso, sampe kucing lewat pun ditanyain.

Makanya, kita perlu pake config matcher buat nentuin route mana aja yang perlu dijagain sama si satpam ini.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/profile/:path*',
    '/settings/:path*',
  ],
};

Dengan begini, Middleware cuma bakal aktif pas user buka halaman yang depannya /dashboard, /profile, atau /settings. Halaman publik kayak landing page atau blog gak bakal keganggu. Jadi tetep ngebut, lur!

Gimana Kalo Token Expired?

Ini yang sering bikin pusing developer pemula. Kadang token masih ada, tapi masa berlakunya udah abis. Di kode kita tadi, fungsi verifyToken bakal otomatis nge-throw error kalo token expired, dan blok catch kita bakal balikin null. Jadi secara otomatis, user yang tokennya expired bakal disuruh login ulang. Aman banget kan?

Satu tips tambahan: jangan lupa set cookie lu dengan flag httpOnly: true pas proses login di API route. Tujuannya biar script jahat gak bisa nyolong token lu lewat document.cookie. Keamanan itu nomor satu, jangan sampe mager buat setting ginian.

Intinya Sih Begini...

Pake Middleware di Next.js itu cara paling elegan dan 'proper' buat jaga keamanan route lu. Lu gak perlu lagi repot nambahin logika auth di setiap halaman satu-satu. Cukup satu file middleware.ts, semua beres. Aplikasi lu jadi lebih profesional, aman, dan pastinya gak gampang dibobol sama tangan-tangan jahil.

Kira-kira lu lebih milih simpen token di Cookie atau LocalStorage nih buat proteksi maksimal?

FAQ (Pertanyaan Umum)