No possibility to call WAM

[flowchart87]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.0.0-beta.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

WAM is never used, even in this example

https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-browser-samples/VanillaJSTestApp2.0/app/wamBroker

In fact, even if the Windows Accounts extension is installed, the login is always mediated by a web flow, that returns this error:

"AADSTS70018: Invalid verification code"-error instead of the "AADSTS900144: The request body must contain the following parameter: 'client_id'"

With both Edge and Chrome

Error Message

"AADSTS70018: Invalid verification code"-error instead of the "AADSTS900144: The request body must contain the following parameter: 'client_id'"

Msal Logs

No response

MSAL Configuration

// Config object to be passed to Msal on creation
const msalConfig = {
    auth: {
        clientId: "b5c2e510-4a17-4feb-b219-e55aa5b74144",
        authority: "https://login.microsoftonline.com/common"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                    case msal.LogLevel.Trace:
                        console.log(message);
                        return;
                }
            },
            logLevel: msal.LogLevel.Trace
        },
        allowNativeBroker: true // For demonstration purposes, allowNativeBroker is true by default as of MSAL Browser v3
    }
};

// Add here scopes for id token to be used at MS Identity Platform endpoints.
const loginRequest = {
    scopes: ["User.Read"]
};

// Add here the endpoints for MS Graph API services you would like to use.
const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
    graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"
};

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["Mail.Read"],
    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

const silentRequest = {
    scopes: ["openid", "profile", "User.Read", "Mail.Read"]
};

const logoutRequest = {}

Relevant Code Snippets

let signInType;
let accountId = "";

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);
myMSALObj.initialize().then(() => {
    // Redirect: once login is successful and redirects with tokens, call Graph API
    myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
        console.error(err);
    });
});


function handleResponse(resp) {
    if (resp !== null) {
        accountId = resp.account.homeAccountId;
        myMSALObj.setActiveAccount(resp.account);
        showWelcomeMessage(resp.account);
    } else {
        // need to call getAccount here?
        const currentAccounts = myMSALObj.getAllAccounts();
        if (!currentAccounts || currentAccounts.length < 1) {
            return;
        } else if (currentAccounts.length > 1) {
            // Add choose account code here
        } else if (currentAccounts.length === 1) {
            const activeAccount = currentAccounts[0];
            myMSALObj.setActiveAccount(activeAccount);
            accountId = activeAccount.homeAccountId;
            showWelcomeMessage(activeAccount);
        }
    }
}

async function signIn(signInType) {
    if (signInType === "popup") {
        return myMSALObj.loginPopup(loginRequest).then(handleResponse).catch(function (error) {
            console.log({...error});
            console.log(error);
        });
    } else if (signInType === "redirect") {
        return myMSALObj.loginRedirect(loginRequest)
    }
}

function signOut(interactionType) {
    const logoutRequest = {
        account: myMSALObj.getAccountByHomeId(accountId)
    };

    if (interactionType === "popup") {
        myMSALObj.logoutPopup(logoutRequest).then(() => {
            window.location.reload();
        });
    } else {
        myMSALObj.logoutRedirect(logoutRequest);
    }
}

async function getTokenPopup(request, account) {
    const startTime = Date.now();
    return await myMSALObj.acquireTokenSilent(request).then((response) => {
        console.log(`Token acquisition time elapsed: ${Date.now() - startTime}ms`);
        console.log(response);
        return response;
    }).catch(async (error) => {
        console.log("silent token acquisition fails.");
        if (error instanceof msal.InteractionRequiredAuthError) {
            console.log("acquiring token using popup");
            return myMSALObj.acquireTokenPopup(request).catch(error => {
                console.error(error);
            });
        } else {
            console.error(error);
        }
    });
}

Reproduction Steps

Load the page
Click on log - in

Expected Behavior

WAM broker shows the non-web popup to allow selection of Windows account

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

Source

External (Customer)

[hectormmg]

Hi @flowchart87 , thanks for raising this issue. There are several server bugs blocking this flow at the moment. Until those are resolved we recommend setting the allowNativeBroker flag to false.

What you are seeing (MSAL.js going to the web flow) is expected. MSAL will first go the web flow, and the sign-in page will talk to the native broker (WAM). Once that "handshake" happens, sub-sequent requests will go straight to WAM.

Closing the issue since this is a documented functionality gap and duplicate of #6169 .