ServicesAI AutomationPortfolioContactBlogStoreWhatsApp Me

How to Securely Verify Shopify Webhooks in a Next.js App

April 4, 2026

How to Securely Verify Shopify Webhooks in a Next.js App

If you are building a custom Shopify app or a headless storefront using Next.js in 2026, you are almost certainly using webhooks. Whether it’s to update your local database when an order is paid or to trigger a WhatsApp message when a fulfillment is created, webhooks are essential "tech plumbing."

However, there is a major security flaw I see in many junior-level implementations: failing to verify the webhook signature. Without verification, anyone who knows your endpoint URL can send fake data to your server, potentially creating fake orders or corrupting your data.

1. The Anatomy of a Shopify Webhook

Every webhook sent by Shopify includes a 

X-Shopify-Hmac-Sha256
header. This is a cryptographic signature created using your App’s "Shared Secret" and the raw body of the request. To secure your endpoint, you must recreate this signature on your server and compare it to the one Shopify sent.

2. The Next.js Challenge: Raw Body Access

In Next.js (especially the App Router), accessing the "raw" request body can be tricky because the framework often parses it as JSON automatically. To verify an HMAC, you must have the exact, un-parsed raw string.

Here is the high-level pattern for a secure Route Handler:

import { NextRequest, NextResponse } from 'next/server';
import crypto from 'crypto';

export async function POST(req: NextRequest) {
  const hmac = req.headers.get('x-shopify-hmac-sha256');
  const topic = req.headers.get('x-shopify-topic');
  const shop = req.headers.get('x-shopify-shop-domain');

  // 1. Get the raw body as a string
  const rawBody = await req.text();

  // 2. Recreate the HMAC using your secret
  const generatedHash = crypto
    .createHmac('sha256', process.env.SHOPIFY_API_SECRET!)
    .update(rawBody, 'utf8')
    .digest('base64');

  // 3. Securely compare the hashes
  if (generatedHash !== hmac) {
    return new NextResponse('Invalid signature', { status: 401 });
  }

  // 4. Process the validated data
  const data = JSON.parse(rawBody);
  console.log(`Received ${topic} from ${shop}`);

  return new NextResponse('OK', { status: 200 });
}

3. Why 
crypto.timingSafeEqual
Matters

In a production environment, you should actually use 

crypto.timingSafeEqual
for the comparison. This prevents "timing attacks" where an attacker guesses your secret by measuring how long it takes for your server to return a 401 error.

4. Environment Variables and Secret Rotation

Never hardcode your 

SHOPIFY_API_SECRET
. Use an 
.env
file. If you ever suspect your secret has been leaked, rotate it immediately in the Shopify Partner Dashboard and update your Next.js environment variables.

5. Testing with Ngrok

Since Shopify can't send webhooks to 

localhost
, you’ll need a tool like Ngrok or Cloudflare Tunnel to expose your Next.js dev server. Always test your verification logic in development before pushing to Vercel or your local SA host.

Conclusion

Security isn't an "add-on"; it’s a foundational requirement. By verifying your Shopify webhooks, you are protecting your business and your customers' data from malicious actors. It’s a few extra lines of code that could save you from a massive data disaster.

Need help securing your headless Shopify architecture? Let's audit your endpoints.

Frequently asked questions

Why is accessing the raw request body critical in Next.js?

Next.js often parses incoming request bodies automatically, usually as JSON. However, to verify a Shopify webhook's HMAC, you must have the exact, un-parsed raw string of the request body. Any alteration, even whitespace, will cause the generated hash to differ, leading to failed verification.

How does 
crypto.timingSafeEqual
enhance security over a simple 
!==
comparison?

Using 

crypto.timingSafeEqual
prevents timing attacks. A simple 
!==
can leak information: an attacker might observe subtle differences in response times for incorrect vs. partially correct hashes. 
timingSafeEqual
ensures the comparison takes a constant amount of time, regardless of where the hashes differ, thwarting such exploits.

What's the recommended way to handle the Shopify API secret in a Next.js app?

Always store your 

SHOPIFY_API_SECRET
in an environment variable, like in an 
.env
file. Never hardcode it directly in your codebase. If you ever suspect a compromise, immediately rotate the secret in your Shopify Partner Dashboard and update your environment variables across all deployments.

Why is Ngrok or Cloudflare Tunnel necessary for testing webhook verification locally?

Shopify cannot send webhooks to 

localhost
addresses, which is where your Next.js development server runs. Tools like Ngrok or Cloudflare Tunnel create a publicly accessible URL that tunnels requests to your local machine, allowing Shopify to reach your dev server and enabling you to test your verification logic properly.

Related Articles