A template demonstrating using Hookdeck as your outbound webhook infrastructure.
📽️ Watch the SupaHooks video walkthrough
Hookdeck is an event gateway: infrastructure that supports use cases, including receiving webhooks, sending webhooks, and connecting third-party services.
This template provides the basic building blocks for registering and managing webhook subscriptions with Hookdeck.
Specifically:
- Each webhook subscription is represented within Hookdeck as a Connection.
- A Connection has a Destination, representing the webhook endpoint.
- A Connection also has a Source, which a webhook publisher should make an authenticated request to publish an event.
Install the project dependencies:
npm iSignup for Hookdeck, and from within a project, get your API key and signing secret from Settings -> Secrets.
Signup for Supabase, create a new project, and get your Supabase URL and Anon Key.
Add the credentials for Hookdeck and Supabase to a .env.local file along with a PUBLISH_KEY, which should be a unique key that enables webhooks to be triggered:
# Get these values from Project Settings -> Secrets in the Hookdeck Dashboard
HOOKDECK_API_KEY=<your_hookdeck_project_api_key>
HOOKDECK_SIGNING_SECRET=<your_hookdeck_project_signing_secret>
# Generate a secure value for this key
# It is used to authenticate Supabase Database Webhook events
HOOKDECK_PRODUCT_UPDATE_WEBHOOK_KEY=<add_your_own_unique_key_here>
# Get these values from Project Settings -> Configuration -> API in the Supabase Dashboard
NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>
# Generate a secure value for this key
# It is used to authenticate the publishing of webhook events
PUBLISH_KEY=<add_your_own_unique_key_here>
Run the following to generate your database schema:
npm run setupIf you have not logged in with the Hookdeck CLI (a project dev dependency), you will do so when running the above command.
Copy the contents of supabase/schema.sql into the Supabase SQL editor and run it to create your schema.
Note: you may need to enable Database Webhooks for your project.
This includes creating a products table that can be used for testing using Supabase Database Webhooks as triggers for the SupaHooks outbound webhook notifications.
The project uses Server-Side Auth for Next.js. So, go to the Auth templates page in your dashboard. In the Confirm signup template, change {{ .ConfirmationURL }} to {{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup.
Run the development server:
npm run devIn another terminal window, create a local tunnel with the Hookdeck CLI:
npm run hookdeck:localTry out the app:
- Open http://localhost:3000.
- Sign up for an account.
- Create a webhook. Hint: Create a new Hookdeck Connection to test receiving webhooks.
- View the webhooks and send test payloads using the Test button.
- Use the table editor in Supabase and add rows to the
producttable to trigger Database Webhooks.