Penggunaan JSON Web Token (JWT) di Express.js
Penggunaan JSON Web Token (JWT) di Express.js
JSON Web Token (JWT) adalah standar terbuka yang memungkinkan pertukaran informasi yang aman antara dua pihak dalam bentuk objek JSON. Informasi ini dapat diverifikasi dan dipercaya karena telah ditandatangani secara digital. JWT sering digunakan dalam otentikasi dan otorisasi pengguna di aplikasi web.
Berikut adalah langkah-langkah penggunaan JWT di aplikasi Express.js:
1. Instalasi Paket yang Diperlukan
Pertama, kita perlu menginstal paket jsonwebtoken dan express jika belum diinstal.
npm install express jsonwebtoken
2. Membuat Server Express
Buat file bernama app.js dan tulis kode dasar untuk server Express.
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.use(express.json());
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
3. Membuat Rute untuk Login dan Menghasilkan JWT
Tambahkan rute untuk login yang akan menghasilkan token JWT jika kredensial pengguna valid.
const users = [
{ id: 1, username: 'user1', password: 'password1' },
{ id: 2, username: 'user2', password: 'password2' }
];
app.post('/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
const token = jwt.sign({ id: user.id, username: user.username }, 'secretkey', { expiresIn: '1h' });
res.json({ token });
} else {
res.status(400).send('Username or password is incorrect');
}
});
4. Middleware untuk Verifikasi Token
Buat middleware untuk memverifikasi token JWT yang dikirim oleh klien.
const verifyToken = (req, res, next) => {
const token = req.headers['authorization'];
if (!token) {
return res.status(403).send('A token is required for authentication');
}
try {
const decoded = jwt.verify(token, 'secretkey');
req.user = decoded;
} catch (err) {
return res.status(401).send('Invalid Token');
}
return next();
};
5. Rute yang Dilindungi
Tambahkan rute yang dilindungi oleh middleware verifikasi token.
app.get('/protected', verifyToken, (req, res) => {
res.send('This is a protected route');
});
6. Menjalankan Aplikasi
Sekarang, jalankan aplikasi dengan perintah:
node app.js
Kesimpulan
Dengan langkah-langkah di atas, Anda telah berhasil mengintegrasikan JWT ke dalam aplikasi Express.js Anda untuk otentikasi dan otorisasi. JWT membantu memastikan bahwa hanya pengguna yang telah diautentikasi yang dapat mengakses rute yang dilindungi di aplikasi Anda.
Contoh Lengkap app.js
Berikut adalah contoh lengkap dari file app.js:
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.use(express.json());
const users = [
{ id: 1, username: 'user1', password: 'password1' },
{ id: 2, username: 'user2', password: 'password2' }
];
app.post('/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
const token = jwt.sign({ id: user.id, username: user.username }, 'secretkey', { expiresIn: '1h' });
res.json({ token });
} else {
res.status(400).send('Username or password is incorrect');
}
});
const verifyToken = (req, res, next) => {
const token = req.headers['authorization'];
if (!token) {
return res.status(403).send('A token is required for authentication');
}
try {
const decoded = jwt.verify(token, 'secretkey');
req.user = decoded;
} catch (err) {
return res.status(401).send('Invalid Token');
}
return next();
};
app.get('/protected', verifyToken, (req, res) => {
res.send('This is a protected route');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Dengan mengikuti tutorial ini, Anda bisa mengamankan rute dalam aplikasi Express.js menggunakan JWT.
Kemudian, Untuk menggunakan endpoint /login tersebut dengan React.js dan Axios, Anda bisa mengikuti langkah-langkah berikut ini.
1. Instalasi Axios di Proyek React
Jika Anda belum menginstal Axios di proyek React Anda, Anda bisa melakukannya dengan perintah berikut:
npm install axios
2. Membuat Form Login di React
Buat sebuah komponen login di React, misalnya Login.js.
import React, { useState } from 'react';
import axios from 'axios';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const handleLogin = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://localhost:3000/login', {
username,
password
});
const { token } = response.data;
localStorage.setItem('token', token);
setMessage('Login successful!');
} catch (error) {
setMessage('Login failed: ' + error.response.data);
}
};
return (
<div>
<h2>Login</h2>
<form onSubmit={handleLogin}>
<div>
<label>Username</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label>Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit">Login</button>
</form>
{message && <p>{message}</p>}
</div>
);
};
export default Login;
3. Menggunakan Token untuk Mengakses Rute yang Dilindungi
Buat sebuah komponen yang akan mengakses rute yang dilindungi menggunakan token yang sudah disimpan di localStorage.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Protected = () => {
const [message, setMessage] = useState('');
useEffect(() => {
const fetchData = async () => {
const token = localStorage.getItem('token');
try {
const response = await axios.get('http://localhost:3000/protected', {
headers: {
'Authorization': token
}
});
setMessage(response.data);
} catch (error) {
setMessage('Failed to fetch protected data: ' + error.response.data);
}
};
fetchData();
}, []);
return (
<div>
<h2>Protected Route</h2>
{message && <p>{message}</p>}
</div>
);
};
export default Protected;
4. Mengatur Routing di React
Buat routing untuk mengakses komponen Login dan Protected, misalnya menggunakan React Router.
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './Login';
import Protected from './Protected';
function App() {
return (
<Router>
<div>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/protected" element={<Protected />} />
</Routes>
</div>
</Router>
);
}
export default App;
Penjelasan
-
Login.js: Komponen ini membuat form login yang mengirimkan permintaan POST ke endpoint
/loginuntuk mendapatkan token. Jika login berhasil, token disimpan dilocalStorage. -
Protected.js: Komponen ini mengakses rute yang dilindungi dengan mengirimkan token yang telah disimpan di
localStoragedalam header permintaan. - App.js: Komponen utama yang mengatur routing untuk komponen Login dan Protected menggunakan React Router.
Dengan setup ini, Anda dapat melakukan login dan mengakses rute yang dilindungi di backend Express.js menggunakan React dan Axios.
