Skip to content

Latest commit

 

History

History
108 lines (67 loc) · 2.95 KB

README.md

File metadata and controls

108 lines (67 loc) · 2.95 KB
Raw

Per User Database Creation with Xata, Clerk, Hookdeck, and Next.js

This Next.js example demonstrates how to create a database within Xata per user within a Xata Workspace whenever a new user is created within Clerk. Hookdeck is used to manage inbound webhooks.

Before you being

You'll a free account with the following services:

Install the Hookdeck CLI:

npm i -g hookdeck-cli

And login:

hookdeck login

Get the code

npx create-next-app xata-per-user-db -e https://github.com/hookdeck/xata-per-user-db

Create the config

Note

This is a little convoluted because you can't create a webhook subscription using the Clerk API.

Create a local config file:

cp .env.example
.env.local

Hookdeck and Clerk

Create a localtunnel with the Hookdeck CLI to get Hookdeck Source URL:

hookdeck listen 3000 clerk --path /webhooks/clerk

The output will be similar to the following:

Dashboard
👉 Inspect and replay events: https://dashboard.hookdeck.com?team_id={team_id}

Sources
🔌 clerk URL: https://hkdk.events/{source_id}

Connections
clerk -> clerk_to_cli-clerk forwarding to /webhooks/clerk

> Ready! (^C to quit)

Copy the clerk URL value and head to Clerk Dashboard -> Configure -> Webhooks section.

Click + Add Endpoint and enter the Hookdeck URL you copied in the previous step. Click Create.

Copy the Signing Secret value and set the CLERK_WEBHOOK_SECRET value in .env.local.

Populate the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY variables with values from the Clerk Dashboard -> Configure -> API Keys section.

Go to the Hookdeck Dashboard -> Settings -> Secrets and add values for HOOKDECK_API_KEY and HOOKDECK_WEBHOOK_SECRET in .env.local.

Xata

From your workspace settings get your API Key and Workspace slug/ID, and save those in XATA_API_KEY and XATA_WORKSPACE_SLUG in your .env.local file.

Run the setup script

Finally, run the setup script:

npm run hookdeck:setup

This ensures that Hookdeck is set up to verify the Clerk webhooks.

You can see the setup connection in the Connections section of the Hookdeck dashboard.

Run the app

In a new terminal:

npm run dev

Navigate to localhost:3000 (or similar), click the Sign in button, complete the sign in/up flow, you will see the webhooks logged by the Hookdeck CLI and output from the terminal you ran npm run dev in.

Check the Xata dashboard to see the new per use database has been created.

Resources