csrf doesn't work in the SSR

alnow0021 commented 1 year ago

Hi, when I visit the page for the first time (csrf cookie is not created yet) and try to fetch some data on the server side, then the module throws the error:

FetchError: (403 CSRF Token Mismatch (/api/data))

After refresh the page, the data are fetched correctly on the server side

example of code:

<template>
  <div>
    <div>
      backend: {{ data }}
    </div>
    <div>
      error: {{ error }}
    </div>
  </div>
</template>

<script lang="ts" setup>
const {data, error} = useCsrfFetch('/api/data', {
  method: 'POST',
  body: {
    param: 1
  }
})
</script>

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-security'],

  security: {
    csrf: true
  },
})

Morgbn commented 1 year ago

Hi, client-side rendering is not yet supported, I'm working on it for the next major release

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.3.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Morgbn / nuxt-csurf

csrf doesn't work in the SSR #9