enableBearerInterceptor not working

[fabiopacheco18]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search for issues before submitting
- [ ] feature request

Versions.

"keycloak-angular": "9.1.0" "keycloak-js": "16.0.0" "Angular": "13.0.2"

i'm trying to implement keycloak-angular but i'm not able to add the bearer token by default to my http requests.

app.module.ts

`keycloak.init({
      config: {
        url: 'https://127.0.0.1:8443/auth',
        realm: 'dev',
        clientId: 'app',
      },
      initOptions: {
        checkLoginIframe:false,
        onLoad: 'login-required',
      },
      enableBearerInterceptor: true,
      bearerExcludedUrls:[],
      loadUserProfileAtStartUp:true,
      
    });`

`providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak, 
      multi: true,
      deps: [KeycloakService]
    },
  ],`

[Samad-Shaikh]

Hi @fabiopacheco18

You can get the bearer token by using KeycloakService.getToken(). Note that it returns Promise.

[ProfEibe]

I had the same problem too. I was able to get it to work after adding { provide: HTTP_INTERCEPTORS, useClass: KeycloakBearerInterceptor, multi: true }, to the providers of my app.module.ts.

I had not to do this before and I think this should happen automatically. Has something changed in angular beginning with version 13 or the last keycloak-angular updates?

[KhizerRehan]

Angular Version: "13.3.9", "keycloak-angular": "10.0.2", "keycloak-js": "18.0.1",

Tested and works with following packages version. Hope it can help you in case you have not found a solution:

export function initKeycloakInstance(keycloak: KeycloakService): () => Promise<boolean> {
  return (): Promise<boolean> => {
    return new Promise(async (resolve, reject) => {
      try {
        await keycloak.init({
          config: {
            url: '<KEYCLOAK_URL>',
            realm: '<REALM>',
            clientId: '<CLIENT_ID>'
          },
          initOptions: {
            onLoad: 'login-required',
            checkLoginIframe: false
          },
          enableBearerInterceptor: true, // attach ACCESS_TOKEN on each request
          bearerPrefix: 'Bearer', // prefix "bearer <TOKEN> on each request
          bearerExcludedUrls: []
        });
        resolve(true);
      } catch (error) {
        reject(error);
      }
    });
  };
}

[Michae1Weiss]

Hey folks,

I wanted to share a code snippet that worked well for me.

Versions. "keycloak-angular": "15.0.0" "keycloak-js": "22.0.5" "Angular": "17.0.4"

// app.config.ts

import {APP_INITIALIZER, ApplicationConfig, Provider} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';
import {KeycloakBearerInterceptor, KeycloakService} from "keycloak-angular";
import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";

// Function to initialize Keycloak with the necessary configurations
function initializeKeycloak(keycloak: KeycloakService) {
 return () =>
   keycloak.init({
     // Configuration details for Keycloak
     config: {
       url: 'http://localhost:1234/auth', // URL of the Keycloak server
       realm: 'test', // Realm to be used in Keycloak
       clientId: 'frontend' // Client ID for the application in Keycloak
     },
     // Options for Keycloak initialization
     initOptions: {
       onLoad: 'check-sso', // Action to take on load
       silentCheckSsoRedirectUri:
         window.location.origin + '/assets/silent-check-sso.html' // URI for silent SSO checks
     },
     // Enables Bearer interceptor
     enableBearerInterceptor: true,
     // Prefix for the Bearer token
     bearerPrefix: 'Bearer',
     // URLs excluded from Bearer token addition (empty by default)
     //bearerExcludedUrls: []
   });
}

// Provider for Keycloak Bearer Interceptor
const KeycloakBearerInterceptorProvider: Provider = {
 provide: HTTP_INTERCEPTORS,
 useClass: KeycloakBearerInterceptor,
 multi: true
};

// Provider for Keycloak Initialization
const KeycloakInitializerProvider: Provider = {
 provide: APP_INITIALIZER,
 useFactory: initializeKeycloak,
 multi: true,
 deps: [KeycloakService]
}

// Exported configuration for the application
export const appConfig: ApplicationConfig = {
 providers: [
   provideHttpClient(withInterceptorsFromDi()), // Provides HttpClient with interceptors
   KeycloakInitializerProvider, // Initializes Keycloak
   KeycloakBearerInterceptorProvider, // Provides Keycloak Bearer Interceptor
   KeycloakService, // Service for Keycloak
   provideRouter(routes) // Provides routing for the application
 ]
};

[KhizerRehan]

@Michae1Weiss

Like prior to v17 was good enough to run following Initializer before application loads and enableBearerInterceptor: true was enough.

const KeycloakInitializerProvider: Provider = {
 provide: APP_INITIALIZER,
 useFactory: initializeKeycloak,
 multi: true,
 deps: [KeycloakService]
}

Now do we specifically need to enable todo?

// Provider for Keycloak Bearer Interceptor
const KeycloakBearerInterceptorProvider: Provider = {
 provide: HTTP_INTERCEPTORS,
 useClass: KeycloakBearerInterceptor,
 multi: true
};

As you can see my solution for v.13 https://github.com/mauriciovigolo/keycloak-angular/issues/384#issuecomment-1850331808

[Mohamed-Hammada]

Thanks @Michae1Weiss 👍 Same answer works with me using angular 17 and keycloak 23 I have only changed onLoad: 'login-required'

[lksdesarrolloNueve]

Why does it give me the following errors?

TypeError: ke.data.kernel.save.user_init is not a function kernel.js:376:37

TypeError: undefined is not a functionkernel.js:540:44