Authentication di Next.js 15: NextAuth vs Clerk vs Auth0

Kalau kamu pernah bikin aplikasi web pakai Next.js dan sampai di bagian authentication, pasti tahu rasanya: bingung mau pakai apa. Ada tiga nama yang hampir selalu muncul di tiap diskusi — NextAuth (sekarang Auth.js), Clerk, dan Auth0. Ketiganya bisa dipakai di Next.js 15, tapi pengalaman pakainya? Bisa sangat berbeda.

Artikel ini bukan perbandingan kering dari dokumentasi resmi. Ini lebih kayak cerita dari lapangan — dari saya yang sudah coba ketiganya di proyek production, dari yang bikin MVP dalam semalam sampai yang skalanya melayani ribuan user per hari. Saya akan jujur soal kelebihan, kekurangan, dan kapan masing-masing paling cocok.

Kenapa Authentication Itu Lebih Rumit dari yang Kita Kira

Sebelum masuk ke perbandingan, saya mau sedikit curhat dulu.

Dulu, saya pikir authentication itu simpel: bikin form login, cek password di database, kasih cookie, selesai. Ternyata… nggak. Begitu kamu mulai mikirin soal OAuth flow, token refresh, session security, CSRF protection, multi-provider login (Google, GitHub, dll), dan apalagi di Next.js 15 yang punya App Router, Server Components, dan Server Actions — complexity-nya naik drastis.

Next.js 15 sendiri membawa beberapa perubahan signifikan yang nge-impact cara kita handle auth:

• Server Components yang bisa fetch data langsung di server tanpa client-side JS
• Server Actions yang menggantikan API routes untuk banyak use case
• Middleware yang lebih powerful untuk protect routes
• Partial Prerendering yang bikin campuran static-dynamic content makin halus

Artinya, library auth yang kamu pilih harus bisa sinkron dengan semua paradigma baru ini. Dan ini yang bikin pilihan jadi penting.

NextAuth.js (Auth.js v5): Si Open Source Legendaris

Apa itu NextAuth?

NextAuth.js — yang sekarang sedang dalam proses rebranding jadi Auth.js — adalah library authentication open source yang memang dibangun khusus untuk Next.js. Dikembangkan oleh balazsorban dan kontributor, library ini sudah sangat matang dan punya komunitas besar.

Di Next.js 15, versi yang relevan adalah Auth.js v5 (beta, tapi sudah cukup stabil untuk dipakai di production by many teams).

Setup di Next.js 15

Setup NextAuth di App Router itu kurang lebih seperti ini:

// auth.ts (root project)
import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
import Google from "next-auth/providers/google"
import Credentials from "next-auth/providers/credentials"

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    GitHub,
    Google,
    Credentials({
      credentials: {
        email: {},
        password: {},
      },
      authorize: async (credentials) => {
        // Logic validasi ke database kamu
        const user = await validateUser(credentials.email, credentials.password)
        if (!user) return null
        return user
      },
    }),
  ],
  callbacks: {
    authorized: async ({ auth }) => {
      return !!auth
    },
  },
})

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth"
export const { GET, POST } = handlers

// middleware.ts
export { auth as middleware } from "@/auth"

export const config = {
  matcher: ["/dashboard/:path*", "/settings/:path*"],
}

Untuk protect halaman di Server Component:

// app/dashboard/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function DashboardPage() {
  const session = await auth()

  if (!session) {
    redirect("/api/auth/signin")
  }

  return (
    <div>
      <h1>Selamat datang, {session.user?.name}</h1>
    </div>
  )
}

Kelebihan NextAuth

1. Gratis dan open source — Nggak ada biaya, nggak ada vendor lock-in. Kamu punya full kontrol atas data.
2. Database adapter fleksibel — Bisa pakai Prisma, Drizzle, MongoDB, atau bahkan tanpa database (JWT-only mode).
3. Banyak provider — Google, GitHub, Discord, Apple, Credentials, email magic link — hampir semua ada out of the box.
4. Comunity besar — Kalau stuck, kemungkinan besar ada orang lain yang sudah solve masalah yang sama.

Kekurangan NextAuth

1. Dokumentasi v5 masih campur aduk — Kamu akan sering nemu contoh yang pakai API v4, dan itu bikin bingung.
2. Manual effort lebih banyak — Kamu harus bikin UI sendiri, handle edge case sendiri, dan setup database sendiri.
3. Debugging susah — Error message-nya kadang kurang jelas, terutama kalau ada masalah di callback atau adapter.
4. Maintenance pace — Auth.js v5 sudah di fase beta cukup lama. Ada kekhawatiran soal kapan stable release.

Clerk: The “Just Works” Experience

Apa itu Clerk?

Clerk adalah layanan authentication as-a-service yang menjanjikan pengalaman paling mulus untuk developer. Bayangkan: kamu nggak perlu bikin halaman login, nggak perlu handle session, nggak perlu pikirin database user. Semua di-manage oleh Clerk.

Setup di Next.js 15

npm install @clerk/nextjs

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"

const isPublicRoute = createRouteMatcher(["/", "/sign-in(.*)", "/sign-up(.*)"])

export default clerkMiddleware(async (auth, req) => {
  if (!isPublicRoute(req)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    "/(api|trpc)(.*)",
  ],
}

// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="id">
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </ClerkProvider>
  )
}

// app/dashboard/page.tsx
import { currentUser } from "@clerk/nextjs/server"

export default async function DashboardPage() {
  const user = await currentUser()

  return (
    <div>
      <h1>Halo, {user?.firstName}</h1>
      <p>Email: {user?.emailAddresses[0].emailAddress}</p>
    </div>
  )
}

Lihat bedanya? Nggak ada logic “redirect if not authenticated” — <SignedOut> dan <SignedIn> handle itu semua secara deklaratif. Untuk Server Components, currentUser() langsung kasih data user tanpa perlu cek session manual.

Kelebihan Clerk

1. Developer experience terbaik — Serius. Dari install ke working auth dalam 5 menit. UI pre-built langsung cantik dan customizable.
2. Zero database setup — Clerk manage user database-nya sendiri. Kamu bisa focus ke bisnis logic.
3. Fitur lengkap out of the box — Multi-factor authentication, organization management, user impersonation, webhooks, active device management — semua built-in.
4. Perfect Next.js 15 integration — Clerk sangat cepat update untuk support fitur terbaru Next.js. Mereka bahkan punya helper khusus untuk Server Actions dan Server Components.

Kekurangan Clerk

1. Harga bisa mahal di scale — Free tier-nya generous (10,000 MAU), tapi begitu lewat, harganya $0.02 per MAU. Untuk 100K user, itu $2,000/bulan.
2. Vendor lock-in — Data user ada di server Clerk. Migrasi ke solusi lain bisa sakit kepala.
3. Kurang fleksibel untuk custom flow — Kalau kamu butuh authentication flow yang sangat niche atau non-standard, Clerk bisa terasa kaku.
4. Dependency pada layanan eksternal — Kalau Clerk down, auth di aplikasi kamu juga down (meskipun mereka punya SLA tinggi).

Auth0: Enterprise-Grade, Enterprise-Price

Apa itu Auth0?

Auth0 (sekarang bagian dari Okta) adalah veteran di dunia authentication-as-a-service. Sudah dipakai oleh perusahaan besar dan punya fitur paling comprehensive di antara ketiga opsi ini. Untuk Next.js, mereka punya SDK khusus: @auth0/nextjs-auth0.

Setup di Next.js 15

npm install @auth0/nextjs-auth0

// app/api/auth/[auth0]/route.ts
import { handleAuth, handleLogin } from "@auth0/nextjs-auth0"

export const GET = handleAuth({
  login: handleLogin({
    authorizationParams: {
      audience: "https://api.example.com", // kalau kamu punya API yang dilindungi
    },
  }),
})

// app/layout.tsx
import { UserProvider } from "@auth0/nextjs-auth0/client"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <UserProvider>
      <html lang="id">
        <body>{children}</body>
      </html>
    </UserProvider>
  )
}

// app/dashboard/page.tsx
import { getSession } from "@auth0/nextjs-auth0"
import { redirect } from "next/navigation"

export default async function DashboardPage() {
  const session = await getSession()

  if (!session) {
    redirect("/api/auth/login")
  }

  return (
    <div>
      <h1>Selamat datang, {session.user.name}</h1>
      <img src={session.user.picture} alt="Avatar" />
    </div>
  )
}

Kelebihan Auth0

1. Fitur enterprise-grade — Role-based access control (RBAC), fine-grained authorization, anomaly detection, threat intelligence. Ini level yang NextAuth dan Clerk belum bisa match.
2. Multi-platform — Bukan cuma web. Auth0 bisa dipakai untuk mobile apps (React Native), APIs, bahkan IoT devices. Satu identity provider untuk semua platform.
3. Compliance dan security certifications — SOC2, HIPAA, GDPR compliance sudah built-in. Kalau kamu bikin aplikasi di regulated industry, ini penting banget.
4. Extensibility — Rules, Hooks, Actions — kamu bisa customize authentication flow di sisi server Auth0 tanpa deploy ulang aplikasi.

Kekurangan Auth0

1. Harga paling mahal — Free tier cuma 7,500 active users. Setelah itu, mulai dari $35/bulan untuk 500 users (bukan MAU, tapi active users). Bisa sangat cepat mahal.
2. Dashboard dan config kompleks — Ada banyak sekali setting dan konfigurasi. Untuk developer yang baru mulai, ini overwhelming.
3. Next.js SDK kadang ketinggalan — Auth0 punya banyak platform yang harus di-support, jadi kadang SDK Next.js-nya lambat adaptasi fitur baru Next.js.
4. Over-engineered untuk proyek kecil — Kalau kamu cuma bikin side project atau MVP, Auth0 itu kayak pakai tank untuk pergi ke warung.

Perbandingan Head-to-Head: Mana yang Paling Cocok?

Oke, sekarang bagian yang paling ditunggu. Saya bikin rangkuman berdasarkan pengalaman pribadi.

Kemudahan Setup

Clerk menang telak. Dari nol ke working auth paling cepat pakai Clerk. NextAuth butuh paling banyak effort manual, tapi kalau kamu sudah familiar, sebetulnya nggak terlalu lama juga. Auth0 ada di tengah-tengah — dashboard-nya banyak step, tapi SDK-nya cukup clean.

Biaya

NextAuth menang mutlak karena gratis. Tapi “gratis” di sini artinya kamu yang handle semuanya, termasuk infrastruktur database untuk menyimpan user dan session. Clerk dan Auth0 punya free tier yang cukup untuk development dan MVP, tapi begitu scale, biaya perlu diperhitungkan matang.

Flexibility

NextAuth paling fleksibel. Mau pakai database apa saja, mau custom flow seperti apa saja, semua bisa. Auth0 juga sangat fleksibel lewat Actions dan Rules, tapi di sisi server mereka. Clerk paling kaku — kalau flow-nya nggak didukung, kamu nggak banyak opsi.

Next.js 15 Fitur Support

Clerk paling cepat adaptasi. Mereka punya dedikasi besar untuk Next.js ecosystem dan sering release update bersamaan dengan Next.js release. NextAuth v5 juga sudah support App Router dan Server Components, tapi masih beta. Auth0 SDK sudah support, tapi kadang ketinggalan satu-dua fitur.

Enterprise Needs

Auth0 menang di sini. RBAC, compliance certifications, anomaly detection, multi-platform support — Auth0 dirancang untuk use case enterprise. Clerk juga sudah mulai masuk ke area ini dengan fitur Organizations, tapi belum se-komprehensif Auth0.

Rekomendasi Jujur Berdasarkan Use Case

Setelah pakai ketiganya, ini rekomendasi saya:

Tips dari Lapangan

Sedikit tips yang saya pelajari dari beberapa proyek:

1. Jangan underestimate complexity auth. Bahkan kalau pakai Clerk yang “gampang”, kamu tetap perlu mikirin soal authorization (siapa boleh akses apa), bukan cuma authentication (siapa yang login).

2. Test session behavior di production-like environment. Saya pernah kena bug di mana session hilang di production tapi fine di localhost — ternyata karena HTTPS-only cookies.

3. Pikirin migrasi path dari awal. Kalau pakai Clerk dan suatu saat mau pindah ke NextAuth, pastikan kamu simpan user data di database kamu juga, jangan cuma di Clerk.

4. Perhatikan middleware. Di Next.js 15, middleware jalan di Edge Runtime. Pastikan library auth kamu compatible dengan Edge — ketiganya sudah support, tapi kadang ada gotcha dengan dependency tertentu.

Kalau Ada Pertanyaan atau Butuh Bantuan Setup?

Kalau kamu lagi di tahap milih dan butuh diskusi lebih lanjut soal authentication strategy untuk proyek spesifik kamu, atau butuh bantuan implementasi langsung — jangan ragu untuk reach out. Saya senang bisa bantu diskusi arsitektur atau troubleshooting.

Hubungi saya di: [email protected]

FAQ

Apakah NextAuth v5 sudah aman dipakai di production?

Secara fungsional, banyak tim sudah pakai NextAuth v5 di production dan berjalan baik. Tapi perlu diingat, statusnya masih “beta” secara resmi. Kalau kamu pilih NextAuth v5, siapkan waktu untuk troubleshooting dan update berkala. Kalau butuh sesuatu yang lebih “battle-tested” dan sudah stable, NextAuth v4 masih jadi opsi yang valid meskipun pakai API yang berbeda.

Apakah data user di Clerk dan Auth0 aman?

Ya, keduanya menggunakan enkripsi standar industri dan punya compliance certifications (SOC2, GDPR, dll). Tapi tetap tanggung jawab kamu untuk mengamankan bagian aplikasi yang kamu kontrol — misalnya, jangan simpan token sembarangan dan selalu validasi session di server-side, bukan cuma di client.

Bisakah pakai lebih dari satu solusi auth sekaligus?

Secara teknis bisa, tapi sangat tidak disarankan. Menggabungkan NextAuth dan Clerk, misalnya, akan bikin codebase jadi sangat kompleks dan rawan bug keamanan. Pilih satu yang paling sesuai kebutuhan kamu dan commit ke situ. Kalau butuh migrasi, lakukan secara bertahap dan pastikan kamu punya strategy untuk map user data dari sistem lama ke sistem baru.

Bagaimana cara handle auth di Server Actions Next.js 15?

Untuk NextAuth, kamu bisa langsung panggil auth() di dalam Server Action. Untuk Clerk, gunakan auth() dari @clerk/nextjs/server. Untuk Auth0, gunakan getSession() dari @auth0/nextjs-auth0. Yang penting: selalu validasi session di server-side — jangan pernah percaya client-side state untuk keputusan keamanan.

Artikel ini ditulis berdasarkan pengalaman nyata menggunakan NextAuth, Clerk, dan Auth0 di berbagai proyek. Preferensi bisa berbeda tergantung konteks — dan itu normal. Yang penting, pilih yang paling sesuai dengan kebutuhan dan kapasitas tim kamu.