Keycloak-angular: Keycloak is not adding the bearer token by default to my http requests.

[abhinav82ify]

Keycloak is not adding the bearer token by default to my http requests.

Bug Report (mark with an x)

I am using keycloak for login in my angular application with configuration

{
  config: {
    url: 'http://localhost:8585/auth',
    realm: 'xxxxx',
    clientId: 'xxxxxx'
  },
  initOptions: {
    onLoad: 'login-required'
    checkLoginIframe: false
  },
  enableBearerInterceptor: true,
  bearerExcludedUrls: ['/assets']
}

I have tried removing the enableBearerInterceptor from config, since the default value is true. But the bearer token does not get added to the HTTP request. While debugging through the code, I can see that enableBearerInterceptor and excludedUrls are undefined and so the bearer token is not added. I could however write my own HttpInterceptor to add the token but I just want to make sure that I am not missing something here.

intercept(req, next) {
        const { enableBearerInterceptor, excludedUrls } = this.keycloak;
        if (!enableBearerInterceptor) {
            return next.handle(req);
        }
        const shallPass = excludedUrls.findIndex((item => this.isUrlExcluded(req, item))) > -1;
        if (shallPass) {
            return next.handle(req);
        }
        return this.keycloak.addTokenToHeader(req.headers).pipe(mergeMap((headersWithBearer => {
            const kcReq = req.clone({ headers: headersWithBearer });
            return next.handle(kcReq);
        })));
    }

Versions.

keycloak-angular - 7.0.1
angular - 8.2.12
keycloak-js - 8.0.0

Desired functionality.

Keycloak to be able to automatically add Bearer token in the request header.

[satyaram413]

Hi @abhinav82ify,
Did you add into the providers? It worked for me, however I see something that you have done, which i need in my keycloak, so when I make any http call, i should be able to add two value into my request body, I tried using keycloak along with custom Interceptor. Please help me if you find any lead. I have two add two key-value pairs, "tenantName": "hole", "plantName": "loop", something like Authorization : BearerToken.
providers: [ { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }, { provide: APP_INITIALIZER, useFactory: initializer, useValue: HttpClient, multi: true, deps: [KeycloakService, AppService] } ]
my custom interceptor class
intercept( req: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> { if (!req.headers.has('Content-Type')) { req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); } if (!req.headers.has('Allow-Origin')) { req = req.clone({ headers: req.headers.set('Allow-Origin', '*') }); } if (!req.headers.has('plantName')) { req = req.clone({ headers: req.headers.set('plantName', 'hpi') }); } if (!req.headers.has('tenantName')) { req = req.clone({ headers: req.headers.set('tenantName', 'hpi') }); } return next.handle(req); }
Without custom header everything works fine, I am able to send bearer token using keycloak default Interceptor.

[abhinav82ify]

@satyaram413
I believe that the current custom interceptor class is overriding the default interceptor provided by Keycloak. That is the reason the Bearer token is added to HTTP requests if you are not using custom interceptor.
I would suggest you to add the Bearer token explicitly in your custom interceptor class. You should get the Bearer token from the Keycloak service. Something like:

async intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
    const bearerToken = await this.keycloakService.getToken();

    if (!req.headers.has('Authorization')) {
        req = req.clone({
            headers: req.headers.set('Authorization', `Bearer ${bearerToken}`)
        });
    }

    // add other custom headers
    return next.handle(req);
}

[abhinav82ify]

UPDATE: It works as expected if I am not extending the KeycloakService and adding the KeycloakService and KeycloakBearerInterceptor into AppModule providers.
But, I have to extend KeycloakService and then it does not add bearer token.

[satyaram413]

Hi @abhinav82ify,
Do you know a way where I can send additional headers along with my AUthorization token. something like: Authorization: Token,
Plant: loop
Tenant: Jio
I am able to send Authorization Token, but when I am trying to add additional Headers, it gives me a 204. Can you provide me the tutorial from where you followed up to build your steps.

[abhinav82ify]

@satyaram413
I think the way I have described above (https://github.com/mauriciovigolo/keycloak-angular/issues/180#issuecomment-559019241) should be sufficient to add other headers along with your authorization header. Create a custom HTTP Interceptor and add all the required headers in there.
I am not following any tutorials for which I can send you the link.

[satyaram413]

Hi @abhinav82ify, can you provide me with the providers you used, are they default ones, which https://github.com/mauriciovigolo/keycloak-angular this project suggests to use, or the custom ones, like this:
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
Unfortunately with just this, I am not able to add additional headers, moreover not able to able redirect myself cuz, I have my configuration inside the intializer.
{ provide: APP_INITIALIZER, useFactory: initializer, useValue: HttpClient, multi: true, deps: [KeycloakService, AppService] }
Please help

[abhinav82ify]

@satyaram413
I have created my own KeycloakAuthenticationService which extends KeycloakService. That is provided in the root module. And I have created a custom KeycloakHttpInterceptor which extends 'HttpInterceptor'. For this, I have added
{ provide: HTTP_INTERCEPTORS, useClass: KeycloakHttpInterceptor, multi: true } in the app.module.ts.

[jonkoops]

@abhinav82ify Would it be possible for you to share some code to create a small app that reproduces the problem you are having? It would make it a lot easier for us to diagnose the problem.

[Willyisback]

I had a similar problem. The angular rest service was a seperate module and the KeycloakBearerInterceptor only work in app module. So I must added the KeycloakBearerInterceptor to service module.

app.module

...
providers: [
    {
      // Keycloak initialization
      provide: APP_INITIALIZER,
      useFactory: initializerKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
],
...

rest.module

...
providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: KeycloakBearerInterceptor,
      multi: true
    }
],
...

[jonkoops]

I'm closing this issue die to inactivity, if anyone still has this issue feel free to open a new one. If you do please make sure to post some code to reproduce the issue.