How to handle .toPromise() deprecation with RXJS and Angular 13

Question

Hello I'm trying to figure out how to handle this deprecation on this code

const authCtx = (auth: AngularFireAuth) =>
  setContext(async () => {
    const token = await auth.idToken.pipe(take(1)).toPromise();
    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
  });

I'm taking the jwt token from Firebase and set that token on my graphQL module when the user is logged in but I got the warning that toPromise is deprecated and it say that I should implement lastValueFrom or firstValueForm so I thint I could be something like this:

const authCtx = (auth: AngularFireAuth) =>
  setContext(async () => {
    const token = lastValueFrom(auth.idToken)
    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
  });

I'm not pretty sure what is the right sinxtax to update this code

Answer 1

You can write this with firstValueFrom

const authCtx = (auth: AngularFireAuth) =>
  setContext(() =>
    firstValueFrom(auth.idToken.pipe(
      map(token => ({ headers: {
        Authorization: `Bearer ${token}`
      }}))
    )
  );