authentication.authenticate is producing error cancelled by User on call

[ShubhamSengar29]

I am using teams-js library to perform SSO (single sign on) for the user using authentication.authenticate method and when i call the url and pop-up opens. when i perform the operation, in authend component, i have written authentication.notifySuccess method. when the process comes here, pop-up closes and in promise method of authenticate, it should perform callback but it calls catch method with error -

error is: Error: CancelledByUser at g (authentication.ts:519:1) at authentication.ts:407:1

I have tried debugging it and issue comes from the library files.

Expected behavior When popup closes and then method should be called and user should be redirected to configured page.

`app.initialize().then(() => { authentication .authenticate({ url: url, width: 600, height: 535, }) .then((result) => { console.log("pop up is opened", +result); window.location.assign(sCallbackUrl); }) .catch((reason) => { console.log("error is:", reason); // window.location.assign(sCallbackUrl); // console.error(JSON.stringify(reason)); // console.log(JSON.stringify(reason)); }).finally(()=>{

  })

});`

VS Code Extension Information (please complete the following information):

• OS: 11
• Version: 1.92.0 (system setup)
• Node.js: 20.14.0
• V8: 12.4.254.20-electron.0

[SLdragon]

Hi, @ShubhamSengar29 , which template are you using?

You can try moving the authentication.authenticate logic to a button click event. This would prevent browser from automatically blocking pop-ups, which may caused the issue.

[ShubhamSengar29]

Hi SLdragon, I am using Tab Template for the app. I cannot move the logic into button click event because it renders on condition for the user and when the else condition matches then i will be enabled. In live application, it was working properly but since the latest updates of the library, client reported that Pop-up stopped closing automatically and not redirecting user to callback page. So I added new declaration of the method.

[SLdragon]

There is an issue maybe related to your scenario, you can take look and check whether teamsjs lib correct: https://github.com/OfficeDev/microsoft-teams-library-js/issues/1779

[ShubhamSengar29]

Issue description is same as I have also found the same in debugging but the solution is not correct as I have checked my index.html and node-modules.

below is the code used in live application -

const triggerByDSSOLoginPopup = (bydUrl, bConfigLogon, microsoftTeams) => { let url = ""; let sCallbackUrl=""; bConfigLogon = typeof bConfigLogon === "string" ? bConfigLogon !== "false" : false; if (bConfigLogon) { url =${window.location.origin}/byDTeamsTab/auth-start.html?byd_origin=${bydUrl.origin}; sCallbackUrl =${bydUrl.href}?hostname=${window.location.origin}; } else { const teamsAuthUrl = window.location.href.replace("sso.html", "sso-logoff.html"); bydUrl.search +=&teamsauthurl=${encodeURIComponent(teamsAuthUrl)}; url =${window.location.origin}/byDTeamsTab/auth-start.html?byd_origin=${bydUrl.origin}; sCallbackUrl = bydUrl.href; } microsoftTeams.authentication.authenticate({ url, width: 600, height: 535, successCallback: () => { window.location.assign(sCallbackUrl); }, failureCallback: (reason) => { // reject(JSON.stringify(reason)); console.log(JSON.stringify(reason)); } });

In my new application, it's defined as promise method. So i am using the current way but for both the issue is there.

[SLdragon]

it was working properly but since the latest updates of the library

Which library was updated recently? Also, what is the version of msal-browser in the auth-start.html page? A version conflict could be causing this issue.

[ShubhamSengar29]

Teams-js library was updated. in our scheduled scan, whenever we get any vulnerabilities,we have to update that library. I have to use the method in my new application but I get error saying cancledByUser. with latest updates of the library i am not able to work with it.

[SLdragon]

Could you share teams-js and msal-browser version used in your project?

[ShubhamSengar29]

In live app - "@microsoft/teams-js": "^2.13.0",

In new app - "@microsoft/teams-js": "^2.23.0", in new app i am not using auth-start.html and directly calling the url for SSO, so i am using msal-browser.

do we need msal-browser to run on local. in live app, only one msal-browser is in azure and we are not using azure for our app.

[SLdragon]

Hi, @ShubhamSengar29 , can you share your demo project which can repro this issue, so that we take a try?

[ShubhamSengar29]

Hi @SLdragon, I have tried with demo project with the url's used in our app by giving the hardcoded url and the method is working but when I tried with provide code previously. I am still not sure, how it was working in old app with old configurations and now it gives error saying cancelled by user. I tried the process same as demo and process works for first time then the process breaks with error "cancelledByUser".