Meeting SDK does not work with SSO meetings

[felipe.armoni (Felipe)]

Hi, we have an app that uses the @zoom/meetingsdk to join meetings.

However, we are getting the following error when trying to join meetings in which the user must be authenticated through an SSO:

zoomus-websdk-loginview.umd.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'webEndpoint')
    at Function.mapToProps (zoomus-websdk-loginv….umd.min.js:1:26257)
    at r (zoomus-websdk-zoommt…md.min.js:2:1912216)
    at r.mapToProps (zoomus-websdk-zoommt…md.min.js:2:1912334)
    at r (zoomus-websdk-zoommt…md.min.js:2:1912198)
    at zoomus-websdk-zoommt…md.min.js:2:1911642
    at zoomus-websdk-zoommt…md.min.js:2:1908203
    at mountMemo (react-dom.development.js:15442:1)
    at Object.useMemo (react-dom.development.js:15738:1)
    at useMemo (react.development.js:1521:1)
    at O (zoomus-websdk-zoommt…md.min.js:2:1908147)
react-dom.development.js:19527 The above error occurred in the <Connect(t)> component:
    in Connect(t)
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by s)
    in div (created by s)
    in c (created by s)
    in s

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
react-dom.development.js:248 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:248:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22154:1)
    at workLoopSync (react-dom.development.js:22130:1)
    at performSyncWorkOnRoot (react-dom.development.js:21756:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)

We’ve managed to reproduce this issue using your Meeting SDK React Sample project (GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React).

Steps to reproduce:

1. Clone the sample repository (GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React).
2. Run npm install.
3. Change the App component to join a meeting that has SSO login (see code below).
4. Click on the join button and notice the error. above.

App.js:

import React from 'react';

import './App.css';
import { ZoomMtg } from '@zoom/meetingsdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

function App() {
  var authEndpoint = '';
  var sdkKey = 'YOUR SDK KEY FOR SSO MEETING';
  var meetingNumber = 'YOUR MEETING NUMBER FOR SSO MEETING';
  var passWord = 'VjSfwJo0';
  var role = 0;
  var userName = 'React';
  var userEmail = '';
  var registrantToken = '';
  var zakToken = '';
  var leaveUrl = 'http://localhost:3000';

  function getSignature(e) {
    e.preventDefault();

    startMeeting('YOUR SIGNATURE FOR THE SSO MEETING');
  }

  function startMeeting(signature) {
    document.getElementById('zmmtg-root').style.display = 'block';

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      patchJsMedia: true,
      success: (success) => {
        console.log(success);

        ZoomMtg.join({
          signature: signature,
          sdkKey: sdkKey,
          meetingNumber: meetingNumber,
          passWord: passWord,
          userName: userName,
          userEmail: userEmail,
          tk: registrantToken,
          zak: zakToken,
          success: (success) => {
            console.log(success);
          },
          error: (error) => {
            console.log(error);
          },
        });
      },
      error: (error) => {
        console.log(error);
      },
    });
  }

  return (
    <div className="App">
      <main>
        <h1>Zoom Meeting SDK Sample React</h1>

        <button onClick={getSignature}>Join Meeting</button>
      </main>
    </div>
  );
}

export default App;