Checking CSRF Tokens

How to check CSRF tokens in your Next.js Firebase API routes using the "withCsrf" HOC.

You can use the withCsrf HOC to ensure only users with a valid CSRF token can access your API routes.

The CSRF token must be sent in the x-csrf-token header of the request. If the token is not present, or if it's invalid, the request will be rejected.

pages/api/hello.ts

import { NextApiRequest, NextApiResponse } from "next";
import { withAuthedUser } from '~/core/middleware/with-authed-user';
import { withMethodsGuard } from '~/core/middleware/with-methods-guard';
import { withPipe } from '~/core/middleware/with-pipe';
import withCsrf from "./with-csrf";
function helloWorldHandler(
 req: NextApiRequest,
 res: NextApiResponse
) {
 res.status(200).json({ text: 'Hello' })
}
export default withPipe(
 withAuthedUser,
 withMethodsGuard(['POST']),
 withCsrf(),
 helloWorldHandler,
);

If you pass the CSRF token in different ways, you can pass a function to the withCsrf HOC to retrieve the token from the request.

pages/api/hello.ts

import { NextApiRequest, NextApiResponse } from "next";
import { withAuthedUser } from '~/core/middleware/with-authed-user';
import { withMethodsGuard } from '~/core/middleware/with-methods-guard';
import { withPipe } from '~/core/middleware/with-pipe';
import withCsrf from "./with-csrf";
async function helloWorldHandler(
 req: NextApiRequest,
 res: NextApiResponse
) {
 await withCsrf(req, () => req.body.csrfToken);
 res.status(200).json({ text: 'Hello' })
}
export default withPipe(
 withAuthedUser,
 withMethodsGuard(['POST']),
 helloWorldHandler,
);