Azure using wrong callback url during implicit flow login

Question

I'm currently struggling with a weird problem in azure active directory implicit flow oauth authentication. I've implemented a spa webapp using msal.js to login users to their microsoft accont.

The userAgentApplication is executed as shown below:

 userAgentApplication = new
 Msal.UserAgentApplication(client_id,null,function(errorDes,token,error,tokenType)
 {
       if(error) {
         console.log(JSON.stringify(error));
         return;
        }
      },{ redirectUri: 'https://example.com/app/msalCallback.html' });

When they click login executing the is piece of code:

logInPopup = function() {
         var uaa = userAgentApplication;
         return new Promise(function(resolve,reject) { 

            uaa.loginPopup([
                'https://graph.microsoft.com/user.read'
             ]).then(function(token) {
               //signin success
               console.log(token);
               var user = uaa.getUser();
               console.log(JSON.stringify(user));
               resolve(user);
            }, function(error) {
               console.log(JSON.stringify(error));
               reject(error);
            });
         })
       }

The popup comes up and the user tries to login but the following error comes up:

Microsoft account is experiencing technical problems. Please try again later.

In the url the error parameters string is:

error_description=The provided value for the input parameter 'redirect_uri' is not valid The expected value is 'https://login.live.com/oauth20_desktop.srf' or a URL which matches the redirect URI registered for this client application.

Upon further research I found that though I configured the redirect uri to be

https://example.com/app/msalCallback.html 

(Which I confirmed on the application registration page to be true)

The redirect_uri of the /oauth2/v2.0/authorise url in the login popup page is:

redirect_uri=https://example.com/app/

Which is weird but the above uri is not random one. It is in fact the callback uri for a previous previously registered but now deleted app with the same name.

Further investigation showed that when I config Msal to use the old the redirect_uri login passes.

I'm fresh out of ideas. It looks like a bug in the azure network but wanted to know if anyone else has had this problem or at least point me in the right direction towards getting in contact with azure to find a fix.

Thanks in advance

Answer 1

I've found the cause of the problem after carefully reviewing the msal.js documentation i found that i was setting the redirectUri incorrectly. The correct way is as follows:

var userAgentApplication = new
 Msal.UserAgentApplication(client_id,null,function(errorDes,token,error,tokenType)
 {
       if(error) {
         console.log(JSON.stringify(error));
         return;
        }
 });

userAgentApplication.redirectUri = 'https://example.com/app/msalCallback.html'

Hope that helps.

regards