Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move webhooks section in sidenav #1730

Merged
merged 2 commits into from
Nov 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/authentication/configuration/email-sms-templates.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ The following operations are available for an email template:

The following settings can be changed per email template:

- **Delivered by Clerk**: Clerk will deliver your emails using its own Email Service Provider (ESP), which is currently [SendGrid](https://sendgrid.com/). However, if you wish to handle delivery of emails on your own, then you can toggle this setting off. This means that Clerk will no longer be sending this particular email and in order to deliver it yourself, you will need to listen to the `emails.created` [webhook](/docs/integrations/webhooks/overview) and extract the necessary info from the event payload.
- **Delivered by Clerk**: Clerk will deliver your emails using its own Email Service Provider (ESP), which is currently [SendGrid](https://sendgrid.com/). However, if you wish to handle delivery of emails on your own, then you can toggle this setting off. This means that Clerk will no longer be sending this particular email and in order to deliver it yourself, you will need to listen to the `emails.created` [webhook](/docs/webhooks/overview) and extract the necessary info from the event payload.
- **Name**: a name for the template on the template listing page. It does not affect the outgoing email in any way.
- **From**: the email address that will be used as the **From** address in the email header. The format is `<local part>@<your-domain>`. You can change the local part to a custom value. If no value is provided, it defaults `noreply`.
- **Reply-To**: the email address that will be used as the **Reply-To** address in the email header. This is useful if you want to direct replies to a different email address than the one used in the **From** field. The format is `<local part>@<your-domain>`. You can change the local part to a custom value. If no value is provided, the **Reply-To** header will be omitted.
Expand Down Expand Up @@ -113,7 +113,7 @@ To access the SMS templates:

Clerk will deliver your SMS messages using its own SMS Gateway. However, if you wish to handle SMS delivery on your own, then you can toggle **Delivered by Clerk** off.

This means that Clerk will no longer be sending this particular SMS and in order to deliver it yourself, you will need to listen to the `sms.created` [webhook](/docs/integrations/webhooks/overview) and extract the necessary info from the event payload.
This means that Clerk will no longer be sending this particular SMS and in order to deliver it yourself, you will need to listen to the `sms.created` [webhook](/docs/webhooks/overview) and extract the necessary info from the event payload.

> [!NOTE]
> Remember, this is a per-template setting and will not be applied to other templates.
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/authjs-migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ This guide shows how to migrate an application using Auth.js (formerly NextAuth.

This walkthrough will help you move user data from your existing database to Clerk.

To retain the user data in your database for easy querying, see the [guide on data synchronization with webhooks](/docs/integrations/webhooks/sync-data).
To retain the user data in your database for easy querying, see the [guide on data synchronization with webhooks](/docs/webhooks/sync-data).

1. Clone `github.com/clerk/migration-script`

Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/databases/firebase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ Integrating Firebase with Clerk gives you the benefits of using Firebase's featu
## Next steps

<Cards>
- [Use webhooks to sync Firebase data with Clerk](/docs/integrations/webhooks/sync-data)
- [Use webhooks to sync Firebase data with Clerk](/docs/webhooks/sync-data)
- Learn how to sync Firebase auth or Firestore data with Clerk data using webhooks.

---
Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/databases/supabase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ RLS works by validating database queries according to the restrictions defined i
This guide will have you create a new table in your [Supabase project](https://supabase.com/dashboard/projects), but you can apply these concepts to your existing tables as well.

> [!TIP]
> This integration restricts what data authenticated users can access in the database, but does not synchronize user records between Clerk and Supabase. To send additional data from Clerk to your Supabase database, use [webhooks](/docs/integrations/webhooks/overview).
> This integration restricts what data authenticated users can access in the database, but does not synchronize user records between Clerk and Supabase. To send additional data from Clerk to your Supabase database, use [webhooks](/docs/webhooks/overview).

## Choose your own adventure

Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ description: Learn about the available integrations with Clerk.

---

- [Inngest](/docs/integrations/webhooks/inngest)
- [Inngest](/docs/webhooks/inngest)
- Use events from Clerk to trigger functions defined in your codebase with Inngest. Easily handle data synchronization, onboarding campaigns, or billing workflows in code.
- ![](data:image/webp;base64,UklGRh4EAABXRUJQVlA4WAoAAAAQAAAAPwAAPwAAQUxQSCsBAAABgGPbttrmrd+p+6VqlV5/GqHKy2WwM7ZsV2G1nkmYORpBmJmZGV5I8J8pVETEBIBcT9/9veFhkKFMGPilITKD69dorvMM8K6g5XUvNdGHtg1BiSfRyfukSoV5V9DhdS8N0YoS+4Q8JY1y79OqJPcpSl/3yBDdSNIQDjGunyLRa111xD2BhNc9zJY2gcQNYY1FkP5lklmJYEZ6LainmXGvmNVghnrNajMl+e2T+D+sJlPKzZTnzNjjZuDLjBBYZOGjDAgxKwDaCLUhFWyXzVGaLQMned0lvtI4TXFw2NVBo1UDiWXL8raLQC5vvpSkM5DMQOuQ0aIByfI1pxaqGRBVw47cpDgQ1jrstWhAvHza2kI10FfqLNykFMhI19BXfS7IVFbUd3PTVwRyAQBWUDggzAIAAFAPAJ0BKkAAQAA+bSyQRb+ioZgLBn34BsS2NhOjmcG42OcWxB5zzRbd/dPwjyhVt/Ej6ZfmA/Yb9gPeH6QD+8ei56lfoAeWZ+tfwVfuR+2HtMtEDSBM1kzDpLxf/u+uW/v4piORnc5jdBlHICkQIbU3Q9Rw1Zv+uCAbrW6IG1df/8EAAP7qGh/9l4pVVBFh+rUY1hy2oGoQV6VGbRHBB2iO0tH/tfH1yRzR3C0HtWw52pZ0QY3Z/vV9q0pqPxK/4/lkfqd2FNP7c15rLCwA8JOvCrqUwq06o83BkZP1MFUdnpr2V8QfIhwktF8gJKTzekh0l7+/J3/8Yi1u5rwesYJlTUDJaZxeZ0/QyaSj7PbEmRwoKia7uNMXgW9sCo+LA7cRYi69D1+QB3yCR8SxVeuahEJAN3IAVOiUwzBeniXMzc5T8B9e5IRgPrynbpSBzCUDWb473yJev7dzLbFtmzFn/234VUeDew/CTEy7fXMomgYBxRubyPU2Os+UNxy8j9+kG1qXNRuPnoCCFf7eempoK9f64lDFekVGNfaP0FMN0yI9fXJBMR6LzLIQ284yBv9SZqJR9yHk9vnwcr+2bcZY+fYRnwm7ed7tJWvWNG/aOZm4ixfPARv8bEWp8DBlrSSNM0fP8eK9AS6LrhQR4cIVsezbBjAAlJ0xwriFeai5RHah1NpMj1I1V6MvEtL8cyoBRz1k492Yo9Nkejreud7UO/yuLM4D1p4btGlGKDTRLgeZPVj9+RDUFTMl8CYLf9V/Wz/4xh/8jFCrLaD3wHlLZ+Wb8PD58Tmzvmvw1gSFiLOt6tdsX0DR5Nov5r6abhM8je+r0W5wX2KGXS/q+a6XpKSVE+mm49uS4cjDWPste4EBGZhmVfnH62FO6za+oovV0UW4rF8TTGp60bC3uj7wnfm6xh7FRW+BBTpGQRbGJMgbchuEdsEhgAAA)

Expand Down
55 changes: 28 additions & 27 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -800,6 +800,34 @@
}
]
]
},
{
"title": "Webhooks",
"collapse": true,
"items": [
[
{
"title": "Overview",
"href": "/docs/webhooks/overview"
},
{
"title": "Sync Clerk data to your application with webhooks",
"href": "/docs/webhooks/sync-data"
},
{
"title": "Handling webhooks with Inngest",
"href": "/docs/webhooks/inngest"
},
{
"title": "Send webhooks to Loops",
"href": "/docs/webhooks/loops"
},
{
"title": "Debug your webhooks",
"href": "/docs/webhooks/debug-your-webhooks"
}
]
]
}
]
]
Expand Down Expand Up @@ -1413,33 +1441,6 @@
"title": "Overview",
"href": "/docs/integrations/overview"
},
{
"title": "Webhooks",
"items": [
[
{
"title": "Overview",
"href": "/docs/integrations/webhooks/overview"
},
{
"title": "Sync Clerk data to your application with webhooks",
"href": "/docs/integrations/webhooks/sync-data"
},
{
"title": "Handling webhooks with Inngest",
"href": "/docs/integrations/webhooks/inngest"
},
{
"title": "Send webhooks to Loops",
"href": "/docs/integrations/webhooks/loops"
},
{
"title": "Debug your webhooks",
"href": "/docs/integrations/webhooks/debug-your-webhooks"
}
]
]
},
{
"title": "Databases",
"items": [
Expand Down
2 changes: 1 addition & 1 deletion docs/troubleshooting/email-deliverability.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,6 @@ If you would like to handle the delivery of these messages yourself, you can opt
> [!NOTE]
> There is currently no way to disable Clerk's email and SMS delivery for all templates at once.

Once Clerk delivery is disabled, in order to handle the delivery of a email or SMS message, you will need to enable [webhooks](/docs/integrations/webhooks/overview) and listen for the `email.created` or `sms.created` events, respectively.
Once Clerk delivery is disabled, in order to handle the delivery of a email or SMS message, you will need to enable [webhooks](/docs/webhooks/overview) and listen for the `email.created` or `sms.created` events, respectively.

The event contains both the original message that Clerk would send, in case you would like to use it as-is, or the necessary metadata for you to create messages with your own copywriting. For instance, for a verification code email, the `email.created` event will contain the `otp_code`, which you can then use in your own messaging.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Developing with webhooks can be a new experience for developers. It can be hard

## Webhooks and local development

When you or a user of your application performs certain actions, a webhook can be triggered. You can see the full list of [webhook events](/docs/integrations/webhooks/overview#supported-webhook-events) for a list of the actions that could result in a Webhook. Depending on the events subscribed to in the [Webhook section of the Clerk Dashboard](https://dashboard.clerk.com/last-active?path=webhooks), a webhook event will be triggered and sent to the specified endpoint in your application.
When you or a user of your application performs certain actions, a webhook can be triggered. You can see the full list of [webhook events](/docs/webhooks/overview#supported-webhook-events) for a list of the actions that could result in a Webhook. Depending on the events subscribed to in the [Webhook section of the Clerk Dashboard](https://dashboard.clerk.com/last-active?path=webhooks), a webhook event will be triggered and sent to the specified endpoint in your application.

When you are developing on your localhost, your application is not internet facing and can't receive the webhook request. You will need to use a tool that creates a tunnel from the internet to your localhost. These tools will provide temporary or permanent URLs depending on the tool and the plan you subscribe to. Popular tools include `ngrok`, `localtunnel` and `Cloudflare Tunnel`.

Expand Down Expand Up @@ -61,7 +61,7 @@ If you're having trouble with your webhook, you can create a basic response and
If you see the `{"message":"The route is working"}`, then the basic Route Handler is working and ready to build on.

> [!IMPORTANT]
> Your webhook needs to return a success code like `200` or `201` when it has been successfully handled. This will mark the webhook as successful in the Dashboard and prevent [retries](/docs/integrations/webhooks/overview#retry).
> Your webhook needs to return a success code like `200` or `201` when it has been successfully handled. This will mark the webhook as successful in the Dashboard and prevent [retries](/docs/webhooks/overview#retry).

## Check your configuration in the Clerk Dashboard

Expand Down Expand Up @@ -89,13 +89,13 @@ The following table has some of the common response codes you might see and what
| - | - |
| `400` | Usually indicates the verification failed, but could be caused by other issues. |
| `401` | The request was not authorized. If your test in the [Test the Route Handler or API Route](#test-the-route-handler-or-api-route) section worked, you should not see this error. If you are seeing it, then you will need to configure your Middleware to accept the request. |
| `404` | The URL for the webhook was not found. Check that your application is running and that [the endpoint is correct in the Clerk Dashboard](/docs/integrations/webhooks/debug-your-webhooks#check-your-configuration-in-the-clerk-dashboard). |
| `404` | The URL for the webhook was not found. Check that your application is running and that [the endpoint is correct in the Clerk Dashboard](/docs/webhooks/debug-your-webhooks#check-your-configuration-in-the-clerk-dashboard). |
| `405` | Your route is not accepting a `POST` request. All webhooks are `POST` requests and the route must accept them. Unless you are using the route for something else, you can restrict the route to `POST` requests only. |
| `500` | The request made it to your application, but there is a code-related issue. This is likely a webhook verification issue or something in the webhook logic. See the following sections. |

## Debug webhook verification

To verify the webhook, see the [guide on webhooks](/docs/integrations/webhooks/sync-data#create-the-endpoint-in-your-application) for a detailed code example. You can also visit the [Svix guide on verifying payloads](https://docs.svix.com/receiving/verifying-payloads/how).
To verify the webhook, see the [guide on webhooks](/docs/webhooks/sync-data#create-the-endpoint-in-your-application) for a detailed code example. You can also visit the [Svix guide on verifying payloads](https://docs.svix.com/receiving/verifying-payloads/how).

Diagnosing a problem in this part of the webhook can be challenging. Your best bet would be the liberal use of `console.log`. You could log out the following to check if the values are correct:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Handling webhooks with Inngest
description: Learn how to integrate Clerk with Inngest.
---

Webhooks allow you to [synchronize data](/docs/integrations/webhooks/sync-data) from Clerk to your application backend. You can either handle them directly in your backend with an endpoint or use a tool like [Inngest](https://www.inngest.com) which receives the webhook events for you and reliably executes functions in your codebase. When handling webhooks, Inngest receives the [webhook events](/docs/integrations/webhooks/overview#supported-webhook-events) for you and uses a built-in queue to reliably execute longer running functions with additional functionality including:
Webhooks allow you to [synchronize data](/docs/webhooks/sync-data) from Clerk to your application backend. You can either handle them directly in your backend with an endpoint or use a tool like [Inngest](https://www.inngest.com) which receives the webhook events for you and reliably executes functions in your codebase. When handling webhooks, Inngest receives the [webhook events](/docs/webhooks/overview#supported-webhook-events) for you and uses a built-in queue to reliably execute longer running functions with additional functionality including:

- [Limiting concurrency](https://www.inngest.com/docs/guides/concurrency) to handle spikes in events without overwhelming your API or database.
- Triggering multiple functions from a single event ([fan-out jobs](https://www.inngest.com/docs/guides/fan-out-jobs)).
Expand Down Expand Up @@ -40,7 +40,7 @@ You'll be redirected to the new endpoint. In your Inngest dashboard, you will se

## Viewing webhook events within Inngest

After setup, as webhook events are sent from Clerk to Inngest, new `clerk` events will appear in your [Inngest dashboard](https://app.inngest.com/env/production/events). Event names will be the prefixed `clerk/` followed by the event name. See [webhook events](/docs/integrations/webhooks/overview#supported-webhook-events) for a full list.
After setup, as webhook events are sent from Clerk to Inngest, new `clerk` events will appear in your [Inngest dashboard](https://app.inngest.com/env/production/events). Event names will be the prefixed `clerk/` followed by the event name. See [webhook events](/docs/webhooks/overview#supported-webhook-events) for a full list.

![The Events page in the Inngest Dashboard showing a list of Clerk events](/docs/images/integrations/inngest/inngest-clerk-events.webp)

Expand All @@ -65,7 +65,7 @@ const syncUser = inngest.createFunction(
)
```

The `event` object contains all of the relevant data for the event. The `event.data` will match the `data` object from the standard Clerk webhook [payload structure](/docs/integrations/webhooks/overview#payload-structure). With this `clerk/user.created` event, the `event.data` will be a Clerk User json object.
The `event` object contains all of the relevant data for the event. The `event.data` will match the `data` object from the standard Clerk webhook [payload structure](/docs/webhooks/overview#payload-structure). With this `clerk/user.created` event, the `event.data` will be a Clerk User json object.

As you can see, you can choose which events you want to handle with each function. You might write a separate function for `clerk/user.updated` and `clerk/user.deleted` handling the entire lifecycle end to end.

Expand All @@ -75,7 +75,7 @@ Note that multiple functions can also listen to the same event. This pattern is

Often, applications need to perform additional tasks when a new user is created, like send a welcome email with tips and useful information.

While it is possible to add this logic at the end of your sync function as seen in the [previous section](/docs/integrations/webhooks/inngest#creating-a-function-to-sync-a-new-user-to-a-database), it’s better to decouple unrelated tasks into different functions so issues with one task do not affect the other ones. For example, if your email fails to send, it should not affect starting a trial for that user in Stripe.
While it is possible to add this logic at the end of your sync function as seen in the [previous section](/docs/webhooks/inngest#creating-a-function-to-sync-a-new-user-to-a-database), it’s better to decouple unrelated tasks into different functions so issues with one task do not affect the other ones. For example, if your email fails to send, it should not affect starting a trial for that user in Stripe.

With Inngest, each function has automatic retries, so only the code that has issues is re-run.

Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ To replay webhook messages:

## Sync data to your database

You can find a guide on how to use webhooks to sync your data to your database [here](/docs/integrations/webhooks/sync-data).
You can find a guide on how to use webhooks to sync your data to your database [here](/docs/webhooks/sync-data).

## Protect your webhooks from abuse

Expand Down
Loading
Loading