CSRF token mismatch error due to Laravel Sanctum not being able to set CSRF cookie in front end app

Question

I have deployed two apps using https://fly.io/;

Laravel (v9) API backend
VueJS front end

Both apps are loading fine in the web browser.

The front end uses Laravel’s Sanctum library for authentication.

In the backend codebase, I have the following env values in the fly.toml file:

SANCTUM_STATEFUL_DOMAINS = ‘my-app.fly.dev’

SESSION_DOMAIN = ‘fly.dev’

However in the front end, the call to the endpoint /sanctum/csrf-cookie is failing to set the CSRF cookie needed for subsequent calls to the API. Upon inspecting the browser request header to set the cookies, the following error is given:

This attempt to set a cookie via a set-cookie header was blocked because its domain attribute was invalid with regards to the current host URL.

Having tried various different combinations of values for SANCTUM_STATEFUL_DOMAINS and SESSION_DOMAIN, I am no closer to resolving the issue.

I have it working without issues in my local development environment with the following values:

SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

Appreciate it if anyone can share some guidance on this.

Have you ever tried to connect with your application from Postman? CSRF is working correctly? Which tutorial did you use to make this app? — mrkazmierczak
– mrkazmierczak, Commented Mar 20, 2023 at 2:17
I'm having a similar issue, which I've isolated in Postman: the XSRF cookie does not appear to be saved after calling the initial login, which succeeds with 200. If I then call login from Postman a 2nd time (with valid session on backend), 302 redirect is returned and the XSRF cookie does appear to be saved correctly and picked up on a subsequent POST. By contrast, if I call a POST (including logout) after only the first login (200), it appears to use the XSRF cookie saved in the login's pre-request script (to /sanctum/csrf-cookie), instead of the most recent one from the login itself. — PeterG
– PeterG, Commented Apr 12, 2023 at 16:17

Mr B · Accepted Answer · 2023-04-20 09:00:05Z

0

Turns out my issue was because of the .fly.dev domain. The .fly.dev is shared between websites that don't have a custom domain so this would mean being able set cookies for other websites which is obviously a big no no. For a detailed explanation see here: https://community.fly.io/t/csrf-token-mismatch-error-due-to-laravel-sanctum-not-being-able-to-set-csrf-cookie-in-front-end-app/11580/10

I was able to resolve the issue by using my own custom domain.

edited Apr 20, 2023 at 9:00

answered Apr 17, 2023 at 11:51

Mr B

4,1809 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSRF token mismatch error due to Laravel Sanctum not being able to set CSRF cookie in front end app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related