Next.js frontend ve Laravel backend kimlik doğrulama yapılandırmanız hassas hissettiriyorsa, muhtemelen öyledir. Çoğu ekip, kimlik doğrulamayla savaşmıyor. Onlar, oturum sınırları, çerez kapsamı, CSRF beklentileri ve tarayıcı, frontend uygulaması ve API sunucusu arasındaki uyuşmazlıklarla mücadele ediyor.
<p>Çözüm, başka bir rastgele middleware ayarı değil. Çözüm, temiz bir mimari seçmek ve yerel geliştirme ile üretim arasında tutarlı olmaktır.</p>
<p><strong>Next.js Laravel auth</strong> yığını için benim güçlü görüşüm basit: <strong>Laravel kimlik doğrulamayı ve oturum durumunu sahiplenmeli</strong>, tarayıcı çerezleri taşımalı ve <strong>Next.js</strong> uygulama UI katmanı olarak hareket etmelidir; ilkinden daha akıllı olduğunu iddia eden ikinci bir kimlik doğrulama sunucusu olarak değil.</p>
<h2>
<a name="stop-mixing-session-auth-and-token-auth-without-a-reason" href="#stop-mixing-session-auth-and-token-auth-without-a-reason"></a>
Sebepsiz yere oturum kimliği ve token kimliğini karıştırmayı bırakın
</h2>
<p>Birçok kırık yapılandırma, <strong>Laravel Sanctum</strong> oturum kimliği, özel JWT akışları ve frontend tarafında kimlik doğrulama soyutlamalarını bir yığına birleştirmekten kaynaklanıyor. Bu genellikle daha fazla esneklik değil, daha fazla yüzey alanı oluşturur.</p>
<p>Ürününüz, normal bir tarayıcı tabanlı SaaS uygulamasıysa, <strong>cookie tabanlı oturum kimliği</strong> kullanın ve sıkıcı tutun.</p>
<p>Bu şunları ifade eder:</p>
<ul>
<li><strong>Laravel</strong> giriş, çıkış, oturum oluşturma, CSRF, yetkilendirme ve kullanıcı kimliğinden sorumludur.</li>
<li><strong>Next.js</strong>, Laravel'e <code>credentials: 'include'</code> ile çağrı yapar.</li>
<li>Tarayıcı çerezleri otomatik olarak saklar ve gönderir.</li>
<li>Korumalı kullanıcı durumu Laravel'den alınır, frontend'de yeniden icat edilmez. <br /> Token auth'u yalnızca gerçekten ihtiyaç duyduğunuz durumlarda kullanın, şöyle ki:</li>
<li>Mobil istemciler</li>
<li>Üçüncü taraf API tüketicileri</li>
<li>Makine-makine erişimi</li>
<li>Halka açık API ürünleri<br /> Tarayıcı uygulamaları için, çerez oturumları genellikle doğru yanıtı sağlayan bir çözüm olur.</li>
</ul>
<h2>
<a name="the-architecture-that-avoids-most-auth-bugs" href="#the-architecture-that-avoids-most-auth-bugs"></a>
Çoğu kimlik doğrulama hatasını önleyen mimari
</h2>
<p>En temiz yapılandırma şöyle görünür:</p>
<h3>
<a name="production-domains" href="#production-domains"></a>
Üretim alanları
</h3>
<ul>
<li><strong>Frontend:</strong> <code>app.qcode.in</code></li>
<li><strong>Backend:</strong> <code>api.qcode.in</code></li>
<li><strong>Oturum alanı:</strong> <code>.qcode.in</code></li>
</ul>
<p>Oturum kimliği oluşturmayı <code>localhost</code> karmaşası üzerine inşa etmeye çalışmayın. Bunun yerine tutarlı yerel alanlar kullanın:</p>
<ul>
<li><strong>Frontend:</strong> <code>app.qcode.test</code></li>
<li><strong>Backend:</strong> <code>api.qcode.test</code></li>
<li><strong>Oturum alanı:</strong> <code>.qcode.test</code></li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="c1">// .env</span>APP_URL=https://api.qcode.test
FRONTEND_URL=https://app.qcode.test
SESSION_DOMAIN=.qcode.test
SANCTUM_STATEFUL_DOMAINS=app.qcode.test,api.qcode.test,app.qcode.in,api.qcode.in
SESSION_SECURE_COOKIE=true
SESSION_SAME_SITE=lax
<p>Ve CORS'u yeterince sıkı tutun, hataları gizlemek için gevşek değil.<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="c1">// config/cors.php</span>return [
‘paths’ => [‘api/‘, ‘login’, ‘logout’, ‘sanctum/csrf-cookie’],
‘allowed_methods’ => [‘‘],
‘allowed_origins’ => [
‘https://app.qcode.test‘,
‘https://app.qcode.in‘,
],
‘allowed_headers’ => [‘*’],
‘supports_credentials’ => true,
];
