React 19 Server Components: Güvenli API Çağrıları ve Kimlik Doğrulama
React Server Components, geleneksel SPA mimarisindeki en büyük güvenlik sorunlarından birini — API key'lerin client'a sızması — yapısal olarak çözüyor. Ancak yeni mimari yeni hatalara da yol açabilir. Bu yazıda Next.js 16 + React 19 üzerinde güvenli bir stack nasıl kurulur inceliyoruz.
Server Components'ın Güvenlik Avantajı
RSC'lerde yazdığınız kod yalnızca server'da çalışır; client bundle'a hiç girmez. Bu demek oluyor ki veritabanı bağlantı dizgileri, API key'ler, JWT secret'lar ve iç API endpoint URL'leri DevTools'la açılmış browser'da görünmez.
Geleneksel SPA'da ortam değişkenini NEXT_PUBLIC_ ile işaretlerseniz client'a çıkar; RSC'de böyle bir zorunluluk yok, `process.env.DATABASE_URL` doğrudan kullanılabilir. Kod review'da NEXT_PUBLIC_ prefix'inin dikkatle kontrol edilmesi kritik.
Kimlik Doğrulama ve Oturum Yönetimi
next-auth (Auth.js) Next.js 16 ile uyumlu; OAuth providers, JWT veya database session, CSRF token ve cookie güvenliği varsayılan. Session bilgisine server-side `auth()` fonksiyonuyla ulaşır, RSC içinde direkt kontrol edersiniz.
Client Components'ta oturum lazım olduğunda `<SessionProvider>` içinde `useSession()` ile alınır; ama kritik kararlar (role check, permission) her zaman server'da yeniden doğrulanmalı.
JWT, Cookie ve CSRF Koruması
JWT token'ı HttpOnly + Secure + SameSite=Strict cookie'de saklayın; LocalStorage'da asla tutmayın (XSS'e açık). Short-lived access token (15 dk) + refresh token (7 gün) + rotation pattern güvenli bir kombinasyon.
CSRF için next-auth'un built-in koruması veya double-submit pattern. Server Actions ise Next.js 16'da otomatik CSRF koruması ile gelir — manuel token yönetimine ihtiyaç yok.
Yaygın Hatalar ve Güvenli Pattern'ler
En sık gördüğümüz hata: Server Action içinde input validation atlamak. 'use server' direktifi verilmiş fonksiyonlar dış API endpoint'leri gibi davranır; her argüman untrusted kabul edilip Zod/Yup ile şemaya göre doğrulanmalı.
Başka sık hata: sensitive veriyi RSC'den client'a props olarak geçirmek. React, props'ları serileştirerek client'a gönderir; şifreler, token'lar, iç ID'ler hiç geçirilmemeli — yalnızca UI için gereken minimum alan.
Kurumsal Stack ve Sonuç
VefaSec'in önerdiği kurumsal Next.js 16 güvenlik stack'i: next-auth + Prisma + Zod + CSP nonce + rate limiting middleware + OWASP ASVS L1 kontrol listesi. Her release'de bu kontroller otomatik CI'da çalışıyor.
Güvenli bir SaaS kurmak için başlangıç noktası arıyorsanız, VefaSec'in açık kaynak Next.js + next-auth starter şablonu GitHub'da yayında.
Projeniz veya denetim ihtiyacınız için VefaSec'le konuşun.
Diyarbakır merkezli ekibimiz; kurumsal müşterilere uçtan uca yazılım geliştirme, sızma testi ve siber güvenlik danışmanlığı hizmetleri sunar. Keşif görüşmesi ücretsiz, bağlayıcı değil.