46 Menambahkan Middleware Autentikasi JWT
46 Menambahkan Middleware Autentikasi JWT
Autentikasi adalah salah satu aspek paling krusial dalam pengembangan aplikasi web modern. Salah satu solusi yang populer dan efisien untuk menangani otentikasi di aplikasi stateless adalah JSON Web Token (JWT). Pada artikel ke-46 dalam serial ini, saya akan membahas bagaimana menambahkan middleware autentikasi JWT pada backend Node.js (menggunakan Express) dengan studi kasus sederhana, contoh kode, simulasi request, hingga diagram alur agar semakin mudah dipahami. Artikel ini disusun untuk membantu kamu, baik pemula maupun yang sudah berpengalaman, memahami proses mengamankan route menggunakan JWT middleware.
Mengenal JWT (JSON Web Token) secara Singkat
JWT adalah standar terbuka (RFC 7519) untuk pertukaran informasi yang aman sebagai objek JSON. Kenapa JWT populer? Karena ia simple, lightweight dan mudah diterapkan serta bisa digunakan pada arsitektur aplikasi modern seperti RESTful API.
JWT terdiri dari tiga bagian:
- Header (informasi tipe token & algoritma signing)
- Payload (data yang ingin dibagikan)
- Signature (hasil hash dari header+payload dengan secret key)
Contoh JWT token (disingkat):
1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NSIsImlhdCI6MTY3NjM5MDAwMH0.JstShdk8laNsFnw4rVSdaLRKOa8Aq9s8KfTProblem: Tanpa Middleware Autentikasi
Sebelum ada middleware autentikasi, route pada aplikasi dapat diakses bebas. Contoh Express route tanpa autentikasi:
1app.get('/profile', (req, res) => {
2 res.send('Data profil user yang seharusnya hanya bisa diakses user terautentikasi');
3});Risikonya: Siapapun bisa mengakses /profile.
Solusi: Middleware Autentikasi JWT
Konsep Middleware
- Middleware di Express adalah fungsi yang memiliki akses ke
req,res, dannext. - Ia bisa digunakan untuk memvalidasi request, memproses data, mencegat akses, dll.
- Middleware autentikasi JWT bertugas membaca dan memverifikasi JWT pada setiap request sebelum melanjutkan ke route handler.
Diagram Alur Otentikasi dengan Middleware JWT
flowchart TD
A[Client mengirim request ke /profile] --> B{Request membawa JWT?}
B -- Tidak --> C[Respon 401 Unauthorized]
B -- Ya --> D[Verifikasi Signature JWT]
D -- Gagal --> C
D -- Berhasil --> E[Ambil Payload JWT]
E --> F[Req diteruskan ke route]
F --> G[Respon Data Profil]
Diagram di atas memperlihatkan bagaimana request yang tidak valid dicegat sebelum mencapai handler.
Implementasi: Langkah demi Langkah
Mari langsung praktik membuat middleware autentikasi JWT di Express.
1. Instalasi package yang dibutuhkan
1npm install express jsonwebtoken dotenv2. Struktur Project (optional)
1/project-root
2├── .env
3├── app.js
4└── middleware/
5 └── jwtMiddleware.js3. Konfigurasi Secret Key (.env)
1JWT_SECRET=myverystrongsecret4. Implementasi Middleware (middleware/jwtMiddleware.js)
1// File: middleware/jwtMiddleware.js
2const jwt = require('jsonwebtoken');
3
4function authenticateJWT(req, res, next) {
5 const authHeader = req.headers.authorization;
6
7 if (!authHeader) {
8 return res.status(401).json({ message: 'Token tidak ditemukan' });
9 }
10
11 const token = authHeader.split(' ')[1];
12 // Format: "Bearer <token>"
13
14 jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
15 if (err) {
16 return res.status(401).json({ message: 'Token tidak valid' });
17 }
18
19 req.user = user; // Menyimpan payload ke request
20 next();
21 });
22}
23
24module.exports = authenticateJWT;5. Penggunaan Middleware pada Route (app.js)
1require('dotenv').config();
2const express = require('express');
3const authenticateJWT = require('./middleware/jwtMiddleware');
4
5const app = express();
6
7app.get('/profile', authenticateJWT, (req, res) => {
8 // req.user adalah payload yang sudah diverifikasi
9 res.json({
10 message: 'Hello, ' + req.user.username,
11 data: req.user
12 });
13});
14
15app.listen(3000, () => {
16 console.log('Server running on port 3000');
17});6. Simulasi Login: Generate JWT
Untuk menguji, kita membutuhkan endpoint login sederhana.
1const jwt = require('jsonwebtoken');
2app.use(express.json());
3
4app.post('/login', (req, res) => {
5 // Simulasi user & validasi (hard-coded)
6 const { username, password } = req.body;
7 if (username === 'budi' && password === 'rahasia') {
8 // Payload bebas, minimal biasanya userId / username
9 const payload = { username: username, id: 1 };
10 const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });
11 res.json({ accessToken: token });
12 } else {
13 res.status(401).json({ message: 'Username atau password salah' });
14 }
15});Simulasi Request & Response
1. Login dan Dapatkan Token
- Request
1POST /login 2Content-Type: application/json 3 4{ 5 "username": "budi", 6 "password": "rahasia" 7} - Response
1{ 2 "accessToken": "eyJhbGciOiJIUzI1NiIsInR... (token panjang)" 3}
2. Akses Route Terproteksi
- Request
1GET /profile 2Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR...(token dari login) - Response
1{ 2 "message": "Hello, budi", 3 "data": { 4 "username": "budi", 5 "id": 1, 6 "iat": 1683960600, 7 "exp": 1683964200 8 } 9}
3. Akses tanpa Token
- Request
1GET /profile - Response
1{ "message": "Token tidak ditemukan" }
Keunggulan dan Kelemahan JWT Middleware
| Keunggulan | Kelemahan/Perlu Diwaspadai |
|---|---|
| Stateless, scalable | Token bisa disalahgunakan jika bocor |
| Multi-platform friendly | Tidak mudah dicabut/dibatalkan |
| Mudah diimplementasikan | Ukuran payload bisa besar |
| Cepat (tanpa DB lookup) | Perlu expired & rotation management |
Best Practice & Catatan
- Selalu simpan secret key di environment variable.
- Jangan masukkan informasi sensitif pada payload JWT.
- Implementasikan expiry (
exp) pada JWT untuk keamanan ekstra. - Untuk aplikasi kompleks, pertimbangkan mekanisme blacklist/whitelist token, terutama saat user logout.
Penutup
Menambahkan middleware autentikasi JWT merupakan langkah penting dalam mengamankan API modern. Dengan sedikit tambahan kode, kita dapat memfilter request tanpa autentikasi dan hanya memberikan akses pada user valid sesuai payload JWT mereka. Pendekatan ini juga sangat fleksibel untuk diterapkan di sistem microservices dan aplikasi mobile.
Semoga artikel ini membantu memahami role middleware JWT secara terstruktur. Silakan remix contoh kode di atas sesuai kebutuhan proyekmu. Jika ada pertanyaan atau ingin berbagi pengalaman implementasi JWT di stack teknologi lain, drop komentar di bawah ya! 🚀
Referensi: