# Video SDK UI Toolkit - Angular (Web) Unable to Load / Join Session **URL:** \ **Category:** Video SDK\ **Created:** [September 12, 2024, 7:41am UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344 "2024-09-12T07:41:39Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![irfan.nettech](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/irfan.nettech/32/63259_2.png) [@irfan.nettech](https://devforum.zoom.us/u/irfan.nettech)\ **Post date:** [September 12, 2024, 7:41am UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344/1 "2024-09-12T07:41:39Z")
I am trying to integrate Video SDK UI Toolkit v 1.12.1-1 in my project but it failed to load Video Components displaying error shown below when calling function uitoolkit.joinSession(this.sessionContainer, this.videoConfig) > app.component.ts:84 TypeError: Cannot read properties of undefined (reading ‘deviceId’) at videosdk-ui-toolkit.js:3:784163 at \_ZoneDelegate.invoke (zone.js:369:28) at Object.onInvoke (videosdk-ui-toolkit.js:3:45153) at \_ZoneDelegate.invoke (zone.js:368:34) at \_ZoneImpl.run (zone.js:111:43) at zone.js:2538:40 at \_ZoneDelegate.invokeTask (zone.js:402:33) at Object.onInvokeTask (videosdk-ui-toolkit.js:3:44969) at \_ZoneDelegate.invokeTask (zone.js:401:38) at \_ZoneImpl.runTask (zone.js:159:47) (anonymous) @ videosdk-ui-toolkit.js:3 invoke @ zone.js:369 onInvoke @ videosdk-ui-toolkit.js:3 invoke @ zone.js:368 run @ zone.js:111 * * * * * * Here is my sample code Configuration object ```auto videoConfig: any = { videoSDKJWT: '', sessionName: 'SessionA', userName: 'UserA', sessionPasscode: 'abc123', features: ['preview', 'video', 'audio', 'share', 'chat', 'users', 'settings'] } ``` // Signature Generator ```auto const iat = abc.KJUR.jws.IntDate.get('now'); // Math.floor(Date.now() / 1000) const exp = iat + 3600 const header = {alg: 'HS256', typ: 'JWT'}; const oPayload = { appKey: this.sdkKey, tpc: this.videoConfig.sessionName, session_key: this.videoConfig.sessionPasscode, version: 1, role_type: 1, iat: iat, exp: exp, } const signature = abc.KJUR.jws.JWS.sign('HS256', JSON.stringify(header), JSON.stringify(oPayload), this.sdkSecret); this.videoConfig.videoSDKJWT = signature ``` Code that I executed while joining session ```auto this.sessionContainer = document.getElementById('sessionContainer') uitoolkit.joinSession(this.sessionContainer, this.videoConfig) ``` I also tried the following code but displaying blank screen, no error nothing shown ```auto this.sessionContainer = document.getElementById('sessionContainer') var chatContainer = document.getElementById('chatContainer') var videoContainer = document.getElementById('videoContainer') var controlsContainer = document.getElementById('controlsContainer') uitoolkit.showUitoolkitComponents(this.sessionContainer, this.videoConfig) uitoolkit.showChatComponent(chatContainer) uitoolkit.showVideoComponent(videoContainer) uitoolkit.showControlsComponent(controlsContainer) ``` Can someone help where I am making mistake. ---
**Author:** ![irfan.nettech](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/irfan.nettech/32/63259_2.png) [@irfan.nettech](https://devforum.zoom.us/u/irfan.nettech)\ **Post date:** [September 12, 2024, 12:09pm UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344/2 "2024-09-12T12:09:31Z")
Now trying to utilize videosdk code to check, when tried with the following generated signature the following error arise type: ‘JOIN\_MEETING\_FAILED’, reason: ‘This account does not exist or does not belong to you’ Note: i am using proper zoom developer account with Video SDK enabled Video SDK | Pay As You Go Renews on October 12, 2024 0 of 10,000 minutes (0% used) Please help where i am making mistake ---
**Author:** ![rehema.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rehema.zoom/32/40323_2.png) [@rehema.zoom](https://devforum.zoom.us/u/rehema.zoom)\ **Post date:** [September 12, 2024, 5:25pm UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344/3 "2024-09-12T17:25:38Z")
Hi @irfan.nettech, I edited your question & removed the JWT to make sure no PII was shown publicly. To make sure the issue is not with your credentials, please input them into the [sample application](https://github.com/zoom/videosdk-ui-toolkit-angular-sample) and let me know if you see the same error, or if it runs smoothly. Thanks,Rehema ---
**Author:** ![irfan.nettech](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/irfan.nettech/32/63259_2.png) [@irfan.nettech](https://devforum.zoom.us/u/irfan.nettech)\ **Post date:** [September 12, 2024, 5:35pm UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344/4 "2024-09-12T17:35:29Z")
Hi, The issue of type: ‘JOIN\_MEETING\_FAILED’, reason: ‘This account does not exist or does not belong to you’ Resolved, by fixing the payload parameter from appkey to app\_key Now getting the following error Verify JWT Failed: The Token’s Signature resulted invalid when verified using the Algorithm: HmacSHA256 I am using the following code to generate Signature, ```auto const iat = Math.round(new Date().getTime() / 1000) - 30 const exp = iat + 60 * 60 * 2 const header = { alg: 'HS256', type: 'JWT' }; const oPayload = { app_key: this.sdkKey, tpc: this.videoConfig.sessionName, password: this.videoConfig.sessionPasscode, role_type: 1, session_key: "session123", user_identity: "user123", version: 1, iat: iat, exp: exp } const sHeader = JSON.stringify(header) const sPayload = JSON.stringify(oPayload) const signature = abc.KJUR.jws.JWS.sign('HS256', sHeader, sPayload, this.sdkSecret); client.init('en-US', 'Global', { patchJsMedia: true }).then(() => { client .join(this.videoConfig.sessionName, signature , this.videoConfig.userName, this.videoConfig.sessionPasscode) .then(() => { console.log('joined') stream = client.getMediaStream() }) }) ``` Now sure where I am making mistake. i tried too many variation but signature validation return failed. ---
**Author:** ![irfan.nettech](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/irfan.nettech/32/63259_2.png) [@irfan.nettech](https://devforum.zoom.us/u/irfan.nettech)\ **Post date:** [September 12, 2024, 8:53pm UTC](https://devforum.zoom.us/t/video-sdk-ui-toolkit-angular-web-unable-to-load-join-session/117344/5 "2024-09-12T20:53:09Z")
Thank you, your sample code with minor adjustments in server-side signature generator code worked.