loginRedirect() method of msal.js package causes 'TypeError: Cannot read property 'then' of undefined'

Question

I'm currently working with the msal.js package, so that I can you use the azure authorization for my own Vue.js application. So far I've created an Teams App in which I access my Vue.js Website, which is tunneled with ngrok.

My code inside Vue.js looks like this (for safety I've replaced clientId and authority with placeholders in this stackoverflow post):

import * as Msal from 'msal';

export default {
  signIn: async () => {

    const aDConfig = {
      auth: {
        clientId: 'AZUREAPPID',
        authority: 'https://login.microsoftonline.com/AZURETENANTID',
        redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true,
      },
    };

    const aDAuth = new Msal.UserAgentApplication(aDConfig);

    const loginRequest = {
      scopes: ['user.read'],
    };

    await aDAuth.handleRedirectCallback((error, response) => {
      debugger;
      console.log(error);
      console.log(response);
    });

    await aDAuth.loginRedirect(loginRequest).then(async (loginResponse) => {
      console.log(loginResponse);

      debugger;
    }).catch((error) => {
      console.log(error);
    });
  },
};

Basically what it does is setting up the the azure app to connect to and then trying to silently login via the loginRedirect() method.

But when I try to run this code, at the point of the loginRedirect() method the script stops and I will get an error:

Since loginRequest is not null, I'm not quit sure what the error is refering to.

What could be the issue here?

Answer 1

loginRedirect does not return a Promise (as it takes the user away from the current page). If you want to process the result of a redirect, you need to implement adAuth.handleRedirectCallback(callback) (this should be done on page load, immediately after instantiating adAuth), which will get invoked when Msal detects the page is being loaded after returning from a redirect flow.

See: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/README.md#1-instantiate-the-useragentapplication

Edit: Misread your code, I see you have already done that. So just remove .then on loginRedirect and you should be good.

Also, handleRedirectCallback does not return a Promise, so you should not await it. And you need to instantiate Msal and implement the callback outside your signIn function (e.g. on page load).

import * as Msal from 'msal';

const aDConfig = {
    auth: {
      clientId: 'AZUREAPPID',
      authority: 'https://login.microsoftonline.com/AZURETENANTID',
      redirectUri: 'https://login.microsoftonline.com/common/oauth2/nativeclient',
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true,
    }
};

const aDAuth = new Msal.UserAgentApplication(aDConfig);

const loginRequest = {
    scopes: ['user.read']
};

aDAuth.handleRedirectCallback((error, response) => {
    debugger;
    console.log(error);
    console.log(response);
});


export default {
  signIn: async () => {
    aDAuth.loginRedirect(loginRequest);
  }
};