Cara Membuat Authentication Login di Nuxt 3 dengan Cookie httpOnly (Production Ready)

Cara Membuat Authentication Login di Nuxt 3 dengan Cookie httpOnly (Production Ready) - Authentication adalah bagian penting dalam aplikasi modern. Jika salah implementasi, token bisa bocor dan aplikasi menjadi tidak aman.

Di artikel ini kita akan membuat sistem login menggunakan Nuxt 3 dengan cookie httpOnly yang jauh lebih aman dibanding menyimpan token di localStorage.

---

Kenapa Tidak Gunakan localStorage?

localStorage.setItem("token", token)

Menyimpan token di localStorage rentan terhadap serangan XSS karena bisa diakses oleh JavaScript.

Solusi yang lebih aman adalah menggunakan cookie httpOnly yang tidak bisa diakses oleh JavaScript.

---

Step 1 - Membuat API Login (Server Route)

Buat file berikut:

server/api/login.post.js

Isi dengan kode berikut:

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const { email, password } = body

  if (email === "admin@test.com" && password === "123456") {

    const token = "dummy-jwt-token"

    setCookie(event, "auth_token", token, {
      httpOnly: true,
      secure: true,
      sameSite: "strict",
      maxAge: 60 * 60 * 24
    })

    return { message: "Login success" }
  }

  throw createError({
    statusCode: 401,
    statusMessage: "Invalid credentials"
  })
})

---

Step 2 - Membuat Halaman Login

Buat file:

pages/login.vue

<script setup>
import { ref } from 'vue'

const email = ref("")
const password = ref("")
const error = ref(null)

const login = async () => {
  try {
    await $fetch("/api/login", {
      method: "POST",
      body: { email: email.value, password: password.value }
    })

    navigateTo("/dashboard")
  } catch (err) {
    error.value = "Login gagal"
  }
}
</script>

<template>
  <div>
    <h1>Login</h1>
    <input v-model="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />
    <button @click="login">Login</button>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

---

Step 3 - Middleware Proteksi Halaman

Buat file berikut:

middleware/auth.js

export default defineNuxtRouteMiddleware((to, from) => {
  const token = useCookie("auth_token")

  if (!token.value) {
    return navigateTo("/login")
  }
})

Lalu tambahkan middleware di halaman dashboard:

definePageMeta({
  middleware: "auth"
})

---

Kenapa Metode Ini Lebih Aman?

• Token tidak bisa diakses JavaScript
• Lebih aman dari XSS
• Production ready
• Struktur clean & scalable

---

Best Practice Tambahan

• Gunakan JWT asli
• Gunakan HTTPS di production
• Gunakan refresh token
• Atur secure: true hanya saat production

---

Kesimpulan

Menyimpan token di localStorage sudah bukan best practice untuk aplikasi production.

Menggunakan cookie httpOnly di Nuxt 3 adalah pendekatan yang lebih aman, profesional, dan scalable.

Jika kamu membangun aplikasi serius seperti dashboard atau SaaS, gunakan pola ini sejak awal.