cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 

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

Solved! Jump to solution
deepikagarg0304
Occasional Contributor

‎08-04-2023 06:04 AM

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)

 

0 Kudos
1 ACCEPTED SOLUTION

Accepted Solutions

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-14-2023 04:13 AM

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.

 

 

 

 

 

Roland-Ian Clothier, Developer Support Engineer

View solution in original post

0 Kudos
11 REPLIES 11

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-07-2023 12:29 AM

Hi

 

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.

 

 

 

Roland-Ian Clothier, Developer Support Engineer
0 Kudos

Solved! Jump to solution
deepikagarg0304
Occasional Contributor

‎08-07-2023 01:05 AM

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 ?

0 Kudos

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-07-2023 04:35 AM

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.

 

 

Roland-Ian Clothier, Developer Support Engineer
0 Kudos

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-08-2023 02:22 AM - edited ‎08-08-2023 02:27 AM

 

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.

Roland-Ian Clothier, Developer Support Engineer
0 Kudos

Solved! Jump to solution
deepikagarg0304
Occasional Contributor

‎08-08-2023 11:33 AM - last edited on ‎08-08-2023 11:49 AM by Employee

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}

 

 

0 Kudos

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-08-2023 12:05 PM

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. 

Roland-Ian Clothier, Developer Support Engineer
0 Kudos

Solved! Jump to solution
deepikagarg0304
Occasional Contributor

‎08-09-2023 10:39 AM

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.

0 Kudos

Solved! Jump to solution
Roland_Ian
Employee
Employee

‎08-09-2023 02:23 PM

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?

 

 

Roland-Ian Clothier, Developer Support Engineer
0 Kudos

Solved! Jump to solution
deepikagarg0304
Occasional Contributor

‎08-11-2023 03:16 AM

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 ?

0 Kudos