CSRF token mismatch error

[Fukao0129]

Hello @manchenkoff, Thank you for this awesome module.
I'm in a trouble now.

When I try to login, the login API fails with 419 "CSRF token mismatch." error.

nuxt@3.9.0
nuxt-auth-sanctum@0.4.6
Laravel@9.52.16
laravel/sanctum@3.0

nuxt.config.ts

  modules: ["nuxt-auth-sanctum"],
  sanctum: {
    baseUrl: "http://localhost",
  },

login.vue

const { login: SanctumAuthLogin } = useSanctumAuth();
  await SanctumAuthLogin({
    email,
    password,
  })

cors.php

'paths' => ['api/*', 'login', 'logout', 'sanctum/csrf-cookie', 'me'],
'allowed_origins' => ['*'],
'supports_credentials' => true,

Kernel.php

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, // uncomment
],

.env (for Laravel)

SANCTUM_STATEFUL_DOMAINS=localhost
SESSION_DOMAIN=localhost # Deleting this doesn't change the situation.

The "http://localhost/sanctum/csrf-cookie" API seems to be working well. After this API is called, "XSRF-TOKEN" and "laravel_session" are set to the browser's Cookie. And they seem to be set to the headers of login API.

Request Headers of login API

POST /login HTTP/1.1
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 48
Cookie: XSRF-TOKEN=XSRF-TOKEN in Cookie; laravel_session=laravel_session in Cookie
Host: localhost
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
accept: application/json
content-type: application/json
sec-ch-ua: "Not)A;Brand";v="99", "Google Chrome";v="127", "Chromium";v="127"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
x-xsrf-token: XSRF-TOKEN in Cookie

What should I do to login?

I look forward to your reply.
If more informations are needed, please let me know.

(Since English is not my first language, I apologize in advance if there are any rude expressions.)

[Fukao0129]

I've resolved this issue!
I added an option as below:

nuxt.config.ts

  sanctum: {
    csrf: {
        header: "X-CSRF-TOKEN",
    },
  },

Then the header of login API changed from "x-xsrf-token" to "x-csrf-token". The login API seems to be working well.

[manchenkoff]

Hey @Fukao0129, I'm glad you resolved the issue very quick. However, it looks like you have some misconfiguration on Laravel side since X-CSRF-TOKEN is deprecated, your API should work properly with X-XSRF-TOKEN which is encrypted, for more details see the official docs here and here. I assume you should check cookies config to make sure you are using secure ones and also double-check the middleware you use for different routes.

[Fukao0129]

@manchenkoff Thank you for your reply! As you mentioned, I will check the settings and other details. If I encounter any problems, I will create an issue, and I would appreciate your help then.