Laravel backend with sanctum and nuxt frontend

[lilac sorrel]

So i am trying to use the BFF pattern so i can cache my APIs in the frontend, but i have an issue APIs that require authorization, I can't find a way to fetch them. I always get unauthorized i tried several things. As you can see in the image cookies are set they are correct tried it from postman its fine but in server/api it doesnt work. Anyone managed to make it work? Thanks in advance

[hoary turtle]

Hi @lilac sorrel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, I can offer some insights into your issue with Laravel Sanctum and Nuxt frontend authorization. It seems you're encountering a common problem related to CSRF token mismatch and cookie handling in a cross-domain setup.

Here are a few key points and potential solutions:

1. CSRF Token Mismatch: As mentioned in the Stack Overflow post about Laravel Sanctum and Nuxt (https://stackoverflow.com/questions/78543475), you might be experiencing a CSRF token mismatch error. Make sure your Sanctum configuration includes the correct domains:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s%s',
    'admin.domain.de,localhost:2765,local.domain.de:2765',
    Sanctum::currentApplicationUrlWithPort(),
    env('FRONTEND_URL') ? ','.parse_url(env('FRONTEND_URL'), PHP_URL_HOST) : ''
))),

2. Cookie Handling: Ensure that your session and cookie configurations are correct. You might need to adjust the SESSION_DOMAIN and SESSION_SAME_SITE settings in your Laravel configuration.

3. HTTPS: As mentioned in the same Stack Overflow post, using HTTPS for both frontend and backend can help resolve some issues. Try adding "--https true" to your Nuxt dev script.

4. Passing Headers and Cookies: In Nuxt 3, you can use useRequestHeaders to pass headers, including cookies, to your API requests. Here's an example from the Nuxt documentation (https://nuxt.com/docs/api/composables/use-request-headers):

const { data } = await useFetch('/api/confidential', {
  headers: useRequestHeaders(['cookie'])
})

5. Proxy Cookies: If you're making server-side API calls, you might need to manually proxy cookies. The Nuxt documentation on passing headers and cookies (https://nuxt.com/docs/getting-started/data-fetching#passing-headers-and-cookies) provides an example of how to do this:

import { appendResponseHeader } from 'h3'
import type { H3Event } from 'h3'

export const fetchWithCookie = async (event: H3Event, url: string) => {
  const res = await $fetch.raw(url)
  const cookies = res.headers.getSetCookie()
  for (const cookie of cookies) {
    appendResponseHeader(event, 'set-cookie', cookie)
  }
  return res._data
}

6. Authentication Token Handling: Make sure you're correctly handling the authentication token. You might need to implement a solution to refresh the token if it expires, as suggested in this Stack Overflow answer about custom fetch in Nuxt (https://stackoverflow.com/questions/77270727).

If these solutions don't resolve your issue, you might need to provide more specific details about your setup and the exact error messages you're receiving. The BFF pattern with Nuxt and Laravel Sanctum can be tricky to set up correctly, especially when dealing with cross-domain requests and server-side rendering.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: