Belajar Nuxt - Security & Authentication

#Pendahuluan

Setelah aplikasi punya data dan form, keamanan bukan lagi opsi. Episode 12 membahas autentikasi dan keamanan di Nuxt: bagaimana pengguna masuk, bagaimana session disimpan dengan aman, bagaimana rute dilindungi, dan bagaimana hak akses dibedakan antar peran.

Kita akan membahas dua pendekatan: memakai @sidebase/nuxt-auth yang lengkap, dan membangun autentikasi custom yang lebih ringan. Keduanya valid — pilihan bergantung pada kebutuhan project. Yang tidak bisa ditawar: cookie aman, middleware pelindung, dan otorisasi yang dicek di server.

#Authentication dengan @sidebase/nuxt-auth

#Install dan Konfigurasi

@sidebase/nuxt-auth membungkus Auth.js sehingga login, session, dan callback tersedia cepat:

npm install @sidebase/nuxt-auth

Konfigurasi nuxt-auth

export default defineNuxtConfig({
  modules: ["@sidebase/nuxt-auth"],
  auth: {
    provider: {
      type: "local",
      endpoints: {
        signIn: { path: "/api/auth/login", method: "post" },
        signOut: { path: "/api/auth/logout", method: "post" },
      },
    },
  },
})

Konfigurasi di atas mengarahkan login ke endpoint API yang kalian sediakan. Module ini menyediakan useSession di komponen serta endpoint middleware untuk melindungi rute server.

#Login dan Logout di Komponen

Login dan logout

import { signIn, signOut } from "#auth"
 
async function login() {
  await signIn({ username: form.username, password: form.password })
}
 
async function keluar() {
  await signOut()
}

signIn dan signOut dari #auth menangani seluruh alur session. Setelah login berhasil, useSession() di komponen lain langsung merefleksikan status pengguna.

#Custom Auth sebagai Alternatif

#Sesuai Kebutuhan Sendiri

Jika project membutuhkan kontrol penuh — misalnya integrasi dengan sistem SSO internal — autentikasi custom lebih masuk akal. Prinsipnya tetap sama: verifikasi kredensial di server, buat token session, simpan di cookie aman.

#Endpoint Login Sendiri

server/api/auth/login.post.ts

export default defineEventHandler(async (event) => {
  const { username, password } = await readBody(event)
 
  if (!verifikasiKredensial(username, password)) {
    throw createError({ statusCode: 401, message: "Kredensial salah" })
  }
 
  const token = buatTokenSesi(username)
  setCookie(event, "session", token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24,
  })
 
  return { ok: true }
})

setCookie(event, "session", token, {...}) menyimpan token di cookie. Atribut httpOnly mencegah akses lewat JavaScript, secure memastikan hanya terkirim lewat HTTPS, dan sameSite mencegah serangan CSRF.

#Session Handling dan Secure Cookies

#Prinsip Cookie Aman

Tiga atribut wajib untuk cookie session:

• httpOnly: JavaScript di browser tidak bisa membaca cookie, mengurangi risiko XSS.
• secure: cookie hanya dikirim lewat HTTPS.
• sameSite: membatasi pengiriman cookie lintas situs, memblokir CSRF.

Membaca dan menghapus session

const token = getCookie(event, "session")
if (!token) {
  throw createError({ statusCode: 401, message: "Belum login" })
}
 
async function logout(event) {
  deleteCookie(event, "session")
}

getCookie(event, "session") membaca cookie di server, dan deleteCookie menghapusnya saat logout. Validasi token di setiap request yang sensitif adalah kewajiban.

#Pengecekan di Server Routes

Jangan hanya mengandalkan komponen untuk keamanan. Setiap server route yang sensitif wajib memeriksa session:

Protect server route

export default defineEventHandler((event) => {
  if (!getCookie(event, "session")) {
    throw createError({ statusCode: 401, message: "Akses ditolak" })
  }
  return { data: "hanya untuk yang login" }
})

#Protecting Routes dengan Middleware

#Middleware Auth untuk Halaman

Kombinasikan middleware dari episode 4 dengan cookie session:

app/middleware/auth.ts

export default defineRouteMiddleware(() => {
  if (!useCookie("session").value) {
    return navigateTo("/login")
  }
})

useCookie("session") membaca token di client. Halaman yang mendaftarkan middleware ini otomatis mengarahkan pengguna yang belum login ke halaman login.

#Role-Based Access Control dan Secure Data Fetching

#Peran dan Izin

Role-Based Access Control membedakan hak akses berdasarkan peran pengguna:

Cek peran pengguna

export default defineEventHandler((event) => {
  const pengguna = getPenggunaDariSesi(event)
 
  if (pengguna.peran !== "admin") {
    throw createError({
      statusCode: 403,
      message: "Butuh hak admin",
    })
  }
 
  return listSemuaPesanan()
})

Cek peran harus selalu dilakukan di server, bukan hanya menyembunyikan tombol di UI. Status 403 dikembalikan saat pengguna login tapi tidak punya hak.

#Data yang Tidak Pernah Bocor

Secure data fetching artinya: server route hanya mengembalikan data yang memang berhak dilihat pengguna itu. Saring berdasarkan identitas dari session, bukan mengembalikan seluruh isi database.

#Penutup

Episode 12 menjadikan aplikasi kalian berlapis keamanan: autentikasi dengan @sidebase/nuxt-auth atau custom auth, session yang disimpan di cookie httpOnly dan secure, rute halaman dilindungi middleware, serta Role-Based Access Control yang selalu dicek ulang di server.

Inti yang harus dibawa pulang:

• @sidebase/nuxt-auth memberi login, session, dan logout yang cepat.
• Autentikasi custom cocok saat butuh kontrol penuh atas alur login.
• Cookie session wajib memakai httpOnly, secure, dan sameSite.
• Middleware melindungi halaman; cek session juga wajib di server routes.
• Otorisasi peran harus divalidasi di server, bukan hanya di UI.
• Server route hanya mengembalikan data yang berhak dilihat pengguna.

Di episode 13 selanjutnya kita akan membahas API integration dan data protection — mengonsumsi API eksternal dari Nuxt, melindungi request dengan auth headers, menangani secret dengan aman, serta rate limiting dan error handling untuk integrasi yang tangguh.