Zoom Web SDK – “Invalid apiKey/sdkKey and/or signature”

I want to show a meeting in my Next.js App and I have a problem, Im getting this error:
“INVALID_OPERATION” – “Invalid apiKey/sdkKey and/or signature” Error.
Im doing every step by the docs and dont understand where I felt.

I took the ZOOM_CLIENT_ID and ZOOM_CLIENT_SECRET from the marketplaces:
https://marketplace.zoom.us/develop/applications/myid

my server code that generate the signature:

import { NextApiRequest, NextApiResponse } from “next”;
import { KJUR, hextob64 } from ‘jsrsasign’;

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { meetingNumber = “”, role = “0” } = req.query;
const apiKey = process.env.ZOOM_CLIENT_ID;
const apiSecret = process.env.ZOOM_CLIENT_SECRET;
console.log(apiKey, apiSecret, meetingNumber, role);
if (!apiKey || !apiSecret || !meetingNumber) {
return res.status(400).json({ error: “Missing required parameters” });
}

try {
const result = generateSignature(apiKey, apiSecret, meetingNumber, role);
res.status(200).json({ result, sdkKey: apiKey });
} catch (error) {
console.error(“Error generating signature:”, error);
res.status(500).json({ error: “Internal server error” });
}
}

function generateSignature(key: any, secret: any, meetingNumber: any, role: any) {
const iat = Math.round(new Date().getTime() / 1000) - 30
const exp = iat + 60 * 60 * 2
const oHeader = { alg: ‘HS256’, typ: ‘JWT’ }

const oPayload = {
sdkKey: key,
appKey: key,
mn: meetingNumber,
role: role,
iat: iat,
exp: exp,
tokenExp: exp
}

const sHeader = JSON.stringify(oHeader)
const sPayload = JSON.stringify(oPayload)
const sdkJWT = KJUR.jws.JWS.sign(‘HS256’, sHeader, sPayload, secret)
return sdkJWT;
}

the zoom meeting component:
// components/ZoomMeeting.tsx
import React, { useState } from “react”;
import ZoomMtgEmbedded from “@zoom/meetingsdk/embedded”;

interface ZoomMeetingProps {
meetingNumber?: string;
userName?: string;
}

const ZoomMeeting: React.FC = ({
meetingNumber = “88434450302”,
userName = “React User”,
}) => {
const [client] = useState(() => ZoomMtgEmbedded.createClient());

const getSignature = async (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
e.preventDefault();
try {
const response = await fetch(
/api/getZoomJwt?meetingNumber=${meetingNumber},
);
const { signature, sdkKey } = await response.json();
startMeeting(signature, sdkKey);
} catch (error) {
console.error(“Error getting JWT for Zoom”, error);
}
};

const startMeeting = (signature: string, sdkKey:string) => {
let meetingSDKElement = document.getElementById(“meetingSDKElement”);
if (!meetingSDKElement) return;

client
  .init({
    zoomAppRoot: meetingSDKElement,
    language: "en-US",
  })
  .then(() => {
    client
      .join({
        signature,
        meetingNumber,
        userName,
        password: "eGXsGO15II6lWJSd3fEQKywwE8q9Ng.1",
        sdkKey,
        success: (success: any) => {
          console.log(success)
        },
        error: (error: any) => {
          console.log(error)
        }
      })
  })
  .catch((error) =>
    console.error("Error initializing the meeting:", error),
  );
};

return (

<div
id=“meetingSDKElement”
style={{ width: “100%”, height: “500px” }}
>

Join Meeting

);
};
export default ZoomMeeting;

Please help me

To join the zoom meeting