Can't send firebase token in HttpInterceptor

Question

I've been trying to add a Firebase token to every http request via HttpInterceptor but I can't retrieve the firebase token. When my interceptor runs the user appears as not logged in.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    try {
      firebase.auth().currentUser.getIdToken()
        .then((token) => {
            this.token = token;
        })
      req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `${this.token}`,
      }
    });
    return next.handle(req);

      } catch(err) {
          console.log(err)
      }
  }

I tried nesting getIdToken() inside firebase.auth().onAuthStateChanged() to check if there was an user logged in but it returns null.

How can I solve this? thanks in advance!

Answer 1

I had to modify my code to use async functions so I can retrieve and wait for the token:

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return Observable.fromPromise(this.handleAccess(request, next));
  }

  private async handleAccess(request: HttpRequest<any>, next: HttpHandler):
      Promise<HttpEvent<any>> {
    const token = await this.authService.getFirebaseToken2();
    console.log(token)
    let changedRequest = request;
    const headerSettings: {[name: string]: string | string[]; } = {};

    for (const key of request.headers.keys()) {
      headerSettings[key] = request.headers.getAll(key);
    }
    if (token) {
      headerSettings['Authorization'] = token;
    }
    headerSettings['Content-Type'] = 'application/json';
    const newHeader = new HttpHeaders(headerSettings);

    changedRequest = request.clone({
      headers: newHeader});
    return next.handle(changedRequest).toPromise();
  }
}