Azure AD - OAuth 2 - Implicit Grant - CORS error when trying to authenticate using app, but works fine when I access the URL from the browser

Question

I am implementing OAuth2 implicit grant flow for a very simple webapp that I want to secure. I am using MSAL to do that. The issue that I am running into is that when I try the URL from the browser, it takes me to the organization sign in page and then takes me to the redirect URI.

However when I am calling it from the app, I get a CORS error. The stack trace is as shown

Access to XMLHttpRequest at '**********/oauth2/authorize/.well-known/openid-configuration' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.js:99 ClientAuthError: Error: could not resolve endpoints. Please check network and try again. Details: function toString() { [native code] }
    at ClientAuthError.AuthError [as constructor] (webpack:///./node_modules/msal/lib-es6/error/AuthError.js?:26:28)
    at new ClientAuthError (webpack:///./node_modules/msal/lib-es6/error/ClientAuthError.js?:111:28)
    at Function.ClientAuthError.createEndpointResolutionError (webpack:///./node_modules/msal/lib-es6/error/ClientAuthError.js?:121:16)
    at eval (webpack:///./node_modules/msal/lib-es6/UserAgentApplication.js?:455:125)
XHRClient.js:43 GET ***********/authorize/.well-known/openid-configuration net::

My code looks like the following

import $ from "jquery";
import 'bootstrap';
import * as Msal from "msal";

window.addEventListener("load", (event) => {
   const msalConfig = {
      auth: {
        clientId: “***************”,
        authority: "https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize"
      },
      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
        forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new
      }
    };

    const loginRequest = {
      scopes: ["openid"],
    };


    console.log(new Msal.UserAgentApplication(msalConfig));

    const myMSALObj = new Msal.UserAgentApplication(msalConfig); 

    myMSALObj.handleRedirectCallback(authRedirectCallBack);

 function authRedirectCallBack(error, response) {
      if (error) {
        console.log(error);
      } else {
       console.log(response);
      }
 }


 myMSALObj.loginPopup(loginRequest)
    .then(loginResponse => {  
        console.log('id_token acquired at: ' + new Date().toString());
        if (myMSALObj.getAccount()) {
          console.log(myMSALObj.getAccount());
          // showWelcomeMessage(myMSALObj.getAccount());
        }
    }).catch(function (error) {
      console.log(error);
    });


}

Answer 1

This URL looks odd:

**********/oauth2/authorize/.well-known/openid-configuration

It should be something like:

https://login.microsoftonline.com/common/v2.0/.well-known/openid-configuration

Or instead of "common", it can be your tenant id / "organizations" / "consumers".

Most likely you have configured the authority wrong on MSAL. It should not include "/oauth2/authorize". Example valid authority:

https://login.microsoftonline.com/common