Proje: Okul B2B App · Hub: Okul B2B App — Conventions

OTP Input ve Auth Bileşenleri

OTPInput

components/ui/OTPInput.tsx — 4 haneli OTP giriş bileşeni.

<OTPInput
  length={4}          // Hane sayısı (OTP_CONFIG.LENGTH = 4)
  autoFocus={true}    // Otomatik klavye aç
  onComplete={(otp) => { /* 4 hane dolunca */ }}
  onChangeText={(otp) => { /* her değişimde */ }}
  error="Hatalı kod"  // Hata mesajı
/>

Her hane için ayrı TextInput ve useRef array. Kullanıcı hane doldurunca otomatik sonraki haneye geçer.

Auth Bileşen Hiyerarşisi

AuthFlow                    ← Koordinatör
  ├── LoginScreen            ← Email+şifre / Telefon seçimi
  │   ├── FloatingLabelInput  ← Email girişi
  │   ├── FloatingLabelInput  ← Şifre girişi
  │   └── "SMS ile Giriş" butonu → OTP flow
  └── OTPVerificationScreen  ← SMS kodu doğrulama
       └── OTPInput          ← 4 hane

LoginScreen Seçim

İki login yöntemi:

1. Email + Şifre → direkt login
2. Telefon → OTP gönder → OTPVerificationScreen → OTP doğrula

OTPVerificationScreen

Phone: "05XX *** ** XX"    ← Masked
Kod bekleniyor... (60s countdown)
[OTPInput 4 hane]
Tekrar Gönder (60s sonra aktif)

Related

• auth-akisi — login/OTP domain
• auth-securestore-ios-background — SecureStore ile ilgili auth incidents