CSRF token mismatch

[LeonBuchner]

Hey, everything is working on localhost but as soon as I deploy my API and my Client to production it will throw the following error:

419 CSRF token mismatch

My Urls:

Client (NuxtJS): crm.domain.de API: api.domain.de

My nuxt.config.ts

  ssr: false,
  css: ['~/assets/css/main.css'],
  routeRules: {
    '/': { redirect: '/login'},
},
   modules: [
    'nuxt-sanctum-auth'
    // ...
  ],
  nuxtSanctumAuth: {
    token: false, // set true to use jwt-token auth instead of cookie. default is false
    baseUrl: 'https://api.domain.de',
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      login: '/login',
      logout: '/logout',
      user: '/api/user'
    },
    csrf: {
      headerKey: 'X-XSRF-TOKEN',
      cookieKey: 'XSRF-TOKEN',
      tokenCookieKey: 'nuxt-sanctum-auth-token'
    },
  },
  devtools: { enabled: true },
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },
})

My .env file:

FRONTEND_URL=https://crm.domain.de SESSION_DOMAIN=crm.domain.de,api.domain.de SANCTUM_STATEFUL_DOMAINS=crm.domain.de,api.domain.de

Any ideas how to fix it?

[kreejzak]

@theimerj any idea?

[theimerj]

@LeonBuchner on our projects we use it just like this:

SESSION_DOMAIN=.domain.com
SANCTUM_STATEFUL_DOMAINS=.domain.com

Also please double check that you set up everything correctly following the docs: https://laravel.com/docs/10.x/sanctum#installation