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(()=>{

}) });`

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".

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

[ShubhamSengar29]

will this fix be able to fix the issue for my project coming from @microsoft/teams-js library. How it will help to fix the issue and it's not opening when i try to open the zip file, i get this error -

[KennethBWSong]

@ShubhamSengar29 Would you please share code of your auth-start.html, auth-end.html for us to better debug this issue?

[ShubhamSengar29]

I don't have auth-start.html and auth-end.html in my project. For auth-end, i created a component with below code - `import { app, authentication } from "@microsoft/teams-js"; import React, { useEffect } from "react";

const AuthEnd = () => { useEffect(() => { app.initialize().then(() => { authentication.notifySuccess(); }); }); // }); return

Authentication Completed

; }; export default AuthEnd; ` for auth-start, i have kept the code in function, where i have written the code for authentication. for the authentication, i was calling the function from another file into logon component in else condition then i am getting cancelled by user error even for simple routing call but when i used the logic for authentication in same page then popup is working fine with simple routing paths but when i use the url then "debugger paused in another tab click to switch to that tab" comes in screen and authend process stops there and only loads the page.

[KennethBWSong]

@ShubhamSengar29 Would you please provide an minimum project (not your product code) that can reproduce your error? It will be helpful if we can try and debug ourselves.

[ShubhamSengar29]

@KennethBWSong, I have fix the issue for above issue. but dialog popup is not closing even if i have added the the

` public async componentWillMount() { // microsoftTeams.initialize(); // microsoftTeams.authentication.notifySuccess(); microsoftTeams.app.initialize().then(() => { microsoftTeams.authentication.notifySuccess(); }); }

/**
 * The render() method to create the UI of the tab
 */
public render() {
    return (
        <div>Auth completed</div>
    );
}`

when the process completes and this code needs to be executed then the error comes in console. Uncaught (in promise) Error: Initialization Failed. No Parent window found. at MicrosoftTeams.min.js:1:62991 at MicrosoftTeams.min.js:1:45501 at new Promise (<anonymous>) at MicrosoftTeams.min.js:1:45416 at MicrosoftTeams.min.js:1:45067 at MicrosoftTeams.min.js:1:25946 at new Promise (<anonymous>) at MicrosoftTeams.min.js:1:25899 at Ct (MicrosoftTeams.min.js:1:45059) at e.initialize (MicrosoftTeams.min.js:1:49945) (anonymous) @ MicrosoftTeams.min.js:1 (anonymous) @ MicrosoftTeams.min.js:1 (anonymous) @ MicrosoftTeams.min.js:1 (anonymous) @ MicrosoftTeams.min.js:1 (anonymous) @ MicrosoftTeams.min.js:1 (anonymous) @ MicrosoftTeams.min.js:1 Ct @ MicrosoftTeams.min.js:1 e.initialize @ MicrosoftTeams.min.js:1 (anonymous) @ index.ts:86 n @ bootstrap:19 (anonymous) @ ByDTeamsTabConfig.tsx:8 n @ bootstrap:19 (anonymous) @ ByDTeamsTab.tsx:6 n @ bootstrap:19 (anonymous) @ client.ts:2 n @ bootstrap:19 (anonymous) @ client.js:20 n @ bootstrap:19 (anonymous) @ bootstrap:83 (anonymous) @ client.js:1 (anonymous) @ universalModuleDefinition:9 (anonymous) @ universalModuleDefinition:1 Promise.then (anonymous) @ ByDTeamsTabAuthEnd.tsx:23 (anonymous) @ client.js:73 (anonymous) @ client.js:73 (anonymous) @ client.js:73 a @ client.js:73 t.componentWillMount @ client.js:73 Ba @ react-dom.production.min.js:150 ws @ react-dom.production.min.js:198 pl @ react-dom.production.min.js:292 cc @ react-dom.production.min.js:280 sc @ react-dom.production.min.js:280 ic @ react-dom.production.min.js:280 Ql @ react-dom.production.min.js:273 _o @ react-dom.production.min.js:127 ec @ react-dom.production.min.js:274 (anonymous) @ react-dom.production.min.js:312 Wc @ react-dom.production.min.js:313 t.render @ react-dom.production.min.js:322 t.render @ index.js:110 (anonymous) @ auth-end.html:21 Show 21 more frames Show less

the code for authenticate is

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}; // console.log("sso url:",url) } 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; // console.log("sso url:",url) } app.initialize().then(() => { authentication .authenticate({ url, width: 600, height: 535, }) .then(() => { // console.log("popup is opened"); window.location.assign(sCallbackUrl); }) .catch((reason: string) => { console.error(JSON.stringify(reason)); // console.log(JSON.stringify(reason)); }); });

the code for authenticate i have changed and before it was // microsoftTeams.authentication.authenticate({ // url, // width: 600, // height: 535, // successCallback: () => { // window.location.assign(sCallbackUrl); // }, // failureCallback: (reason) => { // // reject(JSON.stringify(reason)); // console.log(JSON.stringify(reason)); // } // });

[KennethBWSong]

@ShubhamSengar29 Seems teams-js is not initialized. Would you please check have you correctly initialize this library?

[ShubhamSengar29]

@KennethBWSong I have tried using app.initialize(), microsoftTeams.initialize() and microsoftTeams.app.initialize() in different places and before the changes in above code it was initialized but still popup stopping closing. previously it was working fine. recently it stopped working.

[KennethBWSong]

@ShubhamSengar29 Would you please provide an minimum project (not your product code) that can reproduce your error? It will be helpful if we can try and debug ourselves.