How does one share cookies on localhost with different ports

[MarcoTroost]

Hi!,

First of all, thank you for your great work on this module!

My Nuxt 3 frontend runs on localhost:3000. My Laravel 11 backend runs on localhost:8000 (by means of php artisan serve).

I cannot use the XSRF-TOKEN cookie in my frontend.

const handleVote = async (id: number) => {
  await $fetch(`${config.public.apiBase}/sanctum/csrf-cookie`, {
    credentials: 'include',
  })

  const xsrfToken = useCookie('XSRF-TOKEN').value

  console.log(xsrfToken)
});

"xsrfToken" is undefined, since the response i get is empty.

The set-cookie command seems to be executed though:

How can i get the XSRF-TOKEN cookie in localhost:3000 ?

kind regards,

Marco Troost

[manchenkoff]

Hey @MarcoTroost, could you please provide sanctum config from your nuxt.config.ts file?

Are you trying to get the token using the sanctum client or do you just want to get it manually in your code with plain $fetch?

I also noticed that in session domain you have localhost:8000 instead of regular localhost, did you specify that in the config on Laravel side (e.g. in .env file)?

[MarcoTroost]

Hi Artem,

Thank you for the quick reply. I want users to be able to vote on certain topics. I therefore need to be able to post from the frontend to the Laravel backend.

I do not need the token for login purposes.

Here are my configs:

.env (frontend)

NUXT_BASE_URL="http://localhost:3000"
NUXT_PUBLIC_API_BASE="http://localhost:8000/disco"

NUXT_SITE_ENV=preview

Nuxt.config.ts:

export default defineNuxtConfig({

  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'https://api.trauminfo.de/disco',
    },
  },

  modules: [
    'nuxt-auth-sanctum'
  ],

   sanctum: {
     baseUrl: process.env.NUXT_PUBLIC_API_BASE || 'https://api.trauminfo.de/disco', // Laravel API
     endpoints: {
       csrf: {
        url: '/sanctum/csrf-cookie',
       },
       user: {
         url: '/user',
       }
     }
  }, 
});

.env (backend)

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:SYlo/9LcvyqgoIEX7GxlJ2V3lYdFD/+V7Rnniy8k+eE=
APP_DEBUG=true
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

SESSION_DOMAIN=localhost:8000
SANCTUM_STATEFUL_DOMAINS=localhost:3000

...

Cors.php:

<?php
return [
    'paths' => ['api/*', 'disco/*', '/disco/sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['Content-Type', 'X-Requested-With', 'Authorization', 'X-XSRF-TOKEN','X-CSRF-TOKEN'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

[manchenkoff]

@MarcoTroost while you work locally, you should not put SESSION_DOMAIN=localhost:8000 in your env config since it is not a domain but the full address, it should be either localhost or empty (better be empty to not interfere with some cases like 127.0.0.1), so Laravel will use localhost by default for cookies. I also mentioned that in the module docs, you can check the use case for SPA Cookie.

Regarding requests against your API, there is a composable provided by the module plugin that you can use instead of plain $fetch to call Laravel with any method including POST, please check the docs - useSanctumClient