Next.js'te auth

Önceki derslerde oturumun, parolanın ve OAuth'un nasıl çalıştığını gördük. Bu derste hepsini bir Next.js Next.js App Router projesinde bir araya getiriyoruz: kütüphane seçimi, giriş formu, sunucuda oturum okuma, çıkış ve proxy.ts ile yönlendirme.

Kütüphane Seçimi

Next.js dokümantasyonu auth'u kendiniz yazabileceğinizi ama güvenlik ve sadelik için bir kütüphane kullanmanızı önerir.¹ Seçenekler iki gruba ayrılır:

Eylül 2025'te Auth.js (eski adıyla NextAuth.js) Better Auth ekibine devredildi. Ekip, Auth.js'e güvenlik yamaları vermeye devam ediyor ama yeni projelerin Better Auth ile başlamasını öneriyor.² Better Auth Temmuz 2026'da Vercel'e katıldı ve MIT lisanslı açık kaynak olarak kaldı.³ Bu derste Better Auth'u kullanıyoruz.

Kurulum

$ pnpm add better-auth better-sqlite3

.env dosyasına bir gizli anahtar ve uygulamanın adresi yazılır. Anahtar en az 32 karakter olmalı:⁴

# openssl rand -base64 32 ile üretin
BETTER_AUTH_SECRET=...
BETTER_AUTH_URL=http://localhost:3000

Sunucu tarafındaki yapılandırma tek bir dosyadır:

// lib/auth.ts
import { betterAuth } from "better-auth";
import { nextCookies } from "better-auth/next-js";
import Database from "better-sqlite3";

export const auth = betterAuth({
  database: new Database("./sqlite.db"),
  emailAndPassword: { enabled: true },
  plugins: [nextCookies()],
});

nextCookies() eklentisi, Server Action içinden yapılan giriş ve çıkışlarda cookie'nin gerçekten yazılmasını sağlar; listede en sonda olmalıdır.⁵ Tabloları oluşturmak için npx auth@latest migrate çalıştırılır.⁴ Bu komut user, session, account ve verification tablolarını açtı. Parola hash'leme, oturum kimliği üretimi ve HttpOnly cookie gibi önceki derslerde gördüğümüz işleri kütüphane üstlenir.

Ardından auth isteklerini karşılayan route handler ve tarayıcı tarafı istemci eklenir:⁵

// app/api/auth/[...all]/route.ts
import { toNextJsHandler } from "better-auth/next-js";

import { auth } from "@/lib/auth";

export const { GET, POST } = toNextJsHandler(auth);

// lib/auth-client.ts
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient();

Giriş Formu

Giriş, istemci tarafında authClient.signIn.email ile yapılır.⁶ Hata mesajı, Parola, passkey ve 2FA dersinde gördüğümüz gibi hesabın var olup olmadığını belli etmez:

// app/sign-in/page.tsx
"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

import { authClient } from "@/lib/auth-client";

export default function SignInPage() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(formData: FormData) {
    const { error } = await authClient.signIn.email({
      email: String(formData.get("email")),
      password: String(formData.get("password")),
    });

    if (error) {
      setError("E-posta ya da parola hatalı.");
      return;
    }

    router.push("/dashboard");
  }

  return (
    <form action={handleSubmit}>
      <input name="email" type="email" autoComplete="username" required />
      <input name="password" type="password" autoComplete="current-password" required />
      <button type="submit">Giriş yap</button>
      {error ? <p role="alert">{error}</p> : null}
    </form>
  );
}

Başarılı girişten sonra tarayıcıda better-auth.session_token adında HttpOnly ve SameSite=Lax bir cookie oluştu. "GitHub ile giriş" gibi OAuth sağlayıcıları ise socialProviders ayarıyla eklenir ve authClient.signIn.social({ provider: "github" }) ile çağrılır.⁴⁶

Oturumu Sunucuda Okumak

Oturumu okuyan kodu tek bir yerde toplamak, Next.js'in önerdiği Data Access Layer fikrinin özüdür. server-only paketi bu dosyanın yanlışlıkla bir Client Component'e import edilmesini build hatasıyla engeller.¹⁷

// lib/dal.ts
import "server-only";

import { headers } from "next/headers";
import { redirect } from "next/navigation";

import { auth } from "@/lib/auth";

export async function getCurrentUser() {
  const session = await auth.api.getSession({ headers: await headers() });

  if (!session) {
    redirect("/sign-in");
  }

  return { id: session.user.id, email: session.user.email };
}

Fonksiyon tüm oturum nesnesi yerine yalnızca gereken alanları döndürür. Böylece token gibi bir değerin istemciye gitme riski azalır.¹

create-next-app 16.4'ün ürettiği next.config.ts dosyasında cacheComponents: true hazır geldi. Bu modda headers() ya da cookies() okuyan bir bileşen <Suspense> içinde olmalıdır; aksi halde Next.js "runtime data during prerendering" hatası verir.⁸ Sayfanın geri kalanı statik kalır, kullanıcıya özel kısım akarak gelir:

// app/dashboard/page.tsx
import { Suspense } from "react";

import { getCurrentUser } from "@/lib/dal";

import { signOut } from "./actions";

export default function DashboardPage() {
  return (
    <main>
      <Suspense fallback={<p>Yükleniyor…</p>}>
        <Welcome />
      </Suspense>
    </main>
  );
}

async function Welcome() {
  const user = await getCurrentUser();

  return (
    <>
      <h1>Hoş geldin, {user.email}</h1>
      <form action={signOut}>
        <button type="submit">Çıkış yap</button>
      </form>
    </>
  );
}

next build çıktısında /dashboard bu yüzden Partial Prerender (◐) olarak işaretlendi.

Çıkış

Çıkış bir Server Action'dır. Oturum sunucuda silinir, cookie temizlenir:⁵

// app/dashboard/actions.ts
"use server";

import { headers } from "next/headers";
import { redirect } from "next/navigation";

import { auth } from "@/lib/auth";

export async function signOut() {
  await auth.api.signOut({ headers: await headers() });
  redirect("/sign-in");
}

Testte çıkıştan sonra veritabanındaki oturum kaydı silindi, tarayıcıda cookie kalmadı ve /dashboard'a gitmek yeniden /sign-in'e yönlendirdi.

Proxy ile Yönlendirme

Next.js 16'da middleware.ts dosyasının adı proxy.ts oldu ve varsayılan olarak Node.js runtime'ında çalışıyor.⁹ Proxy her istekten önce çalıştığı için giriş yapmamış kullanıcıyı erkenden yönlendirmek için uygundur:

// proxy.ts
import { getSessionCookie } from "better-auth/cookies";
import { type NextRequest, NextResponse } from "next/server";

export function proxy(request: NextRequest) {
  const sessionCookie = getSessionCookie(request);

  if (!sessionCookie) {
    return NextResponse.redirect(new URL("/sign-in", request.url));
  }

  return NextResponse.next();
}

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

Bu kontrol iyimserdir (optimistic): getSessionCookie yalnızca cookie'nin var olup olmadığına bakar, geçerli olup olmadığını kontrol etmez.⁵ Testte tarayıcıya elle better-auth.session_token=forged cookie'si eklendi. Proxy isteği geçirdi, ama getCurrentUser oturumu doğrulayamadığı için sayfa içerik göstermeden /sign-in'e yönlendirdi.

Proxy'nin tek savunma hattı olmaması gerektiğini gösteren gerçek bir örnek de var. Mart 2025'te açıklanan CVE-2025-29927, kendi sunucusunda çalışan Next.js uygulamalarında x-middleware-subrequest başlığıyla middleware'in tamamen atlanabildiğini gösterdi. Vercel'in olay raporu middleware'i rotaları korumanın tek yolu olarak kullanmamayı açıkça öneriyor.¹⁰ Next.js dokümantasyonu da Server Function'ların proxy matcher'ı dışında kalabileceğini, bu yüzden her Server Action'ın kendi yetki kontrolünü yapması gerektiğini yazar.⁹

Rollere göre erişim ve Server Action koruması bir sonraki dersin konusu.

Kendin Dene

• Yukarıdaki dosyalarla bir proje kurun, /dashboard'a giriş yapmadan gidin ve yönlendirmeyi görün.

• DevTools > Application > Cookies sekmesinden oturum cookie'sinin değerini değiştirin ve sayfayı yenileyin; proxy'nin geçirdiğini ama sayfanın sizi dışarı attığını görün.

• Welcome bileşenini <Suspense> dışına taşıyıp next dev çıktısındaki hatayı okuyun.

Detaylı Öğrenmek İçin

• Resmi doküman: Next.js Authentication rehberi; oturum, Data Access Layer ve yetki kontrolü.¹

• Yazı: Sebastian Markbåge, "How to Think About Security in Next.js"; Server Component ve Server Action'larda güvenlik modeli.⁷

• Video: Lee Robinson, "Next.js App Router Authentication (Sessions, Cookies, JWTs)"; oturum ve cookie'nin App Router'daki yeri.¹¹

• Resmi doküman: Better Auth Next.js entegrasyonu.⁵