Edge-CSRF: CSRF protection for Next.js that runs in middleware (edge runtime)

[amorey]

Hi Everyone,

I just wanted to let you know about a utility I made that adds CSRF protection to Next.js apps and runs in middleware (edge runtime):
https://github.com/amorey/edge-csrf

Because it runs in middleware, CSRF checks and token generation can happen on the edge, close to your users. I've also tried to make it as easy to use as possible. Here's how you enable it in middleware:

// middleware.ts

import csrf from 'edge-csrf';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// initalize protection function
const csrfProtect = csrf({
  cookie: {
    secure: process.env.NODE_ENV === 'production',
  },
});

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // csrf protection
  const csrfError = await csrfProtect(request, response);

  // check result
  if (csrfError) {
      return new NextResponse('invalid csrf token', { status: 403 });
  }
    
  return response;
}

Once it's enabled in middleware you can get the CSRF token from the HTTP headers in your components:

// app/page.tsx

import { headers } from 'next/headers';

export default function Page() {
  const csrfToken = headers().get('X-CSRF-Token') || 'missing';

  return (
    <form action="/api/form-handler" method="post">
      <input type="hidden" value={csrfToken}>
      <input type="text" name="my-input">
      <input type="submit">
    </form>
  );
}

Try it out and let me know what you think!

Andres