cloudinary-community / next-cloudinary

⚡️ High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
https://next.cloudinary.dev
MIT License
237 stars 64 forks source link

[Bug] Invalid Signature ***. String to sign - 'source=uw&timestamp=1709830648'. #453

Open bradenhirschi opened 4 months ago

bradenhirschi commented 4 months ago

Bug Report

Describe the bug

I'm getting an error "Invalid Signature ***. String to sign - 'source=uw&timestamp=1709830648'" when attempting a signed upload with CldUploadWidget

Is this a regression?

No

Steps To Reproduce the error

  1. Add NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, NEXT_PUBLIC_CLOUDINARY_API_KEY, and NEXT_PUBLIC_CLOUDINARY_API_SECRET to .env.local

  2. Add CldUploadWidget to a page in my application Screenshot 2024-03-07 at 11 16 12 AM

  3. Generate SHA signature in api route and return Response.json({ signature}) Screenshot 2024-03-07 at 11 19 38 AM

  4. Attempt to upload image through upload widget

Expected behaviour

Image is uploaded to Cloudinary without error

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Screenshot 2024-03-07 at 11 06 30 AM

Your environment

Additional context

I've already tried:

bradenhirschi commented 4 months ago

Quick comment, I think I found the issue. The issue is that just source=uw is added to the signature when sources aren't specified manually in options. When I restricted it to just local as the source it works fine. I can't see a required source option documented anywhere, please correct me if I'm wrong.

Screenshot 2024-03-07 at 11 25 37 AM

colbyfayock commented 4 months ago

i dont think that the sources are necessarily required in a general upload, however, the upload widget passes in a source as an upload parameter and the signature needs to match the parameters being sent on that request

image

as far as using cloudinary.utils.api_sign_request, what issue were you hitting with that?

here's a working example of one for app Router:

https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget-signed/app/page.tsx#L27 https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget-signed/app/api/sign-image/route.ts

and the Next Cloudinary docs has a few examples similarly for Pages

https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/clduploadwidget/basic-usage.mdx#L142 https://github.com/cloudinary-community/next-cloudinary/blob/main/docs/pages/api/sign-cloudinary-params.js