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.

I'm trying to do the same thing - integrate ADAL into HotTowel. Did you ever resolve it? — Stuart Hallows, Apr 22 '16 at 08:48

score 3 · Answer 1 · answered Apr 03 '15 at 17:14

3

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);

answered Apr 03 '15 at 17:14

Omer Cansizoglu

1,271
9
14

Thanks, I'll try modifying it locally and see how I do :) – John Mc Apr 03 '15 at 20:26
So I had a play, and that hasn't worked. Thanks for the suggestion. – John Mc Apr 07 '15 at 13:15

score 0 · Answer 2 · edited May 23 '17 at 12:00

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.

I've just tried the app again after updating, but no joy. Can you share how you've plumbed it into Angular UI Router? Thanks, John — John Mc, Jun 29 '15 at 14:22

score 0 · Answer 3 · answered Oct 27 '16 at 07:45

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!

Ui-Router 404 when redirecting with ADAL

3 Answers3

Linked