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 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=http://localhost:4200

and so is my cors.php configuration:

<?php

return [

  

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:4200')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

For logging in my users I'm using this angular service function:

options = {
    headers: new HttpHeaders({
      Accept: 'application/json',
    }),
    withCredentials: true,
  }

login(email: string, password: string): Observable<any> {
    return this.http
      .get(this.baseUrl + '/sanctum/csrf-cookie', this.options)
      .pipe(
        switchMap(() =>
          this.http.post(
            this.baseUrl + '/login',
            { email, password },
            this.options
          )
        )
      );
  }

the problem is that when I try to login I get back a 419 erro code saying that the CSRF token mismatches.

taking a look at the cookies inside the browser's console the list is empty so no cookies are passed even if the request to /csrf-cookie is successfull

What am I doing wrong her? is it the angular service or my back-end config?