How use async function in angular 17 function based Http Interceptor

Question

I have an interceptor that adds the access token to every request. The only problem is, the only way I can get this access token is by using a function that returns a Promise: async getToken(): Promise<string> {

I HAVE to use this function to get the tokens. There is no other way. I have tried making the authInterceptor function async to no avail.

So how do I use this in a function based interceptor like so?

import { Inject, inject } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = Inject(AuthService)
  const authToken = await authService.getToken(); // how to do this?? 
  console.log(authToken);

  // Clone the request and add the authorization header
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer ${authToken}`
    }
  });

  // Pass the cloned request with the updated header to the next handler
  return next(authReq);
};

Please help.

Try to use const a = from(await authService.getToken()); a.subscribe(res => authToken = res) — SergeyChe
– SergeyChe, Commented Jun 25, 2024 at 14:02
Im getting following errors when making the function async: Type '(req: HttpRequest<unknown>, next: HttpHandlerFn) => Promise<Observable<HttpEvent<unknown>>>' is not assignable to type 'HttpInterceptorFn'. Type 'Promise<Observable<HttpEvent<unknown>>>' is missing the following properties from type 'Observable<HttpEvent<unknown>>': source, operator, lift, subscribe, and 3 more.ts(2322) — 6godddd
– 6godddd, Commented Jun 25, 2024 at 14:17

Naren Murali · Accepted Answer · 2024-06-25 14:40:30Z

2

You can try using just observables, using switchMap to switch between observables.

We can use from to convert the promise to an observable.

One important point is to use inject instead of Inject, first one is used outside the constructor, latter is inside.

export const authInterceptor: HttpInterceptorFn = (req, next) => { // <- changed here!
  const authService: AuthService = inject(AuthService)
  return from(authService.getToken()).pipe(
     switchMap((authToken: string) => {
          console.log(authToken);

          // Clone the request and add the authorization header
          const authReq = req.clone({
            setHeaders: {
              Authorization: `Bearer ${authToken}`
            }
          });

          // Pass the cloned request with the updated header to the next handler  
          return next(authReq);
     })
  )
};

edited Jun 25, 2024 at 14:40

answered Jun 25, 2024 at 13:58

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

6godddd Over a year ago

Thanks, but now im getting following error: Type '(req: HttpRequest<unknown>, next: HttpHandlerFn) => Promise<Observable<HttpEvent<unknown>>>' is not assignable to type 'HttpInterceptorFn'.

6godddd Over a year ago

thank you so much for your anwser and your time, but I cannot use an observable. The function getToken() has to return a promise. This is a requirement. Property 'pipe' does not exist on type 'Promise<unknown>'.ts(23

6godddd Over a year ago

I didn't test your latest answer yet, i will let you know tomorrow! Thank you in advance for helping!

6godddd Over a year ago

This works perfectly! I am quite new to angular and ts so I have learned a lot from your answer. Thank you so much!

Jonathan Nieto · Accepted Answer · 2024-06-25 14:48:53Z

Using map and switchmap rxjs operators, you can try something like this:

import { Inject, inject } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
    const authService = Inject(AuthService)
    

    // Pass the cloned request with the updated header to the next handler
    return next(req)
        ?.pipe(
            switchMap(() => authService.getToken()),
            map(authToken => {
                // Clone the request and add the authorization header
                const authReq = req.clone({
                    setHeaders: {
                        Authorization: `Bearer ${authToken}`
                    }
                });
                return authReq;
            }),
        );
};

next function return an observable, so you can manipulating for getting authToken value with switchMap operator, then you can use map operator for building authReq and return it.

Collectives™ on Stack Overflow

How use async function in angular 17 function based Http Interceptor

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related