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

[amorey]

Hi Next.js Folks!

Recently I wanted to add CSRF protection to my Next.js app but I couldn't find any plugins that ran in middleware or that didn't require a custom Next.js server (e.g. csurf), so I created a new project to solve this problem:

https://github.com/amorey/edge-csrf

Edge-CSRF uses the same strategy and crypto logic from expressjs/csurf and pillarjs/csrf but it only uses edge runtime dependencies so it can be used in Next.js middleware. You can play around with it now but it needs a few more usability features to make it production-ready. In any case, I wanted to get some feedback before I put more effort into it. In particular,

• How are people currently adding CSRF protection to Next.js apps?
• Is middleware the right place for Next.js CSRF protection?
• Do you have any feedback on the API?

Here's a preview of how you would add it to your middleware:

// middleware.js

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

// initalize protection function
const csrfProtect = csrf();

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

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

  // check result
  if (csrfError) {
    const url = request.nextUrl.clone();
    url.pathname = '/api/csrf-invalid';
    return NextResponse.rewrite(url);
  }
    
  return response;
}

Let me know what you think!

[taylor-lindores-reeves]

Looks good to me! Please can you add typings for Typescript?

[amorey]

Great! I created a version with typings and published it as v0.1.3-ts. I'm new to Typescript so let me know if you have any suggestions on how to improve the implementation. The source code is here:
https://github.com/amorey/edge-csrf/tree/typescript

Here's an example of how to use it in middleware:

// middleware.ts

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

const csrfProtect = csrf()

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

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

  // check result
  if (csrfError) {
    const url = request.nextUrl.clone()
    url.pathname = '/api/csrf-invalid'
    return NextResponse.rewrite(url)
  }

  return response
}

[amorey]

I published a version with TypeScript (v0.2.1) and added a TypeScript example (see /example-ts):
https://github.com/amorey/edge-csrf/tree/0.2.1

[BrianMonks]

@amorey Have you been using this in production? Any issues so far?

[amorey]

I'm using it myself and it appears others are starting to as well. No issues so far.