Bu doküman Refine.dev'in kimlik doğrulama sistemini analiz eder ve @ferdiunal/refine-shadcn tema paketi için uygulama önerileri sunar.
Refine'ın kimlik doğrulaması aşağıdaki metodları içeren AuthProvider arayüzü etrafında kurulmuştur:
login()- Kullanıcı girişini yönetirlogout()- Kullanıcı çıkışını yönetirregister()- Kullanıcı kaydını yönetircheck()- Kullanıcının kimlik doğrulaması yapılıp yapılmadığını kontrol edergetIdentity()- Mevcut kullanıcı bilgilerini getirirgetPermissions()- Kullanıcı izinlerini getirironError()- Kimlik doğrulama hatalarını yönetirforgotPassword()- Şifre sıfırlama isteklerini yönetirupdatePassword()- Şifre güncellemelerini yönetir
useLogin()- Giriş işleviuseLogout()- Çıkış işleviuseRegister()- Kayıt işleviuseIsAuthenticated()- Kimlik doğrulama durumunu kontrol ederuseGetIdentity()- Kullanıcı kimliğini getiriruseGetPermissions()- Kullanıcı izinlerini getiriruseForgotPassword()- Şifre kurtarmauseUpdatePassword()- Şifre güncellemeleri
useAuthenticatedRedirect()- Kimlik doğrulaması yapılmış kullanıcıları yönlendiriruseUnauthenticatedRedirect()- Kimlik doğrulaması yapılmamış kullanıcıları yönlendirir
- 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
- Kimlik doğrulama hataları için merkezi hata yönetimi
- Kimlik doğrulama ile ilgili hatalar için toast bildirimleri
- Otomatik token yenileme mekanizmaları
- CSRF koruması
- Token tabanlı kimlik doğrulama
- Güvenli depolama seçenekleri
- Oturum yönetimi
- 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
- Yönlendirme tabanlı akış
- Popup tabanlı akış
- Token değişim mekanizmaları
- Yenileme token'ı yönetimi
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
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ı
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
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ı
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
FormFieldbileşenini kullanır - react-hook-form ile
Formbileşeninden yararlanır - Tutarlı doğrulama desenleri uygular
- Temanın düğme varyantlarını kullanır
- Mevcut locale dosyalarını auth çevirileriyle genişletir
- Hata mesajı yerelleştirme desteği
- Yapılandırılabilir metin etiketleri
- Çok dilli destek
- 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
- httpOnly çerezlerde güvenli depolama
- Otomatik token yenileme
- Token sona erme yönetimi
- Siteler arası istek sahteciliği koruması
- 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ı
- HTTPS zorunluluğu
- İstek imzalama
- API anahtarı yönetimi
- Denetim günlüğü
- LoginForm - Temel e-posta/şifre girişi
- AuthLayout - Tutarlı kimlik doğrulama sayfa düzeni
- ProtectedRoute - Rota koruma sarmalayıcısı
- RegisterForm - Kullanıcı kaydı
- ForgotPasswordForm - Şifre kurtarma
- UserProfile - Profil yönetimi
- OAuthProviders - Sosyal giriş seçenekleri
- TwoFactorAuth - 2FA uygulaması
- SessionManagement - Aktif oturum kontrolü
- AuditLog - Kimlik doğrulama aktivite takibi
- RoleManagement - İzin tabanlı erişim
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
- Önceden oluşturulmuş, özelleştirilebilir kimlik doğrulama bileşenleri
- Mevcut tema desenleriyle tutarlı
- Tip güvenli uygulamalar
- Kapsamlı dokümantasyon
- Modern, duyarlı kimlik doğrulama arayüzleri
- Akıcı yükleniyor durumları ve geçişler
- Açık hata mesajlaması
- Erişilebilirlik uyumluluğu
- Yerleşik güvenlik en iyi uygulamaları
- Düzenli güvenlik güncellemeleri
- Denetim izi yetenekleri
- Uyumluluk için hazır özellikler
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.