Migrate ADAL.js to MSAL.js

Question

I have a SPA which uses the solution provided here to authenticate with Azure AD and everything works as expected. Now I want to migrate this to use MSAL.js.

I use below for login:

import * as MSAL from 'msal'
...
const config = {
  auth: {
    tenantId: '<mytenant>.com',
    clientId: '<myclientid>',
    redirectUri: <redirecturi>,
  },
  cache: {
    cacheLocation: 'localStorage',
  }
};

const tokenRequest = {
  scopes: ["User.Read"]
};

export default {
  userAgentApplication: null,
  /**
   * @return {Promise}
   */
  initialize() {

    let redirectUri = config.auth.redirectUri;

    // create UserAgentApplication instance
    this.userAgentApplication = new MSAL.UserAgentApplication(
      config.auth.clientId,
      '',
      () => {
        // callback for login redirect
      },
      {
        redirectUri
      }
    );

    // return promise
    return new Promise((resolve, reject) => {
      if (this.userAgentApplication.isCallback(window.location.hash) || window.self !== window.top) {
        // redirect to the location specified in the url params.
      }
      else {
        // try pull the user out of local storage
        let user = this.userAgentApplication.getUser();

        if (user) {
          resolve();
        }
        else {
          // no user at all - go sign in.
          this.signIn();
        }
      }
    });
  },

  signIn() {
    this.userAgentApplication.loginRedirect(tokenRequest.scopes);
  },

And then I use below to get the token:

  getCachedToken() {
    var token = this.userAgentApplication.acquireTokenSilent(tokenRequest.scopes);
    return token;
  }

  isAuthenticated() {
    // getCachedToken will only return a valid, non-expired token.
    var user = this.userAgentApplication.getUser();
    if (user) {
      // get token
      this.getCachedToken()
      .then(token => {
        axios.defaults.headers.common["Authorization"] = "Bearer " + token;
        // get current user email
        axios
          .get('<azureapi-endpoint>' + '/GetCurrentUserEmail')
          .then(response => { })
          .catch(err => { })
          .finally(() => {
          });
      })
      .catch(err => { })
      .finally(() => { });

      return true;
    }
    else {
      return false;
    }
  },
}

but after login I get below error:

Access to XMLHttpRequest at 'https://login.windows.net/common/oauth2/authorize?response_type=code+id_token&redirect_uri=<encoded-stuff>' (redirected from '<my-azure-api-endpoint>') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Also the token that I get seems to be invalid as I get 401 errors trying to call api using the token. Upon checking the token against https://jwt.io/ I get an invalid signature.

I really appreciate anyone's input as I've already spent good few days and haven't got anywhere yet.

Answer 1

I'm not sure if this is your issue. however, for msal.js, in the config, there is no tenantId parameter, it's supposed to be authority. Here is a sample for graph api using msal.js https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2

specifically: the config is here: https://github.com/Azure-Samples/active-directory-javascript-graphapi-v2/blob/quickstart/JavaScriptSPA/authConfig.js

as per here, https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications it is supposed to be hitting login.microsoftonline.com not login.windows.net