Can login or register only with Firefox using Sanctum API authentication (CSRF token mismatch)

Question

I am developing an SPA with Laravel 9, Vuejs 3 and Sanctum. I am newbie to vue and to Sanctum and I use the sanctum API authentication instead of the token authentication. At this stage I am in dev and run the embedded laravel server for laravel app and vite server for SPA.

Everything is going smoothly when I sign in and out using the Firefox browser. But when I use Google Chrome or other browser based upon chrome (Brave, Vivaldi, chromium) I cannot sign in nor register. I get a CSRF token mismatch response.

Here are my login an register methods from vuex 's store

actions: {
    async register({ commit }, form) {
        console.log("in register of index");
        await axiosClient.get("/sanctum/csrf-cookie");
        return axiosClient.post("/api/register", form).then(({ data }) => {
            console.log("data dans index");
            console.log(data);
            return data;
        });
    },

    async login({ commit }, user) {
        await axiosClient.get("/sanctum/csrf-cookie");
        return axiosClient
            .post("/api/login", user)
            .then(({ data }) => {
                commit("SET_USER", data);
                commit("SET_AUTHENTICATED", true);

                //commit("setAuth", true);
                return data;
            })
            .catch(({ response: { data } }) => {
                commit("SET_USER", {});
                commit("SET_AUTHENTICATED", false);
            });
    },

Could somebody help me making out what is wrong or missing?

Edited after Suben's response

I read from somebody that the trouble in Chrome could come from the domain being localhost instead of http://localhost in sanctum config.

Thus I did that and could manage to login with both browser. The trouble is that even with a satisfactory answer to login and the reception of the csrf-token now in both browser the store state is not set despite the answer in the .then function being a valid user object.

Moreover, doing 3 similar requests after that strange situation, the 3 of them being under the auth:sanctum middleware, the first failed with csrf-token mismatch, the second succeeded and the third failed also with csrf-token mismatch. Looking at the requests, they have exactly the same 3 cookies including one with the csrf-token.

Answer 1

My guess is, that RESTful APIs are stateless. That means, they do not worry about sessions. https://restfulapi.net/statelessness/

As per the REST (REpresentational “State” Transfer) architecture, the server does not store any state about the client session on the server-side. This restriction is called Statelessness.

When you login a user with Laravel's SPA authentication, then you ARE storing client session data on the server-side.

So you have two options:

1. You are moving the endpoint /api/login to web.php (logout too!) OR...

2. You are using the API token based login.

EDIT:

I had my problems at first too with Laravel Sanctums SPA authentication and Vue. There is a video, which goes through a lot of cases, that might help you aswell for the future (Configuration of cors.php and more): https://www.youtube.com/watch?v=It2by1dL50I