how to solve race condition involving behavior subject and async function?

I have an async function that is called multiple times simultaneously, and I am assuming calling .next(true) on a behavior subject is also asynchronous, therefore when multiple calls to this function happen simultaneously the value returned from await firstValueFrom(this.isBusy$); in the subsequent calls are still false, even though .next(true) was called via the initial function caller.

How can I make it so that subsequent calls will properly reflect the correct isBusy$ value?

I have made a stackblitz to illustrate my problem:
https://stackblitz.com/edit/rxjs-wrw3h6?file=index.ts

Also I should note, although I made the stackblitz not involve Angular, the code is actually from an Angular HTTP Interceptor, where it would be doing:

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

  let headers: AuthorizationHeaders;
  const getAuthorizationHeader = async () => {
    headers = await this.authService.headers();
  };

  return from(getAuthorizationHeader()).pipe(
    switchMap(() => next.handle(request.clone({
      setHeaders: headers,
    })))
  );
}

And the problem is, because it's never knowing that the auth call is busy, it's calling to get a refresh token repeatedly when there are multiple components on the page making api calls simultaneously.

So the question is, how can I make it so that a bunch of api calls are made, but only one call to refresh a token is made, and all other ones wait until the token call is completed before it returns the authorization header?

Don't mix promises and RxJs. Expose the header as an observable.

headers$ = isBusy$.pipe(
  filter(isBusy => !isBusy),
  switchMap(() => {
    if (this.isTokenExpired) {
      this.isBusySubject.next(true);
      return getTokenCall().pipe(
        tap(token) => {
          this.token = token;
          this.isBusySubject.next(false);
        }),
        map(token => (({ Authorization: `Bearer ${this.token}` })))
      );
    } else {
      return of({ Authorization: `Bearer ${this.token}` });
    }
  })
)

Then you just return the observable from the service in your interceptor.

About behavior subjects being completely synchronous.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { BehaviorSubject } = rxjs;

const bs$ = new BehaviorSubject(0);

bs$.subscribe(val => { console.log('Emitting ' + val); });

console.log('Calling next on 1');
bs$.next(1);
console.log('Calling next on 2');
bs$.next(2);
console.log('Calling next on 3');
bs$.next(3);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.0/rxjs.umd.min.js"></script>

<!-- end snippet -->

putting a delay on them makes the asynchronous and will queue them for execution

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { BehaviorSubject, delay } = rxjs;

const bs$ = new BehaviorSubject(0);

bs$.pipe(delay()).subscribe(val => { console.log('Emitting ' + val); });

console.log('Calling next on 1');
bs$.next(1);
console.log('Calling next on 2');
bs$.next(2);
console.log('Calling next on 3');
bs$.next(3);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.0/rxjs.umd.min.js"></script>

<!-- end snippet -->

BehaviorSubject works in synchronous fashion. Instead of using await firstValueFrom(this.isBusy$) use this.isBusySubject.value.