adal.js not working with latest version of angular and jquery

Question

I have to integrate my AngularJS SPA with Azure AD. There is a sample app for this (https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp). That sample is working fine and i have no problem logging in using that sample application.

But the sample is using some very old versions of jquery (1.11.1) and angular (1.2.25). I use jquery 3.1.1 and angular 1.6.4.

When I use those version together with the sample app i cannot login.

I am being redirect to login.microsoftonline.com which reply with a 302 authorize respond with a very long querystring and the page is stuck there, meaning is stays with that long url in the browser address bar.

If i change the scripts to the old version, refresh the page and try again i am logged in.

This is the url that is in the addressbar after login https://localhost:44326/notworking.html#!/Home#id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IjlGWERwYmZNRlQyU3ZRdVhoODQ2WVR3RUlCdyIsImtpZCI6IjlGWERwYmZNRlQyU3ZRdVhoODQ2WVR3RUlCdyJ9.eyJhdWQiOiJhMWNmMDk4Yy01NjJkLTQ4ZDgtYjE0OC0yZDVhMDVjM2E5ZTQiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC9mNTUzZTMyOS05ZGFiLTQ3NzUtOTUyMy1lNjIyNjY4NzdlM2QvIiwiaWF0IjoxNDk3Mjc2NDYyLCJuYmYiOjE0OTcyNzY0NjIsImV4cCI6MTQ5NzI4MDM2MiwiYWlvIjoiWTJaZ1lJZ291c1AzT09LNlFkTVBkMmVYOXkvU3RwdzJmWjFtNVA5RTBMWGphTGVCbEQwQSIsImFtciI6WyJwd2QiLCJtZmEiXSwiZmFtaWx5X25hbWUiOiJGYWJpYW4iLCJnaXZlbl9uYW1lIjoiVG9ueSIsImlwYWRkciI6IjE4My44OS4zOC4zOSIsIm5hbWUiOiJUb255Iiwibm9uY2UiOiJkYTVjMzhmYy04ODNkLTRhMTItYThlYy01ZDZiYjZhNDcxNTQiLCJvaWQiOiI0YjZjYmQxYS1lMDE0LTQ5ZTYtYWI1OC0wMDdkMDZlMTNiOWIiLCJwbGF0ZiI6IjMiLCJzdWIiOiJXZTFHR05OcjUxX0VFX21hR1BjRWItcURELXlrbWFEUVE1eWVvbk8xQnRNIiwidGlkIjoiZjU1M2UzMjktOWRhYi00Nzc1LTk1MjMtZTYyMjY2ODc3ZTNkIiwidW5pcXVlX25hbWUiOiJ0b255QGZvbGxvd3RoZXNuYWtlLmNvbSIsInVwbiI6InRvbnlAZm9sbG93dGhlc25ha2UuY29tIiwidXRpIjoiTzZoTW5VMU5WRVdJdU9VZnlPVWtBQSIsInZlciI6IjEuMCJ9.cAsr5-yngyjJpMkuP6mHBSY3B0-4kFK8DNUItvB05qNalrcGHGxONG73idvUQ8gjmYrM3RfNXhZmvy2VmSx1o7CIHJouEXMelgPlnrNuboKV0m4RRRbQCmk5poP7tj_rpBZf6fFGHzPGPb_3g23hE2CetGs51BQVJHuGyygMIshR9aVRXL-_5rvLNIVWjUXK-H8cLEqXpB9INqx2_ol8D3_HGR_oqJDxSUlg3XU1cOBPeCC4r3RYkurbsoRChL-jT_DtUyP6xBCsP3odoNiKn2e8pKJHD1St0zPm34o16d4sHIE7aK2RdDnmAvQ2LowBOrcQVshIhvK5TLLNiunOQA&state=bed45624-0432-417c-8fcd-d4a1b0b5e07a&session_state=60afa4fc-05b5-4ce8-8c67-8442d34fdaf9

And i am not logged in.

Any ideas on how to get this to work?

Here is my controller

"use strict";
angular.module("todoApp", ["ngRoute","AdalAngular"])
.config(["$routeProvider", "$httpProvider", "adalAuthenticationServiceProvider", function ($routeProvider, $httpProvider, adalProvider) {

$routeProvider.when("/Home", {
    controller: "homeCtrl",
    templateUrl: "/App/Views/Home.html"
}).when("/TodoList", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
    requireADLogin: true
}).when("/UserData", {
    controller: "userDataCtrl",
    templateUrl: "/App/Views/UserData.html"
}).otherwise({ redirectTo: "/Home" });

adalProvider.init(
    {
        instance: "https://login.microsoftonline.com/", 
        tenant: "",
        clientId: "",
        extraQueryParameter: "nux=1",
        //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
    },
    $httpProvider
    );
}]);

Answer 1

Please follow the suggestion mentioned by tomidix, it fix this issue. Here is the code for your reference:

app.js

'use strict';
angular.module('todoApp', ['ngRoute','AdalAngular'])
.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider', function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {

    $routeProvider.when("/Home", {
        controller: "homeCtrl",
        templateUrl: "/App/Views/Home.html",
    }).when("/TodoList", {
        controller: "todoListCtrl",
        templateUrl: "/App/Views/TodoList.html",
        requireADLogin: true,
    }).when("/UserData", {
        controller: "userDataCtrl",
        templateUrl: "/App/Views/UserData.html",
    }).otherwise({ redirectTo: "/Home" });

    adalProvider.init(
        {
            instance: 'https://login.microsoftonline.com/', 
            tenant: 'xxxx.onmicrosoft.com',
            clientId: '',
            extraQueryParameter: 'nux=1',
            //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
        },
        $httpProvider
        );

    $locationProvider.html5Mode(false).hashPrefix('');

}]);