clerk/clerk-webhooks

Que fait clerk-webhooks ?

Webhooks Clerk pour les événements en temps réel et la synchronisation des données. Vérifiez avec verifyWebhook depuis le package spécifique au framework. Gérez les événements d'utilisateurs, sessions, organisations, facturation et paiement. Créez des fonctionnalités événementielles comme la synchronisation de base de données, les notifications et les intégrations.

Utilisation

1. Configurez un endpoint webhook dans votre application.
2. Utilisez verifyWebhook pour valider les requêtes entrantes.
3. Traitez les différents types d'événements (utilisateurs, sessions, organisations, etc.).
4. Implémentez des actions comme la synchronisation de base de données ou l'envoi de notifications.

Exemple (Next.js)

import { Webhook } from 'svix'
import { headers } from 'next/headers'
import { WebhookEvent } from '@clerk/nextjs/server'

export async function POST(req: Request) {
  const WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET
  
  if (!WEBHOOK_SECRET) {
    throw new Error('Please add CLERK_WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local')
  }

  const headerPayload = headers()
  const svix_id = headerPayload.get('svix-id')
  const svix_timestamp = headerPayload.get('svix-timestamp')
  const svix_signature = headerPayload.get('svix-signature')

  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response('Error occured -- no svix headers', {
      status: 400
    })
  }

  const payload = await req.json()
  const body = JSON.stringify(payload)

  const wh = new Webhook(WEBHOOK_SECRET)
  let evt: WebhookEvent

  try {
    evt = wh.verify(body, {
      'svix-id': svix_id,
      'svix-timestamp': svix_timestamp,
      'svix-signature': svix_signature,
    }) as WebhookEvent
  } catch (err) {
    console.error('Error verifying webhook:', err)
    return new Response('Error occured', {
      status: 400
    })
  }

  const { id } = evt.data
  const eventType = evt.type
  
  switch (eventType) {
    case 'user.created':
      console.log('User created:', id)
      // Synchroniser avec votre base de données
      break
    case 'user.updated':
      console.log('User updated:', id)
      break
    case 'user.deleted':
      console.log('User deleted:', id)
      break
    case 'session.created':
      console.log('Session created:', id)
      break
    case 'session.ended':
      console.log('Session ended:', id)
      break
    case 'organization.created':
      console.log('Organization created:', id)
      break
    case 'organization.updated':
      console.log('Organization updated:', id)
      break
    case 'organization.deleted':
      console.log('Organization deleted:', id)
      break
    case 'organizationMembership.created':
      console.log('Membership created:', id)
      break
    case 'organizationMembership.deleted':
      console.log('Membership deleted:', id)
      break
    case '__clerk_webhook_type__':
      console.log('Webhook type:', eventType)
      break
    default:
      console.log('Unhandled event type:', eventType)
  }

  return new Response('Webhook received', { status: 200 })
}

Événements supportés

Type d'événement	Description
user.created	Un nouvel utilisateur a été créé
user.updated	Les données d'un utilisateur ont été mises à jour
user.deleted	Un utilisateur a été supprimé
session.created	Une nouvelle session a été créée
session.ended	Une session s'est terminée
organization.created	Une nouvelle organisation a été créée
organization.updated	Les données d'une organisation ont été mises à jour
organization.deleted	Une organisation a été supprimée
organizationMembership.created	Un membre a été ajouté à une organisation
organizationMembership.deleted	Un membre a été retiré d'une organisation
organizationInvitation.created	Une invitation d'organisation a été envoyée
organizationInvitation.accepted	Une invitation d'organisation a été acceptée
billing.created	Un événement de facturation a été créé
billing.updated	Un événement de facturation a été mis à jour
payment.created	Un paiement a été effectué
payment.updated	Un paiement a été mis à jour

Configuration

1. Dans le tableau de bord Clerk, allez dans Webhooks.
2. Ajoutez un endpoint avec l'URL de votre application (ex: https://votre-domaine.com/api/webhooks).
3. Sélectionnez les événements que vous souhaitez écouter.
4. Copiez le secret de webhook (CLERK_WEBHOOK_SECRET) et ajoutez-le à votre fichier .env.local.

Ressources

• Documentation Clerk : https://clerk.com/docs/webhooks/overview
• Package Svix : https://www.npmjs.com/package/svix