Tujuan Pembelajaran

Memahami perbedaan session-based dan token-based auth
Bisa mengimplementasikan JWT authentication

Analogi

Diagram


      Session = Tanda Parkir #42:
[Kasir] → 'Ini #42' → [Kamu] → Pulang → Kasir cek data #42

JWT = Tiket Konser:
[Tiket] = {nama: 'Budi', seat: 'A1'} + TANDA TANGAN
[Penjaga] → Verifikasi tanda tangan → Izinkan

Session = referensi ke data di server, JWT = data self-contained

Penjelasan Konsep

Autentikasi

Autentikasi adalah proses memverifikasi identitas user. Ada dua pendekatan umum: Session-based dan Token-based (JWT).

Session-based = Tanda Parkir

Kamu parkir → kasir kasih #42. Data lengkap ada di sistem kasir.

Di web:

User login → server buat session ID → simpan di database.
Session ID dikirim ke client via cookie.
Client kirim cookie setiap request.
Server cek database: session valid?

JWT = Tiket Konser

Tiket berisi semua info + tanda tangan keamanan. Penjaga cukup verifikasi tanda tangan, tidak perlu cek database.

Di web:

User login → server buat JWT (user ID, nama) + signature.
JWT dikirim ke client.
Client kirim JWT di header Authorization.
Server verifikasi signature → tahu ini user siapa.

JWT Structure

header.payload.signature

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan session-based dan token-based auth., dan bisa mengimplementasikan JWT authentication. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Autentikasi, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Session = referensi ke data di server, JWT = data self-contained. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 4-10: Generate JWT. Baris 13-23: Middleware verifikasi. Baris 26-33: Client kirim JWT.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// JWT DI SERVER (Node.js)
const jwt = require('jsonwebtoken');

const login = (req, res) => {
  const user = { id: 1, name: 'Budi' };
  const token = jwt.sign(
    { userId: user.id },
    process.env.JWT_SECRET,
    { expiresIn: '1h' }
  );

  // Auth sensitif lebih aman disimpan sebagai HttpOnly cookie dari server.
  res.setHeader('Set-Cookie', `session=${token}; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=3600`);
  res.json({ ok: true });
};

// Middleware verifikasi
const auth = (req, res, next) => {
  const token = parseCookie(req.headers.cookie || '').session;
  if (!token) return res.status(401).json({ error: 'Session required' });
  try {
    req.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    res.status(403).json({ error: 'Invalid session' });
  }
};

// CLIENT: browser otomatis mengirim cookie ke origin yang sama
const apiCall = async () => {
  const res = await fetch('/api/protected', { credentials: 'include' });
  if (res.status === 401) window.location.href = '/login';
  return res.json();
};

Penjelasan Kode

Baris 4-10: Generate JWT. Baris 13-23: Middleware verifikasi. Baris 26-33: Client kirim JWT.

Prompt AI

Jelaskan kenapa JWT disebut 'stateless'.

Pertanyaan Reflektif

Decode JWT di jwt.io. Lihat strukturnya.