Composable for checking Laravel Sanctum's CSRF token in Nuxt 3

I'm working on a Nuxt 3 app with Laravel 9 as API with Sanctum and Fortify.

I wrote a composable to check the response to the Laravel Sanctum's CSRF token HTTP route ('/sanctum/csrf-cookie') and I'm trying to check if it's working by logging via console.log() the composable's state, but it always shows an empty Proxy received as error.

Please help, what am I doing wrong?

Here is what I've done so far:

The composable: auth.ts :

export function useCsrfToken() {
  const baseURL = useRuntimeConfig().public.LARAVEL_BASE_URL
  const options = {
    baseURL,
    credentials: 'include',
    headers: {
      Accept: 'application/json',
    } as HeadersInit,
    method: 'GET',
  }

  const state = ref({
    status: '',
    error: {},
  })

  async function getCsrfToken() {
    state.value.error = {}
    state.value.status = ''
    await $fetch('/sanctum/csrf-cookie', options)
      .then(() => (state.value.status = 'ok'))
      .catch((error) => {
        console.log('error from useCsrfToken', error)

        state.value.error = { error }
      })
  }

  getCsrfToken()

  return { state }
}

The login Nuxt page, where I'm using the above composable :

<script setup>
definePageMeta({
  layout: false,
})

const submit = () => {
  form.processing = true
  const { state } = useCsrfToken()

  console.log('error from login', state.value.error)
  // console.log('status from login', status)
}

const form = reactive({
  email: '',
  password: '',
  remember: false,
  processing: false,
  errors: {},
})
</script>

<template>
  <div>
    <!-- <TheTwoFactorChallenge v-if="verification" @2fapassed="submit" /> -->
    <NuxtLayout name="auth">
      <template #title>
        <p class="card-header-title">Inicie Sesión</p>
      </template>

      <form novalidate @submit.prevent="submit">
        <div class="field">
          <label class="label" for="email">Usuario</label>
          <div class="control has-icons-left has-icons-right">
            <AppInput
              type="email"
              id="email"
              v-model="form.email"
              :error="form.errors?.email"
              autocomplete="email"
              required
            />
            <AppIconLeft icon="fa-solid fa-envelope" />
            <AppIconError v-if="form.errors?.email" class="is-right" />
          </div>
          <AppHelpError :errors="form.errors?.email" />
        </div>

        <div class="field">
          <label class="label" for="password">Contraseña</label>
          <div class="control has-icons-left has-icons-right">
            <AppInput
              type="password"
              id="password"
              v-model="form.password"
              :error="form.errors?.password"
              autocomplete="new-password"
              required
            />
            <AppIconLeft icon="fa-solid fa-lock" />
            <AppIconError v-if="form.errors?.password" class="is-right" />
          </div>
          <AppHelpError :errors="form.errors?.password" />
        </div>

        <div class="field">
          <div class="control">
            <AppSwitch
              id="remember"
              v-model:checked="form.remember"
              class="is-small is-link"
            />
            <label for="remember">Recuérdame</label>
          </div>
        </div>

        <div class="is-flex is-justify-content-flex-end mb-4">
          <NuxtLink to="#" class="has-text-link">
            ¿Olvidó su contraseña?
          </NuxtLink>
        </div>

        <div class="field">
          <div class="control">
            <AppButton
              class="is-link is-fullwidth"
              type="submit"
              :is-loading="form.processing"
              >Entrar</AppButton
            >
          </div>
        </div>
      </form>
    </NuxtLayout>
  </div>
</template>

And here are the outputs :

Since Nuxt3 provides a Server function which could use as an API, it could be easily confused with Laravel.

You may need to add a proxy_pass (if you use Nginx) to distinguish between Nuxt and Laravel requests in order to share the same origin between Nuxt and Laravel (to avoid wasting a second on Same-Origin-Policy )

For example:

http://example.com/ // -> nuxt
http://example.com/api/ // -> laravel

(Since you said you are using Docker, I'm going to assume you're using laravel sail)

• First, add a domain (for example http://example.test) for your site instead of http://localhost.
• Custom the /sanctum/csrf-cookie route to /api/sanctum/csrf-cookie (here you can see how to change laravel sanctum csrf cookie route)
• Add a proxy_pass for http://example.test/api/* in Nginx configs:

location ~* ^/(api|broadcasting|storage)/ {
    proxy_pass http://localhost:8080; // where your laravel running
}

But, in my view, the SSR Nuxt should be considered as a client just equal to an Android app or IOS app, because the frontend and the backend are entire two different projects compared with the previous time when putting your frontend code and backend code in the same project.

So, you may auth the web just like auth the Android app, instead of booting the CRSF protection.

And here is a full example of Nuxt3 + Laravel, which is using Laravel Sanctum and also SSR with authorizations. 👉 Laravel + SSR Nuxt3 with authorizations