{ "title": "NextAuth / Auth.js ile Güvenli Kimlik Doğrulama Rehberi: Modern Web Standartları", "slug": "nextauth-auth-js-guvenli-kimlik-dogrulama-rehberi", "summary": "Next.js App Router uyumlu Auth.js (NextAuth v5) kurulum rehberi. OAuth entegrasyonu, middleware güvenliği, server/client session yönetimi ve ajans standartlarında pratik uygulamalar.", "content": "

Modern Web Geliştirmede Kimlik Doğrulama Trendleri

Modern web projelerinde auth katmanı güvenliği, hız ve sıfır bakım maliyeti gerektirir. Dijital ajans standartlarında üretilen kurumsal Next.js projelerinde Auth.js (NextAuth v5), App Router ve Edge mimarisiyle tam uyumlu standart çözümdür.

Adım 1: Auth.js v5 Kurulumu

Projeye v5 paketini ekleyin:

npm install next-auth@beta

Adım 2: Ortam Değişkenlerini Tanımlama

Kök dizinde .env.local oluşturun. AUTH_SECRET ve OAuth anahtarlarını ekleyin:

AUTH_SECRET=\"openssl rand -base64 32 ile uretilen secret\"
AUTH_GITHUB_ID=\"github_client_id\"
AUTH_GITHUB_SECRET=\"github_client_secret\"

Adım 3: Temel Yapılandırma (auth.ts)

Kök dizinde veya src/ altında auth.ts dosyasını tanımlayın:

import NextAuth from \"next-auth\";
import GitHub from \"next-auth/providers/github\";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
  pages: {
    signIn: \"/login\",
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith(\"/dashboard\");
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false;
      }
      return true;
    },
  },
});

Adım 4: Route Handler Tanımlama

API endpoint rotasını açın: app/api/auth/[...nextauth]/route.ts

import { handlers } from \"@/auth\";
export const { GET, POST } = handlers;

Adım 5: Middleware ile Rotaları Koruma

Uygulama genelinde yetkisiz erişimleri Edge seviyesinde kesmek için kök dizine middleware.ts ekleyin:

export { auth as middleware } from \"@/auth\";

export const config = {
  matcher: [\"/((?!api|_next/static|_next/image|favicon.ico).*)\"],
};

Adım 6: Server ve Client Tarafında Session Erişimi

Server Component:

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

export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user) return <p>Yetkisiz erisim</p>;

  return <h1>Hos geldin, {session.user.name}</h1>;
}

Server Action ile Giriş / Çıkış:

import { signIn, signOut } from \"@/auth\";

export function SignInButton() {
  return (
    <form action={async () => {
      \"use server\";
      await signIn(\"github\");
    }}>
      <button type=\"submit\">GitHub ile Giris Yap</button>
    </form>
  );
}

Dijital Ajanslar İçin Güvenlik ve Performans İpuçları

JWT > Database Sessions: Edge uyumluluğu ve düşük gecikme için varsayılan JWT stratejisini koruyun.
CSRF Güvenliği: Server Actions kullanımı CSRF saldırılarına karşı doğal koruma sağlar. Harici form tetikleyicilerinde manuel fetch yerine daima form action kullanın.
Role-Based Access Control (RBAC): Token içine jwt callback ile role parametresi ekleyin, middleware içinde rol kontrolü yapın.

", "schema_type": "HowTo", "suggested_tags": [ "nextauth", "authjs", "nextjs", "rehber", "modern web", "dijital ajans", "guvenlik", "jwt" ] }