Ui-Router 404 when redirecting with ADAL

Question

I'm currently trying to connect the Azure Directory Authentication Library (ADAL.JS) to the UI-Router interface. I plugged it in and it redirects correctly, but it always clogs 404 before redirecting. The forwarding works and then goes back to my application that shows 404.

I changed the state as follows:

{ 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 have work with a regular Angular RouteProvider, and no 404 is thrown.

The application that I am trying to invest in was created by John Papas Yo's hot towel generator.

Answer 1

It looks like an error in adal.js. ui-router uses state changes. I see one difference in setting up the start page for state changes compared to the route change handler. It should be:

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

instead

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

Answer 2

I can confirm that this problem was resolved in the current release 1.0.4 , thanks to Omer Kansizoglu , who, in my opinion, is the author of the library. I am using Angular UI Router in my application with Active Directory Authentication Library for JavaScript (ADALJS). An application is correctly redirected to the Azure Active Directory login page when an requireADLogin user tries to visit the state with the requireADLogin flag set to true. I do not get 404 at any time.

Please note that at the time of writing, the CDN for this library indicates only version 1.0.0 . However, the bower.json file has bower.json updated, and bower-install adal-angular install version 1.0.4 .

Answer 3

I tried this with adal v1.0.12 + ui-router v0.2.18, but no luck. It looks like the problem is with $ locationProvider hashprefix. As indicated here:

3- When HTML5 mode is configured, make sure hashPrefix $ locationProvider 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!