Webhooks: key concepts

X-Webhook-Secret: your-secret-key
Authorization: Bearer your-token

const express = require('express');
const app = express();

// Verify webhook authenticity
function verifyWebhook(req) {
  const secret = req.headers['x-webhook-secret'];
  return secret === process.env.WEBHOOK_SECRET;
}

app.post('/webhooks/buttercms', express.json(), (req, res) => {
  // Verify authentication
  if (!verifyWebhook(req)) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  // Process webhook (respond quickly, process async if needed)
  const { data, webhook } = req.body;
  console.log(`Received ${webhook.event} for ${data.id}`);

  // Queue for async processing if needed
  processWebhookAsync(req.body);

  // Return 200 immediately
  res.status(200).json({ received: true });
});

const processedEvents = new Set();

async function handleWebhook(payload) {
  const eventKey = `${payload.webhook.event}-${payload.data.id}-${payload.data.updated}`;

  if (processedEvents.has(eventKey)) {
    console.log('Duplicate event, skipping');
    return;
  }

  processedEvents.add(eventKey);

  // Process the webhook
  await processEvent(payload);

  // Clean up old events periodically
  // (in production, use Redis or database with TTL)
}

# Expose local port 3000
ngrok http 3000

# Use the generated URL in ButterCMS webhook settings
# https://abc123.ngrok.io/webhooks/buttercms

app.post('/webhooks/buttercms', express.json(), (req, res) => {
  // Log full payload for debugging
  console.log('Webhook received:', JSON.stringify(req.body, null, 2));
  console.log('Headers:', req.headers);

  res.status(200).json({ received: true });
});