Microsoft Teams JS SDK initialization timed out.

[RishavNice]

We are facing an issue in the SDK -

Version - "@microsoft/teams-js": "2.9.1",

Issue - SDK initialization timed out.

Troubleshoot - SSO works fine in the browser (Chrome) case. But when we run the same manifest, the same app in the MS Teams Desktop application then after SSO when it returns back to the application from IDP and re-initializes the library it fails saying that the SDK initialization timed out.

It's weird that the issue only happens in the desktop application but not when we run inside the web Chrome browser.

I saw multiple issues logged in Github pertaining to this, but I did not get any reliable solution.

LINK - 1
LINK - 2

Screenshot -

Please help us out.

[ghost]

Hi RishavNice! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[sayali-MSFT]

@RishavNice - Thanks for reporting your issue.
Could you please try with the below nodejs sample with Version - "@microsoft/teams-js": "2.9.1".
Sample Link- https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-sso/nodejs

Meanwhile, we are trying it from our end and get back to you.

[sayali-MSFT]

@RishavNice - We are not able to repro the scenario, It is working fine from our end.
@microsoft/teams-js: "2.9.1"
Microsoft Teams Version 1.6.00.8578 (64-bit)

Are you trying the same?
If No, could you please share some code snippets, so that we can try it from our end?

Sample Link- https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-sso/nodejs

[RishavNice]

Hi @sayali-MSFT

We can still face the issue. We are using React JS. As discussed previously, it works fine in browser Teams but fails in the case of Desktop App Teams. I believe if the code is the same how can it partially work on one platform and fail on another?

[RishavNice]

The scenario is -

• We open the popup using Authentication.authenticate method
• We load our application login page (server side hosted) and enter the user ID.
• After entering the user ID the login page redirects the user to related IDP (MSFT) in this case.
• Once we go to the IDP we select the MSFT user which is mapped to our database.
• Once MSFT validates it sends an code and success back to our redirect URL we configured in Azure.
• But once it reaches the application, it tries to re initialize the SDK which then gets timed out due to some reason!

This only happens in Teams Desktop App not in browser application.

[sayali-MSFT]

@RishavNice -Thanks for providing the information, we will check it from our end and get back to you.

[andreidutu]

The scenario is -

• We open the popup using Authentication.authenticate method
• We load our application login page (server side hosted) and enter the user ID.
• After entering the user ID the login page redirects the user to related IDP (MSFT) in this case.
• Once we go to the IDP we select the MSFT user which is mapped to our database.
• Once MSFT validates it sends an code and success back to our redirect URL we configured in Azure.
• But once it reaches the application, it tries to re initialize the SDK which then gets timed out due to some reason!

This only happens in Teams Desktop App not in browser application.

I encounter exactly the same error using 2.9.1 microsoft/teams-js.
As a workaround i do this:

1. Attach a new button on the page with event window.close.
2. Save the code ( from the PKCE flow) in localStorage: localStorage.setItem("code", codeFromQueryParams)
3. When that button is pressed, an error is caught in catch of the authenthicate method
4. In that catch i try to get value of code, then remove it from local storage and aqcuire a token with that code.

On web teams (teams.microsoft.com) works perfectly with normal flow, but on desktop this is the workaround i could find.

@sayali-MSFT Please let us know how is this going!

[RishavNice]

Thanks @andreidutu for your answer. Appreciate :)

@sayali-MSFT
This is not supposed to be a solution but a hack. The worst part about hacks is they don't work when we need them! We can't risk millions of our customers getting affected due to a hack. Please support us with an immediate solution as multiple people across the platform has faced this issue.

[RishavNice]

We have troubleshooted the MSFT JS SDK from our side, here is our overview -

There is a function - initializeCommunication
Inside that function there is an internal try statement -

try {
       // Send the initialized message to any origin, because at this point we most likely don't know the origin
       // of the parent window, and this message contains no data that could pose a security risk.
       Communication.parentOrigin = '*';
       return sendMessageToParentAsync('initialize', [
           version,
           latestRuntimeApiVersion,
       ]).then(function (_a) {
       
       // The code does not enter this .then function in desktop teams application
       
           var context = _a[0], clientType = _a[1], runtimeConfig = _a[2], clientSupportedSDKVersion = _a[3];
           return { context: context, clientType: clientType, runtimeConfig: runtimeConfig, clientSupportedSDKVersion: clientSupportedSDKVersion };
       });
   }

The main issue is that the code snippet never goes inside the .then function.
As it never goes inside .then so it never returns the expected output. Before this execution or maybe the code is strucked somewhere around this so the SDK gets timed out. This happens only in the case of a desktop client and not in the case of a web app. I think debugging in this direction would help. Thanks! @sayali-MSFT

[sayali-MSFT]

@RishavNice - We are checking with the internal team, we will let you know once we get any update.

[RishavNice]

@sayali-MSFT Any updates?

[sayali-MSFT]

@RishavNice - Apologies for the delays, we are informing to the engineering team, and they will look into this. We will let you know once we get any update.

[SethuRamanAlfanar]

Same issue I am Also Facing

[nwojod-MSFT]

@RishavNice thanks for the information you provided. Could you explain what you meant by, "server side hosted"? Are you referring to a server-side rendering tool? Additionally, could you provide more details on the specific scenario you are trying to achieve and why initialization is being called the second time? This additional information could help us better understand the problem as we are unable to reproduce the issue you described. Thanks

[RishavNice]

@nwojod-MSFT
No, we are not talking about server-side rendering tools. It's just that the app redirects me to a web page hosted in a different domain for login purposes. We don't have a login page embedded in our application but we redirect our user to a different webpage for login and then we bring tokens from that page to our application.

Secondly, initialization is being called for the second time because once the user enters the user name on the login page they leave our application domain and get redirected toward the IDP (Azure in this case.) After successful redirection when they are authenticated from the IDP they are redirected back to our application by the return URL we have configured on the IDP side. Once they come back to the application, to close the authentication popup we need to initialize the library again inside the popup to utilize the SDK methods. So when we try to initialize the library it gets timed out.

I hope this makes sense.

[RishavNice]

@nwojod-MSFT @sayali-MSFT Any updates?

[sayali-MSFT]

@RishavNice -Engineering team is looking into it. We will inform you once we get any update.

[RishavNice]

@sayali-MSFT ?

[nwojod-MSFT]

@RishavNice apologies for the delay in my response; I was out of the office. Thank you for providing additional information about the flow and the objective you're trying to achieve. Our team is still investigating the issue to determine its root cause, and we're currently attempting to reproduce the issue. I'll provide an update once we're able to resolve it. Thanks

[anmaur]

Hi @RishavNice, Is the hostname (aka domain) from where you start authentication.authenticate (i.e. the hostname of URL passed to this API) is different from the hostname of the return URL (which IDP redirects to)? If yes, Pls try using the same domain for both the URLs

[RishavNice]

Hi @anmaur

The hostname (aka domain) from where I start authentication.authenticate is - https://cxone.staging.niceincontact.com/auth/authorize?abc

The hostname of the return URL is - https://cxone.staging.niceincontact.com/auth/authorize?xyz

I believe both the URL's have the same domain except for the query params appended which is obviously different in both the cases

I have already added the function of the SDK which is causing issues - initializeCommunication . Please see in that direction if it would help.

cc: @sayali-MSFT

[anmaur]

Hi @RishavNice, Thanks for the information. I am unable to repro this from my end and would need more information if :

• What is the Teams desktop version you are using?
• Is your App having the same hostname as the authentication url: https://cxone.staging.niceincontact.com/auth/authorize?abc ?

[RishavNice]

@anmaur

If you're unable to get the issue while multiple other people are getting the same issue, would you mind sharing the complete code sample using JS.
Is your App having the same hostname as the authentication url: YES.
Teams Desktop Application Version -

Windows OS - 11 / Teams Version - 1.6.00.6754 / Teams JS Sdk Version - 2.9.1;

[RishavNice]

Fixed in recent version of MSFT JS SDK. Closing now.

[ghost]

Tell us about your experience!

Hi RishavNice! This issue is closed in our system. We would like your feedback on your experience with our support team and Platform.

Best regards,
Teams Platform