Laravel Sanctum - CSRF token mismatch when sending HTTP request

[brahimbjz]

I have an API in Laravel and a web application in Angular that must consume this API, the problem I have is that I am implementing authentication using Laravel Sanctum and I have the following error when trying to send a POST request for login:

{message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…} POST http://xxxxxxxx.test/login 419 (unknown status)

In my code I first make a GET request to http://xxxxxxx.test/sanctum/csrf-cookie which is the Sanctum path where the API sets a session cookie (laravel_session) and another one from the CSRF (XSRF-TOKEN) and then if I make the POST request to /login.

The problem is that according to the documentation, the token must be returned in the POST request in an X-XSRF-TOKEN header and according to the documentation, Angular should do it on its own, but checking the Request-Headers from the Chrome inspector, not This header appears to have been submitted. So, I have thought about forwarding it myself, but I have no way to get it since I only get this:

HTTP/1.1 204 No Content
Date: Fri, 29 May 2020 15:16:13 GMT
Server: Apache/2.4.35 (Win64) OpenSSL/1.1.1g PHP/7.4.6
X-Powered-By: PHP/7.4.6
Cache-Control: no-cache, private
Access-Control-Allow-Origin: http://app.xxxxxx.test:4200
Vary: Origin
Access-Control-Allow-Credentials: true
Set-Cookie: XSRF-TOKEN=eyJpdiI6ImRjNzZmckxHR2xWY05uUHdKR3QxR0E9PSIsInZhbHVlIjoiNnZkUjJRSWVKNTViaEpoTGpHdHNLNmloYlBTaVAycmNiek5Hck41OFI2a052S094NVFFMlRxekxiMG8zQTV3MiIsIm1hYyI6IjVjYWQzYmMwNTBhNDYwMTBhNGMwNTg3ODBjNTNiNGYwNzk1NGNlNTMzMDBiYjAxZjQwNmQ2ZTIzYzgwYjI5YTMifQ%3D%3D; expires=Fri, 29-May-2020 17:16:13 GMT; Max-Age=7200; path=/; domain=.xxxxxx.test; samesite=lax
Set-Cookie: laravel_session=eyJpdiI6ImdrbjBwRlhJR1ZiVHpOdFQxTDBRUkE9PSIsInZhbHVlIjoibjFWUng3MVhWZXAzM1l0V3VSWE04dGJ4eFZ4SXh5SXNEUGtnaFJDT2NTNnNnbzJOQXRKa3grQ1pzOVhOZ3oyNyIsIm1hYyI6IjRhMzhiMGRmNzYzODdjYjdiMjI5Yjc2MTY2ZmE1YTkzMDA2NjczMzViZGE0ZGU1MDI3ZjFlNzg5MjJlZDA5YWMifQ%3D%3D; expires=Fri, 29-May-2020 17:16:13 GMT; Max-Age=7200; path=/; domain=.xxxxxx.test; httponly; samesite=lax
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

As for the other settings I am almost sure that they are fine, and as for the domains, Laravel is at http://miweb.test:80 and Angular at http://app.miweb.test:4200

[khamsolt]

I found a solution to this problem through adding decoding for the header.

protected function getTokenFromRequest($request)
  {
    $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');
    if (!$token && $header = $request->header('X-XSRF-TOKEN')) {
      try {
        $token = CookieValuePrefix::remove($this->encrypter->decrypt(urldecode($header), static::serialized()));
      } catch (DecryptException $e) {
        $token = '';
      }
    }
    return $token;
  }

Add this method to your middleware App\Http\Middleware\VerifyCsrfToken