angularfirebase-authenticationauth0angular-http-interceptors

Conditionally bypass Auth0 HttpInterceptor


As part of a migration from Firebase to Auth0, my front-end Angular application conditionally authenticates users to either Firebase or Auth0 based on their email address. I am attempting to configure the Auth0 AuthHttpInterceptor provided with the Auth0 Angular SDK for SPAs such that it will attempt to add an authentication token only when the user is known to be an Auth0 user (i.e., when they have already signed in to my application). In particular, I would like it to just "passthrough" requests for Firebase-authenticated users.

I've configured both the Auth0 HttpInterceptor and my custom Firebase HttpInterceptor so that they are called one after the other. I've set Auth0 to "allowAnonymous" in an attempt to make it skip processing in the case the current user is not authenticated to Auth0. The interceptor is configured in my module like:

    Auth0Module.forRoot({
      // ...

      httpInterceptor: {
        allowedList: [
          {
            uri: 'http://localhost:8080/*',
            // Allow API to go through even if no Auth0 authentication, in attempt
            // to skip Auth0-specific processing for Firebase users.
            allowAnonymous: true,
          },
        ],
      },
    }),

Unfortunately, the Auth0 interceptor persists in calling the /authorize endpoint on each request (even when the user is authenticated only to Firebase).

I've considered that if I chained the HttpInterceptors in the reverse order (first my custom interceptor, then Auth0) I may be able to conditionally skip the Auth0 interceptor for Firebase users, but I can find no way to do this.

Is there any way for an HttpInterceptor to skip chained interceptors that have not yet executed?


Solution

  • You could make an aggregate interceptor and have it delegate to auth0 or firebase based on your logic:

    export class AggregateInterceptor implements HttpInterceptor {
    
      constructor(private auth0Ceptor: AuthHttpInterceptor,
                  private firebaseCeptor: FirebaseInterceptor) { }
    
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (...) {
          return this.auth0Ceptor.intercept(req, next);
        } else {
          return this.firebaseCeptor.intercept(req, next);
        }
      }
    }
    

    In case you want auth0 interceptor to do it's work but not actually handle the request, but rather forward it to firebase, you could use a custom handler:

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const chainHandler: HttpHandler = {
        handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
          return this.firebaseCeptor.intercept(req, next);
        }
      };
    
      if (...) {
        return this.auth0Ceptor.intercept(req, chainHandler);
      } else {
        return this.firebaseCeptor.intercept(req, next);
      }
    }