title: Use ng2-adal to get access token for Microsoft Graph Client
body: <p>I'm trying to create an Angular application that uses the <a href="https://github.com/sureshchahal/angular2-adal" rel="nofollow noreferrer">Angular 2 ADAL library</a> to login into Azure Active Directory and afterwards call <a href="https://github.com/microsoftgraph/msgraph-sdk-javascript" rel="nofollow noreferrer">Microsoft Graph Client</a> to retrieve some informations about the current user.</p>
  
  <p>Unfortunately the Graph client always returns <code>InvalidAuthenticationToken</code> and I don't know how to further investigate to find the root cause.</p>
  
  <p><strong>my.component.ts</strong></p>
  
  <pre><code>import { Component, Inject, OnInit } from '@angular/core';
  import { PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  import { Client } from '@microsoft/microsoft-graph-client';
  
  import { SecretService } from '../../shared/secret.service';
  import { AdalService } from 'ng2-adal/services/adal.service';
  
  @Component({
      selector: 'my',
      templateUrl: './my.component.html'
  })
  export class MyComponent implements OnInit {
      isBrowser: boolean;
      private graphClient: Client;
      private userProfile: any;
  
      constructor(
          @Inject(PLATFORM_ID) platformId: Object,
          private adalService: AdalService,
          private secretService: SecretService) {
          this.isBrowser = isPlatformBrowser(platformId);
          adalService.init(secretService.adalConfig);
  
          // Don't initialize graph client in server-side-rendering
          if (this.isBrowser) {
              this.graphClient = Client.init({
                  authProvider: (done) =&gt; {
                      done(undefined, this.adalService.getCachedToken(this.secretService.adalConfig.clientId));
                  }
              });
          }
      }
  
      get isLoggedIn(): boolean {
          if (!this.isBrowser)
              return false;
  
          return this.adalService.userInfo.isAuthenticated;
      }
  
      ngOnInit() {
          // Fast exit on server-side-rendering
          if (!this.isBrowser)
              return;
  
          // Initialize ADAL service
          this.adalService.handleWindowCallback();
          this.adalService.getUser();
  
          // If we are already logged in (cause reply url is called from login)
          // use Graph API to get some data about the current user
          if (this.isLoggedIn) {
              this.graphClient.api('/me').get().then((value) =&gt; {
                  this.userProfile = value;
              }).catch((error) =&gt; {
                  // Currently I'm always getting here, but never in the above then() call.
                  console.log(error);
              });
          }
      }
  
      onLogin() {
          this.adalService.login();
      }
  
      onLogout() {
          this.adalService.logOut();
      }
  }
  </code></pre>
  
  <p><strong>my.component.html</strong></p>
  
  <pre><code>&lt;md-toolbar&gt;
      &lt;md-toolbar-row&gt;
          &lt;button color="primary" md-button *ngIf="!isLoggedIn" (click)="onLogin()"&gt;
              Login
          &lt;/button&gt;
          &lt;button color="accent" md-button *ngIf="isLoggedIn" (click)="onLogout()"&gt;
              Logout
          &lt;/button&gt;
      &lt;/md-toolbar-row&gt;
  &lt;/md-toolbar&gt;
  &lt;md-card&gt;
      &lt;md-card-content&gt;
          &lt;section&gt;
              {{userProfile}}
          &lt;/section&gt;
      &lt;/md-card-content&gt;
  &lt;/md-card&gt;
  </code></pre>