Menggunakan Refresh Token untuk Sesi Login Lebih Panjang

Kang Ngoding May 25, 2025 3:36 pm . 3 min read

Menggunakan Refresh Token untuk Sesi Login Lebih Panjang — Ilustrasi Gambar.

Halo sobat ruanginformatika! 👋

Sampai sini, aplikasi todomu sudah bisa login, logout, dan proteksi halaman. Tapi pasti kamu pernah ngalamin ini:

“Loh, kok tiba-tiba logout sendiri? Padahal baru buka 1 jam lalu.”

Itu terjadi karena token biasanya punya masa hidup pendek (misalnya 15–30 menit). Supaya user tidak terus login ulang, kita pakai sistem Refresh Token.

🧠 Apa itu Refresh Token?

Access Token → Digunakan untuk request API (masa aktif pendek)
Refresh Token → Disimpan di browser (httpOnly cookie) untuk dapatkan access token baru

Skema kerjanya seperti ini:

User login → Dapat access token + refresh token
Access token disimpan di localStorage
Refresh token disimpan di cookie (httpOnly)
Ketika access token habis, frontend minta token baru ke backend via /refresh

🛠 Backend – Menambahkan Refresh Token

1️⃣ Tambahkan Endpoint `/refresh`


// routes/auth.js
const jwt = require('jsonwebtoken');

router.post('/refresh', (req, res) => {
  const token = req.cookies.refreshToken;
  if (!token) return res.status(401).json({ message: 'Token tidak ditemukan' });

  try {
    const payload = jwt.verify(token, process.env.REFRESH_SECRET);
    const accessToken = jwt.sign({ id: payload.id }, process.env.JWT_SECRET, { expiresIn: '15m' });
    res.json({ accessToken });
  } catch (err) {
    res.status(403).json({ message: 'Refresh token tidak valid' });
  }
});


const refreshToken = jwt.sign({ id: user._id }, process.env.REFRESH_SECRET, { expiresIn: '7d' });
res.cookie('refreshToken', refreshToken, {
  httpOnly: true,
  secure: true,
  sameSite: 'Strict',
  maxAge: 7 * 24 * 60 * 60 * 1000 // 7 hari
});
res.json({ accessToken });

Pastikan pakai middleware cookie-parser:


npm install cookie-parser


// index.js
const cookieParser = require('cookie-parser');
app.use(cookieParser());

🧪 Frontend – Gunakan Refresh Token

1️⃣ Tangani Expired Token

Kita gunakan interceptor Axios untuk otomatis refresh saat token kadaluarsa:


import axios from 'axios';

const API = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,
  withCredentials: true // penting agar cookie terkirim!
});

API.interceptors.response.use(
  res => res,
  async err => {
    const originalRequest = err.config;
    if (err.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const res = await axios.post('/auth/refresh', {}, { withCredentials: true });
      localStorage.setItem('token', res.data.accessToken);
      API.defaults.headers.common['Authorization'] = `Bearer ${res.data.accessToken}`;
      originalRequest.headers['Authorization'] = `Bearer ${res.data.accessToken}`;
      return API(originalRequest);
    }
    return Promise.reject(err);
  }
);

export default API;