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: OfficeDev/microsoft-teams-library-js#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".