Skip to content

Latest commit

 

History

History
258 lines (213 loc) · 7.57 KB

File metadata and controls

258 lines (213 loc) · 7.57 KB

Refine Authentication Analizi

Genel Bakış

Bu doküman Refine.dev'in kimlik doğrulama sistemini analiz eder ve @ferdiunal/refine-shadcn tema paketi için uygulama önerileri sunar.

Kimlik Doğrulama Mimarisi

Temel Auth Provider Arayüzü

Refine'ın kimlik doğrulaması aşağıdaki metodları içeren AuthProvider arayüzü etrafında kurulmuştur:

  • login() - Kullanıcı girişini yönetir
  • logout() - Kullanıcı çıkışını yönetir
  • register() - Kullanıcı kaydını yönetir
  • check() - Kullanıcının kimlik doğrulaması yapılıp yapılmadığını kontrol eder
  • getIdentity() - Mevcut kullanıcı bilgilerini getirir
  • getPermissions() - Kullanıcı izinlerini getirir
  • onError() - Kimlik doğrulama hatalarını yönetir
  • forgotPassword() - Şifre sıfırlama isteklerini yönetir
  • updatePassword() - Şifre güncellemelerini yönetir

Mevcut Kimlik Doğrulama Hook'ları

Temel Hook'lar

  • useLogin() - Giriş işlevi
  • useLogout() - Çıkış işlevi
  • useRegister() - Kayıt işlevi
  • useIsAuthenticated() - Kimlik doğrulama durumunu kontrol eder
  • useGetIdentity() - Kullanıcı kimliğini getirir
  • useGetPermissions() - Kullanıcı izinlerini getirir
  • useForgotPassword() - Şifre kurtarma
  • useUpdatePassword() - Şifre güncellemeleri

Navigasyon Hook'ları

  • useAuthenticatedRedirect() - Kimlik doğrulaması yapılmış kullanıcıları yönlendirir
  • useUnauthenticatedRedirect() - Kimlik doğrulaması yapılmamış kullanıcıları yönlendirir

UI Entegrasyon Özellikleri

Korumalı Rotalar

  • Kimlik doğrulama durumuna dayalı otomatik rota koruması
  • Kimlik doğrulaması yapılmış/yapılmamış kullanıcılar için yapılandırılabilir yönlendirme davranışı
  • Rol tabanlı erişim kontrolü desteği

Hata Yönetimi

  • Kimlik doğrulama hataları için merkezi hata yönetimi
  • Kimlik doğrulama ile ilgili hatalar için toast bildirimleri
  • Otomatik token yenileme mekanizmaları

Güvenlik Özellikleri

  • CSRF koruması
  • Token tabanlı kimlik doğrulama
  • Güvenli depolama seçenekleri
  • Oturum yönetimi

OAuth Sağlayıcı Desteği

Desteklenen Sağlayıcılar

  • Google OAuth - Tam entegrasyon desteği
  • Auth0 - Kurumsal kimlik doğrulama
  • Keycloak - Açık kaynak kimlik yönetimi
  • Supabase - Hizmet olarak backend kimlik doğrulaması
  • Özel OAuth - Genel OAuth 2.0 desteği

Uygulama Desenleri

  • Yönlendirme tabanlı akış
  • Popup tabanlı akış
  • Token değişim mekanizmaları
  • Yenileme token'ı yönetimi

Tema için Önerilen Kimlik Doğrulama Bileşenleri

1. Giriş Formu Bileşeni

interface LoginFormProps {
  onSubmit?: (values: LoginFormValues) => void;
  loading?: boolean;
  providers?: OAuthProvider[];
  forgotPasswordEnabled?: boolean;
  registerEnabled?: boolean;
}

Özellikler:

  • Doğrulama ile e-posta/şifre alanları
  • OAuth sağlayıcı düğmeleri
  • "Beni hatırla" onay kutusu
  • Şifremi unuttum bağlantısı
  • Kayıt bağlantısı
  • Yükleniyor durumları ve hata yönetimi

2. Kayıt Formu Bileşeni

interface RegisterFormProps {
  onSubmit?: (values: RegisterFormValues) => void;
  loading?: boolean;
  providers?: OAuthProvider[];
  loginEnabled?: boolean;
  termsRequired?: boolean;
}

Özellikler:

  • Ad, e-posta, şifre alanları
  • Şifre onayı
  • Şartlar ve koşullar onay kutusu
  • OAuth sağlayıcı seçenekleri
  • Girişe geri dön bağlantısı

3. Şifremi Unuttum Bileşeni

interface ForgotPasswordProps {
  onSubmit?: (email: string) => void;
  loading?: boolean;
  backToLoginEnabled?: boolean;
}

Özellikler:

  • E-posta giriş alanı
  • Yükleniyor durumu ile gönder düğmesi
  • Başarı/hata mesajlaması
  • Girişe geri dön navigasyonu

4. Kullanıcı Profili Bileşeni

interface UserProfileProps {
  user?: User;
  onUpdate?: (values: UserProfileValues) => void;
  onChangePassword?: (values: ChangePasswordValues) => void;
  loading?: boolean;
}

Özellikler:

  • Kullanıcı avatar gösterimi
  • Profil bilgi formu
  • Şifre değiştirme formu
  • Hesap ayarları

5. Kimlik Doğrulama Düzen Bileşeni

interface AuthLayoutProps {
  children: ReactNode;
  title?: string;
  subtitle?: string;
  logo?: ReactNode;
  backgroundImage?: string;
}

Özellikler:

  • Duyarlı düzen
  • Marka öğeleri
  • Arka plan özelleştirmesi
  • Form konteyner stilleri

Mevcut Tema Sistemi ile Entegrasyon

Form Entegrasyonu

  • Mevcut FormField bileşenini kullanır
  • react-hook-form ile Form bileşeninden yararlanır
  • Tutarlı doğrulama desenleri uygular
  • Temanın düğme varyantlarını kullanır

i18n Entegrasyonu

  • Mevcut locale dosyalarını auth çevirileriyle genişletir
  • Hata mesajı yerelleştirme desteği
  • Yapılandırılabilir metin etiketleri
  • Çok dilli destek

UI Bileşen Entegrasyonu

  • shadcn/ui Button bileşenlerini kullanır
  • Temanın Input bileşenlerini uygular
  • Hatalar için Alert/Dialog bileşenlerinden yararlanır
  • Tutarlı tipografi ve boşluk

Güvenlik En İyi Uygulamaları

Token Yönetimi

  • httpOnly çerezlerde güvenli depolama
  • Otomatik token yenileme
  • Token sona erme yönetimi
  • Siteler arası istek sahteciliği koruması

Form Güvenliği

  • Girdi doğrulama ve temizleme
  • Giriş denemeleri için hız sınırlaması
  • Şifre güçlülük gereksinimleri
  • Güvenli şifre sıfırlama akışları

API Güvenliği

  • HTTPS zorunluluğu
  • İstek imzalama
  • API anahtarı yönetimi
  • Denetim günlüğü

Uygulama Önerileri

Faz 1: Temel Bileşenler

  1. LoginForm - Temel e-posta/şifre girişi
  2. AuthLayout - Tutarlı kimlik doğrulama sayfa düzeni
  3. ProtectedRoute - Rota koruma sarmalayıcısı

Faz 2: Genişletilmiş Özellikler

  1. RegisterForm - Kullanıcı kaydı
  2. ForgotPasswordForm - Şifre kurtarma
  3. UserProfile - Profil yönetimi
  4. OAuthProviders - Sosyal giriş seçenekleri

Faz 3: Gelişmiş Özellikler

  1. TwoFactorAuth - 2FA uygulaması
  2. SessionManagement - Aktif oturum kontrolü
  3. AuditLog - Kimlik doğrulama aktivite takibi
  4. RoleManagement - İzin tabanlı erişim

Dosya Yapısı Önerisi

src/
├── auth/
│   ├── components/
│   │   ├── login-form.tsx
│   │   ├── register-form.tsx
│   │   ├── forgot-password-form.tsx
│   │   ├── user-profile.tsx
│   │   └── auth-layout.tsx
│   ├── hooks/
│   │   ├── use-auth.ts
│   │   └── use-auth-form.ts
│   ├── providers/
│   │   └── auth-provider.ts
│   └── index.ts

Tema Paketi için Faydalar

Geliştirici Deneyimi

  • Önceden oluşturulmuş, özelleştirilebilir kimlik doğrulama bileşenleri
  • Mevcut tema desenleriyle tutarlı
  • Tip güvenli uygulamalar
  • Kapsamlı dokümantasyon

Kullanıcı Deneyimi

  • Modern, duyarlı kimlik doğrulama arayüzleri
  • Akıcı yükleniyor durumları ve geçişler
  • Açık hata mesajlaması
  • Erişilebilirlik uyumluluğu

Güvenlik

  • Yerleşik güvenlik en iyi uygulamaları
  • Düzenli güvenlik güncellemeleri
  • Denetim izi yetenekleri
  • Uyumluluk için hazır özellikler

Sonuç

Refine'ın kimlik doğrulama sistemini shadcn/ui temasında uygulamak, yüksek güvenlik standartlarını ve mükemmel kullanıcı deneyimini korurken mevcut tema bileşenleriyle sorunsuz entegre olan eksiksiz, üretime hazır bir kimlik doğrulama çözümü sağlayacaktır.

Modüler yaklaşım, geliştiricilerin tüm kimlik doğrulama akışında tutarlılık sağlarken yalnızca ihtiyaç duydukları bileşenleri kullanmalarına olanak tanır.