Error When installing zoomapps-advancedsample-react

Zoom Apps
1

Zoom Apps Configuration
This is the unchanged zoomapps-advancedsample-react from github. built with docker on Windows 11 WLS 2.0

Description
The Install process ends with a 500 error, The app shows up as installed in zoom but, when started, also gets the 500 error

Error?
right after step 2c according to the console log from the backend, there is a GET /api/zoomapp/auth?code=[redacted]
RangeError: Invalid key length
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at Cipheriv.createCipherBase (node:internal/crypto/cipher:116:19)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at Cipheriv.createCipherWithIV (node:internal/crypto/cipher:135:3)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at new Cipheriv (node:internal/crypto/cipher:243:3)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at Object.createCipheriv (node:crypto:138:10)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at Object.afterSerialization (/home/node/app/util/encrypt.js:6:24)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at Object.upsertUser (/home/node/app/util/store.js:49:15)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at auth (/home/node/app/api/zoomapp/controller.js:218:19)
2023-04-08 16:59:59 zoomapps-advancedsample-react-backend-1 | at processTicksAndRejections (node:internal/process/task_queues:96:5)

Troubleshooting Routes
This is the sample app. am unable to rightclick open the developer console in the client. have tried reinstalling etc.

How To Reproduce
Follow the build instructions Follow the readme instructions on github. start ngrok etc and open a firefox browser tab at [ngok adr]/api/zoomapp/install

2

This is not about your main issue, but since you said you cannot open the devTools in client - have you done this: https://developers.zoom.us/docs/zoom-apps/create/#enable-developer-tools ?

3

I have, Double-checked after your reply and the required tag is in the ini file. Thank you for being helpful.

4

What do you have for ZOOM_APP_OAUTH_STATE_SECRET= in your .env file?

6

I don’t have that tag.

Client ID for your Zoom App

ZM_CLIENT_ID=[redacted]

Client Secret for your Zoom app

ZM_CLIENT_SECRET=[redacted]

Redirect URI set for your app in the Zoom Marketplace

ZM_REDIRECT_URL=https://smartypants.ngrok.io/auth

App Name used for isolating logs

APP_NAME=zoomapps-sample-js

Key used Sign Session Cookies

SESSION_SECRET=[redacted]

and also have an OenAI Key.

7

Everywhere up until now you were saying this was in zoomapps-advancedsample-react, not zoomapps-sample-js:

Are you looking in the wrong project?

8

I have the unable to see the developer console problem in both apps. I thought that’s what you were talking about. here is my .env for the advanced sample. I did not supply anything which says it can be supplied later and I did use Docker.

https (ngrok) public url

PUBLIC_URL=https://fb04-98-97-16-204.ngrok-free.app

ZOOM_HOST=“https://zoom.us”

Secret for signing session cookies

The reference app uses this to sign the express-session instance

Refer to backend/middleware.js line 26

Lines starting with a ‘$’ are terminal commands; you’ll need the openssl program.

Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.

$ openssl rand -hex 16

SESSION_SECRET=“YOuCanRePLaCEThiSWithThECommANDAboveLaTER”

URL where your frontend is served from (can be localhost)

Will be set automatically by docker-compose, uncomment if not using docker-compose

ZOOM_APP_CLIENT_URL=“”

OAuth client credentials (from Marketplace)

App Credentials > Development/Production > [Client ID, Client Secret]

ZOOM_APP_CLIENT_ID=[redacted]
ZOOM_APP_CLIENT_SECRET=[redacted]

OAuth redirect (must be configured in Marketplace)

App Credentials > Redirect URL for OAuth

Will be set automatically by docker-compose, uncomment if not using docker-compose

ZOOM_APP_REDIRECT_URI=“”

For OAuth state validation

Why? Refer to:

https://marketplace.zoom.us/docs/guides/auth/oauth

Prevent Attacks and Redirect Users with OAuth 2.0 State Parameters

RFC 6749: The OAuth 2.0 Authorization Framework

Lines starting with a ‘$’ are terminal commands; you’ll need the openssl program.

Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.

$ openssl rand -hex 16

ZOOM_APP_OAUTH_STATE_SECRET=“YOuCanRePLaCEThiSWithThECommANDAboveLaTER”

REDIS is used as the DB driver for session management (express-session). Other drivers could be used but

installation of additional packages may be necessary.

Refer to the bottom of the README as well

Lines starting with a ‘$’ are terminal commands; you’ll need the openssl program.

Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.

$ openssl rand -hex 16

REDIS_ENCRYPTION_KEY=“YOuCanRePLaCEThiSWithThECommANDAboveLaTER”
REDIS_URL=redis://redis:6379/1

For 3rd party OAuth flow (Auth0 - optional)

Refer to: Get Started

Your Auth0 web app client ID

AUTH0_CLIENT_ID=“”

Your Auth0 web app client secret

AUTH0_CLIENT_SECRET=“”

Your Auth0 web app domain (ie. https://us.auth0.com)

AUTH0_ISSUER_BASE_URL=“”

9

Well, as I’ve found out, you can’t. You actually need a 32-digit hexadecimal number in place of that. You can get OpenSSL for Windows here.

10

As you suggested, I installed OpenSSL for windows, generated the hex number, and put in in the .env. I deleted the local repository, reclonedit from github, put the .env file in, and rebuilt from docker. Unfortunately, I don’t even get as far as I did before. when I try the initial address of/api/zoomapp/install I get a bad gateway error as if there were no server running. I also cannot connect to http://localhost:9090/api/zoomapp/proxy. NGROK ses the GET to /api/zoomapp/install but only the 502 error in response. I have double-checked that client secret etc. are correct in the .env and agree with the marketplace, Note that I can get the simple sample app running with no problem. The one irregularity in marketplace is that underneath where I put my domain in the domain allow list, I get the error message "Domain violates Zoom App Marketplace domain policy. Reason: Developer tools should be removed before publishing the app. " I have market intent to publish for this test as no,

11

Hello! Were you able to make progress on this issue? I’m currently encountering the same problem as you are, and I’m not sure how to fix it.