MDXEditor with private S3/MinIO images - How to handle image permissions and URL refreshing?

[NiBa97]

I'm using mdxeditor in my Next.js application with a private S3/MinIO storage for images (and attachments). While I can successfully upload images using presigned URLs, I'm facing issues with displaying the images in the editor due to URL expiration and permissions. Well basically, im not even sure if im at all on the right path...

So in my head, I cant really find a way to get these URL for private user content. Whenever I generate some kind of link its public, and ontop of that, I also need to manage expiered links, which is a whole other hassle for me. This has to be simpler somehow, right?

Would really appreciate some feedback on this :)

Have a good evening, attached is my current code.

I upload the image like this:

imagePlugin({
      imageUploadHandler: async (file) => {
        const { url, fields, key } = await presignedUrlMutation.mutateAsync({
          fileName: file.name,
          fileType: file.type,
        });
        const formData = new FormData();
        Object.entries(fields).forEach(([key, value]) => {
          formData.append(key, value);
        });
        formData.append("file", file);
        await fetch(url, {
          method: "POST",
          body: formData,
        });

        return `${url}/${key}`;
      }
});

And the api router looks like this:

getPresignedUrl: protectedProcedure
    .input(z.object({
      fileName: z.string(),
      fileType: z.string(),
    }))
    .mutation(async ({ input, ctx }) => {
      const s3Client = new S3Client({
        endpoint: "http://111.222.333.444:9000",
        credentials: {
          accessKeyId: env.MINIO_ACCESS_KEY!,
          secretAccessKey: env.MINIO_SECRET_KEY!,
        },
        region: "us-east-1",
        forcePathStyle: true,
      });

      const fileExtension = input.fileName.split('.').pop() ?? '';
      const uniqueId = createId();  
      const key = `${ctx.session.user.id}/${uniqueId}.${fileExtension}`;

      const { url, fields } = await createPresignedPost(s3Client, {
        Bucket: "test",
        Key: key,
        Fields: {
          'Content-Type': input.fileType,
        },
        Conditions: [
          ["content-length-range", 0, 10485760], 
          ["eq", "$Content-Type", input.fileType],
        ],
        Expires: 600,
      });

      // Construct the final URL that will be used to access the file
      const fileUrl = `http://111.222.333.4449000/test/${key}`;

      return { url, fields, key, fileUrl };
    })