Svix Blog
Published on

Using ngrok's new built-in Svix support

Authors
  • avatar
    Name
    Dylan Taylor
    Twitter

ngrok is a staple tool for many developers that creates tunnels between networks. It is often used to expose a port on localhost to the public Internet, but with ngrok Cloud Edge it can be also be used to secure traffic from the Internet to production cloud environments.

In this tutorial, we will learn how to verify Svix webhook requests using ngrok both for local development and on ngrok Cloud Edge.

This tutorial assumes you are already familiar with the Svix webhooks service and ngrok. If this is your first time using Svix, we recommend you first check out our quickstart documentation. We also recommend checking out ngrok's documentation on Webhook Verification.

Verify Svix webhooks locally with ngrok CLI

Install ngrok

If you haven't already, install the ngrok CLI.

Create a tunnel

First, create an endpoint in the Consumer App Portal, and copy the endpoint's Signing Signature. Then, run the following ngrok command on your computer's terminal, replacing SIGNATURE with the Signing Signature you just copied:

ngrok http 3000 --verify-webhook=svix --verify-webhook-secret=SIGNATURE

When you run the command, ngrok should generate URL that looks like https://d7f4c8296c55.ngrok.io. Copy that URL, and set it as the URL for the Svix endpoint you previously created in the Consumer App Portal.

Assuming you are running a service on port 3000, all Svix webhooks to your endpoint will now be forwarded to that local service by ngrok. And because you configured the --verify-webhook and --verify-webhook-secret options, ngrok will only forward verified Svix webhooks.

Verify Svix Webhooks on ngrok Cloud Edge

Create a Svix endpoint

Create an endpoint in the consumer application portal. You'll need the newly-created endpoint's Signing Signature later on.

Sign up for ngrok

Create an account on ngrok.com.

Create an ngrok Edge

Login to the ngrok dashboard. Using the menu on the left, expand "Cloud Edge" and choose "Edges." Create an edge by clicking the "New edge" button and choose "HTTPS Edge".

Configure ngrok Edge

On the Edge configuration page, find and click the "Webhooks Verification" menu item, and click "Begin Setup." Choose Svix as your webhook provider:

Selecting Svix as the Webhook Provider

And paste your endpoint's Signing Signature from Svix as the webhook signing key:

Entering your Svix endpoint's Signing Key