Why Isn't app.initailzation() working in my Teams Add-in OAuth flow?

Question

I am trying to get simple auth in my Teams app working with Adobe ID (a third party Oauth provider that I use on my site).

I am following the sample here . Everything is working to authorize with the Adobe ID, but when it gets to my end authentication page like this , I get an exception thrown with the message "SDK initialization timed out." when I call await app.initialize(); . The sample shown does not have the await term before app.initialize() . Is that incorrect? If I remove the await , my code later on to notify authentication of success, fails with the exception "The library has not yet been initialized". authentication.notifySuccess("Yippee");

1. What do I need to do to allow app.initialize() to work?
2. How can the sample work if there is no await before it?

Here is the TypeScript code for my OAuth End page that is loaded after the Adobe Authentication succeeds.

import $ from "jquery";
import {app, authentication} from "@microsoft/teams-js";

startup();

async function startup(){
    try{
        $("#status").text("Initializing");
    
        await app.initialize();

        $("#status").text("Initialized");
        console.log("notifying of success");

        authentication.notifySuccess("Yippee");
    }
    catch(error){
        handleError(error, "initializing");
    }
}

function handleError(error:Error, context: string){
    console.error(`💥 Error ${context}: ${error.message}`);

    $("#status").text(error.message);
}

Answer 1

What version of the js library are you using? There have been some changes to how app.initialize is handled depending on the version of the SDK you are using- see details here

https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/using-teams-client-library?tabs=typescript%2Cmanifest-teams-toolkit#callbacks-converted-to-promises

You should be able to see this in package.json for typescript, although I think there may be other areas where you may need to update this. Try this with the version referenced in the sample- 2.0.0 does that resolve the issue?

re: await- that just tells the application to wait until a response is returned (a success or failure) before moving on to the next line. In your case, you need the await as your next line is dependent on the value of status, but your function is async, so it won't block the execution of other async functions. You want to use await where you have other requests that must have a response on that call- like getauthtoken.