SDK initialization timed out in Teams authentication popup
We are building a Microsoft Teams Add In and submitting this to the Teams store.
In the login flow we use the Teams SDK (Version 2.21.0). The login flow gets the Teams token and exchanges this for a Federated Directory token. If the user needs to log in via another Identity Provider (like Google) we open a popup window in which the user needs to login.
In the popup, we initialize the SDK again. We need to do this, so we can run the:
microsoftTeams.authentication.notifySuccess(data)
In our DEV environment, everything works perfectly.
In our production environment, it also works in the Teams fat client.
However, we run into an error whenever we run Teams in a browser (Chrome or Edge) and open the popup to authenticate.
The SDK loads correct in the add-in, but in the popup the SDK initialize fails with this console error:
polyfills.844fb9bcb40be0ad.js:1 Uncaught Error: Uncaught (in promise): Error: SDK initialization timed out.
Error: SDK initialization timed out.
at _i (main.2b5beb72b1340b1e.js:1:65511)
at c.initialize (main.2b5beb72b1340b1e.js:1:67514)
at w.<anonymous> (main.2b5beb72b1340b1e.js:1:187223)
at Generator.throw (<anonymous>)
at Ge (main.2b5beb72b1340b1e.js:1:1366886)
at v.invoke (polyfills.844fb9bcb40be0ad.js:1:6563)
at Object.onInvoke (main.2b5beb72b1340b1e.js:1:626042)
at v.invoke (polyfills.844fb9bcb40be0ad.js:1:6503)
at M.run (polyfills.844fb9bcb40be0ad.js:1:1959)
at polyfills.844fb9bcb40be0ad.js:1:16797
at z (polyfills.844fb9bcb40be0ad.js:1:15986)
at polyfills.844fb9bcb40be0ad.js:1:15065
at polyfills.844fb9bcb40be0ad.js:1:15171
at Ge (main.2b5beb72b1340b1e.js:1:1366902)
at v.invoke (polyfills.844fb9bcb40be0ad.js:1:6563)
at Object.onInvoke (main.2b5beb72b1340b1e.js:1:626042)
at v.invoke (polyfills.844fb9bcb40be0ad.js:1:6503)
at M.run (polyfills.844fb9bcb40be0ad.js:1:1959)
at polyfills.844fb9bcb40be0ad.js:1:16797
at v.invokeTask (polyfills.844fb9bcb40be0ad.js:1:7181)
In the network tab of the browser we don't see any timeouts or errors.
This is how we open the popup:
// Authenticate the user in a popup dialog
async authenticate(dialogStartUrl: string): Promise<string> {
let loginCode: string;
try {
await this.initialize();
loginCode = await microsoftTeams.authentication.authenticate({
url: dialogStartUrl,
isExternal: false,
width: 600,
height: 600
});
} catch (error) {
console.error(
'MicrosoftTeamService: Error notifying for success to the host:',
error
);
throw error;
}
return loginCode;
}
And this is how we initialize the SDK
await microsoftTeams.app.initialize();