How to Fix "Stripe Webhook Signature Verification Failed" in Next.js App Router

If you are building with Next.js App Router and Stripe, you have almost certainly encountered the dreaded error: **`Webhook signature verification failed`**.

Even when your `STRIPE_WEBHOOK_SECRET` is completely correct, Stripe rejects incoming requests with an HTTP 400 Bad Request.

Why Does This Error Happen?

Stripe calculates an HMAC-SHA256 hash using the exact byte representation of the raw payload and compares it to the hash in the `Stripe-Signature` header.

If your web server parses the JSON body into an object and then re-stringifies it, the byte order and spacing change. Even a single added whitespace character results in a completely different hash digest.

The Fix in Next.js App Router (`app/api/webhooks/stripe/route.ts`)

In Next.js App Router, you should **never** use `req.json()` before validating signatures. Use `req.text()` to capture the untouched raw text string:

import { headers } from 'next/headers';
import { NextResponse } from 'next/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: '2023-10-16', });

export async function POST(req: Request) { const body = await req.text(); // <-- Must be raw text! const headerList = await headers(); const signature = headerList.get('stripe-signature');

if (!signature) { return NextResponse.json({ error: 'Missing signature' }, { status: 400 }); }

let event: Stripe.Event;

try { event = stripe.webhooks.constructEvent( body, signature, process.env.STRIPE_WEBHOOK_SECRET! ); } catch (err: any) { console.error('Webhook signature verification failed:', err.message); return NextResponse.json({ error: err.message }, { status: 400 }); }

// Handle verified events switch (event.type) { case 'checkout.session.completed': // Fulfill order break; default: console.log('Unhandled event type', event.type); }

return NextResponse.json({ received: true }, { status: 200 }); } ```

How HookLens Helps

HookLens automatically verifies and archives incoming payloads and signatures in real time. If a signature mismatch occurs, HookLens alerts your team immediately with exact diagnostic feedback.