# Web sdk integration in React JS - JWT migration to SDK

**URL:** <https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399>\
**Category:** API and Webhooks\
**Created:** [April 26, 2023, 5:56am UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399 "2023-04-26T05:56:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ithelp](https://avatars.discourse-cdn.com/v4/letter/i/898d66/32.png) [@ithelp](https://devforum.zoom.us/u/ithelp)\
**Post date:** [April 26, 2023, 5:56am UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399/1 "2023-04-26T05:56:36Z")

</div>

Topic:Web sdk integration in React JS - JWT migration to SDK

We are using jwt credentials for integrating zoom web sdk in react application, but using jwt details web sdk not working and we tried to create Meeting SDK and we are using sdk credentails for Web sdk integration.

As a host web sdk is working but as a participant it is not working, i am attaching error screen, please check.

And also following is the code for web sdk integration, please check and let me know any issues from my side.

And also please check created sdk app settings in account, is we created correctly or not.

import { ZoomMtg } from ‘@zoomus/websdk’;  
import { useUser } from ‘hooks/index’;

ZoomMtg.setZoomJSLib(‘[https://source.zoom.us/lib](https://source.zoom.us/lib)’, ‘/av’);  
ZoomMtg.preLoadWasm();  
ZoomMtg.prepareWebSDK();  
// loads language files, also passes any error messages to the ui  
ZoomMtg.i18n.load(‘en-US’);  
ZoomMtg.i18n.reload(‘en-US’);

const signature = ZoomMtg.generateSDKSignature({  
meetingNumber: meetingData?.id,  
sdkKey: sdkKey,  
sdkSecret: sdkSecret,  
role: meetingData?.role,  
});

//for participant  
ZoomMtg.join({  
meetingNumber: meetingData?.id,  
userName: userLoggedIn?.fullName,  
signature: signature,  
sdkKey: sdkKey,  
userEmail: userLoggedIn?.email,  
passWord: passWord,  
tk: params[1],  
meetingInfo: ,  
success: () =\> {  
showToastSuccess(‘Joined meeting successfully’);  
},  
error: (error) =\> {  
console.log(error);  
showToastError(error);  
},  
});

//For instructor  
ZoomMtg.join({  
meetingNumber: meetingData?.id,  
userName: userLoggedIn?.fullName,  
signature: signature,  
sdkKey: sdkKey,  
userEmail: userLoggedIn?.email,  
passWord: passWord,  
success() {  
showToastSuccess(‘Meeting started successfully’);  
},  
error(res) {  
console.log(res);  
showToastError(res);  
},  
});

//signature generating in node js also  
const sdkKey = ‘c6XoxxxxxxxxxxxX’;  
const sdkSecret = ‘pwlIxxxxxxxxxxxxxxY’;  
const iat = Math.round(new Date().getTime() / 1000) - 30;  
const exp = iat + 60 \* 60 \* 2;  
const oHeader = { alg: ‘HS256’, typ: ‘JWT’ };  
const oPayload = {  
sdkKey: sdkKey,  
mn: meetingNumber,  
role: role,  
iat: iat,  
exp: exp,  
appKey: sdkKey,  
tokenExp: iat + 60 \* 60 \* 2,  
};

```
const sHeader = JSON.stringify(oHeader);
const sPayload = JSON.stringify(oPayload);
signature = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, sdkSecret)

```

Please resolve it ASAP.

Thanks,  
Mindchamps Team.

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [April 26, 2023, 12:16pm UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399/2 "2023-04-26T12:16:22Z")

</div>

@ithelp hope you will be fine.

Here are the sessions regarding WebSDK Integrations

- [Zoom Meeting SDK Integration with VueJS](https://youtu.be/CMpe56VoTTo)
- [Zoom Meeting SDK Integration with ReactJS](https://youtu.be/4BgkLvH7T0Y)
- [Zoom Meeting SDK Integration with AngularJS](https://youtu.be/utXjISjjHOY)

---

<div class="post-metadata">

**Author:** ![ithelp](https://avatars.discourse-cdn.com/v4/letter/i/898d66/32.png) [@ithelp](https://devforum.zoom.us/u/ithelp)\
**Post date:** [April 26, 2023, 12:26pm UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399/3 "2023-04-26T12:26:02Z")

</div>

tried the same way not worked,

is OAuth allow list and Redirect URL for OAuth are important?

And what i need to place there while using sdk instead of jwt.

---

<div class="post-metadata">

**Author:** ![sumeet.max2215](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sumeet.max2215/32/53022_2.png) [@sumeet.max2215](https://devforum.zoom.us/u/sumeet.max2215)\
**Post date:** [December 1, 2023, 6:11am UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399/4 "2023-12-01T06:11:31Z")

</div>

did u managed to resolve this…?  
i have been trying to integrate React js with sdk (but secret id and all is generated using oauth)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [December 3, 2024, 9:48pm UTC](https://devforum.zoom.us/t/web-sdk-integration-in-react-js-jwt-migration-to-sdk/87399/5 "2024-12-03T21:48:15Z")

</div>

This topic was automatically closed 368 days after the last reply. New replies are no longer allowed.