I am working on a Cordova project where we are trying to implement Azure AD authentication using MSAL JS library. I am trying to follow the workflow where in, if user is not yet signed-in we will call popup method otherwise will call the acquire token silently method. The problem is, every time I refresh the page it always go to the pop-up authentication even though the user is already signed-in. We had implement the same authentication in Xamarin but we never encounter the same problem.

I get this error on acquireTokenSilent

The user or administrator has not consented to use the application with ID '' named 'client'. Send an interactive authorization request for this user and resource.

async function getTokenPopup(request) {
//request.account = account;
return await myMSALObj
.acquireTokenSilent(request)
.then(function(accessTokenResponse){
    console.log("Access Token", accessTokenResponse.accessToken);
})
.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);
    }
 });
}

CodePudding user response：

Sharing how I solve my issue for future devs that will encounter the same issue. You need to pass silentRequest object which contains name as hint to be able to use ssoSilent authentication.

async function signIn() {
    
    if(isTokenValid()){

        var accounts = myMSALObj.getAllAccounts();

        if(accounts.length === 0 ){
            getTokenPopup(scopeRequest)
                .then(handleSuccessLoginResponse)
                .catch(error => {
                    console.log("Error getting token");
                });
        }
        else{
            silentRequest.loginHint = accounts[0].username;
            handleSilentLogin()
            .then(function(response) {
                handleSuccessLoginResponse(response);
            });
        }
        
    }
   
   
}


async function handleSilentLogin(){
    return myMSALObj.ssoSilent(silentRequest);
}



 async function getTokenPopup(request) {
    return await myMSALObj
    .acquireTokenSilent(request)
    .then(function(accessTokenResponse){
        console.log("Access Token", accessTokenResponse.accessToken);
    })
    .catch(async (error) => {
        console.log("silent token acquisition fails.");
        if (error instanceof msal.InteractionRequiredAuthError) {
            console.log("acquiring token using popup");
            myMSALObj["browserStorage"].clear();
            return myMSALObj.acquireTokenPopup(request).catch(error => {
                console.error(error);
            });
        } else {
            return myMSALObj.acquireTokenPopup(request).catch(error => {
                console.error(error);
            });
        }
    });
}


function isTokenValid(){

    let tokenFromStorage  = localStorage["msalTokenDetails"];
    if(tokenFromStorage){
        let token = JSON.parse(localStorage["msalTokenDetails"]);

        // check if token expired
        if(token.expiresOn > new Date()){
            // returning false since token is already expired
            return false;
        }
        else{
            return true;
        }    
    }
    else{
        return false;
    }
   
}


const silentRequest = {
    loginHint: "[email protected]"
};