𝗜 𝗠𝗲𝘀𝘀𝗲𝗱 𝗨𝗽 𝗠𝘆 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝘂𝘁𝗵 𝗠𝗮𝘁𝗰𝗵𝗲𝗿 𝗧𝗵𝗿𝗲𝗲 𝗧𝗶𝗺𝗲𝘀

Saya Mengacaukan Matcher Auth Next.js Saya Tiga Kali

Saya merusak tiga proyek sebelum saya memahami cara kerja proxy.ts di Next.js 16.

Kesalahannya tidak terdeteksi. Tidak ada log. Tidak ada peringatan. Tidak ada error. Hanya redirect yang rusak dan celah keamanan.

Jika Anda sedang melakukan upgrade ke Next.js 16, jangan hanya menjalankan codemod lalu pergi begitu saja. Anda perlu memeriksa tiga hal ini.

Jebakan Migrasi

Next.js mengubah nama middleware.ts menjadi proxy.ts. Ini bukan sekadar perubahan nama.

• middleware.ts berjalan di Edge runtime. Dukungan cryptonya terbatas.
• proxy.ts berjalan di Node.js runtime secara default. Ia memiliki dukungan crypto penuh.

Jika Anda memperbarui paket secara manual tanpa codemod, file middleware.ts lama Anda mungkin masih ada. File tersebut akan dikompilasi dengan baik. Akan lolos pengecekan TypeScript. Namun, ia tidak akan melakukan apa-apa. Route Anda tidak akan dicegat. Redirect Anda tidak akan berjalan.

Periksa tiga hal ini secara manual:

• proxy.ts harus ada di root proyek Anda.
• Fungsi yang diekspor harus bernama proxy.
• middleware.ts harus dihapus.

Celah Matcher

Matcher adalah tempat di mana pengaturan auth paling sering gagal.

Jika matcher Anda terlalu luas, proxy akan berjalan pada setiap file CSS dan gambar. Ini menyebabkan loop redirect yang tak berujung.

Jika matcher Anda terlalu sempit, Anda menciptakan celah keamanan.

Jika sebuah route tidak ada dalam matcher Anda, proxy tidak akan pernah berjalan. Pengguna dapat mengirimkan header mereka sendiri ke route tersebut. Jika Server Component Anda mempercayai header tersebut, penyerang dapat menyamar sebagai siapa pun.

Solusinya: Jangan Percaya Header

Saya belajar dengan cara yang sulit: jangan hanya mengandalkan header yang diteruskan oleh proxy.

Gunakan pendekatan dua lapis:

• Proxy bertindak sebagai gerbang cepat di batas jaringan.
• Server Component memverifikasi JWT secara langsung dari cookie pada saat render.

Pemeriksaan kedua ini menutup celah tersebut. Bahkan jika matcher melewatkan sebuah route, Server Component akan menangkap pengguna yang tidak valid. Ini menambah beberapa milidetik latensi tetapi mencegah kegagalan keamanan yang masif.

Ringkasan Checklist:

• Gunakan proxy.ts untuk auth.
• Gunakan Node.js runtime untuk dukungan crypto penuh.
• Atur header pada request, bukan pada response.
• Selalu verifikasi JWT di dalam Server Components.

Sumber: https://dev.to/shubhradev/i-got-the-proxyts-matcher-wrong-for-three-projects-before-i-understood-why-4e5c