Sync Clerk Data to Your Database Using Webhooks
Vložit
- čas přidán 11. 07. 2024
- In this video, we'll examine how to sync user data from Clerk to our database using webhooks. We will use Prisma as our ORM to connect to Mongodb for end-to-end type safety.
👉🏼 Clerk Authentication
→ go.clerk.com/9AXfPV7
👉🏼 Learn Clerk
→ www.hamedbahram.io/courses
👉🏼 Clerk setup guide
→ • Clerk Keeps Getting Be...
👉🏼 Next-Clerk template
→ github.com/HamedBahram/next-c...
👉🏼 Project source code
→ github.com/HamedBahram/clerk-...
👉🏼 Work with me
→ www.hamedbahram.io/contact
Chapters
0:00 Intro
1:30 Project setup
3:45 Clerk webhooks
7:40 Using ngrok
9:30 Create an endpoint in Clerk
13:50 Add a route handler in NextJs
17:00 Setting up Prisma
21:00 Testing our webhook
24:38 Recap - Věda a technologie
It's been a while since I dived into Clerk, look's like it's come along way. Thanks for the awesome vid Hamed 🙌🏼
Pleasure Matt 🙌🏼
This was awesome. Waiting eagerly for your course.
Awesome, thank you!
Great video as always hamed
Thanks! I appreciate that.
Awesome! Tks, Mr. Bahram!
My pleasure!
For example, when a user registers but our database is down, how do we resend the failed webhook?
Clerk would retry the webhook automatically, you can see the retry schedule here → docs.svix.com/retries
Thanks a lot
Happy to help!
Need a little push in the right direction. So I got this all working (Clerk users in my db with roles and memberships) What would be the best way to check the current user (incl. their role/membership, which are stored in my database)? Wrap the app with my own context? But use context is client side only. Hmm...still so new, huge gaps in my knowledge
I would use Clerk's helper function to check the current user. For instance, on the server, auth() and currentUser() are App Router-specific helpers. You can also use the `useAuth` hook on client-side. Here is a link to the docs for further reading → clerk.com/docs/references/nextjs/read-session-data
very good tutorial,thx.
Glad to hear that!
Please create the tutorial Express js Integrate To Next.js Full Stack Project
Sure thing!
@@hamedbahramJazakAllah Sounds good it really doesn't have a tutorial in CZcams
How does it work for a project in production? Where do we point ngrok?
You don't need ngrok for production, you'll set the webhook to hit your production/deployment domain. Ngrok is just for testing in local development.
Great video. I’ve been struggling with this. Wasn’t sure if I should use the clerk Id as my unique user identifier in the database or something like the token Id. Wanted to make sure it was an id that would not potentially change on the clerk side. I am doing this with my Convex backend and seems to be very fast and reliable.
Perfect! I’ve got to try Convex.
@@hamedbahram I really tried to avoid Convex for a while, but curiousity got the best of me. I now use it for all my projects. The dev experience has been so nice and it intigrates well with Clerk. I had to rethink some things as I used to use prisma and other relational db’s, but it’s very powerful.
What if we want to ban a user automatically based on a thing that he does in the web app?
Good question! You can use Clerk's backend API to programatically add a user to blocklist. You can read more here → clerk.com/docs/reference/backend-api/tag/Allow-list-Block-list#operation/CreateBlocklistIdentifier
when is the onboarding coming? =D
in about 4 weeks
i got error:
Error: Base64Coder: incorrect padding
at Coder._getPaddingLength (webpack-internal:///(rsc)/../../../node_modules/@stablelib/base64/lib/base64.js:199:23)
at Coder.decode (webpack-internal:///(rsc)/../../../node_modules/@stablelib/base64/lib/base64.js:80:34)
at Object.decode (webpack-internal:///(rsc)/../../../node_modules/@stablelib/base64/lib/base64.js:213:21)
at new Webhook (webpack-internal:///(rsc)/../../../node_modules/svix/dist/index.js:405:31)
at POST (webpack-internal:///(rsc)/./src/app/api/webhooks/test/route.ts:30:16)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
....
POST /api/webhooks/test 500 in 59ms
Can you help me?
Not sure where that's coming form, compare your code to mine and see what you're doing different.
I was getting the same error and I figured it out. In the Clerk documentation, it tells you to paste the webhook signing secret into your .env.local file, but for some reason, the documentation does not auto-populate your real webhook signing secret (unlike other places in the Clerk documentation).
The wrong one looks like this: WEBHOOK_SECRET=whsec_123
Your real webhook signing secret is located in the Webhooks page of your Clerk dashboard inside your clerk endpoint.
Hope this helps
@@dubesinhower Thanks for sharing this.