Laravel SPA Authentication - setup and common mistakes
Why Stack Overflow recommends it
Stack Overflow users link it when debugging Laravel Sanctum cookie, CSRF and 419 errors between a separate frontend and backend.
Recommended by 2 people across 2 different months, 2023 to 2024.
What it is
A 17-minute tutorial by the cdruc channel on setting up Laravel Sanctum for single-page app authentication, with a focus on the configuration mistakes that cause CSRF and session failures. It covers the .env values for session domain and stateful domains, plus CORS settings, when the frontend and backend run on separate hosts.
What people said
Recommends Armando_pagano · 2023-01 · Stack Overflow · on “Laravel Sanctum Angular Authentication 419 error code”
I'm trying to setup an authentication system using Laravel Sanctum and Fortify for the back-end and Angular for the front-end. The front-end is running on localhost:4200 the back-end is running on: localhost:8000 I followed this [this video] tutorial for the common mistakes and set the .env file accordingly so it looks like this: SESSION_DRIVER=file SESSION_LIFETIME=120 SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:4200 FRONTEND_URL= [LINK] and so is my cors.php configuration: <?php return [ 'paths' => ['*'], 'allowed_methods' => ['*'], 'allowed_origins' => [env('FRONTEND_URL', ' [LINK] ')], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => [], 'max_
Recommends Bubune · 2024-04 · Stack Overflow · on “How to use Laravel Sanctum with two different frontend and backend domains?”
I trust this would help someone in the future. I had a VueJs app (using the Quasar framework) as the frontend with Laravel Framework 10.48.4 as the backend both hosted using different domains. This is the configuration for my local environment (.env): APP_URL= [LINK] FRONTEND_URL= [LINK] SESSION_DOMAIN=192.168.100.4 SANCTUM_STATEFUL_DOMAINS=192.168.100.4 The explanation for the above is here: [this video] For my production, I had the backend on a different domain and the frontend on netlify. The .env config: APP_URL=https://<the-domain>.com FRONTEND_URL=https://<subdomain>.netlify.app SESSION_DOMAIN=.netlify.app SANCTUM_STATEFUL_DOMAINS=https://<subdomain>.netlify.app The explanation for this is
Cites Andre · 2023-07 · Stack Overflow · on “Cannot set CSRF cookie using Laravel Sanctum on the frontend”
I understand your frustration with this, @John Baker [LINK] . Most people seem scared of tutoring properly about the CORS issues faced when trying to get Nuxt 3 with Laravel as an API (Breeze + Sanctum API) to work properly. I'm having battles myself with it now and then, but referring back to my notes-to-self, as shared here, helps me out most of the time. To try "hitting the mark" of your question about "getting the csrf-cookie set" . Here is a typical script snippet to "set" the csrf-cookie" in a typical login page. Note the credentials: "include", parameter used in both Methods. If not used you'll get a green 204 response, but the Application cookies would not get "set" : login.vue <scri