Cloudinary media library: can't log in using signature and timestamp

[reddypramod85]

Hello, I'm trying to initialize the CMS manually and pass the Cloudinary signature and timestamp during run time using the Netlify function with the below settings but those parameters are not getting passed. If I pass the complete config with load_config_file:false I'm able to auto sign in to the Cloudinary widget. I referenced these docs https://www.netlifycms.org/docs/beta-features/#manual-initialization and issue https://github.com/netlify/netlify-cms/issues/1999

Source Code PR: https://github.com/hpe-dev-incubator/hpe-dev-portal/pull/275

To Reproduce Follow the instructions from this comment https://github.com/netlify/netlify-cms/issues/1999#issuecomment-462473073

Expected behavior Should be able to auto-login into Cloudinary media library.

Screenshots

Applicable Versions:

• Netlify CMS version: [e.g. 2.0.4]
• "netlify-cms-app": "^2.14.25",
• "netlify-cms-media-library-cloudinary": "^1.3.10",
• OS: macOS Catalina V.10.15.7
• Browser version: Chrome Version 90.0.4430.212
• Node.JS version: v14.16.0

CMS configuration

backend:
 name: github
 repo: hpe-dev-incubator/hpe-dev-portal
 branch: master
 open_authoring: true

publish_mode: editorial_workflow
site_url: https://developer.hpe.com
display_url: https://developer.hpe.com
logo_url: /img/dev-thumb2.png

media_folder: static/img
public_folder: /img
media_library: 
  name: cloudinary
  config: 
    cloud_name: 'hpe-dev-portal'
    api_key: 'xxxxx'
    username: 'xxxxxx'
    output_filename_only: true

collections:
  - label: 'Home'
    name: 'home'
    format: 'frontmatter'
    publish: false
    editor:
      preview: true

CMS Configuration

window.CMS_MANUAL_INIT = true;
import CMS, { init } from 'netlify-cms';
import cloudinary from 'netlify-cms-media-library-cloudinary';

const userAction = async () => {
  try {
    const url = '/.netlify/functions/cloudinary';
    const response = await fetch(url);
    const resp = await response.json();
    init({
      config: {
        media_library: {
          config: {
            signature: resp.signature,
            timestamp: resp.timestamp,
          },
        },
      },
    });

    CMS.registerMediaLibrary(cloudinary);
  } catch (err) {
    console.log('error', err);
  }
};

userAction();

[erezrokah]

In case someone wants to look at this the config should be propagated to https://github.com/netlify/netlify-cms/blob/26cd552746d6294387b9bdd961a73d5a531bf665/packages/netlify-cms-media-library-cloudinary/src/index.js#L69

[aileenpalafox]

Hello, is okay if I give it a try?

[erezrokah]

Hello, is okay if I give it a try?

That would be great @alexgerdisch, see also https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md

[aileenpalafox]

Hello @erezrokah @reddypramod85 , I'm having trouble reproducing the issue but I don't know who else to ask. I can connect to cloudinary by modifying the config.yml, but when trying to set the manual initialization and defining the user actions I don't know where to do it (config, index, another file ?). I checked the PR by reddypramod but since I'm using the dev-test server it's kind of different from his implementation so I got lost. I already joined the slack workspace and asked but I didn't have answer for this. Sorry for the trouble, I hope you can help me.

[erezrokah]

Thanks @aileenpalafox, @reddypramod85 can you provide some guidance on how to reproduce the issue?

[aileenpalafox]

Hello, again @erezrokah I'm going to drop off from this issue for now, in case someone else is interested they can give it a go. If there's a future response about how to reproduce the bug I'm open to try it again. :)

[matt-de-young]

@reddypramod85, I am trying to do exactly the same thing & came across this thread. I was stuck at exactly the same point as you described. The plugin start authorized just fine if I supplied the signature in the config.yaml like so:

media_library:
  name: cloudinary
  output_filename_only: false
  config:
    cloud_name: <cloud_name>
    username: <username>
    api_key: <api_key>
    signature: <signature>
    timestamp: <timestamp>

But that would only be valid for 1 hour.

Solution:

What I found was that I specifically needed to enable manualInit in gatsby-config.js:

{
  resolve: 'gatsby-plugin-netlify-cms',
  options: {
    manualInit: true,
    modulePath: `${__dirname}/src/cms/cms.js`,
  },
},

In oder for the merging of the config to happen properly.

I still have to figure out how to validate the user's JWT in the function, but I hope this helps others in the future.

Versions:

"netlify-cms-app": "^2.15.67", "netlify-cms-media-library-cloudinary": "^1.3.10",