RFC - add rawBody to NextApiRequest

[mikesol]

Feature request

As per @timneutkens request, this is an RFC to add rawBody to NextApiRequest.

Is your feature request related to a problem? Please describe.

Currently, there is no way to use both a body parser and recuperate the raw body of a request. This makes things like securing github webhooks, which rely on calculating a hash based on a raw body, difficult in NextJS.

Describe the solution you'd like

The solution I proposed in the PR above is to add a raw body field to NextApiRequest.

Describe alternatives you've considered

The alternative we're currently using is deploying a separate microservice to handle our github webhook. It could be that this feature is outside the scope of nextjs, in which case the separate microservice makes sense.

[Timer]

Would disabling the bodyParser be an appropriate action?

This allows you to read the body however you'd like.

[mikesol]

Hey! This definitely helps - we were hoping to use the body parser as the body is json, but what we can do as a temporary measure is disable the body parser and then parse the JSON ourselves. Thanks!

[eknowles]

I would add to this, I had the same issue with stripe webhooks.
My solution was to reverse the process as described here https://github.com/stripe/stripe-node#testing-webhook-signing
JSON.stringify(payload, null, 2).

[colllin]

I believed it. I tried it. It didn't work. This makes sense — it works in the test because we selected which string to sign (e.g. JSON.stringify(req.body, null, 2)), but doesn't work when we don't know exactly which json string was signed. Apparently, based on my testing, Stripe does not use JSON.stringify(req.body, null, 2) in their API. That also makes sense, because it would waste bandwidth with unnecessary characters.

[RahmanQureshi]

yeah it also doesn't work for me.

[saiichihashimoto]

The stringify solution did not work for me. Also, after disabling the bodyParser, req.body is undefined, how would one parse the body?

[alicescfernandes]

Hi. I stumbled upon the same issue and had to come up with a way to validate Github webhooks. I've taken the suggestion of @davecardwell and expanded so it would verify the signature of the github webhooks. You can take a look at the final piece of code on https://github.com/alicescfernandes/mapa-vacinacao-c19/blob/d693819d952df5519cef93d4ada531677172711e/pages/api/hooks.js#L22, but please note the environment variables that are used across this implementation

To achieve this, first i tried to use this middleware, and did managed to pass through the raw body data, but i kept getting the req.header is not a function error, so i just ended up using this gist along the code that @davecardwell put above.
It works like a charm

[devopsangel]

Hi. I stumbled upon the same issue and had to come up with a way to validate Github webhooks. I've taken the suggestion of @davecardwell and expanded so it would verify the signature of the github webhooks. You can take a look at the final piece of code on https://github.com/alicescfernandes/mapa-vacinacao-c19/blob/d693819d952df5519cef93d4ada531677172711e/pages/api/hooks.js#L22, but please note the environment variables that are used across this implementation

To achieve this, first i tried to use this middleware, and did managed to pass through the raw body data, but i kept getting the req.header is not a function error, so i just ended up using this gist along the code that @davecardwell put above.
It works like a charm

@alicescfernandes did u get both body and rawBody on req? I need both ... if I disable bodyParser: false it works however I am loosing req.body. Dunno what to do ...

[alicescfernandes]

@ devopsangel not exactly req.body but what i did was parse the rawBody

let json_string = decodeURIComponent(req.rawBody).split('payload=')[1];
let json = JSON.parse(json_string);

What you could do was something like

export default async function handler(req, res) {
	const data = await webhookPayloadParser(req);
	req.rawBody = data;
	
	let json_string = decodeURIComponent(req.rawBody).split('payload=')[1];
        let json = JSON.parse(json_string);
        req.body = json
        
        //run your code with the modified req

}

Then you would have the body as usual. This solution still needs some cleanup though, but it might work for you

[devopsangel]

@alicescfernandes thank you!

[Noitidart]

We should probably add how to get rawBody into the docs. I expected it to just be on req.body.

[jhookom]

Are there any future plans/alternate ways of maybe defining interceptors at the config for handling hashes/security on a per API call? I'm sure many are writing wrapper methods like we are to handle this, while requiring the developer to also disable body parsing each time to work properly.

https://github.com/jhookom/nextjs-oc-api/blob/main/pages/api/checkout/%5B...event%5D.ts#L6

https://github.com/jhookom/nextjs-oc-api/blob/main/lib/oc-catalyst-next.ts#L247

`

[robert113289]

disabling the parser means that reg.body will be undefined
we fixed this by adding in middleware like below. the line with .apply(text({ type: '/' })) is adding in the middleware that will set req.body to a string when the request comes in.

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { bodyParser: false });
  await app.listen(3000);
}

export class AppModule {
  configure(consumer: MiddlewareConsumer): void {
    consumer
      .apply(text({ type: '*/*' }))
      .forRoutes('/');
  }
}

[mcgraphix]

where is that text() function coming from?

[sacru2red]

this is nextjs issue page. your code is nestjs.

[wicka-aus]

Hi

pulling my hair out here trying to make this Stripe Webhook work.

Tried all of the above!

Secret is fine.
Signatures exist.

Cant pass JSON req into raw as I am still getting error -
"Webhook signature verification failed. No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?"

What am I missing here??

TIA

import { buffer } from 'micro';
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {

    console.log("Payment intent")
    console.log(process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET)

    const buf = await buffer(req);

    console.log(buf)

    let event

    if (process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET) {
        // Get the signature sent by Stripe
        const signature = req.headers['stripe-signature'];
        console.log(signature)
        try {
          event = stripe.webhooks.constructEvent(
            buf,
            signature,
            process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET
          );
        } catch (err) {
          console.log(`⚠️  Webhook signature verification failed.`, err.message);
          return res.status(400);
        }
      }

    console.log(event.type)

    // Handle the event
    switch (event.type) {
        case 'payment_intent.succeeded':
            console.log("yes")
            res.status(200);   
            break;

        default:
            console.log(`Unhandled event type ${event.type}`);
    }



}


export const config = {
    api: {
      bodyParser: false,
    },
  }
  

[dalmo3]

Check out #13405 (comment) below if you're still stuck on this.

[dalmo3]

Just stumbled upon this issue and got it to work with the raw-body package.

In my use case, verifying stripe webhooks, I don't need to parse the body. So I'm not sure this solves all use cases but since many others on this thread mentioned stripe I decided to share it.

import getRawBody from 'raw-body';

export default async function handler(req, res) {
    const rawBody = await getRawBody(req);

    const endpointSecret = ...;
    const signature = req.headers['stripe-signature'] ?? '';

    const event = stripe.webhooks.constructEvent(
      rawBody,
      signature,
      endpointSecret
    );
}  

export const config = {
  api: {
    bodyParser: false,
  },
};

[danielcamargo]

Look no further :D

[Koyamie]

Thank you.

[ValentineCodes]

Thanks. Finally I get a different error message. We keep googling

Have you encountered "Webhook Error: Timestamp outside the tolerance zone"?
If so, How'd you deal with it?

[italodeandra]

No need to use external library for it. Here is the getRawBody function:

async function getRawBody(readable: Readable): Promise<Buffer> {
  const chunks = [];
  for await (const chunk of readable) {
    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
  }
  return Buffer.concat(chunks);
}

[ondrabus]

If none of the above worked for you, you may try a solution from CodeDaily

Disable the bodyParser

export const config = {
  api: {
    bodyParser: false,
  },
};

Use micro by Vercel to get the body:

npm i micro

import { buffer } from "micro";
...
const body = (await buffer(req)).toString();

(I also need the parsed body, so after checking the signature, I do const data = JSON.parse(body))

[techygrrrl]

I also had this problem trying to parse the Stripe webhook in Next.js.

I resolved it by using body-parser's raw() as middleware—bodyParser.raw({type: 'application/json'}).

First I used a generic middleware function to help with applying middleware to individual routes:

// ./utils/middleware.utils.ts
export function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: Function) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: Object) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

I disabled Next.js's implementation of body-parser and implemented bodyParser.raw():

// ./pages/api/webhooks.ts

// this disables bodyParser
export const config = {
  api: {
    bodyParser: false,
  }
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  // use bodyParser.raw() as middleware instead
  await runMiddleware(req, res, bodyParser.raw({ type: 'application/json' }))

  try {
    const signature = req.headers['stripe-signature']

    const event = stripe.webhooks.constructEvent(req.body, signature, process.env.STRIPE_WEBHOOKS_SECRET)

    res.status(200).json({})

    // TODO: Handle event
  } catch (e) {
    return res.status(400).json({ error: 'Webhook error' })
  }    
}

Using bodyParser.raw({type: 'application/json'}) aligns with the Express.js example in Stripe's docs: https://stripe.com/docs/payments/checkout/fulfill-orders#verify-events-came-from-stripe

// Stripe example from their docs
app.post('/webhook', bodyParser.raw({type: 'application/json'}), (request, response) => {
  // 
})

[leerob]

#27702 (comment)

[tordsta]

Found this thread while working on stripe webhook. I'll add the solution i used, I found a simple way to solve this with the raw-body package. Don't know if is better than leerob's suggestion above, I suggest checking it out as well.

import { NextApiRequest, NextApiResponse } from "next";
import getRawBody from "raw-body";

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<string>
) {
  const rawBody = await getRawBody(req);
  const sig = req.headers["stripe-signature"];
  const endpointSecret = process.env.ASDF

  let event;

  try {
    event = stripeServer.webhooks.constructEvent(rawBody, sig, endpointSecret);
  } catch (err) {
    console.log(err);
    res.status(400).send(`Webhook Error: ${err}`);
    return;
  }
  // continue your code here

[ben519]

This worked for me, for handling a stripe webhook in a route handler.

export async function POST(request) {
  const rawBody = await request.text()
  // ...
}

No special configuration needed. (Next 13.5 app dir)

[ashxjs]

updated from [email protected] to [email protected] successfully worked ! thank's @ben519

[abdulbari149]

This isn't working for me

[siamahnaf]

not working!

[siamahnaf]

const WEBHOOK_SECRET = process.env.STRIPE_WEBHOOK_SECRET!

export const POST = async (req: NextRequest) => {
    const rawBody = await req.text();
    const sig = req.headers.get("stripe-signature")!;

    let event: Stripe.Event;

    try {
        event = Stripe.webhooks.constructEvent(rawBody, sig, WEBHOOK_SECRET);
    } catch (e) {
        return new Response("Webhook Error", { status: 400 });
    }

    return Response.json({ success: true });
}

It worked only on local listener. not on live link.

Error is-

Error: No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?
If a webhook request is being forwarded by a third-party tool, ensure that the exact request body, including JSON formatting and new line style, is preserved.

Learn more about webhook signing and explore webhook integration examples for various frameworks at https://docs.stripe.com/webhooks/signature

It is nextjs 15.3.3 and app router.