From ada8dc82b4fb698fa37c8ebcfa869a41b7a4db3a Mon Sep 17 00:00:00 2001 From: kouts Date: Sun, 3 Sep 2023 16:13:59 +0300 Subject: [PATCH 1/2] docs: added trpc-nuxt configuration section --- .../1.getting-started/2.configuration.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/content/1.getting-started/2.configuration.md b/docs/content/1.getting-started/2.configuration.md index 76d3f7e6..e0e6ce27 100644 --- a/docs/content/1.getting-started/2.configuration.md +++ b/docs/content/1.getting-started/2.configuration.md @@ -183,3 +183,35 @@ export default defineNuxtConfig({ }, }); ``` + +## Using with tRPC Nuxt + +In order to make the [CSRF](/security/csrf) functionality of this module work with [trpc-nuxt](https://github.com/wobsoriano/trpc-nuxt), we have to add the CSRF token value into a `csrf-token` header inside the outgoing request headers in our `trpc` client. + +```ts +import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client"; +import type { AppRouter } from "@/server/trpc/routers"; + +export default defineNuxtPlugin(() => { + const headers = useRequestHeaders(); + const { csrf } = useCsrf(); + + const client = createTRPCNuxtClient({ + links: [ + httpBatchLink({ + // Headers are called on every request + headers() { + // Add CSRF token to request headers + return { ...headers, "csrf-token": csrf }; + }, + }), + ], + }); + + return { + provide: { + client, + }, + }; +}); +``` From 4333304bc6d3650b711bab390d552bb1f01f4de6 Mon Sep 17 00:00:00 2001 From: kouts Date: Tue, 5 Sep 2023 09:49:07 +0300 Subject: [PATCH 2/2] docs: added explanation section --- docs/content/1.getting-started/2.configuration.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/2.configuration.md b/docs/content/1.getting-started/2.configuration.md index e0e6ce27..bd259153 100644 --- a/docs/content/1.getting-started/2.configuration.md +++ b/docs/content/1.getting-started/2.configuration.md @@ -186,7 +186,9 @@ export default defineNuxtConfig({ ## Using with tRPC Nuxt -In order to make the [CSRF](/security/csrf) functionality of this module work with [trpc-nuxt](https://github.com/wobsoriano/trpc-nuxt), we have to add the CSRF token value into a `csrf-token` header inside the outgoing request headers in our `trpc` client. +TRPC [uses `POST` requests](https://trpc.io/docs/rpc#methods---type-mapping) for the mutation endpoints. Using the CSRF protection functionality of this module with [trpc-nuxt](https://github.com/wobsoriano/trpc-nuxt) will help you protect your mutation endpoints from CSRF. + +In order to make the [CSRF](/security/csrf) functionality of this module work with `trpc-nuxt`, we have to add the CSRF token value into a `csrf-token` header inside the outgoing request headers in our `trpc` client. ```ts import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";