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

[bradenhirschi]

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
   

3. Generate SHA signature in api route and return Response.json({ signature})
   

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

Your environment

• OS: MacOS Sonoma 14.2.1
• Node version: 18.17.0
• Npm version: 10.2.4
• Browser name and version: Google Chrome 122.0.6261.94

Additional context

I've already tried:

• Passing environment variables in manually instead of through process.env.***
• Generating SHA1 signature manually instead of using cloudinary.utils.api_sign_request
• Adding additional options to the request like uploadPreset, etc.
• Unsigned upload: this works fine

[bradenhirschi]

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.

[colbyfayock]

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

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