Support appending a token to the generated url?

[bristoljon]

Hi,

We are hoping to use token-based authentication to secure access to image folders to users with access to those folders.

We have implemented token generation in the backend which includes an appropriate acl of folders they should have access to.

The client side (React) gets this token after login and then the plan is to append it to all image delivery urls. Is there a way to do this with current SDK?

I was hoping there might be an option to do something like:

new Cloudinary({
  cloud: {
    cloudName: process.env.REACT_APP_CLOUDINARY_DOMAIN,
  },
  url: {
    privateCdn: true,
    secure: true,
    token: cloudinaryToken,
  },
});

[patrick-tolosa]

Hey @bristoljon - You'd like to append the same token to all images?

I'd also like to double check - this repo is for the url-generation in Javascript (which indeed doesn't support this feature yet), but you also mentioned React in your description - can you please clarify how you plan to use this feature assuming it was added?

[bristoljon]

Hi,

Yes that's right we'd like to generate a token (in backend) once during log-in which can then be appended to all image urls to give the user access to just the folders they should have access to but without needing the client to call the backend to get signed urls for each asset.

We are using React ("@cloudinary/react": "^1.0.1") and "@cloudinary/url-gen": "^1.3.0" to generate the URL's as per these docs:

https://github.com/cloudinary/frontend-frameworks#simple-usage

[patrick-tolosa]

Thanks for the update.

I saw this open issue as well in the legacy React SDK - https://github.com/cloudinary/cloudinary-react/issues/242 I just wanted to make sure the feature is also needed in the next generation of SDKs as well:

• @cloudinary/js-url-gen and
• @cloudinary/react

We'll update once we have news on this, it's something that's on the roadmap.

[bristoljon]

Ok great thanks for that. While your there do you happen to know how the token needs to be appended? As in, what is the query param name to use.. Can't find that in the docs anywhere.

Just wondering if we will be able to just append &token=<TOKEN> to the generated urls in meantime.

[igy]

Hi Jon,

The query string parameter name for the authentication token is __cld_token__ (with the underscores) - that's the same value that's used with cookie authentication as the cookie name

Apologies for any confusion; that the same value is used when using token auth isn't specifically mentioned in the docs because the examples use one of our other SDKs to create the full delivery URL, including the token.

Thanks, Stephen

[bristoljon]

Thanks @igy,

I am hopefully slowly getting there now also with help from Aleksander Kostadinov via email! I am currently hitting up against an issue where I can't seem to pass multiple patterns to the acl arg of the auth_token server side function to allow access to a few different specific folders.

I should probably raise this as an issue on the node.js SDK repo but does anyone know what the separator should be? I've tried , but it doesn't seem to work..

[igy]

Hi Jon,

The cookie or token can contain a single ACL - if you want to grant a user access to multiple assets (and implicitly block them from accessing others), there are a few options:

• Create a separate token for each asset (most likely to be applicable if you're using the token directly in the requested URL rather than in the session or in a cookie)
• Create an ACL that matches a folder path, where the user may have access to all the assets in that path (e.g. all episodes in a series, all files on a specific profile)

• Create an ACL that includes specific transformation options in the path, where those transformation options are specific to a category / set of assets / user / etc

  Thanks, Stephen

[devcjohn]

I'd like to +1 the original comment, being able to set an auth token using url-gen would make our lives much easier. We'd like to generate a token on our backend and pass it to the frontend.

eg.

const authenticatedImage = cld.image(
  'publicIdOfAuthenticatedImage'
)
.setAssetType("image")
.setDeliveryType("authenticated")
.setAuthToken(tokenFromBackend) // <- Add this

return (
  <AdvancedImage cldImg={authenticatedImage} />
)

[wissam-khalili]

Hi @chuck-johnson, We have opened an internal ticket to consider adding this. We will keep you posted with any updates on this thread. Thanks

[pawelphilipczyk-cloudinary]

Hi, just for reference, here's the solution with a linked example on how to add a query parameter: https://github.com/cloudinary/frontend-frameworks/issues/172#issuecomment-1502997381

[igy]

To close the loop on this, repasting some of the content from the comment Pawel linked:

The @cloudinary/url-gen library was recently updated to allow passing query string parameters to the URLs it creates, which will allow you to pass tokens when loading assets via our frontend frameworks.

If you update your dependencies to use 1.10.0 of that library, you can pass queryParams as an option when instantiating CloudinaryImage, and the parameters will be added to the URL used by the component.

There's a simple usage example available here, though to actually use token authentication you'll need to retrieve the token from your server-side code before this: https://codesandbox.io/s/morning-voice-vnt3in?file=/src/App.js