Belajar Astro - Authentication & Protected Content

#Pendahuluan

Setelah membahas keamanan dasar di episode 12, kini waktunya melindungi sesuatu yang lebih spesifik: konten dan rute yang hanya boleh diakses pengguna tertentu. Episode 13 ini membahas autentikasi untuk situs Astro — mulai dari pola paling sederhana hingga manajemen session dengan cookies yang aman.

Ada satu fakta yang harus kalian terima sejak awal: situs statis murni tidak bisa melindungi konten sungguhan. Karena HTML statis bisa diunduh siapa pun yang tahu URL, perlindungan sejati hanya bisa dilakukan di server. Karena itu episode ini menekankan pola yang memakai mode server atau fungsi serverless.

Kalian akan belajar pola auth yang umum, menggunakan astro-auth atau provider eksternal, melindungi rute, dan menyimpan session secara aman.

#Authentication Patterns for Static Sites

#Kenapa URL Rahasia Tidak Cukup

Banyak situs "melindungi" konten dengan menaruhnya di URL yang sulit ditebak, seperti /preview/ab12cd. Ini bukan keamanan — tautan yang tersebar bisa membuat konten terbaca siapa saja, dan log server mencatat URL tersebut. Autentikasi sejati selalu memverifikasi identitas di server.

#Pola Dasar untuk Astro

Pola autentikasi yang umum di Astro:

login → set cookie session → cek cookie di rute → izinkan/blokir

Alurnya sederhana: pengguna login, server mengeluarkan cookie session, lalu setiap request berikutnya memeriksa cookie tersebut sebelum melayani konten.

#Client-Side Auth dengan astro-auth atau Provider Eksternal

#Menggunakan Package Komunitas

astro-auth adalah package komunitas untuk autentikasi di Astro. Untuk project baru, sebaiknya pertimbangkan integrasi yang lebih dirawat seperti Auth.js (NextAuth) port atau layanan managed. Pendekatan umumnya: redirect pengguna ke provider, terima callback, lalu set session.

Contoh pola dengan provider eksternal OAuth:

Konfigurasi provider OAuth

import { defineConfig } from "astro/config";
import { astroAuth } from "astro-auth";
 
export default defineConfig({
  integrations: [
    astroAuth({
      providers: [
        { provider: "github", clientId: import.meta.env.GITHUB_ID,
          clientSecret: import.meta.env.GITHUB_SECRET },
      ],
    }),
  ],
});

Konfigurasi astroAuth({ providers: [...] }) mendaftarkan GitHub sebagai provider. Secret GITHUB_SECRET hanya di sisi server — tidak pernah masuk bundle klien.

#Layanan Auth Managed

Alternatif yang populer adalah layanan managed seperti Clerk atau Auth0. Mereka menangani login, session, dan keamanan secara menyeluruh, lalu menyediakan SDK untuk dipakai di Astro. Keuntungannya: tim tidak perlu mengelola infrastruktur auth sendiri — trade-off berupa biaya dan ketergantungan pihak ketiga.

#Protecting Routes and Gated Content

#Melindungi Rute di Mode Server

Dengan adapter server (episode 6), kalian bisa memeriksa session di setiap request:

Cek autentikasi di rute server

---
const session = await getSession(Astro.request);
 
if (!session) {
  return Astro.redirect("/login?redirect=/member");
}
---
 
<h1>Selamat datang, {session.user.name}</h1>

Fungsi getSession(Astro.request) membaca cookie session. Jika tidak valid, Astro.redirect mengarahkan pengguna ke halaman login. Kode ini hanya berjalan di server, sehingga pengguna tidak bisa mem-bypass dengan membuka file HTML.

#Gating Konten di Halaman

Untuk konten berbayar atau member, tampilkan potongan pertama untuk semua orang dan konten penuh hanya untuk yang login. Data member diambil dari database di server, bukan di-render statis ke HTML publik.

#Session Management dan Secure Cookies

#Menyimpan Session dengan Aman

Cookie session harus ditandai HttpOnly agar tidak bisa dibaca JavaScript, Secure agar hanya lewat HTTPS, dan SameSite untuk mencegah serangan CSRF:

Menetapkan cookie session

const cookie = new AstroCookie("session", token, {
  httpOnly: true,
  secure: true,
  sameSite: "strict",
  path: "/",
});

httpOnly: true mencegah JavaScript klien membaca token, dan sameSite: "strict" membatasi cookie hanya dikirim pada request yang sama situs. Keduanya adalah perlindungan dasar terhadap pencurian session.

#Menyimpan Token di Server, Bukan Klien

Jangan pernah menyimpan token auth di localStorage situs statis — token tersebut bisa dibaca skrip XSS. Simpan session di cookie HttpOnly atau kelola sepenuhnya di server. Prinsip yang sama berlaku untuk refresh token: tempatkan di sisi server.

#Pilih Pola yang Sesuai Kebutuhan

#Dari Sederhana ke Kompleks

Mulailah dari yang paling sederhana yang memenuhi kebutuhan: cookie rahasia untuk preview pribadi, layanan auth managed untuk aplikasi produksi, atau OAuth penuh untuk komunitas. Tambahkan kompleksitas hanya ketika kebutuhan benar-benar ada.

#Kombinasi dengan Observability

Setelah auth terpasang, pantau login yang gagal dan pola mencurigakan lewat log — topik observability akan dibahas lengkap di episode 22. Keamanan dan observability bekerja beriringan.

#Penutup

Episode 13 mengajarkan autentikasi untuk situs Astro: memahami kenapa URL rahasia bukan keamanan, memakai astro-auth atau provider eksternal, melindungi rute di mode server, dan mengelola session dengan secure cookies.

Inti yang harus dibawa pulang:

• Situs statis murni tidak bisa melindungi konten dengan benar.
• astro-auth dan layanan managed menyediakan alur login siap pakai.
• Periksa session di rute server dengan getSession(Astro.request).
• Redirect pengguna yang belum login dengan Astro.redirect.
• Cookie session wajib HttpOnly, Secure, dan SameSite.
• Jangan simpan token di localStorage situs statis.

Di episode 14 selanjutnya kita akan membahas caching dan request performance: strategi cache untuk konten statis dan SSR, integrasi CDN dan cache invalidation, prefetching dan resource hints, serta optimasi payload jaringan dan kecepatan halaman. Konten kalian akan sampai ke pengguna dengan cara tercepat.