title: How to send firebase jwt getIdToken to http get request in angular 8?
body: <p>I am using angular 8 to make a SPA.</p>
  
  <p>Firebase is used to authenticate the user both in the client as well as in the backend, so I need to send the jwt token in http.get request to the backend to authenticate the user.</p>
  
  <p>Backend is an API made with django 2.2 and django rest framework which sends the api to be consumed in client application.</p>
  
  <p>auth.service.ts</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  
  export class AuthService {
    userData: any; // Save logged in user data
    public userToken: string;
  
    constructor(
      public afs: AngularFirestore,   // Inject Firestore service
      public afAuth: AngularFireAuth, // Inject Firebase auth service
      public router: Router,
      public ngZone: NgZone // NgZone service to remove outside scope warning
    ) {
      /* Saving user data in localstorage when 
      logged in and setting up null when logged out */
      this.afAuth.authState.subscribe(user =&gt; {
        if (user) {
          this.userData = user;
          localStorage.setItem('user', JSON.stringify(this.userData));
          JSON.parse(localStorage.getItem('user'));
        } else {
          localStorage.setItem('user', null);
          JSON.parse(localStorage.getItem('user'));
        }
      });
  
    }
  
  
    GetToken(): string {
      this.afAuth.auth.onAuthStateChanged( user =&gt; {
        if (user) {
          user.getIdToken().then(idToken =&gt; {
            this.userToken = idToken;
  
              // this shows the userToken
            console.log('token inside getToken method ' + this.userToken);
          });
        }
      });
  
      // this shows userToken as undefined
      console.log('before return ' + this.userToken);
      return this.userToken;
    }
  
  }
  
  </code></pre>
  
  <p>api.service.ts</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ApiService {
  
    private url = environment.baseUrl;
    token: any;
    data: any;
  
    constructor(
      private http: HttpClient,
      private authService: AuthService,
      ) {}
  
  
  
      // old method to get emloyees data
    // public getEmployees(): Observable&lt;Employee[]&gt; {
    //   return this.http.get&lt;Employee[]&gt;(`${this.url}/employee/`);
    // }
  
  
    httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'JWT ' + this.authService.GetToken()
      }),
    };
  
  
    public getEmployees(): Observable&lt;Employee[]&gt; {
  
        // token is undefined here
      console.log('token inside getEmployees method ' + this.token);
  
      return this.http.get&lt;Employee[]&gt;(`${this.url}/employee/`, this.httpOptions);
    }
  
  }
  </code></pre>
  
  <p>The backend is working perfectly which I verified by adding the token in the httpOptions, like so:</p>
  
  <pre><code>httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'JWT ' + 'ey.....'
      }),
    };
  </code></pre>
  
  <p>But when I try doing the same as given in code it doesn't work.
  The user token remains undefined.</p>