Uppy companion - Invalid client_id with error code 4700

[tritran215]

Hi Uppy team.

I am one of so many guys who like your app.
Today, I'd like to configurate with zoom and companion standalone server.
Of course, the dashboard ui displays with local file browser and zoom icons.
But when I click zoom connect button, it displays error message.
{"status":false,"errorCode":4700,"errorMessage":"Invalid client_id: Xf7iC7oXQvyy_Cfak4NvsA","result":null}

I used to command companion --config ./uppycofig.json.

I used JWT key and secret key for setting.
My companion file(uppyconf.json) is here.

{
  "providerOptions": {
    "zoom": {
      "key": "key from zoom JWT",
      "secret": "secret key from zoom JWT"
    }
  },
  "server": {
    "host": "localhost:3020",
    "protocol": "http"
  },
  "filePath": "./download",
  "sendSelfEndpoint": "localhost:3020",
  "secret": "mysecret",
  "uploadUrls": ["https://myuploadurl.com", "http://myuploadurl2.com"],
  "debug": true
}

I am working on next project.
Here is code for uppy setting.

import React from 'react';

import Box from '@mui/material/Box';

import OrgUppy from '@uppy/core';
import '@uppy/core/dist/style.css';

import Dashboard from '@uppy/dashboard';
import '@uppy/dashboard/dist/style.css';

import {Dashboard as Container} from '@uppy/react';
import Tus from '@uppy/tus';
import Zoom from '@uppy/zoom';

import {UppyProps} from './Uppy.types';

const uppy = new OrgUppy({
  meta: {type: 'avatar'},
  restrictions: {maxNumberOfFiles: 1},
  autoProceed: true,
});

uppy
  .use(Dashboard, {
    trigger: '#Uppy',
    showProgressDetails: true,
  })
  .use(Zoom, {
    target: Dashboard,
    companionUrl: 'http://localhost:3020/',
  })
  .use(Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})
  .on('complete', (result) => {
    console.log('Upload result:', result);
  });

const Uppy = (props: UppyProps) => {
  return (
    <Box data-testid="Uppy">
      <Container uppy={uppy} {...props} />
    </Box>
  );
};

export default Uppy;

Here is my environment.

• OS: Windows 10
• Editor: Visual studio code
• "dependencies": {
  "@nrwl/next": "14.1.5",
  "@uppy/companion": "^3.5.2",
  "@uppy/core": "^2.2.0",
  "@uppy/zoom": "^1.1.0",
  "core-js": "^3.6.5",
  "next": "12.1.5",
  "react": "18.1.0",
  "react-dom": "18.1.0",
  "react-is": "18.1.0",
  "regenerator-runtime": "0.13.7",
  "styled-components": "5.3.5",
  "tslib": "^2.3.0"
  },

My Question is
Which kind of key and secret should I use for zoom companion?
I tried with JWT and SDK. but both of them got error messages.

Hope your good advise soon!

Thanks

[Murderlon]

Hi, couple of things going wrong here:

• You import Dashboard twice, you should not use and import from @uppy/dashboard in React, only @uppy/react.
• It seems you initialize Uppy incorrectly. See these docs.
• You are forgetting the plugins prop.
• Based on previous issues (Dropbox sign in flow not working: Missing 'client_id' #3675, OneDrive sign-in flow complains about missing client_id parameter in request body #3663), my guess is that it's a config issue on the Zoom side.

[tritran215]

Hi @Murderlon
Thanks for your details reply.

I updated my code by following above steps.
`import React from 'react';

import Box from '@mui/material/Box';

import OrgUppy from '@uppy/core';
import '@uppy/core/dist/style.css';

import '@uppy/dashboard/dist/style.css';

import {Dashboard, useUppy} from '@uppy/react';
import Tus from '@uppy/tus';
import Zoom from '@uppy/zoom';

import {UppyProps} from './Uppy.types';

const Uppy = (props: UppyProps) => {
const uppy = useUppy(() => {
return new OrgUppy({
meta: {type: 'avatar'},
restrictions: {maxNumberOfFiles: 1},
autoProceed: true,
})
.use(Tus, {endpoint: 'https://tusd.tusdemo.net/files'})
.use(Zoom, {companionUrl: 'https://companion.uppy.io'});
});

return (

<Dashboard uppy={uppy} {...props} plugins={['Zoom']} />

);
};

export default Uppy;`

It works to render same UI but still getting error when I click connect to zoom buttonlike {"status":false,"errorCode":4700,"errorMessage":"Invalid client_id: ","result":null}.

Here is the code for companion's configure.json in server side.
{ "providerOptions": { "zoom": { "key": "zzKXNQTSDavJZeq3pxDcg", "secret": "oauth secret key" } }, "server": { "host": "localhost:3020", "protocol": "http" }, "filePath": "./download", "sendSelfEndpoint": "localhost:3020", "secret": "mysecret", "uploadUrls": ["https://myuploadurl.com", "http://myuploadurl2.com"], "debug": true }

[tritran215]

@Murderlon
I confiugred oAuth app called uppyCloudServer in my zoom account what I already added in the uppy component.
When I test it there, It shows me confirming page and redirected to the purpose link(testd.com).
But it doesn't work correctly what I expected in the uppy component.

Here is the screenshots.

Can you check it for me?

• Why uppy zoom connection doesn't work with zoom oauth key and sdk like from zoom account setting page?
• For the development, can I set add localhost domain to rediect url and whitelist ?

Best.

[Murderlon]

I have never used the Zoom plugin. Perhaps @arturi knows more about it (together with #3684).

[tritran215]

@Murderlon
I have another question.
I know uppy doesn't support windows, but I'd like to know if there is any way to run companion command in the vs code bash or terminal.
Actually, I have been run cmd companion --config ./uppyconf.json but I can't run again after restarting the vscode.
I am sure it is possible to run it windows.

Hope your good advise.
Thanks.

[Murderlon]

I'm not sure about windows but you should definitely be able to run it with WSL.

[tritran215]

I've already checked it with WSL2 but still not worked.

[Murderlon]

Closing this but feel free to continue the discussion