Skip to main content
Solved

OAuth authentication not working

  • September 5, 2023
  • 6 replies
  • 305 views

  • New Participant
  • 3 replies

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.

Best answer by ostefaniuk Box

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 [github.com]


Cheers,

Olga

View original
Did this topic help you find an answer to your question?

6 replies

ostefaniuk Box
  • Developer Advocate
  • 39 replies
  • September 6, 2023

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


  • Author
  • New Participant
  • 3 replies
  • September 6, 2023

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


ostefaniuk Box
  • Developer Advocate
  • 39 replies
  • September 7, 2023

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


  • Author
  • New Participant
  • 3 replies
  • September 7, 2023

Yes. They are set correctly.


ostefaniuk Box
  • Developer Advocate
  • 39 replies
  • Answer
  • September 15, 2023

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 [github.com]


Cheers,

Olga


  • Author
  • New Participant
  • 3 replies
  • September 15, 2023

You are awesome Olga, thank you!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings