verify webhook signature

[good-idea]

No description provided.

[mutewinter]

Implemented signature verification for my Next.js project by wrapping the webhooks in another function. Here's the code for reference:

const webhooks = createNextWebhooks({
  secrets: {
    sanity: {
      projectId: NEXT_PUBLIC_SANITY_PROJECT_ID,
      dataset: NEXT_PUBLIC_SANITY_DATASET,
      authToken: SANITY_READ_WRITE_AUTH_TOKEN,
    },
    shopify: {
      shopName: NEXT_PUBLIC_SHOPIFY_SHOP_ID,
      accessToken: NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
    },
  },
});

function verifyShopifyWebhook(
  func: (request: NextApiRequest, response: NextApiResponse) => void,
) {
  return async (request: NextApiRequest, response: NextApiResponse) => {
    if (!SHOPIFY_WEBHOOK_SHARED_SECRET) {
      console.error(
        'Missing environment variable SHOPIFY_WEBHOOK_SHARED_SECRET',
      );
      // Still sending 200 to avoid Shopify disabling our hook
      return response.status(200).end();
    }

    const hmac =
      request.headers['x-shopify-hmac-sha256'] ||
      request.headers['X-Shopify-Hmac-Sha256'];

    const body = await rawBody(request);

    // Create a hash using the body and our key
    const hash = crypto
      .createHmac('sha256', SHOPIFY_WEBHOOK_SHARED_SECRET)
      .update(body)
      .digest('base64');

    if (hash === hmac) {
      // Sane Shopify expects a parsed body
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
      request.body = JSON.parse(body.toString('utf8'));
      return func(request, response);
    }

    console.error('Mismatched Shopify webhook signature');
    // Still sending 200 to avoid Shopify disabling our hook
    return response.status(200).end();
  };
}

const onProductUpdate = verifyShopifyWebhook(webhooks.onProductUpdate);
const onProductDelete = verifyShopifyWebhook(webhooks.onProductDelete);
const onCollectionUpdate = verifyShopifyWebhook(webhooks.onCollectionUpdate);
const onCollectionDelete = verifyShopifyWebhook(webhooks.onCollectionDelete);

export {
  onProductUpdate,
  onProductDelete,
  onCollectionDelete,
  onCollectionUpdate,
};

In Use

import { onProductUpdate } from '../../utils/webhooks';

// We need the raw body to construct a valid signature comparison
export const config = { api: { bodyParser: false } };

export default onProductUpdate;

Bonus TypeScript Types

declare module '@sane-shopify/server' {
  import type { NextApiRequest, NextApiResponse } from 'next';

  interface CreateNextWebhooksConfig {
    secrets: {
      sanity: {
        projectId: string;
        dataset: string;
        authToken: string;
      };
      shopify: {
        shopName: string;
        accessToken: string;
      };
    };
    onError?: (error: Error) => void;
  }

  interface Webhooks {
    onCollectionUpdate: (
      request: NextApiRequest,
      response: NextApiResponse,
    ) => void;
    onCollectionDelete: (
      request: NextApiRequest,
      response: NextApiResponse,
    ) => void;
    onProductUpdate: (
      request: NextApiRequest,
      response: NextApiResponse,
    ) => void;
    onProductDelete: (
      request: NextApiRequest,
      response: NextApiResponse,
    ) => void;
    onOrderCreate: (request: NextApiRequest, response: NextApiResponse) => void;
  }

  export function createNextWebhooks(
    config: CreateNextWebhooksConfig,
  ): Webhooks;
}