CODEWITHSUNDEEP
next.jsmiddlewarevercelclerk
342k
342k

Reputation: 39

Clerk Webhook event failing

In Clerk, I am working with webhooks, and all the user events are subscribed. The message attempts show that it fails whenever I create a new user, update a user's name, or delete them. I deployed the site on vercel and it shows a status 401 on my middleware file. I looked around and found out that the reason for this was something to do with authentication.

This is what my middleware.ts file looks like:

import { authMiddleware } from "@clerk/nextjs";  

export default authMiddleware({   
    publicRoutes: ['/', '/app/api/webhooks/clerk/route.ts'] });  

export const config = {   matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"], };

401 Error messege from Vercel logs:

[GET] [middleware: "middleware"] / status=401

I have this linked to MangDB and nothing is being shown in the collections due to the issue above.

I ensured the clerk signing secret and the mangoDB URL were correct in the env file. I checked to ensure the path in the middleware.ts file and on the endpoint, for Clerk to fire the events was correct.

Upvotes: 1

Views: 1422

Answers (2)

Third App
Third App

Reputation: 1

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher([
'/',
  '/api/webhooks(.*)'
])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],

}

enter code here

try this work

Upvotes: 0

Moustafa Tlais
Moustafa Tlais

Reputation: 11

The issue is not with your middleware file. If you've deployed your website to Vercel and have entered the URL of your deployed site in the endpoints section of the Clerk dashboard, here's what you need to do:

It seems like you are running the site locally and trying to test the endpoint, which results in a failed status.

Here’s the solution:

1.Open a terminal in VS Code. 2. Navigate to the "Ports" tab. 3. Click on "Forward a Port". 4. Enter 3000 as the port number and press Enter. 5. Wait for a moment until you see a forwarded address. 6. Right-click on this address, and a menu will appear. Click on "Port Visibility" and set it to "Public". 7. Copy the new URL and replace the Vercel URL you added in the endpoints with this new URL. 8. Ensure you add the correct path to your route. For example, if you are using an app route, the URL might look like this: https://pq07df73-3000.euw.devtunnels.ms/api/webhook. 9. don't add app before api ex: .../app/api/... <-- this is wrong 10. Add console.log('webhook is working') inside your webhook API. 11. Check your SSR terminal to confirm that the webhook is functioning correctly.

By doing this, you should be able to test your endpoint successfully, and your problem will be fixed.

Upvotes: 0

Related Questions