How to authenticate Angularjs application using Azure Active Directory Authentication Library?

Question

I have an web application with AngularJS front-end & spring REST back end.I have to use Azure AD for authentication. At login page when I enter credentials, it takes me to Azure & asks me to enter credentials,upon doing it I get the message:

AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: 'xxxx-xxx-xxxx-xxxx-xxxx'.

The page form which the request was made was:

https://xxx.xxxx.com/App/#/login

Whereas the replyUrl specified in Azure for that application was:

https://xxx.xxxx.com/App/#/

Do I have to make both urls same ie https://xxx.xxxx.com/App/#/login

My initialization code for ADAL is:

adalProvider.init({
        instance: 'https://login.microsoftonline.com/', 
        tenant: 'xxxxxxxx.onmicrosoft.com',
        clientId: 'xxxxxxxxxxxxxxxxxxxxx',
        popUp: false,

    },
    $httpProvider
    );  

Even after making replyTo url identical to the url of the page from where request was made, still I get the same error.

Answer 1

Do I have to make both urls same ie https://xxx.xxxx.com/App/#/login

In short: yes.

There is a lot of information to be found about this error online .

InvalidReplyTo - The reply address is missing, misconfigured, or does not match reply addresses configured for the app. As a resolution ensure to add this missing reply address to the Azure Active Directory application or have someone with the permissions to manage your application in Active Directory do this for you.

Taken from Authentication and authorization error codes