An example Svix integration built in Next.js (TypeScript and React)

Overview

Svix - Webhooks as a service

Website | Documentation | Community Slack

Example Svix Application

This is an example Next.js application showing how to use Svix both as a provider (sender) and a consumer (receiver) of webhooks.

While this application is writing in TypeScript and targets Next.js, it's a useful example for all other languages and frameworks, and shows how to structure an integration.

The application consists of a fake Signup form to let a customer "signup" to your application, a fake Dashboard that is meant to simulate your real application, and a Webhooks Portal to let your customers interact with the webhooks dashboard (add endpoints, see logs, etc).

What is Svix?

Svix makes it easy for developers to send webhooks. Developers make one API call, and Svix takes care of deliverability, retries, security, and more. For more information, please refer to the Svix homepage.

Documentation

You can find general usage documentation at https://docs.svix.com. For complete API documentation with code examples for each endpoint in all of our official client libraries head over to our API documentation site at https://api.svix.com.

Support & Community

To stay up-to-date with new features and improvements be sure to watch our repo!

Code structure

This codebase contains example code for a webhooks provider (Svix customer), a webhook consumer (Svix customer's customer), and some boilerplate Next.js code. It includes both the UI parts and the server API parts.

Provider

These files demonstrate how a Svix integration looks like from on provider's (Svix customer) side. This covers both the API and the UI parts.

API parts

This file implements a fake signup flow and demonstrates how to create a Svix Application for the customer (consumer) once they sign up to your application.

src/pages/api/provider/signup.ts

This file is meant to represent business logic on your end, and demonstrates how to send webhooks once events occur on the backend.

src/pages/api/provider/fake-server-action.ts

This file demonstrates how to securely give your customers access to the pre-built Application Portal. This works in tandem with the UI part below, and supplies it with the login magic link.

src/pages/api/provider/app-portal.ts

UI parts

This page shows how to embed the Svix application portal in your UI using the Svix React library. This page requires the above app portal API page.

src/pages/dashboard/webhooks.tsx

These two files aren't actually important. They are only needed for a functional example, and are there to simulate having a real application.

src/pages/dashboard/index.tsx
src/pages/signup.tsx

Consumer

This API endpoint demonstrates how a consumer of webhooks should verify the integrity of the webhooks using the Svix libraries:

src/pages/api/consumer/webhooks.ts

Running it locally

Clone the repository and install needed dependencies

git clone https://github.com/svix/svix-example
cd svix-example

# Install needed deps
npm i

Create a file called .env.local and set both the Svix token (get yours from dashboard.svix.com), and a placeholder webhook secret (we'll get the real one later):

# Provider config
SVIX_TOKEN=testsk_SInWH9Tx7tS4Him4re6Zawyx0vf7XlU.eu

# Consumer config
SVIX_WEBHOOK_SECRET="whsec_dont_worry_about_it_for_now"

Creating the needed event types

This example assumes your environment has two event types: invoice.created and invoice.deleted in your environment. To create them, please head to the event type page on the Svix dashboard. For more information about event types, please refer to the event types docs.

Verifying webhook signatures

The endpoints in the example will fail to verify the signatures because the webhook secret we set in the previous section is bad. In order to fix that, you would need to navigate to the Webhooks Portal tab, click on the endpoint you created, copy the webhook secret, paste it in .env.local, and restart your local server.

You might also like...
Example using Stripe with TypeScript and react-stripe-js
Example using Stripe with TypeScript and react-stripe-js

Example using Stripe with TypeScript and react-stripe-js This is a full-stack TypeScript example using: Frontend: Next.js and SWR react-stripe-js for

An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.
An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Next.js Storefront Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor. Saleor Check

An example of a Shop App built with Ionic and React
An example of a Shop App built with Ionic and React

An example of a Shop App built with Ionic and React

An example of a weather app UI built with Ionic and React
An example of a weather app UI built with Ionic and React

ionic-weather-app-ui An example of a weather app UI built with Ionic and React If you'd like to support, you can buy me a coffee ☕️ Included in this I

This is a multiplayer tic tac toe game built with Next.js and React and styled with Sass, used Recoil for state management also with a built-in chat system.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

we are going to make Next.js  API requests, return data from  FaunaDB and ImgBB  Chakra UI in Next.js, useInfiniteQuery, React-hook-form and much more...
we are going to make Next.js API requests, return data from FaunaDB and ImgBB Chakra UI in Next.js, useInfiniteQuery, React-hook-form and much more...

we are going to make Next.js API requests, return data from FaunaDB and ImgBB Chakra UI in Next.js, useInfiniteQuery, React-hook-form and much more...

An example of a travel style app built with Ionic React
An example of a travel style app built with Ionic React

ionic-react-travel-app An example of a travel style app built with Ionic React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Aplicação desenvolvida com Next-js, Strepi, FaunaDB, Next-Auth e Prismic no curso de React-Js da RocketSeat

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

An NFT Marketplace running on ethereum, binance smart chain, polygon, avalanche, fantom, optimism and arbitrum powered by 0x smart contracts. Made in React/Next JS, MUI and Typescript.
An NFT Marketplace running on ethereum, binance smart chain, polygon, avalanche, fantom, optimism and arbitrum powered by 0x smart contracts. Made in React/Next JS, MUI and Typescript.

An NFT Marketplace running on ethereum, binance smart chain, polygon, avalanche, fantom, optimism and arbitrum powered by 0x smart contracts. Made in React/Next JS, MUI and Typescript.

Owner
Svix
Webhooks as a service
Svix
Airbnb REACT.JS (Mapbox Integration - Next.js, Tailwind CSS, Maps)

Airbnb with REACT.JS! ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE This project was bootstrapped with Create React App. Available

Sashen Jayathilaka 37 Jan 7, 2023
React-realtime-example - Example Demonstrating React with Realtime API Backend

Getting Started with React Realtime Example App This project contains two folder

Haitham Sweilem 1 Jan 6, 2022
99acre-final-built - 99-acre Clone API Integration Create With React

Getting Started with Create React App This project was bootstrapped with Create

Piyush 1 Dec 2, 2022
A discord OAuth code example built-in react typescript

Discord Oauth2 Example The methods was taken from Dank Memer Rewrite Website but

UnusualAbsurd 15 Dec 30, 2022
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

OSLabs Beta 48 Apr 17, 2022
Lingo3D a web-first 3d game development library with React integration

What is Lingo3D? Lingo3D is a web-first 3d game development library with React integration. Playable Examples github codesandbox github codesandbox gi

null 2.2k Dec 27, 2022
Small integration project based on Benjamin Code's challenge / YT

Some integration challenge based on Benjamin Code's YT video Just for the sake o

null 3 Dec 15, 2022
Hotel-management-admin - Admin panel of Hotel management system with Firebase Realtime Database Integration

Admin Panel of Hotel Management System This project is part of the Course of Web

null 7 Dec 3, 2022
Electron integration for Remix ⚛💿

remix-electron Electron integration for Remix Setup Use degit to create a new project from the template. npx degit itsMapleLeaf/remix-electron/templat

Darius 198 Dec 30, 2022
Wrapper for NextJS image handling, optimised for Lambda w/ ApiGw integration.

NextJS Lambda Utils This is a project allowing to deploy Next applications (standalone options turned on) to AWS Lambda without hassle. This is an alt

Jan 75 Jan 8, 2023