How to configure Single Sign On in PVA with Sharepoint and Teams?

Hi All,

I am trying to configure Single Sign on in Power Virtual Agent with Sharepoint. I am following the document https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso

Below is the html code and i have added the Client ID of Canvas API,Directory ID and BOT ID.

<!DOCTYPE html>
<html>
<head>
 
 <script>
 var clientApplication;
 (function () {
 var msalConfig =
 {
 auth:
 {
 clientId: '<Client ID [CanvasClientId]>',
 authority: 'https://login.microsoftonline.com/<Directory ID>'
 },
 cache:
 {
 cacheLocation: 'localStorage',
 storeAuthStateInCookie: false
 }
 };
 if (!clientApplication) {
 clientApplication = new Msal.UserAgentApplication(msalConfig);
 }
 }());
 </script>
</head>


<body>
 <script>
 function getOAuthCardResourceUri(activity) {
 if (activity &&
 activity.attachments &&
 activity.attachments[0] &&
 activity.attachments[0].contentType === 'application/vnd.microsoft.card.oauth' &&
 activity.attachments[0].content.tokenExchangeResource) {
 // asking for token exchange with AAD
 return activity.attachments[0].content.tokenExchangeResource.uri;
 }
 }

 function exchangeTokenAsync(resourceUri) {
 let user = clientApplication.getAccount();
 if (user) {
 let requestObj = {
 scopes: [resourceUri]
 };
 return clientApplication.acquireTokenSilent(requestObj)
 .then(function (tokenResponse) {
 return tokenResponse.accessToken;
 })
 .catch(function (error) {
 console.log(error);
 });
 }
 else {
 return Promise.resolve(null);
 }
 }
 </script>
 <script>

 (async function main() {

 // Add your BOT ID below
 var BOT_ID = "<BOT ID>";
 var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

 const { token } = await fetchJSON(theURL);
 const directLine = window.WebChat.createDirectLine({ token });
 var userID = clientApplication.account?.accountIdentifier != null ? ("Your-customized-prefix-max-20-characters" + clientApplication.account.accountIdentifier).substr(0,64) : (Math.random().toString() + Date.now().toString().substr(0,64) // Make sure this will not exceed 64 characters 
 const store = WebChat.createStore({}, ({ dispatch }) => next => action => {
 const { type } = action;
 if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
 dispatch({
 type: 'WEB_CHAT/SEND_EVENT',
 payload: {
 name: 'startConversation',
 type: 'event',
 value: { text: "hello" }
 }
 });
 return next(action);
 }
 if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
 const activity = action.payload.activity;
 let resourceUri;
 if (activity.from && activity.from.role === 'bot' &&
 (resourceUri = getOAuthCardResourceUri(activity))) {
 exchangeTokenAsync(resourceUri).then(function (token) {
 if (token) {
 directLine.postActivity({
 type: 'invoke',
 name: 'signin/tokenExchange',
 value: {
 id: activity.attachments[0].content.tokenExchangeResource.id,
 connectionName: activity.attachments[0].content.connectionName,
 token
 },
 "from":{
 id:userId, 
 name:clientApplication.account.userName,
 role:"user"
 }
 }).subscribe(
 id => {
 return next(action);
 });
 const styleOptions = {

 //Add styleOptions to customize Web Chat canvas
 hideUploadButton: true
 };

 window.WebChat.renderWebChat(
 {
 directLine: directLine,
 store,
 userID:userId, 
 styleOptions
 },
 document.getElementById('webchat')
 ); 
})().catch(err => console.error("An error occurred: " + err));


 </script>
</body>
</html>

I am seeing the below errors as in the snapshot: I am using the same code from the document but i have no clue what is going on. wrong.