feat: automatically add csrf token in request headers

Fix #21

.changeset/healthy-coats-teach.md

@@ -0,0 +1,7 @@
+---
+'@tuyau/client': minor
+---
+
+Now the client will automatically add the CSRF token in the headers of each request when present in the cookies, exactly like Axios does.
+
+Related #21

packages/client/src/client.ts

@@ -67,6 +67,18 @@ function createProxy(options: {
   })
 }
 
+/**
+ * Automatically append the csrf token to the request headers
+ */
+function appendCsrfToken(request: Request) {
+  const xCsrfToken = globalThis.document?.cookie
+    .split('; ')
+    .find((row) => row.startsWith('XSRF-TOKEN='))
+    .split('=')[1]
+
+  request.headers.set('X-XSRF-TOKEN', decodeURIComponent(xCsrfToken))
+}
+
 /**
  * Create a new Tuyau client
  */
@@ -76,7 +88,15 @@ export function createTuyau<const Api extends ApiDefinition>(
   ? TuyauClient<Api['definition'], Api['routes']>
   : TuyauRpcClient<Api['definition']> {
   const baseUrl = options.baseUrl
-  const client = ky.create({ prefixUrl: baseUrl, throwHttpErrors: false, ...options })
+  const client = ky.create({
+    prefixUrl: baseUrl,
+    throwHttpErrors: false,
+    ...options,
+    hooks: {
+      ...options.hooks,
+      beforeRequest: [...(options.hooks?.beforeRequest || []), appendCsrfToken],
+    },
+  })
 
   return createProxy({ client, baseUrl, config: options })
 }

packages/client/tests/client.spec.ts

@@ -578,4 +578,29 @@ test.group('Client | Runtime', () => {
       },
     })
   })
+
+  test('automatically pickup cookie x-csrf-token', async () => {
+    // @ts-ignore osef
+    globalThis.document ||= {}
+    globalThis.document.cookie = 'XSRF-TOKEN=123'
+
+    const tuyau = createTuyau<{
+      routes: []
+      definition: {
+        users: {
+          $get: {
+            request: any
+            response: { 200: Simplify<Serialize<{ token: string }>> }
+          }
+        }
+      }
+    }>({ baseUrl: 'http://localhost:3333' })
+
+    nock('http://localhost:3333')
+      .get('/users')
+      .reply(200, { token: '123' })
+      .matchHeader('X-XSRF-TOKEN', '123')
+
+    await tuyau.users.$get()
+  })
 })