try getting CSRF working

craftcms · Oct 7, 2024 · a4d018d · a4d018d
1 parent c661f68
commit a4d018d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/frontend/components/postForm.vue b/frontend/components/postForm.vue
@@ -5,12 +5,14 @@ import { useLazyAsyncData, useRuntimeConfig } from '#imports'
 const config = useRuntimeConfig()
 const message = ref('')
 const title = ref('Post ')
+const craftUrl = config.public.CRAFT_URL
 
 const fetchCsrfToken = async () => {
   try {
-    const response = await fetch(`${config.public.baseURL}/api/csrf`)
+    const response = await fetch('${config.public.BASE_URL}/api/csrf')
     const data = await response.json()
     return data.csrfToken
+    console('CSRF acquiered')
   } catch (error) {
     console.error('Error fetching CSRF token:', error)
     return null
@@ -20,7 +22,7 @@ const fetchCsrfToken = async () => {
 const { data: csrfToken } = useLazyAsyncData('csrfToken', fetchCsrfToken)
 
 // Use the auto-generated composable for the createPost mutation
-const { mutate: createPost, loading, error } = useCreatePostMutation()
+//const { mutate: createPost, loading, error } = useGqlMutation(createPostMutation, { clientId: 'posts' })
 
 const submitPost = async () => {
   if (!csrfToken.value) {
@@ -49,10 +51,6 @@ const submitPost = async () => {
 
 <template>
   <form method="post" @submit.prevent="submitPost">
-    <div class="mb-6 mt-4">
-      <label for="title" class="font-bold">Title</label>
-      <input type="text" name="title" class="w-full px-6 py-4" required id="title" v-model="title">
-    </div>
     <div class="mb-6 mt-4">
       <label for="message" class="font-bold">Message</label>
       <textarea name="message" class="w-full px-6 py-4" required id="message" v-model="message"></textarea>

diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -4,11 +4,13 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ["@nuxtjs/tailwindcss", "nuxt-graphql-client"],
   runtimeConfig: {
+    CRAFT_URL: process.env.CRAFT_URL,
     public: {
       GQL_HOST: process.env.GQL_HOST,
       AUTH_HEADER: process.env.AUTH_HEADER,
       LIVE_PREVIEW: process.env.LIVE_PREVIEW === 'true',
       CRAFT_URL: process.env.CRAFT_URL,
+      BASE_URL: process.env.BASE_URL
     }
   },
   'graphql-client': {

diff --git a/frontend/server/api/csrf.js b/frontend/server/api/csrf.js
@@ -1,13 +1,24 @@
 export default defineEventHandler(async (event) => {
   const config = useRuntimeConfig()
-  const craftUrl = config.public.CRAFT_URL
+  const craftUrl = config.CRAFT_URL
+
+  if (!craftUrl) {
+    console.error('CRAFT_URL is not defined in server environment') // Add this line for debugging
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'CRAFT_URL is not defined in server environment',
+    })
+  }
 
   try {
-    const response = await fetch(`${craftUrl}/index.php?actions/users/get-csrf-token`, {
-      credentials: 'include',
+    console.log('Fetching from:', `${craftUrl}/actions/users/session-info`) // Add this line for debugging
+    const response = await fetch(`${craftUrl}/actions/users/session-info`, {
+      headers: {
+        'Accept': 'application/json',
+      },
     })
     const data = await response.json()
-    return { csrfToken: data.csrfToken }
+    return { csrfToken: data.csrfTokenValue }
   } catch (error) {
     console.error('Error fetching CSRF token:', error)
     throw createError({