Authorization header not excluded sometimes

[angular101]

Hi, Thanks for creating this excellent module. I'm new to Angular so apologies if this is not an issue and just me being an idiot.

I'm having a problem excluding the Authorization header in my requests. (preflight fails when Authorization header is included so I need it removed).

I've modified the given keycloak-heroes example to replicate my problem. I've added a span with on click event in the home component which calls HeroesService which makes a POST request to the URL I want excluded. I've also updated app-init.js with my url/realm/clientId and added the URL I want excluded.

Problem is the Authorization header is being included sometimes. First time I click the element - no Authorization header - second time Authorization header - third time no header etc..

I tried latest v1.2.3 and also tried various regex with the excluded URL but no luck.

If I remove keycloak from the providers in app.modules.ts the code works fine - as a test just in case it's my lack of Angular causing the issue.

Here's the changes I made so you can see what I'm talking about.

home.component.html:

I just added a span before the final div:

<span (click)="test()">TEST</span>

home.component.ts:

  test() {
    this.heroesService.graphQl('some query').subscribe((r) => { console.log(r); });
  }

heroes.service.ts:

  graphQl(query): any {
    const headers = new HttpHeaders({
      'X-COMPANY-API-Key' : 'xxx',
      'Content-Type' : 'application/json'
    });
    const options = { headers: headers };
    return this.http.post('https://api.COMPANY.com/graphql', query, options);
  }

app-init.ts:

  config: {
    url: 'https://login.COMPANY.com/auth/',
    realm: 'COMPANY-REALM',
    clientId: 'COMPANY-CLIENTID'
  },
  initOptions: {
    onLoad: 'login-required',
    checkLoginIframe: false
  },
  bearerExcludedUrls: [
    'https://api.COMPANY.com/graphql'
  ]

[mauriciovigolo]

Hello @angular101,

I think that the problem may be related with the URL and special characters. The bearerExcludedUrls must be a valid regex. In your case, is it necessary to use the full url? By the way, you will have to deal with different environments for testing, production, development. Another idea is to use the simple path like:

  bearerExcludedUrls: [
    'graphql'
  ]

If not possible, you will have to build a valid regex. Take a look and if it doesn't helps you, let me know.

Thank you @angular101!

[angular101]

Hi @mauriciovigolo,

Thanks for rapid response very much appreciated.

I tried using'graphql' and I still get same problem - it includes the auth header every second time.

if I use'.*' it works and never includes the auth header.

I wonder if this has any bearing?: https://stackoverflow.com/questions/3811890/javascript-regular-expression-fails-every-other-time-it-is-called

[mauriciovigolo]

Hello @angular101,

You are right! Just replicated this situation and the problem also happened to me. It seems to be related to the stackoverflow post you mentioned and by the way, for our case, there is no need to be global as if there is one occurrence in the given URL it should exclude, so excellent!

I will release a fix for this. And again, thank you for help @angular101!!

[angular101]

@mauriciovigolo Brilliant I look forward to the new release! Thanks for all your hard work.

[mauriciovigolo]

@angular101, nice work for the community!

Version 1.2.5 was released with the bug fix. Wish you the best!