Theo's Typesafe Cult•2mo ago

Uploadthing with Next.j, Clerk JWT Convex

hi, I'm creating an application with next.js and convex with clerk's JWT. I'm trying to integrate uploadthing with clerk, I followed the steps in the documentation but I wasn't successful in the part of verifying the user by uploadthing itself using .middleware(() => handleAuth()) //src/app/api/uploadthing/core.ts When I use clerk's JWT with convex, the userId is not captured using auth(), but rather by useUser(), performing the following scheme const handleAuth = () => { const { user } = useUser(); if (!user?.id) throw new Error("Not Authenticated"); return { userId: user?.id } } however, even after making this change I can't get the middleware to work. this is the clerk middleware I'm using import { clerkMiddleware } from "@clerk/nextjs/server"; export default clerkMiddleware(); export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params '/((?!_next|[^?].(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)', // Always run for API routes '/(api|trpc)(.*)', ], }; this is the error that appears in the POST console http://localhost:3000/api/uploadthing?actionType=upload&slug=boxImage 500 (Internal Server Error) UploadThingError: Failed to run middleware at eval (index.js:57:72) at eval (Micro.js:1420:41) at eval (Micro.js:1358:1) at eval (Micro.js:1 356:1) at eval (Micro.js:909:1) at eval (Micro.js:1548:1) at eval (Micro.js:909:1) at eval (Micro.js:565:1) at Object.execute (Micro.js:540:1) at eval (Micro.js:942:1) at eval (Micro.js:565:1) at Object.execute (Micro.js:540:1) at resume (Micro.js:741:1) at eval (Micro.js:799:1) When I remove the .middleware(() => handleAuth()), it works but I don't have user verification Could someone please help me

2 Replies

FleetAdmiralJakob 🗕 🗗 🗙•2mo ago

Could you format your code with the three `

MACOP•2mo ago

const handleAuth = () => {
const { user } = useUser();

if (!user?.id) throw new Error("Not Authenticated");

return { userId: user?.id }
}

const handleAuth = () => {
const { user } = useUser();

if (!user?.id) throw new Error("Not Authenticated");

return { userId: user?.id }
}

however, even after making this change I can't get the middleware to work. this is the clerk middleware I'm using

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params '/((?!_next|[^?].(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)', // Always run for API routes '/(api|trpc)(.*)', ], };

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params '/((?!_next|[^?].(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).)', // Always run for API routes '/(api|trpc)(.*)', ], };

this is the error that appears in the POST console http://localhost:3000/api/uploadthing?actionType=upload&slug=boxImage 500 (Internal Server Error) UploadThingError: Failed to run middleware at eval (index.js:57:72) at eval (Micro.js:1420:41) at eval (Micro.js:1358:1) at eval (Micro.js:1 356:1) at eval (Micro.js:909:1) at eval (Micro.js:1548:1) at eval (Micro.js:909:1) at eval (Micro.js:565:1) at Object.execute (Micro.js:540:1) at eval (Micro.js:942:1) at eval (Micro.js:565:1) at Object.execute (Micro.js:540:1) at resume (Micro.js:741:1) at eval (Micro.js:799:1) When I remove the .middleware(() => handleAuth()), it works but I don't have user verification Could someone please help me

Gaming

Programming

Uploadthing with Next.j, Clerk JWT Convex