AngularJS Components and ADAL (Active Directory Azure Library for JS)

Question

I have built an angular 1.6 application in AngularJS with TypeScript and the Component Router, using the Component pattern.

Now I am trying to authenticate into AzureAD using the ADAL library and a secured API which accepts a bearer token.

In one of the current apps I built in AngularJS 1.3, I use ADAL in a pretty standard way, and I authenticate into the resource (API) with the StateProvider's RequireAdLogin attribute:

  var homeState = {
     url: "/",
     requireADLogin: true
  };

This works fine, but now I am using the component router with angular-ui-router (with @Types/angular-ui-router ):

import * as angular from 'angular';
import { State, StateProvider } from 'angular-ui-router';
import { MyComponent } from './my.component';
import { NavService, NavItem } from './../../common/nav/nav.service';
import { MediaService } from "./MediaService .service";

function routeConfig($stateProvider: StateProvider) {
  "ngInject";

  $stateProvider
    .state('app.media', {
        url: '/media',
        component: 'media'
    });

The problem is, I can not get the API to receive the token. The first sign of trouble is when I noticed the requireADLogin attribute is missing from the .IComponentOptions typing and the state type, so I can not do this:

.state('app.media', {
    url: '/media',
    component: 'media',
    requireADLogin: true // THIS DOES NOT COMPILE!
});

I then did some research, and came across this rather depressing post:

GitHub ADAL Discussion:

https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283

Do not go down this path. Component router is Deprecated https://docs.angularjs.org/guide/component-router

Doh! Well, this is not great news for me, to say the least, as it seems now I am blocked. I feel like there should be some work around, but I can't see it.

I think writing a custom HTTP Interceptor might be a solution, as I just need to feed the bearer token stored in storage to the API's HTTP Header. Also, I have been looking at MS Authentication Library for JS:

https://github.com/AzureAD/microsoft-authentication-library-for-js

But this seems too low level for my needs.

I should mention, it was fairly difficult to get ADAL's Angular library for AngularJS to work with TypeScript and this new component pattern. It seems like the preferred path is Angular 2.0, but a rewrite at this point in NG2 is not viable as this project is time boxed.

Answer 1

I have solved this issue by manually extracting the bearer token from the storage mechanism (in my case browser session storage) and adding it every request on my web services:

var accessToken = sessionStorage.getItem("adal.access.token.key" +
         sessionStorage.getItem("adal.token.keys").replace("|", ""));

 configObj.headers = { 'Authorization': 'Bearer ' + accessToken }

I then pass that configuration object into each request, and the token is there - the API accepts it and everyone is happy.

this.$http.get(url, configObj).then(resolveData, errorCall);

Answer 2

Also as an alternate solution perhaps for someone that has not yet implemented your workaround:

We noticed a similar problem where one web app would include the security header with bearer token but a different web app would not even though the configuration was the same. The only difference in the end was the version of the ADAL for js.

when using :

https://secure.aadcdn.microsoftonline-p.com/lib/1.0.16/js/adal.min.js

we would not get the security token automatically attached to API requests

when using :

https://secure.aadcdn.microsoftonline-p.com/lib/1.0.12/js/adal.min.js

we would get the proper bearer token attached to all API requests made to a secure endpoint.

We realised the breaking occured in version 1.0.14