Microsoft Teams Integrated Website: Sorry, but we’re having trouble signing you in. AADSTS900144: The request body must contain the following parameter: 'client_id'.

Question

Hi I have created a React single-page webapp with MSAL integration.

When I integrate the web app into my Windows 11 Microsoft Teams Teams, I'm facing the error of

Sorry, but we’re having trouble signing you in. AADSTS900144: The request body must contain the following parameter: 'client_id'.

I face this issue ONLY in Windows 11 Microsoft Teams.

1. NO issue in MacOS (Ventura 13.4) Microsoft Teams.
2. NO issue in popular web browsers (Chrome, and Edge) in Windows 11 and (Safari, Chrome, and Edge) in Macbook Pro.
3. No error in web debug log. All network request are 20x in web browser.
4. Using latest MSAL React library.

Works fine in MacOS Microsoft Teams and all popular web browsers in Windows 11 and MacOS:

I have done logout and shut Teams, cleaned browser cache and history and restarted my computer but still facing the same issue.

Please do not recommend requestPopOut as it is a bad user experience approach.

Below is my authConfig.tsx:

export const msalConfig: Configuration = {
    auth: {
        clientId: "b6b055e8-17c8-4450-be62-xxxxxx",
        authority: "https://login.microsoftonline.com/fe9c4641-3b53-43d0-af72-8f3exxxxxx",
        redirectUri: "https://xxxxxx.azurewebsites.net/",
        // redirectUri: "http://localhost:50505/",
        navigateToLoginRequestUrl : true,
    },
    system: {
        allowNativeBroker: true // Disables WAM Broker
    },
};

This is how I call my login redirect request in my index.tsx:

export const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.initialize().then(async () => {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    try {
        await msalInstance.handleRedirectPromise();

        const accounts = msalInstance.getAllAccounts();

        if (accounts.length > 0) {
            msalInstance.setActiveAccount(accounts[0]);
        } else {
            // Redirect user to Microsoft AD login page if there is no active user
            msalInstance
                .loginRedirect(loginRequest) // or msalInstance.loginPopup(loginRequest)
                .catch(error => {
                    console.error(error);
                });
        }
    } catch (error) {
        console.error("msalInstance initialization:" + error);
    }
    
    return true;
});

App registration:

Please advise. Thank you.

Answer 1

Solved the issue by myself.

allowNativeBroker: false //Change it to 'false'

In this case, I am not integrating the local Azure AD credential cache into my application.

Since my enterprise Windows computer has an authentication broker pre-installed with the operating system – the Web Account Manager (WAM), it would cause conflicts if I didn't implement MSAL in a way that interacts with the local Azure AD credential data.

If I want to enable seamless login in my custom application with Microsoft MSAL integration, and to run the app inside the enterprise Windows computer, I can code it in the following way:

IPublicClientApplication app = 
    PublicClientApplicationBuilder.Create("CLIENT_ID_YOU_HAVE")
    .WithDefaultRedirectUri()
    .Build();

var authResult = await app.AcquireTokenInteractive(new List<string>() { "User.Read" })
    .ExecuteAsync();

Reference link:
https://devblogs.microsoft.com/identity/msal-net-wam/#:~:text=Both%20for%20developers%20and%20customers,app%20to%20account%20and%20back.

I'm sharing this answer for others who might encounter a similar issue. I narrowed down the problem's scope by examining the MSAL GitHub library issue threads, where people were facing similar issues and provided a few suggestions for fixes.

Answer 2

Hi @Felix Wong

Great to know that the issue has already been resolved and thanks for sharing the solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that the question author cannot accept their own answer. They can only accept answers by others, I'll repost your solution in case you'd like to Accept the answer.

Issue Symptom: Microsoft Teams Integrated Website: Sorry, but we’re having trouble signing you in. AADSTS900144: The request body must contain the following parameter: 'client_id'.

Resolution: Since user's enterprise Windows computer has an authentication broker pre-installed with the operating system – the Web Account Manager (WAM), it would cause conflicts if user didn't implement MSAL in a way that interacts with the local Azure AD credential data.

If user wants to enable seamless login in user's custom application with Microsoft MSAL integration, and to run the app inside the enterprise Windows computer, user can code it in the following way:

IPublicClientApplication app = 
    PublicClientApplicationBuilder.Create("CLIENT_ID_YOU_HAVE")
    .WithDefaultRedirectUri()
    .Build();

var authResult = await app.AcquireTokenInteractive(new List<string>() { "User.Read" })
    .ExecuteAsync();

Thanks again for sharing!