Skip to main content

I’m trying to authenticate with OAuth 2.0 and I keep getting 401 unauthorized errors. I know for sure that I’m using my correct Client ID and Client Secret, so I’m not sure what’s going wrong.

Hi there, can you specify if you’re using an SDK, what is the programming language you’re using? Also, could you check your setting in the Developer Console: especially the Redirect URI and CORS Domain. Here is my recent blog post touching Box node.js SDK and OAuth 2.0. It might be a helpful reference: https://medium.com/box-developer-blog/getting-started-with-box-node-js-sdk-with-oauth-2-0-5ca2e2e9c713

Hi Olga, we’re using Uppy.io and Transloadit.

Hi there, have you checked the OAuth 2.0 Redirect URI and CORS Domains settings in the Box Developer Console (Configuration tab)?

Yes. They are set correctly.

Summary: the problem @user79 is reporting occurred with an attempt to use Transloadit with Companion integrated with Uppy component in a Vue + PHP project, with Box Custom app with oAuth 2.0.



I tried to recreate the behaviour using a simplified code sample. I was able to successfully log in to Box with Uppy, but once added the Transloadit with Companion oAuth the process failed. Here is the code I used:



<!DOCTYPE html>


<html>


<head>


<title>Uppy+Transloadit sample app</title>


<link


  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"


  rel="stylesheet"


/>


<script type="module">


    import {


    Uppy,


    Dashboard,


    ImageEditor,


    RemoteSources,


    Transloadit,


  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'


  const uppy = new Uppy()


    .use(Transloadit, {


      waitForEncoding: true,


      alwaysRunAssembly: true,


      assemblyOptions: {


        params: {


          template_id: 'TRANSLOADIT_TEMPLATE_ID',


          auth: {


            key: 'TRANSLOADIT_KEY',


          },


        },


      },


    })


    .use(Dashboard, { trigger: '#browse' })


    .use(ImageEditor, { target: Dashboard })


    .use(RemoteSources, {


      companionUrl: 'COMPANION_URL',


    })


    .on('complete', ({ transloadit }) => {


      console.log(transloadit)


      transloadit.forEach((assembly) => {


        console.log(assembly.results)


      })


    })


    .on('error', (error) => {


      console.error(error)


    })


  </script>


</head>





<body>


    <button id="browse">Select Files</button>


</body>





</html>


Errors I’m getting are:



401 on transloadit url and after granting access to Box I get:



Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').


Box recognises the login and sends email notification to the user about this action. I contacted the Transloadit support and they are currently working on the fix in the Uppy source code. Please follow this thread for more details and status: https://github.com/transloadit/uppy/pull/4681 1github.com]



Cheers,


Olga

You are awesome Olga, thank you!

Reply


Terms & ConditionsCookie settings