Skip to content

onurerkoc-dev/secure-react-login-validation

Repository files navigation

🛡️ Secure Login System: KVKK & GDPR Compliant Web Implementation

Bu proje, Workintech Full Stack Developer eğitim maratonu kapsamında geliştirilmiş, modern web standartlarını ve yasal veri koruma regülasyonlarını temel alan ileri seviye bir giriş (Login) sistemi uygulamasıdır.

Uygulama, sadece bir kullanıcı girişi sağlamakla kalmaz; aynı zamanda istemci tarafında veri güvenliği, dinamik form yönetimi ve yasal uyumluluk (compliance) süreçlerini optimize edilmiş bir React mimarisiyle sunar.


🎯 Projenin Amacı ve İş Ortamı Senaryosu

Günümüz yazılım dünyasında, kullanıcı verilerinin izinsiz işlenmesi (KVKK/GDPR ihlalleri) ciddi hukuki ve mali riskler taşımaktadır. Bu proje, bir işletmenin backend maliyetlerini (gereksiz API istekleri) azaltmayı ve yasal rıza metni onay mekanizmalarını yazılımın kalbine yerleştirmeyi amaçlayan bir çözüm senaryosu üzerine kurulmuştur.

Temel Hedefler:

  1. Frontend Validation: Hatalı verilerin sunucuya ulaşmasını engelleyerek kaynak tasarrufu sağlamak.
  2. Legal Compliance: Kullanıcının açık rızası (Explicit Consent) alınmadan hiçbir veri işleminin başlatılmamasını garanti altına almak.
  3. User Experience (UX): Kullanıcıya anlık geri bildirim vererek form doldurma sürecini hatasız tamamlatmak.

🛠️ Teknik Yetkinlikler ve Kullanılan Teknolojiler

Core Stack

  • React (v17/18): State yönetimi (useState) ve yaşam döngüsü metodları (useEffect) ile asenkron süreçlerin kontrolü.
  • Reactstrap & Bootstrap: Erişilebilirlik (Accessibility) standartlarına uygun, responsive UI bileşenleri.
  • Axios: Promise tabanlı HTTP istemcisi ile API haberleşmesi.
  • React Router DOM: Login sonrası güvenli yönlendirme (routing) mantığı.

Güvenlik ve Doğrulama (Validation)

  • Regex (Regular Expressions): RFC 5322 standartlarına uygun e-posta format doğrulaması.
  • Input Sanitization: .trim() metotları ile kullanıcı girdilerinin temizlenmesi.
  • State-Driven Logic: Formun geçerlilik durumuna (isValid) bağlı olarak buton aktiflik/pasiflik kontrolü.

✨ Öne Çıkan Fonksiyonel Özellikler

1. KVKK ve Rıza Metni Entegrasyonu

Kullanıcı, "Kullanım Koşulları ve Gizlilik Politikası" metnini onaylamadığı sürece "Sign In" butonu disabled durumunda kalır. Bu, yazılımın yasal regülasyonlara (GDPR/KVKK) teknik düzeyde uyum sağladığını gösterir.

2. Akıllı Form Doğrulaması (Real-Time Feedback)

  • Email: Kullanıcı yazarken e-posta formatı kontrol edilir. Hata durumunda FormFeedback bileşeniyle uyarı mesajı gösterilir.
  • Password: Güvenlik politikası gereği minimum 4 karakter sınırı uygulanır.
  • Hata Görselleştirmesi: Geçersiz alanlar otomatik olarak kırmızı (invalid) çerçeve ile işaretlenir.

3. API ve Veri Yönetimi

  • MockAPI: Gerçek bir backend'i simüle eden endpoint yapısı.
  • User Matching: Gelen veri seti içerisinde find metodu ile güvenli eşleştirme ve başarılı giriş sonrası ana sayfaya (/main) yönlendirme.

📂 Proje Yapısı

src/
 ┣ components/
 ┃ ┗ Login.js       # Ana form bileşeni ve validasyon mantığı
 ┣ App.js           # Router ve uygulama ana çatısı
 ┣ index.js         # React render süreci
 ┗ styles/          # Özel CSS ve Bootstrap özelleştirmeleri
 

## Projeyi lokal ortamda çalıştırmak için:

npm install
npm run dev

About

Modern React Login system featuring real-time validation, Reactstrap UI, and KVKK/GDPR compliance logic. Built with Axios and MockAPI integration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors