CSRF Protection for your API Routes

By default, all POST, PUT, PATCH and DELETE requests to your API routes are protected against CSRF attacks. This means that you need to send a CSRF token with your requests, otherwise they will be rejected.

There are two exceptions to this rule:

1. When using Server Actions, protection is built-in and you don't need to worry about it.
2. When the route is under the api path. In this case, the CSRF protection is disabled, since we use this prefix for webhooks or external services that need to access your API.

When using requests against API Route Handlers, you need to pass the CSRF token with your requests, otherwise the middleware will reject them.

To retrieve the CSRF token, you can use the useGetCsrfToken function from @kit/shared/hooks:

'use client';
function MyComponent() {
  const csrfToken = useGetCsrfToken();
  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/my-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken,
      },
      body: JSON.stringify({ message: 'Hello, world!' }),
    });
  };
  // your component code
}