MSAL 2.0 JS Browser: redirects to a blank page and hangs there (no redirect back to main app)

Question

I am trying to implement MSAL auth via Redirect in Vue js.

I have followed the official guide but when I open an app, handleRedirect is started, then it redirects to a blank page and hangs there, the console looks like this:

• handleRedirectPromise called but there is no interaction in progress, returning null.
• Emitting event: msal:acquireTokenStart
• Emitting event: msal:handleRedirectEnd
• Null, no response
• Emitting event: msal:acquireTokenStart

I cannot get how to implement the redirect flow (popup flow is not an option).

My config:

// login
var msalConfig = { 
    auth: {
        clientId: clientId, 
        authority: this.authority, //https://login.microsoftonline.com/common/ default
        redirectUri: this.redirect + 'redirects/login-msal-powerbi/index.html', // blank page
        postLogoutRedirectUri: null
    }, 
    cache: {
        cacheLocation: "localStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    allowRedirectInIframe: true
}

My main LoginUser function:

// login
loginUser: function() {
    var that = this;
    // Prepare config
    this.msalInstance = new msal.PublicClientApplication(msalConfig); 
    // Register Callbacks for Redirect flow
    var request = this.msalGetRequestLoginRedirect(this.powerbi.scopes, this.login.aadTenant); // returns an object with authority and scopes
    this.msalInstance.handleRedirectPromise()
    .then(function(responce) {
        that.msalHandleResponse(responce, that.msalInstance);
    })
    .catch((error) => {
        console.log(error);
    });

My msalHandleResponse function:

msalHandleResponse: function(response, msalInstance) {
    if (response !== null) {
        console.log(response);
    }else {
        console.error('null!!') // returns null
        return msalInstance.loginRedirect({scopes:[
                    "https://analysis.windows.net/powerbi/api/Dashboard.Read.All",
                    "https://analysis.windows.net/powerbi/api/Dataset.Read.All",
                    "https://analysis.windows.net/powerbi/api/Report.Read.All",
                    "https://analysis.windows.net/powerbi/api/Group.Read.All",
                    "https://analysis.windows.net/powerbi/api/Workspace.Read.All",
                    "https://analysis.windows.net/powerbi/api/UserState.ReadWrite.All"       
                ], responseMode:"query"});
    }
},

My acquireTokenRedirect function:

msalGetTokenRedirect: function(msalInstance) {
    var that = this;
    msalInstance.acquireTokenSilent(this.requestsObj.silentRequest)
    .then(function(tokenResponse) {
        // Optionally make something with tokenResponse    
        console.log("Access token acquired silently...");
        return tokenResponse;
    }).catch(function(error) {
        if (error instanceof InteractionRequiredAuthError) {
            // fallback to interaction when silent call fails
            return msalInstance.acquireTokenRedirect(this.requestsObj.request)
            .then(function(tokenResponse) {
                console.log('TOKEN RESPONSE',tokenResponse);
            }).catch(function(error) {
                console.error(error);
            });
        }
    });
},

Answer 1

Are you calling handleRedirectPromise on your redirectUri (blank page)?