SDK initialization timed out in Teams authentication popup

Wiebe Niehof 1 Reputation point
2024-07-08T15:16:18.98+00:00

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();
Microsoft Teams Development
Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
3,341 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.