Join invalid parameter!

Meeting SDK Web
3

Thanks a lot for your help. At this moment im not getting errors at all, but im not able to see nothing at render.

Screen Shot 2020-08-06 at 16.29.45
Screen Shot 2020-08-06 at 16.29.453360×1706 436 KB

This is how console looks like:

Navigated to http://localhost:5000/zoomtest
log.js:24 [HMR] Waiting for update signal from WDS...
index.js:62 res {method: "generateSignature", status: true, errorCode: 0, errorMessage: null, result: ""}
zoomtest:1 Unchecked runtime.lastError: The message port closed before a response was received.
webpackHotDevClient.js:138 ./src/components/MakeAQuestion.js
  Line 74:6:  React Hook useEffect has a missing dependency: 'urlAlias'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_audio.encode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.decode.wasm
2zoomus-websdk.umd.min.js:2 pre load wasm success: https://source.zoom.us/1.7.10/lib/av/5510_video.mt.wasm
index.js:43 Init Success  {method: "init", status: true, errorCode: 0, errorMessage: null, result: null}
index.js:44 ObjectapiKey: "A-xfS8eJ9vTwCaLIv0EPMsIw"error: ƒ error(res)meetingNumber: "***********"passWord: ""role: 1signature: ""success: ƒ success()userEmail: "test@test.com"userName: "Test"__proto__: Object
2DevTools failed to load SourceMap: Could not load content for https://source.zoom.us/1.7.10/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

and the whole code:

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import { ZoomMtg } from '@zoomus/websdk';

const apiKeys = {
  apiKey: process.env.REACT_APP_ZOOM_API_KEY,
  apiSecret: process.env.REACT_APP_ZOOM_API_SECRET
};

const meetConfig = {
  apiKey: apiKeys.apiKey,
  meetingNumber: '***********',
  userName: 'Test',
  userEmail: 'test@test.com', // must be the attendee email address
  passWord: '',
  role: 1,
  error(res) {
    console.log('Joining meeting Error');
    console.dir(res);
  },
  success() {
    console.log('Success');
  }
};

export default () => {
  ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.10/lib', '/av');
  ZoomMtg.preLoadWasm();
  ZoomMtg.prepareJssdk();
  ZoomMtg.getJSSDKVersion();

  const joinMeeting = (signature) => {
    ZoomMtg.init({
      leaveUrl: 'www.google.com',
      isSupportChat: false,
      isSupportQA: false,
      isLockBottom: false,
      success: (success) => {
        console.log('Init Success ', success);
        console.dir({ ...meetConfig, signature });
        ZoomMtg.join({ ...meetConfig, signature });
      }
    });
  };

  useEffect(() => {
    /**
     * You should not visible api secret key on frontend
     * Signature must be generated on server
     * https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
     */
    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: meetConfig.apiKey,
      apiSecret: apiKeys.apiSecret,
      role: meetConfig.role,
      success: (res) => {
        console.log('res', res);

        setTimeout(() => {
          joinMeeting(res.result);
        }, 1000);
      }
    });
  }, []);

  return <button type="button">Empezar</button>;
};

My idea is to get the minimal implementation of zoom working, and then start customizing and play.
Thanks in advance.

*This post has been edited to remove any meeting / webinar IDs