React'ta zxcvbn ile Güvenli Şifre Güç Ölçer Nasıl Geliştirilir?

React uygulamalarında kullanıcı doğrulaması yaparken güvenli şifre kullanımı hayati önemdedir.
Bu rehberde, Dropbox tarafından geliştirilen zxcvbn kütüphanesini kullanarak 0’dan 4’e kadar şifre gücü ölçümü yapan, gerçek zamanlı geri bildirim sağlayan bir ölçer geliştireceğiz.
Hedefimiz, hem kullanıcı deneyimini hem de güvenliği aynı anda artırmak.

---

🧠 Teknik Özet

• Ana konu: zxcvbn ile React tabanlı şifre gücü ölçer oluşturmak
• Amacı: Kullanıcıların zayıf şifreler belirlemesini önlemek, güvenliği artırmak
• Kapsam: Form bileşenleri, gerçek zamanlı doğrulama, SCSS ile dinamik meter tasarımı

---

⚙️ 1. Proje Kurulumu

npx create-react-app rabisu-sifre-guc-sayaci
cd rabisu-sifre-guc-sayaci
yarn add zxcvbn isemail prop-types node-sass bootstrap

Bu paketler şifre analizi, e-posta doğrulaması, tip kontrolü ve stillendirme için kullanılır.

Bootstrap’ı projeye dahil et:

// src/index.js
import 'bootstrap/dist/css/bootstrap.min.css';

Uygulamayı başlat:

yarn start

---

🧩 2. Form Bileşenleri Mimarisi

FormField – Temel Giriş Alanı

Her form alanı için value, dirty, errors durumlarını yöneten yapı.

EmailField – E-Posta Doğrulaması

isemail paketiyle e-posta formatını doğrular.

import React from 'react';
import { validate } from 'isemail';
import FormField from './FormField';

export default function EmailField(props) {
  const validateEmail = v => {
    if (!validate(v)) throw new Error('Geçerli bir e-posta girin');
  };
  return <FormField type="text" validator={validateEmail} {...props} />;
}

---

🔒 3. PasswordField – Şifre Gücü Ölçer Entegrasyonu

zxcvbn, şifrenin tahmini kırılma süresine göre 0–4 arasında skor üretir:

Skor	Açıklama
0–1	Çok Zayıf 🔴
2	Orta 🟠
3	Güçlü 🟢
4	Çok Güçlü 🟩

import zxcvbn from 'zxcvbn';

validatePasswordStrong = value => {
  if (value.length <= 7) throw new Error("Şifre en az 7 karakter olmalı");
  if (zxcvbn(value).score < 3) throw new Error("Şifre güvenliği yetersiz");
};

zxcvbn, sadece uzunluğu değil, yaygın kelimeler ve kalıpları da analiz eder.

---

🎨 4. SCSS ile Güç Ölçer Tasarımı

$strength-colors: (darkred, orangered, orange, yellowgreen, green);

.strength-meter-fill {
  transition: width 0.5s ease-in-out, background 0.25s;
  @for $i from 1 through 5 {
    &[data-strength='#{$i - 1}'] {
      width: (20% * $i);
      background: nth($strength-colors, $i);
    }
  }
}

Sass döngüsüyle 0–4 arası skorlara karşılık renk geçişleri otomatik atanır.

---

❓ Sıkça Sorulan Sorular (SSS)

1. zxcvbn şifre gücünü nasıl ölçer?

Dropbox tarafından geliştirilen bu algoritma, tahmini brute-force denemelerini hesaplar ve entropiye göre skor verir.

2. Minimum uzunluk neden 7 karakter?

Kısa şifreler her durumda zayıf kabul edilir. 7+ karakter, karmaşık kombinasyonlarla güvenlik sağlar.

3. prop-types neden önemli?

React bileşenlerinin doğru tipte veri aldığından emin olmak için çalışma anı tip kontrolü sağlar.

4. Sass burada ne işe yarıyor?

@for döngüsüyle dinamik bar renkleri üretilir, manuel CSS tekrarına gerek kalmaz.

5. Alternatif olarak CSS scroll-behavior veya custom logic kullanılabilir mi?

Evet, ancak zxcvbn kadar detaylı risk analizi sunmaz.

---

✅ Sonuç

Bu rehberle, React projende güvenli ve kullanıcı dostu bir şifre güç ölçer inşa ettin. Zxcvbn’in algoritmik zekâsını, React’in esnek yapısıyla birleştirerek kullanıcılarını güçlü şifrelere yönlendirdin. Form validasyonu, dinamik meter ve görsel geri bildirimle kullanıcı deneyimini bir üst seviyeye taşıdın.

💡 Projeni Rabisu Bulut üzerinde hemen test ederek hızlı, güvenli ve optimize edilmiş altyapıyla yayınlayabilirsin.