title: HTTP Get Angular 4 from API with firebase Id_token
body: <p>I'm getting a promise as the return from the firebase auth function, and I need the idToken to authorize through the API.</p>
  
  <p>I'm setting up the HTTP get req with an Observable. </p>
  
  <p>I'm getting a "401 Unauthorized", when I run the code. 
  I tried running the getIdToken outside the getData function, although the idToken remains "undefined" in the console. </p>
  
  <p><a href="https://i.stack.imgur.com/P7V2W.png" rel="nofollow noreferrer">See this image of the console "undefined" message </a></p>
  
  <p>How do I solve this issue?</p>
  
  <p>The service: </p>
  
  <pre><code>    import { Component, OnInit, Inject, Injectable } from '@angular/core';
      import { HttpHeaders, HttpParams } from '@angular/common/http';
      import { HttpModule, Http, Response, RequestOptions } from "@angular/http";
      import * as firebase from 'firebase/app'; //Firebase SDK
      import { Observable } from "rxjs/Observable";
      import 'rxjs/Rx';
      import { AngularFireDatabase, FirebaseListObservable } from "angularfire2/database";
      import { Params } from "@angular/router/src";
      import { Headers } from '@angular/http';
  
      @Injectable()
      export class StoriesService implements OnInit {
  
        page: string;
        feed: string;
        hits: string;
        idToken: any;
  
        private stories: any;
        private savedObjects: any;
        private apiUrl = 'https://dev-api.byrd.news/v1/stories';
  
  
         constructor(private http: Http) {
      console.log("Yo! Stories!")
    }
  
    ngOnInit() { }
  
    fireAuth() {
      firebase.auth().currentUser.getIdToken(true).then((idToken) =&gt; {
        this.idToken = idToken;
      })
    }
  
  
    getData(page, feed, hits): Observable&lt;any&gt; {
      this.fireAuth();
      let headers = new Headers();
      headers.append('user_token', this.idToken);
      let params = new HttpParams()
        .set('page', page)
        .set('feed', feed)
        .set('hits', hits)
      //let options = new RequestOptionsArg({headers: headers, params:params});
      console.log(this.idToken, headers, params);
      return this.http
        .get(this.apiUrl, { params, headers })
        .map((response: Response) =&gt; {
          console.log("Breakthrough!")
          return response.json() || {};
        })
        .catch(this.handleError);
    }
  
    private handleError(error: Response) {
      return Observable.throw(error.statusText);
    }
  </code></pre>
  
  <p>The component:</p>
  
  <pre><code> getStories() : void {
      this.storiesService.getData('0', 'latest','6')
      .subscribe(data =&gt; {
        console.log(data);
      })
    }
  }
  </code></pre>