X-XSRF-TOKEN / CSRF Header not being set

[nanayaw-kirk]

After the initial request to sanctum/csrf-cookie endpoint and setting the cookie, there is no X-XSRF-TOKEN header present in the login request when the login function on the useSanctumAuth() composable if called.

I am currently using the exact configuration found in

[manchenkoff]

Hey @nanayaw-kirk, we've already discussed similar issues in #4 and #6, but it was related mostly to CSR mode, so please check your Laravel configuration and make sure that:

• all domains are supported by Sanctum
• Laravel returns proper headers

Also, I would recommend cleaning cookies if you work with localhost to avoid overlapping values from different apps.

If nothing helps, please provide more details like Laravel and Nuxt configurations as well as examples of API requests/responses with headers.

[nanayaw-kirk]

@manchenkoff I appreciate your response.

Here's some context to my problem.
I've had some back and forth with the backend dev to get the to the point where cookies are successfully set on the client by the backend. The issue is that according to the backend dev and the Laravel documentation (found here ), I have to ensure the header "X-XSRF-TOKEN" with the value of the X-XSRF-TOKEN cookie is present in subsequent requests.

However, when I inspect the request being sent using the login function on the useSanctumAuth() composable, this header is not present.
There is a Header that has the value of the X-XSRF-TOKEN but that the key for that Header is "Cookie".

The laravel docs states that

If your JavaScript HTTP library does not set the value for you, you will need to manually set the X-XSRF-TOKEN header to match the value of the XSRF-TOKEN cookie that is set by this route.

So my question/issue is how do I ensure this Header is set?
Is there a way to pass custom headers to the useSanctumClient() which I assume is being used under the hood to make the login request?

Here's a screenshot of the request headers for the login request. At this point the cookie has already been set by sanctum/csrf-cookie endpoint

[manchenkoff]

@nanayaw-kirk

So my question/issue is how do I ensure this Header is set?

Basically, the client builds different headers set depending on the mode of the request (CSR / SSR), you can check this interceptor code. I didn't put any logger or console output, so if you want to debug it and check the actual values, you can clone the repo and use Nuxt playground with your backend API. Just adjust the configuration a little bit and run the dev server.

Is there a way to pass custom headers to the useSanctumClient() which I assume is being used under the hood to make the login request?

Unfortunately, there is no way to extend ofetch interceptor after creating an instance, so for now there is no way to pass something additionally.

Anyway, besides cookies you should see X-Xsrf-Token header like in the screenshot below and it should be the same with the one in cookie value.

Could you also check that API properly returns cookie for csrf request right before the login request?

[nanayaw-kirk]

Could you also check that API properly returns cookie for csrf request right before the login request?

To the best of my knowledge yes the API returns the cookie for the csrf request.

[nanayaw-kirk]

My issue is with the domains. My env was set to the deployed staging server and the Sanctum docs clearly state that for SPA authentication to work, the backend and frontend should sit on the same TLD.

@manchenkoff thanks for taking a look at my issue even though it turned out to be a silly one :)

I'm going to close this issue now.