title: angular 5 adal.js automatic token renew in load angular twice or more
body: <p>I have tried a number of angular-adal libraries but the renew of the token is not automatic done. </p>
  
  <p>This the configuration I used.</p>
  
  <p>In package.json</p>
  
  <pre><code>"@types/adal": "^1.0.29",
  "@types/adal-angular": "^1.0.0",
  "adal-angular": "^1.0.17",
  </code></pre>
  
  <p>adal-angular come with two scripts <code>adal.js</code> and <code>adal-angular.js</code>. I think <code>adal.angular.js</code> is only for old <code>angularjs</code> solutions. So I used adal.js and an wrapper @types/adal.</p>
  
  <p>and include the <code>adal.js</code> in the <code>.angular-cli.json</code></p>
  
  <pre><code>  "scripts": [
      "../node_modules/adal-angular/lib/adal.js"
    ],
  </code></pre>
  
  <p>In my angular 5 application I use adal to log on and make request api request to website on another url.</p>
  
  <p>The used config </p>
  
  <pre><code>  JwtConfig: {
      tenant: "a1d50521-9687-4e4d-a76d-xxxxxxxxx",
      clientId: "8d708afe-2966-40b7-918c-xxxxxxxx",
      isAngular: true
    },
  </code></pre>
  
  <p>My authService looks like</p>
  
  <pre><code>  import { } from "adal";
    @Injectable()
    export class AuthService {
    private _config: adal.Config;
    private _context: adal.AuthenticationContext;
    constructor() {
      Logging = {
        level: 3,
        log: function (message) {
          console.log(message);
        }
      };
      this._config = environment.JwtConfig;
      this._context = new AuthenticationContext(this._config);
    }
  </code></pre>
  
  <p>The logging is not needed but enables adal.js logging</p>
  
  <p>A lot of examples store there token in localstorage but this token is only valid for 1 hour. To solve this problem I call acquireToken everytime. It will give me the cached token or a renewed if it is expired.</p>
  
  <pre><code>  acquireToken(): Observable&lt;string&gt; {
      return new Observable&lt;string&gt;((subscriber: Subscriber&lt;string&gt;) =&gt; {
        if (window.frameElement &amp;&amp; window.frameElement.id === "adalIdTokenFrame")
          subscriber.next(null);
        else {
          const user = this._context.getCachedUser();
          return this._context.acquireToken(environment.JwtConfig.clientId, (message: string, token: string) =&gt; {
            subscriber.next(token);
          });
        }
      });
    }
  </code></pre>
  
  <p>To get this working right there are a number of tricky things.</p>
  
  <p>The renewal is done in a hidden I frame what makes a request to microsoft AD</p>
  
  <p><code>https://login.microsoftonline.com/xxxtenantIDxxx/oauth2/authorize?response_type=id_token&amp;client_id=xxx-xx-x-xx</code></p>
  
  <p>the response will redirect to <code>http://localhost:4200/...</code> that will start <strong>another angular application in this hidden IFrame</strong> </p>
  
  <p>this check <code>if (window.frameElement &amp;&amp; window.frameElement.id === "adalIdTokenFrame")</code> will prevent an endless loop of hidden IFrames.</p>
  
  <p>The line <code>const user = this._context.getCachedUser();</code> is needed so that adal knows there is a user and will renew the user instead a message that the user must login. </p>
  
  <p>This seems to work ok. If the token is expired <code>New Date(profile.exp*1000)</code> for several hours. The user can still renew this token.</p>
  
  <p>Is there a way to prevent that my Angular apllication is loaded in the hidden Iframe? With a working wrapper or some other trick?</p>