App restarts on macOS during in-client OAuth flow

Zoom Apps
1

Hello,

I’m having an issue with the Zoom SDK on macOS desktop client. During the in-client OAuth authorization process, specifically after clicking “Allow” in the OAuth prompt, the app restarts unexpectedly, which prevents the OAuth flow from completing. Additionally, clicking any other buttons in the prompt (“Decline” or “X”) causes the app to close entirely. This behavior does not occur on Windows, where the authorization completes successfully and the app stays open after the prompt.

Issue Details:

  • Platform: macOS
  • SDK: Javascript - @zoom/appssdk v0.16.21
  • Zoom client versions: 6.1.1 (36333 - macOS) | 6.1.1 (41705 - Windows)
  • macOS version: Sonoma 14.5
  • Windows 11 version: 23H2 (22631.3810)
  • Problem: On macOS, app restarts or closes immediately after OAuth prompt, preventing the onAuthorized event from triggering.
  • Expected: The OAuth flow completes as expected without any app restarts or closing, and the onAuthorized event is triggered for the app to handle.

Observed Behavior:

  • macOS: The app restarts or closes immediately after the OAuth prompt.
  • Windows: The authorization completes successfully and the app stays open.

Videos for Reference:

Functioning app on Windows: imgur.com/mihE9cf

Issue on macOS: imgur.com/9BFsY3a

Code to Reproduce:

Here’s a simplified version of the code, including custom hooks used to manage the OAuth process:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Zoom SDK Test</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

index.jsx

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import initZoomSdkAsync from 'vendor/initZoomSdkAsync';
import ZoomAuth from './ZoomAuth';

const App = () => {
    const [isSdkInitialized, setIsSdkInitialized] = useState(false);

    useEffect(() => {
        initZoomSdkAsync().then(() => {
            setIsSdkInitialized(true);
        });
    }, []);

    return (
        <div>
            <h1>Zoom Authorization Test</h1>
            {isSdkInitialized ? <ZoomAuth /> : <p>Loading...</p>}
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

ZoomAuth.jsx

import React, { useState } from 'react';
import { useAuthorizeZoom } from 'useAuthorizeZoom';
import { useOnAuthorized } from 'useOnAuthorized';
import versionFile from 'version.json';

const ZoomAuth = () => {
    const handleAuthorize = useAuthorizeZoom();
    const [outputText, setOutputText] = useState('');

    useOnAuthorized((event) => {
        const eventText = JSON.stringify(event);
        console.debug('Received onAuthorized event:', eventText);
        setOutputText(eventText);
    });

    return (
        <div>
            <button onClick={handleAuthorize}>Authorize with Zoom</button>
            <p>{outputText}</p>
            <p />
            <p>App version: {versionFile.version}</p>
        </div>
    );
};

export default ZoomAuth;

useAuthorizeZoom.js

import { useCallback } from 'react';
import zoomSdk from 'vendor/zoomSdk';

export const useAuthorizeZoom = () => {
    const handleAuthorize = useCallback(async () => {
        console.debug('Starting OAuth flow with Zoom.');
        try {
            const codeChallenge = 'exampleCodeChallenge123';
            const state = 'exampleState456';

            await zoomSdk
                .authorize({
                    state,
                    codeChallenge,
                })
                .then((ret) => {
                    console.debug(ret);
                })
                .catch((e) => {
                    console.error(e);
                });
        } catch (error) {
            console.error('Error initiating OAuth flow:', error);
        }
    }, []);

    return handleAuthorize;
};

export default useAuthorizeZoom;

useOnAuthorized.js

import { useEffect } from 'react';
import zoomSdk from 'vendor/zoomSdk';

export const useOnAuthorized = (callback) => {
    useEffect(() => {
        zoomSdk.addEventListener('onAuthorized', callback);
    }, [callback]);
};

export default useOnAuthorized;

Given the difference in behavior observed between Windows and macOS, the issue appears to be a bug either with the Zoom SDK or the macOS desktop client. Could you please investigate this behavior? Any assistance or insights would be greatly appreciated.

Thank you for your attention.