UploadThing: Struggling to authenticate uploads

        <form className="flex flex-col gap-10 backdrop-blur-sm bg-neutral-400/10 max-w-fit p-5 place-self-center mt-10 rounded-lg border border-slate-500/50">
          <input
            type="text"
            placeholder="Title (optional)"
            className="outline-none bg-transparent border-b py-2 border-slate-300/25"
          />

          <input
            type="password"
            placeholder="Passkey"
            className="outline-none bg-transparent border-b py-2 border-slate-300/25"
          />

          <UploadDropzone
            endpoint="imageUploader"
            onClientUploadComplete={(res) => {
              // Do something with the response
              console.log("Files: ", res);
              alert("Upload Completed");
            }}
            onUploadError={(error: Error) => {
              // Do something with the error.
              alert(`ERROR! ${error.message}`);
            }}
            className="border border-dashed border-slate-300/25 rounded-md p-5"
            appearance={{
              button: "bg-black",
              label: "Upload",

            }}
            config={{ mode: "manual" }}
            content={{
              label: "Upload (morally optional)",
            }}
            onUploadBegin={()=>{
          
            }}
          />
        </form>

export const imageFileRouter = {
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    .middleware(async ({ req }) => {
      const { passkey } = req.body.json()
      if authenticatePasskey(passkey) throw new Error("error")
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log("file url", file.url);
    }),
} satisfies FileRouter;