Authentication Interceptor for Angular does not appear to work

Questions
4

Here’s how I’ve implemented the interceptor in OktaDev Schematics:

From https://github.com/oktadeveloper/schematics/blob/main/src/add-auth/angular/src/app/shared/okta/auth.interceptor.ts:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { OktaAuthService } from '@okta/okta-angular';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private oktaAuth: OktaAuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.handleAccess(request, next));
  }

  private handleAccess(request: HttpRequest<any>, next: HttpHandler): Promise<HttpEvent<any>> {
    // Only add an access token to whitelisted origins
    const allowedOrigins = ['http://localhost'];
    if (allowedOrigins.some(url => request.urlWithParams.includes(url))) {
      const accessToken = this.oktaAuth.getAccessToken();
      request = request.clone({
        setHeaders: {
          Authorization: 'Bearer ' + accessToken
        }
      });
    }
    return next.handle(request).toPromise();
  }
}

From https://github.com/oktadeveloper/schematics/blob/main/src/add-auth/angular/src/app/auth-routing.module.ts:

providers: [
  { provide: OKTA_CONFIG, useValue: oktaConfig },
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],

Are you trying to connect to a backend server that’s not on localhost?