Laravel + SPA not authenticating | Laravel | Page 1

#

Hi all,

A bit stuck here but i'll try explain. My app has been working fine but moved after trying to move my API requests from localhost.test to api.localhost.test I am having trouble authenticating.

My setup is as follows. The laravel app hosts a vuejs SPA inside is resource folder. Going to example.com will load up my SPA. Laravel also has a subdomain api.localhost.test.

I am sending all my api requests to api.example.com

I can log in, but any authenticate requests with the middleware auth:sanctum return a 401 unauthroized.

.env file.

APP_URL=http://localhost.test
API_URL=http://api.localhost.test
SESSION_DOMAIN=.localhost.test
SANCTUM_STATEFUL_DOMAINS=.localhost.test

VueJS Axios

// Axios
import axios from 'axios';
axios.defaults.baseURL = 'http://api.localhost.test';
axios.defaults.withCredentials = true;
window.axios = axios;

CORS.php

    'paths' => ['api/*', 'profile/*', '/sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

Cookies in image attached.

I am also doing axios.get('/sanctum/csrf-cookie') before a login request.

I have been at this for a few hours now and feel I am missing something obvious, any help would be appreicated

#

Update: After all this it's due to Axios not sending X-Xsrf-Token header when a domain is different. Even though it's using subdomains and I assumed the ".localhost.test" would allow this

#

I had to manually add the header with an interceptor like below:

axios.interceptors.request.use((request) => {
    if(this.$cookies.get('XSRF-TOKEN')) {
        request.headers['x-xsrf-token'] = this.$cookies.get('XSRF-TOKEN')
    }
    return request;
});

#Laravel + SPA not authenticating