"SSO Authentication Errors in Microsoft Teams Extension with Teams JS SDK

Question

Problem: I'm developing a Microsoft Teams extension using React.js and C#. The extension uses SSO for authentication, and I consistently encounter errors during the SSO token retrieval process when testing in an incognito window. The issue does not occur when accessing the application via admin.teams.microsoft.com.

Steps to Reproduce:

1 Open Google Chrome incognito window and navigate to https://dev.teams.microsoft.com/.

2 Log into the Microsoft Teams developer platform UI.

3 Import the extension using the provided zipped file.

4 Try launching the application and observe the SSO-related errors in the developer console.

Error Messages:

• POST https://login.microsoftonline.com 400 bad request

• POST https://cc-frontline-backend.azurewebsites.net 401 unauthorized

• Error in getAccessToken: "Exchange SSO ID Token failed with HTTP status 401"

• Error in useEffect: "Failed to retrieve access token: invalid_token"

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],
        });
    });
}

Technical Details:

• "@microsoft/teams-js": "^1.11.0"
• "@microsoft/teamsfx": "^0.5.0"

Attempted Solutions:

• Verified and updated environment variables.
• Checked for correct endpoint configurations.
• Providing retry mechanism due to any possible network error.

Question:

Has anyone encountered similar SSO authentication issues with Microsoft Teams extensions? Any insights into whether these issues could be related to configuration, the Teams platform update, or SDK versions? How can I resolve these authentication errors?

Error Image as microsoft teams response

Answer 1

You need to call app.notifySuccess();

Doc: Link

Example in use: Link