Next.js 15 Full-Stack Uygulama Geliştirme

Auth.js v5 Nedir?

Daha önce NextAuth.js olarak bilinen, şimdi Auth.js adıyla anılan bu kütüphane, Next.js için kimlik doğrulama çözümüdür. OAuth (Google, GitHub, Twitter), credentials (email+şifre) ve magic link gibi yöntemleri destekler.

Kurulum

npm install next-auth@beta
openssl rand -base64 32  # AUTH_SECRET için rastgele değer

# .env.local
AUTH_SECRET="openssl-ile-uretilen-deger"
AUTH_GOOGLE_ID="google-client-id"
AUTH_GOOGLE_SECRET="google-client-secret"
AUTH_GITHUB_ID="github-client-id"
AUTH_GITHUB_SECRET="github-client-secret"

Auth Yapılandırması

// auth.ts (proje kökünde)
import NextAuth from "next-auth";
import Google from "next-auth/providers/google";
import GitHub from "next-auth/providers/github";
import Credentials from "next-auth/providers/credentials";
import { prisma } from "@/lib/prisma";
import bcrypt from "bcryptjs";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google,
    GitHub,
    Credentials({
      credentials: {
        email: { label: "Email", type: "email" },
        sifre: { label: "Şifre", type: "password" },
      },
      async authorize(credentials) {
        const { email, sifre } = credentials as { email: string; sifre: string };
        const kullanici = await prisma.kullanici.findUnique({ where: { email } });

        if (!kullanici || !kullanici.sifreHash) return null;

        const eslesme = await bcrypt.compare(sifre, kullanici.sifreHash);
        return eslesme ? kullanici : null;
      },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      if (session.user && token.sub) {
        session.user.id = token.sub;
        session.user.rol = token.rol as string;
      }
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        token.rol = (user as any).rol;
      }
      return token;
    },
  },
  pages: {
    signIn: "/giris",
    error: "/giris/hata",
  },
});

Route Handler Oluşturma

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

Oturum Bilgisi Kullanma

// Server Component
import { auth } from "@/auth";

export default async function Dashboard() {
  const oturum = await auth();

  if (!oturum) {
    return <p>Giriş yapmanız gerekiyor</p>;
  }

  return <h1>Hoş geldin, {oturum.user?.name}!</h1>;
}

// Client Component
"use client";
import { useSession } from "next-auth/react";

export default function KullaniciBilgisi() {
  const { data: oturum, status } = useSession();

  if (status === "loading") return <p>Yükleniyor...</p>;
  if (!oturum) return <p>Giriş yapın</p>;

  return <p>Merhaba, {oturum.user?.name}!</p>;
}

Middleware ile Rota Koruması

// middleware.ts
import { auth } from "@/auth";

export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname.startsWith("/dashboard")) {
    return Response.redirect(new URL("/giris", req.url));
  }
});

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