Next.js App Router'da Auth.js Kurulumu
Auth.js'yi kurun, rota işleyicilerini yapılandırın ve bir GitHub OAuth sağlayıcısı ekleyin.
Next.js App Router'da Auth.js Kurulumu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Auth.js Nedir
Auth.js (eski adıyla NextAuth.js v5), Next.js için kapsamlı bir kimlik doğrulama kitaplığıdır. OAuth sağlayıcılarını, kimlik bilgilerini, oturumları ve JWT'yi kullanıma hazır olarak yönetir.
Kurulum
Auth.js beta sürümünü kurun ve config dosyasını başlatın.
npm install next-auth@beta
# Create auth.ts at project root
touch auth.tsKimlik Doğrulama Yapılandırması Oluşturma
Kimlik doğrulama yapılandırmanızı, sağlayıcılar ve geri çağrılarla birlikte projenin kök dizinindeki auth.ts içinde tanımlayın.
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [GitHub],
callbacks: {
session({ session, token }) {
session.user.id = token.sub!;
return session;
},
},
});Rota İşleyicisini Ayarlama
Auth.js işleyicilerine yönlendiren, app/api/auth/[...nextauth]/route.ts içinde tüm yolları yakalayan bir rota işleyicisi oluşturun.
// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;Ortam Değişkenleri
OAuth sağlayıcıları için gerekli ortam değişkenlerini ayarlayın. JWT imzalama için AUTH_SECRET gereklidir.
# .env.local
AUTH_SECRET=your-random-secret-here
# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
# Generate AUTH_SECRET:
# npx auth secretGiriş ve Çıkış Düğmeleri Ekleme
signIn ve signOut işlevlerini auth.ts dosyasından içe aktarın ve bunları Sunucu Bileşeni formlarında kullanın.
import { signIn, signOut } from '@/auth';
export function SignInButton() {
return (
<form action={async () => { 'use server'; await signIn('github'); }}>
<button type="submit">Sign in with GitHub</button>
</form>
);
}
export function SignOutButton() {
return (
<form action={async () => { 'use server'; await signOut(); }}>
<button type="submit">Sign out</button>
</form>
);
}Sunucu Bileşenlerinde Oturumu Okuma
Geçerli oturumu almak için herhangi bir Sunucu Bileşeninde veya rota işleyicisinde auth() işlevini auth.ts dosyasından çağırın.
import { auth } from '@/auth';
export default async function ProfilePage() {
const session = await auth();
if (!session) redirect('/login');
return <h1>Welcome, {session.user?.name}</h1>;
}Ara Katman Yazılımıyla Sayfaları Koruma
Her istekte sunucu mantığını çalıştırmadan rotaları uçta korumak için Auth.js ara katman yazılımını kullanın.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Veritabanı Oturumları
Oturumları, kullanıcıları ve hesapları JWT'ler yerine bir veritabanında kalıcı olarak saklamak için bir veritabanı bağdaştırıcısı (örneğin @auth/prisma-adapter) ekleyin.
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
export const { handlers, auth, signIn, signOut } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [GitHub],
session: { strategy: 'database' },
});Oturum Türünü Özelleştirme
Kullanıcı kimliği veya rol gibi özel alanlar eklemek için Auth.js oturum türlerini genişletin.
// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';
declare module 'next-auth' {
interface Session {
user: { id: string; role: string } & DefaultSession['user'];
}
}Hata Yönetimi
Auth.js, kimlik doğrulama başarısızlıklarında varsayılan olarak /error adresine yönlendirir. Hata sayfasını özelleştirmek için app/error/page.tsx oluşturun.
Hızlı Kontrol
Next.js Uygulama Yönlendiricisi'nde Auth.js GET ve POST işleyicilerini kullanıma sunmak için hangi dosyayı oluşturmalısınız?
Özet
next-auth@beta paketini kurun, sağlayıcılar ve geri çağrılarla birlikte auth.ts oluşturun, işleyicileri app/api/auth/[...nextauth]/route.ts adresinde kullanıma sunun, AUTH_SECRET ile sağlayıcı ortam değişkenlerini ayarlayın ve Sunucu Bileşenlerinde auth() ile oturumu okuyun.
Sıkça Sorulan Sorular
“Next.js App Router'da Auth.js Kurulumu” dersi ücretsiz mi?
Evet — “Next.js App Router'da Auth.js Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Next.js App Router'da Auth.js Kurulumu” dersinde ne öğreneceğim?
Auth.js'yi kurun, rota işleyicilerini yapılandırın ve bir GitHub OAuth sağlayıcısı ekleyin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Next.js App Router'da Auth.js Kurulumu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Next.js App Router'da Auth.js Kurulumu
- Oturum Yönetimi ve useSession Hook'u
- Kimlik Bilgileri Sağlayıcısı ve Özel Giriş
- Middleware Tabanlı Rota Koruması