first commit
This commit is contained in:
Beyhan Oğur
290
SETUP.md
Normal file
290
SETUP.md
Normal file
@@ -0,0 +1,290 @@
|
||||
# Authentication Kurulum Kılavuzu
|
||||
|
||||
Bu Next.js projesi Django REST API ile entegre çalışan tam özellikli bir authentication sistemi içerir.
|
||||
|
||||
## 📋 Özellikler
|
||||
|
||||
✅ Email/Password ile kayıt ve giriş
|
||||
✅ Email aktivasyonu
|
||||
✅ Social Auth (Google, GitHub)
|
||||
✅ Token refresh (JWT)
|
||||
✅ Şifre sıfırlama
|
||||
✅ Kullanıcı profili
|
||||
✅ Session yönetimi
|
||||
|
||||
## 🚀 Kurulum
|
||||
|
||||
### 1. Environment Variables
|
||||
|
||||
`.env.local` dosyası oluşturun (`.env.example` dosyasını kopyalayın):
|
||||
|
||||
```bash
|
||||
cp .env.example .env.local
|
||||
```
|
||||
|
||||
`.env.local` dosyasını düzenleyin:
|
||||
|
||||
```env
|
||||
# NextAuth Configuration
|
||||
NEXTAUTH_URL=http://localhost:3000
|
||||
NEXTAUTH_SECRET=super-secret-key-change-this
|
||||
|
||||
# Django REST API
|
||||
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/api/v1
|
||||
|
||||
# Social Auth (İsteğe bağlı)
|
||||
GOOGLE_ID=your-google-client-id
|
||||
GOOGLE_SECRET=your-google-client-secret
|
||||
GITHUB_ID=your-github-client-id
|
||||
GITHUB_SECRET=your-github-client-secret
|
||||
```
|
||||
|
||||
### 2. NextAuth Secret Üretme
|
||||
|
||||
```bash
|
||||
openssl rand -base64 32
|
||||
```
|
||||
|
||||
Bu komutu çalıştırın ve çıkan değeri `NEXTAUTH_SECRET` olarak kullanın.
|
||||
|
||||
### 3. Django Backend
|
||||
|
||||
Django backend'inizin çalıştığından emin olun:
|
||||
|
||||
```bash
|
||||
# Django projenizde
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
Backend `http://localhost:8000` adresinde çalışıyor olmalı.
|
||||
|
||||
## 📱 Sayfalar ve Rotalar
|
||||
|
||||
### Authentication Sayfaları
|
||||
|
||||
| Sayfa | Route | Açıklama |
|
||||
|-------|-------|----------|
|
||||
| Login | `/auth/login` | Giriş sayfası (Email/Password + Social) |
|
||||
| Register | `/auth/register` | Kayıt sayfası |
|
||||
| Activate | `/auth/activate/[uid]/[token]` | Email aktivasyon sayfası |
|
||||
| Resend Activation | `/auth/resend-activation` | Aktivasyon emaili tekrar gönderme |
|
||||
| Password Reset | `/auth/password-reset` | Şifre sıfırlama talebi |
|
||||
| Reset Confirm | `/auth/password-reset/confirm/[uid]/[token]` | Şifre sıfırlama onayı |
|
||||
| Error | `/auth/error` | Auth hata sayfası |
|
||||
|
||||
### Korumalı Sayfalar
|
||||
|
||||
| Sayfa | Route | Açıklama |
|
||||
|-------|-------|----------|
|
||||
| Profile | `/profile` | Kullanıcı profili |
|
||||
| Dashboard | `/dashboard` | Dashboard (mevcut) |
|
||||
|
||||
## 🔐 Social Authentication Kurulumu
|
||||
|
||||
### Google OAuth2
|
||||
|
||||
1. [Google Cloud Console](https://console.cloud.google.com/) adresine gidin
|
||||
2. Yeni proje oluşturun veya mevcut projeyi seçin
|
||||
3. "APIs & Services" > "Credentials" sayfasına gidin
|
||||
4. "Create Credentials" > "OAuth 2.0 Client ID" seçin
|
||||
5. Application type: "Web application"
|
||||
6. Authorized redirect URIs:
|
||||
- `http://localhost:3000/api/auth/callback/google`
|
||||
- `https://yourdomain.com/api/auth/callback/google` (production)
|
||||
7. Client ID ve Client Secret'i kopyalayıp `.env.local` dosyasına ekleyin
|
||||
|
||||
### GitHub OAuth2
|
||||
|
||||
1. [GitHub Developer Settings](https://github.com/settings/developers) adresine gidin
|
||||
2. "New OAuth App" butonuna tıklayın
|
||||
3. Form bilgileri:
|
||||
- Application name: "Your App Name"
|
||||
- Homepage URL: `http://localhost:3000`
|
||||
- Authorization callback URL: `http://localhost:3000/api/auth/callback/github`
|
||||
4. Client ID ve Client Secret'i `.env.local` dosyasına ekleyin
|
||||
|
||||
## 🔄 Authentication Flow
|
||||
|
||||
### 1. Kayıt (Register)
|
||||
|
||||
```
|
||||
User fills form → POST /auth/users/ → Email sent → User clicks link →
|
||||
Account activated → User can login
|
||||
```
|
||||
|
||||
### 2. Login (Email/Password)
|
||||
|
||||
```
|
||||
User enters credentials → POST /auth/jwt/create/ → Tokens received →
|
||||
Session created → User authenticated
|
||||
```
|
||||
|
||||
### 3. Social Login
|
||||
|
||||
```
|
||||
User clicks Google/GitHub → OAuth flow → Access token received →
|
||||
POST /auth/social/{provider}/ → Tokens received → Session created
|
||||
```
|
||||
|
||||
### 4. Token Refresh
|
||||
|
||||
```
|
||||
Access token expires → Auto refresh with refresh token →
|
||||
New tokens received → Session updated
|
||||
```
|
||||
|
||||
## 🛡️ Middleware ve Koruma
|
||||
|
||||
### Session Kontrolü
|
||||
|
||||
```tsx
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
export default function ProtectedPage() {
|
||||
const { data: session, status } = useSession();
|
||||
|
||||
if (status === "loading") {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
redirect("/auth/login");
|
||||
}
|
||||
|
||||
return <div>Protected content</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### API İsteği Örnekleri
|
||||
|
||||
```tsx
|
||||
// Get user profile
|
||||
const response = await fetch(`${API_BASE_URL}/auth/users/me/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${session.accessToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
// Update user profile
|
||||
const response = await fetch(`${API_BASE_URL}/auth/users/me/`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${session.accessToken}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
first_name: "Yeni Ad",
|
||||
last_name: "Yeni Soyad",
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
## 📧 Email Testleri (Development)
|
||||
|
||||
Django backend'inizde MailPit veya benzeri bir email test aracı kullanıyorsanız:
|
||||
|
||||
```
|
||||
MailPit: http://localhost:8025
|
||||
```
|
||||
|
||||
Gönderilen aktivasyon ve şifre sıfırlama emaillerini burada görebilirsiniz.
|
||||
|
||||
## 🧪 Test Senaryoları
|
||||
|
||||
### 1. Email/Password Kayıt
|
||||
|
||||
```bash
|
||||
1. /auth/register sayfasına gidin
|
||||
2. Form bilgilerini doldurun
|
||||
3. "Kayıt Ol" butonuna tıklayın
|
||||
4. Email kutunuzu kontrol edin (MailPit: http://localhost:8025)
|
||||
5. Aktivasyon linkine tıklayın
|
||||
6. Hesap aktifleştirilir
|
||||
7. /auth/login sayfasından giriş yapın
|
||||
```
|
||||
|
||||
### 2. Social Login
|
||||
|
||||
```bash
|
||||
1. /auth/login sayfasına gidin
|
||||
2. "Google ile Giriş Yap" veya "GitHub ile Giriş Yap" butonuna tıklayın
|
||||
3. OAuth akışını tamamlayın
|
||||
4. Otomatik olarak dashboard'a yönlendirilirsiniz
|
||||
```
|
||||
|
||||
### 3. Şifre Sıfırlama
|
||||
|
||||
```bash
|
||||
1. /auth/password-reset sayfasına gidin
|
||||
2. Email adresinizi girin
|
||||
3. Email kutunuzu kontrol edin
|
||||
4. Şifre sıfırlama linkine tıklayın
|
||||
5. Yeni şifrenizi girin
|
||||
6. Yeni şifre ile giriş yapın
|
||||
```
|
||||
|
||||
## 🐛 Hata Ayıklama
|
||||
|
||||
### "Authentication failed" hatası
|
||||
|
||||
- Django backend'in çalıştığından emin olun
|
||||
- API_BASE_URL değerini kontrol edin
|
||||
- Browser console'da hata mesajlarını kontrol edin
|
||||
|
||||
### Social auth çalışmıyor
|
||||
|
||||
- Google/GitHub OAuth credentials'ları doğru mu?
|
||||
- Redirect URI'lar doğru ayarlanmış mı?
|
||||
- Django backend'de social auth ayarları yapılmış mı?
|
||||
|
||||
### Token expired hatası
|
||||
|
||||
- Token refresh otomatik çalışmalı
|
||||
- Refresh token süresi dolmuşsa yeniden login gerekli
|
||||
- Session süresi: 7 gün (refresh token)
|
||||
|
||||
## 📝 TypeScript Types
|
||||
|
||||
```typescript
|
||||
// next-auth.d.ts (mevcut)
|
||||
interface User {
|
||||
accessToken?: string;
|
||||
refreshToken?: string;
|
||||
expires?: number;
|
||||
accessTokenExpiry?: number;
|
||||
}
|
||||
|
||||
interface Session {
|
||||
accessToken?: string;
|
||||
refreshToken?: string;
|
||||
expires?: number;
|
||||
error?: string;
|
||||
}
|
||||
```
|
||||
|
||||
## 🔗 Faydalı Linkler
|
||||
|
||||
- [NextAuth.js Docs](https://next-auth.js.org/)
|
||||
- [Django REST Framework](https://www.django-rest-framework.org/)
|
||||
- [AUTH.md - API Documentation](./AUTH.md)
|
||||
|
||||
## 💡 İpuçları
|
||||
|
||||
1. **Development**: `.env.local` dosyasını git'e eklemeyin
|
||||
2. **Production**: Environment variables'ı hosting platformunuzda ayarlayın
|
||||
3. **Security**: NEXTAUTH_SECRET'i güçlü ve rastgele tutun
|
||||
4. **CORS**: Django backend'de Next.js URL'ini CORS whitelist'e ekleyin
|
||||
5. **HTTPS**: Production'da mutlaka HTTPS kullanın
|
||||
|
||||
## 🚀 Production Deployment
|
||||
|
||||
1. Environment variables'ı production ortamına ekleyin
|
||||
2. `NEXTAUTH_URL`'i production URL'inize değiştirin
|
||||
3. Django backend URL'ini production URL'i ile değiştirin
|
||||
4. OAuth redirect URI'larını production URL'leri ile güncelleyin
|
||||
5. HTTPS kullanın (NextAuth requirement)
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2025-12-24
|
||||
|
||||
Reference in New Issue
Block a user