Troubleshooting SSO Authentication Errors in a Microsoft Teams Extension Development Environment

Question

Question Description:

I'm currently developing an extension for Microsoft Teams, utilizing React.js for the frontend and C# for the backend, aimed at managing licenses. The extension is packaged as a zipped file containing a manifest.json, facilitating easy testing by importing it into Teams. However, I've encountered a consistent issue with SSO (Single Sign-On) authentication errors that I've been unable to resolve.

Steps to Reproduce the Issue:

1. In Google Chrome, open an incognito window and navigate to https://dev.teams.microsoft.com/.
2. Log into the Microsoft Teams developer platform UI.
3. Attempt to import the extension using the zipped file through the UI.
4. Upon trying to launch the application, SSO-related errors are displayed in the developer console.

Interestingly, when I access the application via admin.teams.microsoft.com, these SSO errors do not occur. This discrepancy has led me to question the root cause of the issue, especially in light of the upcoming deprecation of the classic Teams in favor of a new version. The problem persists with both versions, signaling the possibility of a more complex underlying issue.

Technical Details:

• The authentication flow utilizes the Teams JavaScript SDK (teams-js) for SSO.
• I am concerned whether this issue stems from a potential misconfiguration in my authentication flow, the upcoming transition to the new version of Teams, or perhaps the usage of outdated Teams SDK versions (teams-js and teams-fx).
• "@microsoft/teams-js": "^1.11.0", "@microsoft/teamsfx": "^0.5.0" are the version of libraries that i'm using for right now.

Request for Assistance: I seek guidance on diagnosing and resolving these SSO authentication errors. Insights into whether this problem is related to my authentication flow, the impending Teams platform update, or a possible need to update the Teams SDK versions would be invaluable. Any advice or similar experiences shared by the community would greatly aid in troubleshooting this issue. Thank you in advance for your support.

Error image as microsoft teams response:

Code Snippet;

function initializeTeamsSdk(): Promise<void> {
    return new Promise((resolve, reject) => {
        microsoftTeams.initialize(() => {
            console.log("Teams SDK initialized successfully.");
            resolve();
        });
    });
}

async function AuthenticateWithSSO(): Promise<IAccessTokenRequestBody> {
    await initializeTeamsSdk(); 
    return new Promise((resolve, reject) => {
        microsoftTeams.authentication.getAuthToken({
            successCallback: (token: string) => {
                try{
                    const decoded = jwtDecode(token);
                    const requestBody = {
                        tenantId: decoded.tid,
                        ssoToken: token,
                        clientId: decoded.aud,
                    };

                    SetClientId(requestBody.clientId);
                    SetSsoToken(requestBody.ssoToken);
                    SetTenantId(requestBody.tenantId);

                    microsoftTeams.appInitialization.notifySuccess();
                    resolve(requestBody);
                }catch(error){
                    reject("Token decoding failed");
                }
            },
            failureCallback: (error: string) => {
                microsoftTeams.appInitialization.notifyFailure({
                    reason: microsoftTeams.appInitialization.FailedReason.AuthFailed,
                    message: error,
                });
                    reject(error);
            },
            resources: [process.env.SSO_TAB_APP_URI as string],
        });
    });
}