Firestore doesn't work in Zoom App Mobile Client

Zoom Apps
1

Zoom Apps Configuration
Nextjs for frontend and Firestore (Firebase) for database. Compute happens client-side.

Description
I have this page for Zoom App’s Home URL. I want to capture Meeting’s UID and send the person to another page depending on their role - participant vs host. It was perfectly fine on laptop Zoom client. However, I get the error on iOS Zoom client “FirebaseError: Failed to get document because the client is offline.” Any idea why? Why would Firebase not connect on ios but connect on laptop Zoom client?

Code

import { useEffect, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import zoomSdk from "@zoom/appssdk";
import app from "@/lib/firebase";
import {
  getFirestore,
  doc,
  setDoc,
  getDoc,
  serverTimestamp,
} from "firebase/firestore";

export default function ZoomPage() {
  const router = useRouter();
  const db = getFirestore(app);
  const [feedbackList, setFeedbackList] = useState("");

  useEffect(() => {
    async function initializeZoomApp() {
      try {
        await zoomSdk.config({
          popoutSize: { width: 480, height: 360 },
          capabilities: ["shareApp"],
        });

        const userContext = await zoomSdk.getUserContext();
        let { meetingUUID } = await zoomSdk.getMeetingUUID();
        meetingUUID = meetingUUID.replace(/[^a-zA-Z0-9]/g, "");

        const sessionRef = doc(db, "sessions", meetingUUID);
        const docSnapshot = await getDoc(sessionRef);
        if (!docSnapshot.exists()) {
          await setDoc(sessionRef, {
            createdAt: serverTimestamp(),
            createdBy: "Zoom",
          });
        }

        if (userContext.role !== "attendee") {
          window.location.href = `/start?id=${meetingUUID}&zoom=true`;
        } else {
          window.location.href = `/join?id=${meetingUUID}&zoom=true`;
        }
      } catch (error) {
        console.error("Error initializing Zoom App:", error);
        setFeedbackList(error.message);
      }
    }

    initializeZoomApp();
  }, [router]);

  return (
    <>
      <Head>
        <meta name="robots" content="noindex, nofollow" />
        <title>Zoom App</title>
      </Head>
      <p>{feedbackList}</p>
    </>
  );
}
2

@vrajshroff,

Thank you for posting in the Zoom Developer Forum! I did some research on that error and it seems like a common firebase error. Have you tried any troubleshooting steps to resolve this behavior already?

In the meantime, here are some things you can try:

  • Enable robust logging. This would help determine whether it is a known firebase issue
  • Restart your emulator
  • Restart the server and ping the endpoint that connects to firebase
  • Configure offline persistence
3

Thanks for looking into this! I will try to follow these steps. It would be really helpful if Zoom can create a hello world guide for Firebase with Next.js for Zoom Apps. I think that’s probably a common setup.

Thanks again!

4

Thank you for your feedback! We will work on implementing that and I will provide an update here once released. Please feel free to reach out to me directly for any interim updates, @vrajshroff !

5

The error “FirebaseError: Failed to get document because the client is offline” on the iOS Zoom client could be due to restricted network permissions or lack of compatibility between Firebase and the iOS Zoom App environment. To resolve this, ensure that the iOS Zoom client has the necessary network permissions to access Firebase. You might also check if Zoom’s iOS client imposes restrictions on external API calls. Additionally, verify that Firebase’s configuration (including Firestore rules and API keys) is correctly set up for the iOS environment. Debugging network requests or testing on another iOS device could help identify the issue.