[CAL-3823] Webex app not working about cal.com

[dosubot]

To resolve the issue where the Webex app leads to an empty page after logging in, displaying only an empty JSON object, you should check the handler function in your Webex API callback implementation. This function processes the response from the Webex API and handles various scenarios, including errors and empty responses.

Here is the relevant part of the code:

import type { NextApiRequest, NextApiResponse } from "next";

import { WEBAPP_URL } from "@calcom/lib/constants";
import prisma from "@calcom/prisma";

import getInstalledAppPath from "../../_utils/getInstalledAppPath";
import createOAuthAppCredential from "../../_utils/oauth/createOAuthAppCredential";
import config from "../config.json";
import { getWebexAppKeys } from "../lib/getWebexAppKeys";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { code } = req.query;
  const { client_id, client_secret } = await getWebexAppKeys();

  /** @link https://developer.webex.com/docs/integrations#getting-an-access-token **/

  const redirectUri = encodeURI(`${WEBAPP_URL}/api/integrations/${config.slug}/callback`);
  const authHeader = `Basic ${Buffer.from(`${client_id}:${client_secret}`).toString("base64")}`;
  const result = await fetch(
    `https://webexapis.com/v1/access_token?grant_type=authorization_code&client_id=${client_id}&client_secret=${client_secret}&code=${code}&redirect_uri=${redirectUri}`,
    {
      method: "POST",
      headers: {
        Authorization: authHeader,
        "Content-Type": "application/x-www-form-urlencoded",
      },
    }
  );

  if (result.status !== 200) {
    let errorMessage = "Something is wrong with Webex API";
    try {
      const responseBody = await result.json();
      errorMessage = responseBody.error;
    } catch (e) {}

    res.status(400).json({ message: errorMessage });
    return;
  }

  const responseBody = await result.json();

  if (responseBody.error) {
    res.status(400).json({ message: responseBody.error });
    return;
  }

  responseBody.expiry_date = Math.round(Date.now() + responseBody.expires_in * 1000);
  delete responseBody.expires_in;

  const userId = req.session?.user.id;
  if (!userId) {
    return res.status(404).json({ message: "No user found" });
  }
  /**
   * With this we take care of no duplicate webex key for a single user
   * when creating a video room we only do findFirst so the if they have more than 1
   * others get ignored
   * */
  const existingCredentialWebexVideo = await prisma.credential.findMany({
    select: {
      id: true,
    },
    where: {
      type: config.type,
      userId: req.session?.user.id,
      appId: config.slug,
    },
  });

  // Making sure we only delete webex_video
  const credentialIdsToDelete = existingCredentialWebexVideo.map((item) => item.id);
  if (credentialIdsToDelete.length > 0) {
    await prisma.credential.deleteMany({ where: { id: { in: credentialIdsToDelete }, userId } });
  }

  await createOAuthAppCredential({ appId: config.slug, type: config.type }, responseBody, req);

  res.redirect(getInstalledAppPath({ variant: config.variant, slug: config.slug }));
}

To debug and resolve this issue, you can add additional logging or checks to ensure that the response body is correctly handled and not empty. For example, you can add a check to log the response body if it is empty:

const responseBody = await result.json();

if (Object.keys(responseBody).length === 0) {
  console.error("Empty response body:", responseBody);
  res.status(400).json({ message: "Received empty response body from Webex API" });
  return;
}

if (responseBody.error) {
  res.status(400).json({ message: responseBody.error });
  return;
}

This will help you identify if the response body is indeed empty and provide more information for debugging ^[1].

To continue talking to Dosu, mention @dosu.