Ui-Router 404 when redirecting with ADAL

Question

I'm currently trying to hook in the Azure Directory Authentication Library (ADAL.JS) into UI-Router. I've got it wired in, and it redirects correctly, but it always chucks a 404 before the redirect. The redirect works, and then gets sent back to my application, which is showing the 404.

I've modified the state like so:

        {
            state: 'admin',
            config: {
                url: '/admin',
                templateUrl: 'app/admin/admin.html',
                controller: 'AdminController',
                controllerAs: 'vm',
                title: 'Admin',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-lock"></i> Admin'
                },
                requireADLogin: true
            }

I've got it working with the normal Angular RouteProvider, and no 404 is being thrown.

The application I'm attempting to plumb it into was generated by John Papas Yo Hot Towel generator.

Answer 1

This looks like a bug in adal.js. ui-router is using state changes. I see one difference in setting the start page for state changes comparing to the route change handler. It should be :

_adal._saveItem(_adal.CONSTANTS.STORAGE.START_PAGE, $location.$$path);

instead of

_adal._saveItem(_adal.CONSTANTS.STORAGE.START_PAGE, nextRoute.url);

Answer 2

I can confirm that this issue has been resolved in current release 1.0.4, thanks to Omer Cansizoglu, who I believe is author of the library. I am using Angular UI Router in my app with Active Directory Authentication Library for JavaScript (ADALJS) successfully. The app correctly redirects to Azure Active Directory login page when an unauthenticated user attempts to visit a state with the requireADLogin flag set to true. I do not get a 404 at any point.

Note that at time of writing the CDN for this library only points to version 1.0.0. However, the bower.json file has been updated, and bower-install adal-angular will install version 1.0.4.

Answer 3

I tried it with adal v1.0.12 + ui-router v0.2.18 but no luck. Seems like the issue is related to the $locationProvider hashprefix. As stated here:

3- When HTML5 mode is configured, ensure the $locationProvider hashPrefix is set

// using '!' as the hashPrefix but can be a character of your choosing
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

Active Directory Authentication Library (ADAL) for JavaScript

...and it worked like a charm!