How to create JWT on the client side for sample application creation

[deepikagarg0304]

Hi,

I am trying to create application by following this sample: https://developers.sinch.com/docs/in-app-calling/getting-started/javascript/create-app/ 

I have followed all the steps. But when I run the app using http-server I am getting errors in the below code.

Any help would be highly appreciated.

 Code:

#sinchClientListener() {
        return {
            onCredentialsRequired: (sinchClient, clientRegistration) => {
                // TODO: implement this in a backend server
                new JWT(APP_KEY, APP_SECRET, sinchClient.userId)
                    .toJwt()
                    .then(clientRegistration.register)
                    .catch((error) => {
                        clientRegistration.registerFailed();
                        console.error(error);
                    });
            },

Errors:

sinch-rtc-min.js:2 ReferenceError: JWT is not defined
    at Object.onCredentialsRequired (index.js:74:17)
    at Pr.listen (sinch-rtc-min.js:2:454532)
    at sinch-rtc-min.js:2:388643
    at Array.forEach (<anonymous>)
    at Et.onEvent (sinch-rtc-min.js:2:388625)
    at sinch-rtc-min.js:2:448935
    at new Promise (<anonymous>)
    at fr.<anonymous> (sinch-rtc-min.js:2:448897)
    at Generator.next (<anonymous>)
    at sinch-rtc-min.js:2:446584
(anonymous) @ sinch-rtc-min.js:2
a @ sinch-rtc-min.js:2
Promise.then (async)
u @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
Lr @ sinch-rtc-min.js:2
start @ sinch-rtc-min.js:2
SinchClientWrapper @ index.js:28
(anonymous) @ index.js:229
index.js:67 Sinch - Start client failed
index.js:68 _r {message: 'Unable to create instance!', code: 500, domain: 2}
onClientFailed @ index.js:68
listen @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
Et.onEvent @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
Lr @ sinch-rtc-min.js:2
failed @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
a @ sinch-rtc-min.js:2
Promise.then (async)
u @ sinch-rtc-min.js:2
(anonymous) @ sinch-rtc-min.js:2
Lr @ sinch-rtc-min.js:2
start @ sinch-rtc-min.js:2
SinchClientWrapper @ index.js:28
(anonymous) @ index.js:229


sinch-rtc-min.js:2 Uncaught (in promise) Error: Unable to register ServiceWorker: sw.js
    at vr.create (sinch-rtc-min.js:2:451928)
    at new br (sinch-rtc-min.js:2:452526)
    at wr.createPushWorker (sinch-rtc-min.js:2:453212)
    at Br.<anonymous> (sinch-rtc-min.js:2:468789)
    at Generator.next (<anonymous>)
    at sinch-rtc-min.js:2:466917
    at new Promise (<anonymous>)
    at Lr (sinch-rtc-min.js:2:466662)
    at Br.setSupportManagedPush (sinch-rtc-min.js:2:468655)
    at new SinchClientWrapper (index.js:27:21)

[Roland_Ian]

Hi 

I have analysed your logs and am arranging to replicate this issue on Windows as I think the behaviour is due to your environment.

There is a problem with the service worker sw.js being served via 127.0.0.1. This should not be, so please can you  follow my step about updating the host file (as shown previously):

Now in your /etc/hosts (same for Linux Mac or Windows)

Update as follows (make sure the IP is one the webserver is bound to) 

192.168.1.7 mysinchdemoapp.com

Then access from

https://mysinchdemoapp.com:8080

Also please check your service worker is being served from your domain.  (Chrome > Inspect > Application -> Service workers.

 

We will see if we can replicate this behaviour, as currently I am unable to do so on an *nix based operating system. 

[Roland_Ian · Accepted solution]

Hi,

We have successfully used this method of using the mkcert method on Windows with Chrome and made a call with the javascript Voice SDK.

There are two important steps:

1.  Looks like mkcert is not able to update the root authority in Windows, but this command will work

certutil –addstore -enterprise –f "Root" <pathtocertificatefile>

2. For it to work we found, using a new Chrome window with a new clean profile after installing the root authority will enable the client to start fine.