RxJS conceptual help: access and refresh tokens, non-simultaneous refresh - jwt

Question

I'm new to RxJS and am asking for conceptual help on how to approach the following process:
Backend is secured with short lived JWT access tokens. Upon authentication, client is issued initial access token and long lived refresh token. Refresh token can be used to create a new access token.
The client can decode the tokens and knows if a token is expired or not. The client shall refresh access tokens lazily when they are expired; not retry a a failing request.
The client shall not issue multiple refresh-requests simultaneously.
The last part I struggle with. I imagine a semaphore, or "gate" of some kind:
The first refresh-request passes through the gate and locks it behind itself. It then initiates the actual token-refresh.
Other refresh-requests are blocked at the gate, waiting to pass.
The completion of the token-refresh stores the new access token and lifts the gate.
All refresh-requests return the new access token.
I found this code that uses redux to implement the gate. Is that necessary?
Alternatively, could the gate be implemented by a BehaviorSubject?

Answer 1

I found a solution! The code is available here.
The gate is using a BehaviorSubject to have a singleton holding the state. By applying a filter I get a blocking gate that will allow passage when the underlying gate is lifted:
const gate$ = new BehaviorSubject(true); // open at first
const openGate$ = gate$.pipe(
filter(x => x === true),
take(1) // take only one event, then complete
);
// wait for the gate to open
openGate$.subscribe(() => {
// do something
});
// close the gate:
gate$.next(false);
// and open it again
gate$.next(true);
By using a BehaviourSubject, the gate is initialised and open by default.