React and Laravel with Sanctum authentication setup can’t read cookie?

I currently have a React Application spawned via CRA running on http://paulsamazinglocalhost.com:3000

package json as follows:

"start": "HOST=paulsamazinglocalhost.com PORT=3000 react-scripts start",

I’m currently (trying) to talk to a Laravel API running on port 8000 specifically

http://api.paulsamazinglocalhost.com:8000

spawned via laravel as follows:

php artisan serve --port 8000 --host api.paulsamazinglocalhost.com

Now, “what does the Laravel CORS configuration look like” well here it is in all its glory:

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

and “what about the sanctum configuration in your environment file?” here you go:

SESSION_DRIVER=cookie
SESSION_DOMAIN=.paulsamazinglocalhost.com:8000
SANCTUM_STATEFUL_DOMAINS=paulsamazinglocalhost.com:3000

What about the API Kernel:

 'api' => [
            FruitcakeCorsHandleCors::class,
            LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            IlluminateRoutingMiddlewareSubstituteBindings::class,
        ],

So to clarify, the api runs on http://api.paulsamazinglocalhost.com (Laravel)
and the React app on http://paulsamazinglocalhost.com

To get the party started, and to try and actually authenticated against my POS API – I hit this first (via FETCH – not AXIOS) – I’m using React Toolkit Query, so here is the request:

GET: http://api.paulsamazinglocalhost.com:8000/api/sanctum/csrf-cookie

my next request is:

Route::post('/auth/login', 'AppHttpControllersApiAuthController@login');

This currently returns a 419 expired message. We sounds to me like we haven’t set something on the request, you know like some beautiful XSRF cookie token or something.

See here: https://laravel.com/docs/8.x/sanctum#spa-authenticating

The documentation states:

This token should then be passed in an X-XSRF-TOKEN header on subsequent requests.

well, yes that’s great, my problem appears to be reading it, becomes the response is completely empty, and I therefore assume that I need to read a cookie, see my lump of react toolkit query code below.

Currently I can’t read any cookies to add them to any subsequent request. Presumably because of some cross domain cookie problem? Not sure.

var getCookies = function(){
  var pairs = document.cookie.split(";");
  console.log(document.cookie)
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
    cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));
    console.log(pair);

  }
  return cookies;
}


// Define a service using a base URL and expected endpoints
export const authApi = createApi({
  reducerPath: 'authApi',
  baseQuery: fetchBaseQuery({ 
    baseUrl: Endpoint.URL + 'auth',
    prepareHeaders: (headers, { getState }) => {
      // By default, if we have a token in the store, let's use that for authenticated requests
      var myCookies = getCookies();
      const cookieToken = Cookies.get('XSRF-TOKEN');
      const token = cookieToken || (getState() as RootState).authApi.token;
      if (token) {
        alert(cookieToken);
        headers.set('X-XSRF-TOKEN', `${token || cookieToken}`)
      }
      return headers;
    },
 }),

Long story short. Can’t read cookies from a sanctum pre auth request, not sure why, any detail on how to authenticate using Sanctum and React Toolkit Query appreciated.