topic Re: How to create JWT on the client side for sample application creation in Discussion Forum

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

deepikagarg0304 — Fri, 04 Aug 2023 13:04:39 GMT

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)

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

Roland_Ian — Mon, 07 Aug 2023 07:29:02 GMT

You must create your own JWT in this instance. You have not provided the JWT.

I will review the instructions and make sure they are clearer to follow and implement.

For the meantime please use these samples as a reference:

https://github.com/sinch/rtc-reference-applications/tree/master/javascript/samples

There is examples ready to use and the jwt and crypto functions are included.

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

deepikagarg0304 — Mon, 07 Aug 2023 08:05:12 GMT

Hi Ian,

Thanks for your reply.

We have tried using your sample apps as well but there also we are encountering issues, Is there any alternative ? Also would it be possible that someone from you technical team could help us resolving our errors so that we can built a demo application successfully and showcase it to our client ?

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

Roland_Ian — Mon, 07 Aug 2023 11:35:24 GMT

Sorry to hear you are having issues with the samples.

Please check which sample you are using and what Browser supports it in the compatibility matrix here:

https://developers.sinch.com/docs/in-app-calling/js/miscellaneous/

Also please could you provide the Console output from Chrome / Firefox from when you start the client.

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

Roland_Ian — Tue, 08 Aug 2023 09:27:22 GMT

Chrome and Firefox are unable to support http for our samples currently.

For the interim you will have to serve via https and will need either:

A locally-trusted development certificate for local development (see mkcert for this)
Or serve the content on a https hosted environment you have (your hosting provider will take care of the https certificates)

Mkcert can create locally-trusted development certificates (https://github.com/FiloSottile/mkcert)

I use this method and serve the samples fine with https. Please follow the instructions for your environment, ensuring to follow the advise not to share your cert (https://github.com/FiloSottile/mkcert#installation)

As is the normal basic hosting recommendation it is not safe to serve any content over http in a production environment.

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

deepikagarg0304 — Tue, 08 Aug 2023 18:49:15 GMT

Hi Ian,

Thanks for your reply, I have followed the steps you provided and used mkcert to run the http-server using the .crt and .key files.

but I am still not able to proceed. As I launch the application and enter Application key, secret and user id and hit on audio button I am getting errors. Could you please help on this ?

Error details below:

An SSL certificate error occurred when fetching the script. index.html:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://192.168.1.7:8080/voicecall/') with script ('https://192.168.1.7:8080/voicecall/sw.js'): An SSL certificate error occurred when fetching the script. sinch-rtc-min.js:2 POST https://ocra.api.sinch.com/ocra/v2/applications/dc53b66d-edbb-45d1-a43b-a59831a1a500/instances 401 (anonymous) @ sinch-rtc-min.js:2 o @ sinch-rtc-min.js:2 Promise.then (async) u @ sinch-rtc-min.js:2 o @ sinch-rtc-min.js:2 Promise.then (async) u @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 e @ sinch-rtc-min.js:2 fetchApi @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 e @ sinch-rtc-min.js:2 request @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 xe @ sinch-rtc-min.js:2 createInstanceRaw @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 xe @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 register @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 Promise.then (async) onCredentialsRequired @ VoiceCallSinchClientWrapper.js:46 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 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 start @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 Lr @ sinch-rtc-min.js:2 start @ sinch-rtc-min.js:2 VoiceCallSinchClientWrapper @ VoiceCallSinchClientWrapper.js:20 (anonymous) @ index.js:3 sinch-rtc-min.js:2 Response {type: 'cors', url: 'https://ocra.api.sinch.com/ocra/v2/applications/dc53b66d-edbb-45d1-a43b-a59831a1a500/instances', redirected: false, status: 401, ok: false, …}body: (...)bodyUsed: falseheaders: Headers {}ok: falseredirected: falsestatus: 401statusText: ""type: "cors"url: "https://ocra.api.sinch.com/ocra/v2/applications/dc53b66d-edbb-45d1-a43b-a59831a1a500/instances"[[Prototype]]: Response (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 VoiceCallSinchClientWrapper @ VoiceCallSinchClientWrapper.js:20 (anonymous) @ index.js:3 VoiceCallSinchClientWrapper.js:54 Sinch - Start client failed VoiceCallSinchClientWrapper.js:55 _r {message: 'Unable to create instance!', code: 500, domain: 2}

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

Roland_Ian — Tue, 08 Aug 2023 19:05:10 GMT

Can you share with me:

The Web browser you are using.

Using mkcert with a fake local development domain name.

For reference, I use the command below to start the webserver using node.

npx http-server -S -C certificate.pem -K key.pem

https://www.npmjs.com/package/http-server

`-S`, `--tls` or `--ssl`	Enable secure request serving with TLS/SSL (HTTPS)	`false`
`-C` or `--cert`	Path to ssl cert file	`cert.pem`
`-K` or `--key`	Path to ssl key file	`key.pem`

When you created the cert what did you use for a domain and wilcard? e.g.

mkcert -key-file key.pem -cert-file cert.pem yourdomainfakeone.com *.yourdomainfakeone.com

You can check by looking at your pem with openssl

openssl x509 -in yourcert.pem -noout -text

And check the X509v3 Subject Alternative Name:

X509v3 Subject Alternative Name: DNS:yourdomainfakeone.com, IP Address:127.0.0.1, IP Address:0:0:0:0:0:0:0:1

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 yourdomainfakeone.com

Now you can point your web browser at https://yourdomainfakeone.com:8080 and try and start the Sinch client.

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

deepikagarg0304 — Wed, 09 Aug 2023 17:39:25 GMT

Hi Ian,

The files which were created for me by mkcert are cert.crt , cert.key, ca.crt and ca.key.

Could you please help me know how I create .pem file ?

When I follow the instruction on this url - https://github.com/FiloSottile/mkcert#installation)

I am getting below responses on running these commands:

PS C:\Projects\SinchApp> mkcert --version
1.5.1
PS C:\Projects\SinchApp> mkcert -CAROOT
error: unknown option '-CAROOT'
PS C:\Projects\SinchApp> mkcert -install
error: unknown option '-install'

Could you please guide me with the right way if using mkcert.

PS - I am using it for Javascript sample of Sinch.

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

Roland_Ian — Wed, 09 Aug 2023 21:23:26 GMT

The github repo of mkcert has this issue recorded.

unknown option '-install' on windows 11

https://github.com/FiloSottile/mkcert/discussions/437

The solution was There is another mkcert installed in the %PATH%. You are calling the first one, which doesn't have the install option it seems. Perhaps it was installed by another development program you are using?

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

deepikagarg0304 — Fri, 11 Aug 2023 10:16:33 GMT

Hi Ian,

I am able to create cert.pem and key.pem files using mkcert.

I used this command for domain and wildcard:

C:\Projects\SinchDemoApp\rtc-reference-applications\javascript> mkcert -key-file key.pem -cert-file cert.pem mysinchdemoapp.com *.mysinchdemoapp.com Created a new certificate valid for the following names 📜 - "mysinchdemoapp.com" - "*.mysinchdemoapp.com" Reminder: X.509 wildcards only go one level deep, so this won't match a.b.mysinchdemoapp.com ℹ️ The certificate is at "cert.pem" and the key at "key.pem" ✅

After that I am running my server with below command :

npx http-server -S -C cert.pem -K key.pem

But it says my server is up at:

Starting up http-server, serving ./ through https http-server version: 14.1.1 http-server settings: CORS: disabled Cache: 3600 seconds Connection Timeout: 120 seconds Directory Listings: visible AutoIndex: visible Serve GZIP Files: false Serve Brotli Files: false Default File Extension: none Available on: https://192.168.1.7:8080 https://127.0.0.1:8080 Hit CTRL-C to stop the server

After that If I run my app at : https://192.168.1.7:8080/

It is crashing after I enter the Application key and secret and userID :

I am getting these errors :

An SSL certificate error occurred when fetching the script. index.html:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://127.0.0.1:8080/voicecall/') with script ('https://127.0.0.1:8080/voicecall/sw.js'): An SSL certificate error occurred when fetching the script. sinch-rtc-min.js:2 POST https://ocra.api.sinch.com/ocra/v2/applications/dc53b66d-edbb-45d1-a43b-a59831a1a500/instances 401 (anonymous) @ sinch-rtc-min.js:2 o @ sinch-rtc-min.js:2 Promise.then (async) u @ sinch-rtc-min.js:2 o @ sinch-rtc-min.js:2 Promise.then (async) u @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 e @ sinch-rtc-min.js:2 fetchApi @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 e @ sinch-rtc-min.js:2 request @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 xe @ sinch-rtc-min.js:2 createInstanceRaw @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 xe @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 register @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 Promise.then (async) onCredentialsRequired @ VoiceCallSinchClientWrapper.js:46 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 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 createInstance @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 dr @ sinch-rtc-min.js:2 start @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 (anonymous) @ sinch-rtc-min.js:2 Lr @ sinch-rtc-min.js:2 start @ sinch-rtc-min.js:2 VoiceCallSinchClientWrapper @ VoiceCallSinchClientWrapper.js:20 (anonymous) @ index.js:3 sinch-rtc-min.js:2 Response {type: 'cors', url: 'https://ocra.api.sinch.com/ocra/v2/applications/dc53b66d-edbb-45d1-a43b-a59831a1a500/instances', redirected: false, status: 401, ok: false, …} (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 VoiceCallSinchClientWrapper @ VoiceCallSinchClientWrapper.js:20 (anonymous) @ index.js:3 VoiceCallSinchClientWrapper.js:54 Sinch - Start client failed VoiceCallSinchClientWrapper.js:55 _r {message: 'Unable to create instance!', code: 500, domain: 2}

I have followed all the instructions which you provided. Kindly guide me how to proceed here ?

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

Roland_Ian — Sat, 12 Aug 2023 17:40:14 GMT

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.

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

Roland_Ian — Mon, 14 Aug 2023 11:13:41 GMT

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.