Unable to join session with Zoom Video SDK for Web

Video SDK
1

Video SDK Type and Version
“@zoom/videosdk”: “^1.6.2”,

Description
I am trying to create/join a session with Zoom Video SDK for Web, but I am running into unexpected behaviours.

First, creating the SDK object and initializing in the same way as the React-demo app, it succeeds. I get no errors.

Then I try to join a session, it failed.

If you pass the SDKkey and SDKsecret in the React demo app and the payload is the same, the join succeeds and the app works fine.

So I am guessing that there is a problem with the JWT token generation, but if I incorporate the JWT token code from the React demo app directly into my app, the join does not succeed.

I even used the exact same session name, user name, … etc and the exact same token string.

In this case, what do you think is causing the join to fail?
I would be grateful if you could tell me.

Thank you.

Related Codes
useJoinSession.ts

  useEffect(() => {
        const init = async () => {
            let client = ZoomVideo.createClient();
            await client.init('en-US', `CDN`)
                .then(() => {
                    setZmClient(client);
                })
                .catch((error) => {
                    console.log("SDKTEST client.init failed", error)
                })
            try {
                await client.join(meetingArgsData.topic, meetingArgsData.testSignature, meetingArgsData.userName, meetingArgsData.password)
                    .then(() => {
                  // processing  after join 
                }
    }
}

createSignature.ts

import { KJUR } from "jsrsasign";

export function generateVideoToken(
    sdkKey: string,
    sdkSecret: string,
    topic: string,
    passWord: string,
    sessionKey: string,
    userIdentity: string,
    roleType: number,
) {
    let signature = "";
    try {
        const iat = Math.round(new Date().getTime() / 1000);
        const exp = iat + 60 * 60 * 2;

        const oHeader = { alg: "HS256", typ: "JWT" };
        const oPayload = {
            app_key: sdkKey,
            iat,
            exp,
            tpc: topic,
            pwd: passWord,
            user_identity: userIdentity,
            session_key: sessionKey,
            role_type: roleType, 
        };
        const sHeader = JSON.stringify(oHeader);
        const sPayload = JSON.stringify(oPayload);
        signature = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, sdkSecret);
    } catch (e) {
        console.error(e);
    }
    console.log("signature Successed frontSignature: " + signature)
    return signature;
}

export function isShallowEqual(objA: any, objB: any) {
    if (objA === objB) {
        return true;
    }

    if (!objA || !objB) {
        return false;
    }

    const aKeys = Object.keys(objA);
    const bKeys = Object.keys(objB);
    const len = aKeys.length;

    if (bKeys.length !== len) {
        return false;
    }

    for (let i = 0; i < len; i++) {
        const key = aKeys[i];

        if (key === undefined) {
            continue;
        }

        if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
            return false;
        }
    }
    return true;
}

export function b64EncodeUnicode(str: any) {
    return btoa(
        encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, p1) {
            return String.fromCharCode(("0x" + p1) as any);
        }),
    );
}

export function b64DecodeUnicode(str: any) {
    return decodeURIComponent(
        atob(str)
            .split("")
            .map(function (c) {
                return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join(""),
    );
}

config.ts

export const meetingConfig = {
    sdkKey:  '', // my sdkKey
    sdkSecret: '' ,  // my sdkSecret
    webEndpoint: 'zoom.us',
    topic: 'Test Session',
    name: `${getExploreName()}-${Math.floor(Math.random() * 1000)}`,
    password: '',
    signature: '',
    sessionKey: '',
    userIdentity: 'user123',
    role: 1
};