React + Laravel Sanctum: CSRF ve Oturum Tabanlı Kimlik Doğrulama Sorunlarını Çözme

Bu yazıda, Laravel Sanctum'u kullanarak React SPA ile güvenli oturum yönetimini ve CSRF korumasını nasıl sorunsuzca entegre ettiğimi adım adım açıklayacağım.

Ele alacağımız konular:

• Laravel Sanctum nasıl çalışır?
• Laravel tarafında gerekli ayarlar
• React tarafında çerezlerle güvenli istek gönderme
• CSRF token akışı
• Karşılaşabileceğiniz özel durumlar ve çözümler

🔒 Neden Laravel Sanctum?

Laravel Sanctum, özellikle SPA, mobil uygulama ve basit API’ler için geliştirilmiş hafif bir kimlik doğrulama sistemidir.

İki modda çalışabilir:

• API token modu (mobil ve 3. parti uygulamalar için)
• Çerez tabanlı oturum modu (SPA’ler için ideal)

SPA senaryosunda Sanctum, oturum çerezi ve CSRF token’ı ile çalışır. JWT veya bearer token gibi sistemlere göre daha güvenli ve Laravel ile daha uyumludur.

💡 Token’ları localStorage’da saklamaya veya yenileme işlemlerine gerek yok!

🧠 Sanctum SPA Modu Nasıl Çalışır?

Özet akış şu şekildedir:

1. SPA, /sanctum/csrf-cookie isteğini gönderir.
2. Laravel, CSRF çereziyle cevap verir.
3. SPA, /login endpoint’ine CSRF token içeren POST isteği yollar.
4. Laravel başarılı giriş sonrası oturum çerezi oluşturur.
5. Sonraki tüm isteklerde bu çerez otomatik olarak gönderilir.

🛠️ Laravel Sanctum Kurulumu

1. Sanctum Paketini Kurun

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

2. Middleware Ayarları

app/Http/Kernel.php içinde api middleware grubuna şu satırı ekleyin:

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

3. sanctum.php Dosyasını Ayarlayın

config/sanctum.php içinde:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:3000,127.0.0.1:3000')),

.env dosyanıza uygun domainleri yazın:

SANCTUM_STATEFUL_DOMAINS=localhost:3000,seninsiten.com

4. CORS Ayarları

config/cors.php dosyasında:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000'],
'allowed_headers' => ['*'],
'supports_credentials' => true,

⚛️ React Tarafı Ayarları

1. Axios Kurulumu

npm install axios

2. axios.js Yardımcı Dosyası

import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:8000'; // Laravel API adresi

export default axios;

3. CSRF Token Alma

import axios from './axios';

export const getCsrfToken = async () => {
  await axios.get('/sanctum/csrf-cookie');
};

4. Giriş Fonksiyonu

export const login = async (email, password) => {
  await getCsrfToken(); // CSRF çerezini al

  const response = await axios.post('/login', { email, password });
  return response.data;
};

Giriş başarılı olduğunda Laravel oturum çerezi gönderir. Token saklamaya gerek yok!

🔐 Laravel’de Rotaları Korumak

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

🧪 Çıkış Yapmak

export const logout = async () => {
  await axios.post('/logout');
};

Laravel oturumu sonlandırır ve çerezi temizler.

💡 Özel Durumlar ve Hatalar

1. Çerezler Gönderilmiyor

• axios.defaults.withCredentials = true ayarını unutmayın.
• HTTPS kullanıyorsanız SameSite=None ve Secure bayraklarını ayarlayın.
• Frontend ve backend domain'leri uyumlu olmalı veya SANCTUM_STATEFUL_DOMAINS içinde tanımlı olmalı.

2. CSRF Token Uyuşmazlığı

• /sanctum/csrf-cookie isteğini her POST işleminden önce gönderin.
• Axios, token'ı otomatik olarak başlığa ekler.

3. CORS Hataları

• cors.php dosyasında doğru origin ve supports_credentials ayarı olduğuna emin olun.

4. Geliştirme ve Üretim Ortamı Farklılıkları

Geliştirme:

FRONTEND: http://localhost:3000
BACKEND: http://localhost:8000

Üretim:

• HTTPS zorunlu
• SESSION_DOMAIN ve SESSION_SECURE_COOKIE değerleri doğru olmalı
• Domain'ler SANCTUM_STATEFUL_DOMAINS içinde tanımlı olmalı

✅ Yayına Hazır Olmadan Önce Kontrol Listesi

• .env dosyalarında gerekli ayarlar yapıldı mı?
• HTTPS aktif mi?
• CSRF ve oturum çerezi düzgün çalışıyor mu?
• Giriş/çıkış sorunsuz mu?

🔚 Sonuç

Laravel Sanctum, React SPA’lerde güvenli oturum yönetimi sağlamak için harika bir çözümdür. Token saklama derdi yok, oturumlar Laravel’in altyapısına dayanıyor ve kullanıcı deneyimi oldukça sorunsuz.

Bu rehberin uygulamanızda size yardımcı olacağını umuyorum. Geliştirme sürecinde karşılaştığınız özel durumları yorumlarda veya sosyal medyada paylaşmaktan çekinmeyin!

Daha fazla içerik için kaisalhusrom.com adresini ziyaret edebilirsiniz 🚀