Skip to content

Commit

Permalink
Merge pull request #201 from kouts/docs/trpc-nuxt_instructions
Browse files Browse the repository at this point in the history
docs: added trpc-nuxt configuration section
  • Loading branch information
Baroshem committed Sep 5, 2023
2 parents 630f909 + 4333304 commit ea31a62
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions docs/content/1.getting-started/2.configuration.md
Expand Up @@ -183,3 +183,37 @@ export default defineNuxtConfig({
},
});
```

## Using with tRPC Nuxt

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";
import type { AppRouter } from "@/server/trpc/routers";

export default defineNuxtPlugin(() => {
const headers = useRequestHeaders();
const { csrf } = useCsrf();

const client = createTRPCNuxtClient<AppRouter>({
links: [
httpBatchLink({
// Headers are called on every request
headers() {
// Add CSRF token to request headers
return { ...headers, "csrf-token": csrf };
},
}),
],
});

return {
provide: {
client,
},
};
});
```

1 comment on commit ea31a62

@vercel
Copy link

@vercel vercel bot commented on ea31a62 Sep 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nuxt-security – ./

nuxt-security-git-main-baroshem.vercel.app
nuxt-security-baroshem.vercel.app
nuxt-security.vercel.app

Please sign in to comment.