Belajar Gatsby - Authentication & Protected Content

#Pendahuluan

Beberapa konten memang harus dibatasi: dashboard pengguna, area anggota, atau draft. Karena Gatsby statis, proteksi dilakukan di sisi client dengan pola tertentu — dan kita perlu jujur tentang batas keamanannya.

Episode 13 membahas pola client-side auth, integrasi Netlify Identity dan Firebase Auth, proteksi route, serta penyimpanan token dan rendering konten yang aman.

#Pola Client-Side Auth untuk Gatsby

#Memahami Batasnya

Semua JavaScript dan HTML situs sudah dikirim ke browser saat halaman dimuat. Artinya, melindungi halaman statis berarti menahan konten dari render sampai pengguna terbukti login — bukan menyembunyikan file dari internet. Untuk konten yang benar-benar rahasia, kombinasikan dengan serverless function di sisi server.

#Arsitektur Umum

Pola yang dipakai hampir semua situs Gatsby: wrapRootElement menyediakan auth context di seluruh aplikasi, lalu komponen pelindung mengecek status login sebelum menampilkan konten.

#Integrasi Netlify Identity

#Setup Plugin

Netlify Identity menyediakan registrasi, login, dan token JWT tanpa server. Install dua paket:

Install plugin Netlify Identity

npm install gatsby-plugin-netlify-identity

Konfigurasikan di gatsby-config.js dengan URL situs kalian:

Konfigurasi Netlify Identity

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-netlify-identity",
      options: {
        url: "https://situs-kalian.netlify.app",
      },
    },
  ],
}

#Membungkus Aplikasi dengan Provider

Provider auth harus membungkus seluruh aplikasi lewat gatsby-browser.js:

wrapRootElement di gatsby-browser

import { NetlifyIdentityProvider } from "react-netlify-identity"
 
export const wrapRootElement = ({ element }) => (
  <NetlifyIdentityProvider url="https://situs-kalian.netlify.app">
    {element}
  </NetlifyIdentityProvider>
)

wrapRootElement dijalankan Gatsby untuk membungkus semua halaman. Dengan provider aktif, hook useIdentityContext bisa dipakai di komponen mana pun.

#Proteksi Routes dan Konten Gated

#Client-Only Paths

Halaman area anggota sebaiknya ditangani sebagai client-only route. Install plugin pendukung:

Install gatsby-plugin-create-client-paths

npm install gatsby-plugin-create-client-paths

Daftarkan di gatsby-config.js dengan pola URL:

Client paths untuk /app

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-create-client-paths",
      options: { prefixes: ["/app/*"] },
    },
  ],
}

Prefix /app/* membuat semua halaman di bawahnya ditangani sepenuhnya di client, cocok untuk dashboard pribadi.

#Komponen Pelindung Route

Komponen pembungkus mengecek status login sebelum merender konten:

Komponen pelindung route

import { navigate } from "gatsby"
import { useIdentityContext } from "react-netlify-identity"
 
const ProtectedRoute = ({ children }) => {
  const { isLoggedIn } = useIdentityContext()
 
  if (!isLoggedIn) {
    navigate("/login")
    return null
  }
 
  return children
}

Jika isLoggedIn bernilai false, pengguna diarahkan ke halaman login dan konten tidak dirender. Pola ini sederhana namun efektif untuk gating pengalaman pengguna.

#Penyimpanan Token dan Rendering Aman

#Di Mana Token Disimpan

Plugin Identity menyimpan token JWT dengan aman di localStorage dan mengelola refresh-nya. Untuk integrasi Auth0, @auth0/auth0-react menangani penyimpanan dengan pola yang sama. Prinsipnya: biarkan library yang mengelola token, jangan menulis penyimpanan token sendiri yang berisiko.

#Rendering Aman

Konten rahasia sebaiknya tidak pernah dirender ke HTML statis. Karena client-only paths dan autentikasi berjalan setelah mount, konten hanya muncul di DOM setelah login — tapi ini tetap bisa dibaca oleh pengguna yang mengerti DevTools. Untuk tingkat kerahasiaan tinggi, tarik data dari serverless function yang memvalidasi token JWT di sisi server sebelum mengembalikan data.

#Alternatif: Auth0 dan Firebase Auth

#Auth0

Auth0 menyediakan SDK @auth0/auth0-react. Polanya sama: bungkus aplikasi dengan Auth0Provider, lalu pakai useAuth0 untuk status login. Cocok untuk organisasi yang butuh fitur SSO dan manajemen pengguna enterprise.

#Firebase Auth

Firebase Authentication mendukung email, Google, dan banyak provider lain. Dengan Firebase, selain autentikasi kalian juga bisa mengelola pengguna secara gratis di skala besar. Pilih sesuai ekosistem yang sudah kalian pakai.

#Penutup

Episode 13 membuka autentikasi di Gatsby: pola client-side auth, integrasi Netlify Identity, proteksi route dengan client-only paths, serta penyimpanan token dan rendering yang aman.

Inti yang harus dibawa pulang:

Proteksi halaman statis adalah gating di client, bukan menyembunyikan file.
wrapRootElement membungkus aplikasi dengan auth provider.
Netlify Identity memberi auth tanpa server via JWT.
Client-only paths dengan prefix /app/* untuk halaman pribadi.
Biarkan library yang mengelola penyimpanan token.
Data sangat rahasia hanya diambil dari serverless function dengan validasi token.

Di episode 14 selanjutnya kita akan membahas API integration dan caching — fetching API saat build time dan runtime, strategi caching untuk situs statis, incremental builds, serta pengurangan waktu build dengan selective sourcing.