next-dj/AUTH-QUICK-START.md

🚀 Authentication Quick Start Guide

Hızlı başlangıç için adım adım kılavuz.

⚡ 5 Dakikada Kurulum

1. Environment Variables Oluştur

# .env.local dosyası oluştur
cat > .env.local << 'EOF'
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=super-secret-change-this-in-production
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
GOOGLE_ID=
GOOGLE_SECRET=
GITHUB_ID=
GITHUB_SECRET=
EOF

2. NextAuth Secret Üret

openssl rand -base64 32

Çıktıyı .env.local dosyasındaki NEXTAUTH_SECRET değerine yapıştır.

3. Django Backend'i Başlat

# Django projenizde
cd your-django-project
python manage.py runserver

4. Next.js'i Başlat

# Bu projede
npm run dev
# veya
yarn dev

5. Test Et! 🎉

# Tarayıcıda aç:
http://localhost:3000/auth/register

📍 Hızlı Test Rotaları

URL	Açıklama
/auth/register	Yeni hesap oluştur
/auth/login	Giriş yap
/profile	Profili görüntüle
/dashboard	Dashboard

🧪 Test Senaryosu (5 Dakika)

Senaryo 1: Email/Password ile Kayıt

1. http://localhost:3000/auth/register
   - Email: test@example.com
   - Password: Test1234!
   - İsim: Test User

2. http://localhost:8025 (MailPit)
   - Aktivasyon emailini aç
   - Linke tıkla

3. http://localhost:3000/auth/login
   - Email: test@example.com
   - Password: Test1234!
   - Giriş yap

4. http://localhost:3000/profile
   - Profilini gör
   - İsim değiştir

Senaryo 2: Şifre Sıfırlama

1. http://localhost:3000/auth/password-reset
   - Email: test@example.com
   - Gönder

2. http://localhost:8025 (MailPit)
   - Reset emailini aç
   - Linke tıkla

3. Yeni şifre: NewPass123!
   - Şifreyi değiştir

4. http://localhost:3000/auth/login
   - Yeni şifre ile giriş

🔑 Social Auth Kurulumu (Opsiyonel)

Google OAuth2 (2 dakika)

1. https://console.cloud.google.com/ → Giriş yap
2. Proje seç/oluştur
3. "APIs & Services" → "Credentials"
4. "Create Credentials" → "OAuth 2.0 Client ID"
5. Web application seç
6. Authorized redirect URIs:
   http://localhost:3000/api/auth/callback/google
7. Client ID ve Secret'i .env.local'e ekle

GitHub OAuth2 (2 dakika)

1. https://github.com/settings/developers → "New OAuth App"
2. Application name: "Your App"
3. Homepage URL: http://localhost:3000
4. Callback URL: http://localhost:3000/api/auth/callback/github
5. Client ID ve Secret'i .env.local'e ekle

🎯 API Kullanımı

Kullanıcı Bilgilerini Al

const { data: session } = useSession();

const response = await fetch(
  `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/users/me/`,
  {
    headers: {
      Authorization: `Bearer ${session.accessToken}`,
    },
  }
);

const user = await response.json();

Profil Güncelle

const response = await fetch(
  `${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/users/me/`,
  {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${session.accessToken}`,
    },
    body: JSON.stringify({
      first_name: "Yeni İsim",
      last_name: "Yeni Soyisim",
    }),
  }
);

🔒 Protected Route Oluşturma

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function ProtectedPage() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/auth/login");
    }
  }, [status, router]);

  if (status === "loading") {
    return <div>Loading...</div>;
  }

  if (!session) {
    return null;
  }

  return <div>Protected Content</div>;
}

🐛 Hızlı Troubleshooting

Problem: "CORS error"

Çözüm: Django settings.py

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

Problem: "Login failed"

Kontrol:

• ✅ Django backend çalışıyor mu?
• ✅ API_BASE_URL doğru mu?
• ✅ Email aktifleştirildi mi?

Problem: "Social auth failed"

Kontrol:

• ✅ OAuth credentials doğru mu?
• ✅ Redirect URI eşleşiyor mu?
• ✅ Django'da social auth kurulu mu?

Problem: "Email gelmiyor"

Kontrol:

• ✅ MailPit çalışıyor mu? (http://localhost:8025)
• ✅ Django email ayarları yapıldı mı?

📦 Paketler

Tüm gerekli paketler zaten kurulu:

{
  "dependencies": {
    "next": "16.1.1",
    "next-auth": "^4.24.13",
    "react": "19.2.3",
    "react-dom": "19.2.3"
  }
}

📚 Daha Fazla Bilgi

• Detaylı API Docs: AUTH.md
• Kurulum Kılavuzu: SETUP.md
• Implementation: AUTH-IMPLEMENTATION.md

✅ Checklist

Kurulum tamamlandı mı?

• .env.local oluşturuldu
• NEXTAUTH_SECRET oluşturuldu
• Django backend çalışıyor
• Next.js dev server çalışıyor
• /auth/register sayfası açılıyor
• Test kullanıcı oluşturuldu
• Email aktivasyonu test edildi
• Login başarılı
• Dashboard erişildi
• Profil güncelleme çalışıyor

🎉 Başarılı!

Artık tam özellikli bir authentication sistemine sahipsiniz:

✅ Email/Password authentication ✅ Social authentication (Google, GitHub) ✅ Email activation ✅ Password reset ✅ User profile management ✅ Token refresh ✅ Protected routes

Production'a hazır! 🚀

---

Last Updated: 24 Aralık 2025