Uploadthing 403 Forbidden Error in Production (vercel)

Hi guys, Please does anyone know how to fix the 403 error in uploathing that shows up in production? Everything seems to work fine in development, but for some reason it doesn't in production. Kindly find the code below and attached screenshots import { createUploadthing, UploadThingError } from "uploadthing/server"; import type { FileRouter } from "uploadthing/server"; import { getSession } from "./code"; const f = createUploadthing(); const handleAuth = async (req: Request) => { try { const { userId } = await getSession(req) if (!userId) { throw new UploadThingError("Unauthenticated"); } return { userId }; } catch (error: any) { throw new UploadThingError(error.message); } } // FileRouter for your app, can contain multiple FileRoutes export const ourFileRouter = { // Define as many FileRoutes as you like, each with a unique routeSlug imageUploader: f({ image: { maxFileSize: "4MB" } }) // Set permissions and file types for this FileRoute .middleware(async ({ req }) => handleAuth(req)) .onUploadComplete(async ({ metadata, file }) => { // This code RUNS ON YOUR SERVER after upload console.log("Upload complete for userId:", metadata.userId); console.log("file url", file.url); }), courseImage: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } }) .middleware(async ({ req }) => handleAuth(req)) .onUploadComplete(() => {}), courseAttachment: f(["text", "image", "video", "audio", "pdf"]) .middleware(async ({ req }) => handleAuth(req)) .onUploadComplete(() => {}), chapterVideo: f({ video: { maxFileCount: 1, maxFileSize: "512GB" } }) .middleware(async ({ req }) => handleAuth(req)) .onUploadComplete(() => {}) } satisfies FileRouter; export type OurFileRouter = typeof ourFileRouter;