Auto login to Media Library Widget

Options
mkbctrl
mkbctrl Member Posts: 6

Can someone help me out with auth here? I have integrated the Media Library Widget in my app, but right now every time I log into my account I have to sign in to cloudinary account as well the moment I try to use the widget.

Is there a way to bypass that and make the auth happen behind the scene?

I am aware of those two options:

but I don't see any effect when using them.

Best Answer

  • Tom
    Tom Member, Cloudinary Staff Posts: 65
    Answer ✓
    Options

    Hi @mkbctrl ,

    Thanks for getting back.

    Let me assist you while Sreenath is away.

    Unfortunately, MLW (Media Library Widget) does not support token-based login so a user account is required. How many admin users will you have? Can you not create an account for each of them? You can create max 3 users up to Plus plan but additional users can be purchased for extra.

    If creating separate accounts is not feasible then perhaps you can use the Upload widget to upload new images and Admin API to list existing resources (https://cloudinary.com/documentation/admin_api#get_resources).

    Please let me know if you have any other questions or queries.

    Thanks

Answers

  • SreeCloudinary
    SreeCloudinary Member, Cloudinary Staff Posts: 26
    Options

    Hi There,

    Thanks for contacting Cloudinary and posting your question.

    There are 2 required fields when using the Media Library Widget- Cloud Name and the API Key. Username and use_saml are optional.

    Please check the code in https://codesandbox.io/s/media-library-widget-b7hgbg?from-embed=&file=/src/index.js

    I think the issue stems from the fact that when you instantiate a Cloudinary Media Library Widget - you also pass the username parameter (as in the snippet below)

    window.ml = cloudinary.createMediaLibrary({
       cloud_name: '...',
       api_key: '...',
       username: '...',  // <<<<<<<
       ...
     },
     ... 
    )
    

    If that's the case - then, most likely, a different user was already logged in on this computer situation is reported due to the fact that:

    • The person using the browser logged into Cloudinary using an account (different from the one configured for the widget)
      • On successful login, Cloudinary systems issued the _cld_session_key cookie associated with the https://cloudinary.com domain
    • The media library widget passes the specific username to Cloudinary systems
      • But the _cld_session_key cookie referring to a session created for a different user name is also passed
    • Cloudinary back-end systems run the check where
      • The media library widget attempts to initiate a sign-in operation for one username
      • But the session (resolved via the cookie) refers to a different username
    • The above inconsistency results in the rejection of the sign-in operation with the A different user was already logged in on this computer message
      • If that is, indeed, the case on your end - the root cause of the problem is using the same browser logging into Cloudinary, and then using the same browser session to interact with the widget.

    In order to avoid this situation, you may consider using different browsers (or different browser profiles if you are using Google Chrome).

    In this case, each browser (or profile) will keep its own copy of the _cld_session_key cookie without causing the above situation.

    Hope this helps, please let me know if you have any further questions.

    Best Regards,

    Sree

  • SreeCloudinary
    SreeCloudinary Member, Cloudinary Staff Posts: 26
    Options

    If you want every user irrespective of login to use the ML widget in your company, you can ignore the username field and specify only the cloud name and the API Key.

    Thanks

    Sree

  • mkbctrl
    mkbctrl Member Posts: 6
    Options

    if I ignore the field every user will have to login with his own cloudinary credentials? Initially I had only API + cloud_name specified, and it always asked for sign-in

  • mkbctrl
    mkbctrl Member Posts: 6
    edited January 2023
    Options

    I have forked the sandbox you provided and I passed only cloud_name and api_key.

    this is the result:

    I did it in a different browser where there is even no history of me using the cloudinary.

    My goal is see the full media library on first load without the SignIn screen. I would expect that the apiKey is enough to make the embed work seemlesly with my app

  • mkbctrl
    mkbctrl Member Posts: 6
    Options

    Hey @SreeCloudinary any news?

  • SreeCloudinary
    SreeCloudinary Member, Cloudinary Staff Posts: 26
    Options

    Hi @mkbctrl ,


    Can you please send me the forked sandbox code that you have? Please remove the cloud name and the key and I will take a look at it?

    Apologies for the delay.


    Best Regards,

    Sree

  • mkbctrl
    mkbctrl Member Posts: 6
    edited January 2023
    Options

    Hey, I used the code you provided in the codesandbox, the only things that I changed were the cloud name and the key, so I don't have anything I can share with you.

    Let me maybe rephrase what my issue is, I have a feeling we are yet to have an understanding :))

    I have an app, an admin app. It allows you to create bunch of stuff, let's call it courses. Every course have a thumbnail. I want the admin user to be able to upload an image or reuse existing one, both while using Cloudinary.

    Options for me are the following:

    1. use cloudinary upload widget -> this is fine, but it prevents admin user from re-using images that are identical -> this will shortly result in my cloudinary account flooded with duplicates
    2. use cloudinary media library widget -> the perfect solution -> I can upload new, or reuse existing BUT the user have to log in to cloudinary in order to be able to use it -> that's my issue: Is it possible to turn the sign-in flow off and auth under the hood with some sort of a token? -> obviously the cloud_name + api_key pair are not sufficient
    3. build custom solution using cloudinary api, that will hopefully list existing images and upload new -> long and cumbersome task I would prefer to skip

    Hope this will make everything easier now


    cc: @SreeCloudinary

  • mkbctrl
    mkbctrl Member Posts: 6
    Options

    Pitty, thanks for making it clear @Tom

    I don't have any further questions