auth0-angular: Unable to set httpInterceptor when providing configuration via AuthClientConfig.set

Describe the problem

I am using the new dynamic configuration to set the various Auth0 Config properties like domain, clientId, and httpInterceptor.

Problem - The httpInterceptor uri/audience options aren’t being picked up. As a result, my http.get API calls do not have an Authorization header on them.

What was the expected behavior?

Authorization header should appear on API requests when specified in httpInterceptor

Reproduction

Following the Dynamic Configuration instructions, I didn’t pass anything in the .forRoot() in app.module.ts imports section.

AuthModule.forRoot()

I set up the App Initializer and HTTP Interceptor:

{
      provide: APP_INITIALIZER,
      useFactory: configInitializer,    // <- pass your initializer function here
      deps: [AuthClientConfig,HttpClient],
      multi: true,
},
{ provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },

I set the values directly in the configInitializer

function configInitializer(config: AuthClientConfig, http: HttpClient) {

  return () => { config.set({ 
        clientId: "myclientid", 
        domain: "mytenant.eu.auth0.com",
        httpInterceptor: { allowedList: [
            {
                uri: "/api/*",
                tokenOptions: {
                    audience: "my-audience"
                }
            }
        ] }
    }); 
  }
}

The httpInterceptor does not seem to get picked up. The library does not pass any audience when requesting a token, and no Authorization header is present on calls to /api/....

If I just copy paste that configuration back into .forRoot(), all behavior returns to normal, and Authorization header is passed in API requests.

CC @stevehobbsdev please can you try this out, does httpInterceptor work for you?

Environment

Version of auth0-angular used:: 1.1.0
Which browsers have you tested in?: Firefox
Which version of Angular have you tested with?: 10

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (9 by maintainers)

Most upvoted comments

Tested 1.2.0 and working, thanks a lot for your efforts with the past few issues @frederikprijck and @stevehobbsdev

I’m really glad we’re getting to use this library in our new project; it’s easy to use, the instructions are easy to follow, with very good examples. This has made securing our application really easy with minimal effort, with so little cognitive load on our developers, it’s an absolute joy to set up for them 😄

My favorite part is the API syntax, minimal and clean.

{
        uri: '/api/accounts/*',
        tokenOptions: {
          audience: 'http://my-api/',
          scope: 'read:accounts',
        },
      },

mendhak on Oct 22, 2020

Thx @mendhak

The important line I was missing was in my loading service

this.httpClient = new HttpClient(this.handler);

With this line, you create a new HttpClient, that “ignore” HTTP_INTERCEPTOR. Seems more like a workaround to me, but, it works great, so I’ll go with this solution !

Thank you for the help !

gagaXD on Oct 23, 2020

Hey I tried it slightly differently before I saw your comment. After the npx ng build against your branch, I copied what was in the dist/ into my local project’s node_modules/@auth0/ and replaced the auth0-angular directory. That seems simple enough.

I restarted my local Angular application, and your changes worked! 😁

I can see an Authorization Bearer token in the requests.

mendhak on Oct 19, 2020

No worries, I was doing my own writeup on Angular + auth0-angular library + dynamic configuration. Hope it helps future searchers since there are a lot of moving parts to getting it set up properly.

mendhak on Oct 23, 2020

Hi @mendhak ,

This should be fixed in the latest release (1.2.0)!

frederikprijck on Oct 22, 2020