Introducing Webhook Workflows with Inngest & Svix

In this post we will dive into how the collaboration between Clerk, Inngest, and Svix enhances your authentication workflows using Clerk’s new Inngest webhook transformation template.

Building with Clerk Webhooks

Clerk webhooks (powered by Svix) allow you to receive event notifications from Clerk. When a user.created event is triggered, you may want to:

• Sync user data to your database.
• Kick off an account provisioning workflow.
• Start a trial in Stripe.
• Send a welcome email or start a drip campaign.
• Add the user to your product newsletter in Mailchimp.

Today, with Clerk’s new Inngest webhook transformation template, you can easily use Clerk webhook events to trigger Inngest functions.

Inngest is a reliability layer for your application. Using it comes with a few key benefits such as managing concurrency, automatic retries, parallel execution, complex workflows, or task scheduling. This approach eliminates concerns about operating and scaling webhooks or error handling.

See it in Action

The code below features the inngest.createFunction method, which inserts a new user into the database. It will be triggered whenever a clerk/user.created event occurs.

const syncUser = inngest.createFunction(
  { id: 'sync-user-from-clerk' },
  { event: 'clerk/user.created' }, // ← This is the function's triggering event
  async ({ event }) => {
    const user = event.data // The event payload's data will be the Clerk User json object
    const { id, first_name, last_name } = user
    const email = user.email_addresses.find((e) => e.id === user.primary_email_address_id).email
    await database.users.insert({ id, email, first_name, last_name })
  },
)

You can also have multiple functions react to the same event. The code below uses step.sleep to send a welcome email, then wait for three days, then follow up with a message offering a free trial:

const sendOnboardingEmails = inngest.createFunction(
  { id: 'onboarding-emails' },
  { event: 'clerk/user.created' },
  async ({ event, step }) => {
    // ← step is available in the handler's arguments
    const { user } = event.data
    const { first_name } = user
    const email = user.email_addresses.find((e) => e.id === user.primary_email_address_id).email

    await step.run('welcome-email', async () => {
      await emails.sendWelcomeEmail({ email, first_name })
    })

    // wait 3 days before second email
    await step.sleep('wait-3-days', '3 days')

    await step.run('trial-offer-email', async () => {
      await emails.sendTrialOfferEmail({ email, first_name })
    })
  },
)

To learn how to integrate Inngest into your workflows, check out Clerk's official integration guide or refer to Inngest documentation.

Onward and Upward

As we continue to relentlessly improve the Developer Experience of our products, we are excited to see what developers build using the Inngest integration.