401 Unauthorized with Remote Sources

Hey there! I need to let users upload documents from their Google Drive accounts. And as we’re already using Uppy, Remote Sources seemed like a good way to go.

Problem

I’m going for the Transloadit setup, so I’m following these instructions, using COMPANION_URL and COMPANION_ALLOWED_HOSTS from @uppy/transloadit.
However, every time I want to connect to any remote source (Google Drive, Dropbox), the request to Transloadit (e.g. https://api2.transloadit.com/companion/drive/list/root in the case of Google Drive) gets a 401.

Reproducing

In order not to include any of my own code, this issue is easily reproducible in the canonical example at Uppy.

  1. Go to Uppy
  2. Click on StackBlitz
  3. Comment out the lines with Audio since it’s missing in the deps, and we’re not using it.
  4. In the preview app, click on Google Drive (or Dropbox, or others) and in the developer tools see the request returning a 401.
  5. We can disregard the failed request, go on and connect to a Google Drive account, but after that we cannot move forward, due to a message like this:

Versions

This is happening at least with Uppy v4.13.3 and the versions in the canonical example.

Comments

  • When changing the Remote Sources plugin for the Google Drive or Dropbox the same happened: 401 on similar requests.
  • I also tried using my own OAuth credentials, stored in my Transloadit account, including the
companionKeysParams: {
    key: 'YOUR_TRANSLOADIT_API_KEY',
    credentialsName: 'my_companion_dropbox_creds',
},

object in GoogleDrive plugin init, but with identical results.

Wrap

Perhaps it’s some obvious config issue, but I’ve gone through all the docs available and many threads in the forum and while finding similar cases, no solution for this problem. Hope it helps others also. I think the tool is great and these issues should not discourage people from using it.

Hi, Transloadit’s app is blocked and will likely continue to be.

Against our best wishes, Google (also Facebook/Instagram) have become practically hostile regarding API access. It costs us significant amount of compliancy work to maintain Google, Instagram, Facebook, Dropbox, Box, and OneDrive credentials with increasingly demanding requirements and third-party audits.

Our tokens for Google Drive is mostly meant to get customers going without waiting for API approval, but not for the long-term in any case.

As many companies can’t handle the extensive requirements of getting the token with these restrictive scopes, we started work on @uppy/google-drive-picker, which uses the Google Picker UI to significantly reduce the verification process. The downside is less controls, inability to select folders, downloading an additional bundle, and a less consistent user experience.

I recommend integrating @uppy/google-drive-picker yourself, which doesn’t require intense verification and is quite easy to get going.

1 Like

Thanks for your respose, @Merlijn! Although not being great news, at least I’ve got an explanation now, and a way forward.

I’ll proceed to integrate @uppy/google-drive-picker, which I had already considered, but didn’t prefer due to the downsides compared to Remote Sources/Google Drive.

However, according to your explanation, it should be possible to integrate @uppy/google-drive using our own credentials stored in Transloadit (using companionKeysParams), is that right?

We have already integrated OAuth with Google accounts for login/signup in our app (already in production). Do you think if we leverage that same client to get the necessary permissions to read we would have a less troublesome time? Have you heard of successful integrations like that lately?

Thanks again!

If you already have an app with the restricted auth/drive.readonly (requires CASA Tier 2 compliance and a security audit by a third-party) or are willing to get it (can take months) then you definitely can use that token and pass it to Transloadit.

1 Like

More info here: Restricted scope verification  |  Authorization  |  Google for Developers

1 Like