Angular - Bearer not added when route not protected with Guard

Help
,
1

I am using @auth0/auth0-angular 2.2.2 and I am able to successfully call an API and have the auth0 library add the Bearer token however this only occurs when the page which triggers the API call is “guarded” by the auth0 route guard. If the same service call is made from a page which is not guarded - the bearer token is not added.

Has anyone else seen this and/or knows how to fix it ? I even made the call await the isAuthenticated$ subscription!

I tried the below but it seems the token is being stripped by another interceptor:

import {
  HttpEvent,
  HttpHandlerFn,
  HttpInterceptorFn,
  HttpRequest,
} from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { Observable, switchMap } from 'rxjs';

export const paymentInterceptor: HttpInterceptorFn = (
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<HttpEvent<any>> => {
  const authService = inject(AuthService);

  return authService.getAccessTokenSilently().pipe(
    switchMap((token) => {
      const newRequest = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        },
      });
      return next(newRequest);
    })
  );
};