API auth token fiasco

Hi Guys,

I'm working with laravel and sanctum.

Upon loging i created a token with sanctum, save it into the cookies. My idea was to retrieve it in the frontend with vue3-cookies, but then I was told it was a security issue. So my cookie is now Http-only attributed.

Now I have the problem that in my fetch requests I can obviously not use it in the header, in order to send it with each API request. Now I need the backend to be somehow instructed to fetch the auth_token from the cookies (request) and then tell sanctum to have a look at it.

Its complicated I know, me too I am frustrated.

Route::post('/save-word', [ChapterController::class, 'saveWord'])->middleware('auth:sanctum')->name('save-word');

This is how I want to protect the route.

And this is the request:

fetch(route('save-word'), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: JSON.stringify(dataToSend)
  })
    .then(response => response.json())
    .then(data => {
      console.log(data);
      // Handle the response data
    })
    .catch(error => {
      // Handle any errors
    });

    } else {
      pleaseLogIn.value = true;
      console.log('Please log in to save');
    }

Now, I don't even know if this included credential thing is still help full. I want him to send this auth_token (from the HTTP only attribute) to the backend and I don't know how to instruct the backend now to have a look in there and then come back to sanctum and have sanctum be happy.

Help appreciated.

Thanks