Angular Interceptor repeating every request 3 times

I have an interceptor for refreshing an access token, when it doesn't refresh, everything's all good, but when it does, the unfortunate request that happened to pass through it when it decided to refresh will be repeated 3 times, the refresh request itself also runs 3 times.

export const refreshInterceptor: HttpInterceptorFn = (req, next) => {
let auth = inject(AuthService);
if (!auth.loggedIn() || !auth.AccessExpired() || req.headers.has('refresh_token') || req.headers.has("no-intercept")) {
return next(req);
}
return auth.refresh().pipe(
catchError(() => next(req)),
switchMap((res) => {
var response = res as RefreshResponse;
const newReq = req.clone({
headers: req.headers.set("Authorization", `Bearer ${response.access_token}`)
})
return next(newReq);
})
)
};


This is the refresh method, I have already tried removing the retry(2) but that didn't change anything.

refresh() {
if (this.loggedIn()) {
return this.http.post<RefreshResponse>(this.baseUrl + "refresh", {}, {
headers: new HttpHeaders().set("refresh_token", this.refreshToken ?? "")
}).pipe(
tap(
res => {
console.log('Responded ' + res.access_token);
this.accessToken = res.access_token
}
),
retry(2),
catchError((err) => {
console.log("errored" + err)
this.logout();
this.noti.showError("Your session expired, log in again.", 5000);
return throwError(() => new Error(err));
})
)
}
return throwError(() => "User is not logged in, no refresh possible");
}

Continue reading...