How to get keycloak token in angular-keycloak

Question

i'm building a chat app, i implemented the live chat feature with sse, i used keycloak as an idap, to allow auth i had to use a custom EventSource implementation called EventSourcePolyFill, my front end is built with angular, i'm trying to do something like this but i'm new to js,

    private getEventSource(url: string): EventSourcePolyfill {
    return new EventSourcePolyfill(url, {
      headers: {
        Authorization: 'Bearer ' + this.kcService.getToken,
      },
    });
  }

when i saw the bearer in dev tools found out it's : bearer [object Promise]

Answer 1

Seeing [object Promise] means the token is being returned asynchronously. In that case you need to await this.kcService.getToken.

The simplest approach to allow is then to make getEventSource() be async. Which means you need to await on calls to that function. And so on, up your callstack.

The other way is to make sure you have fetched the keycloak token in advance, and pass it in as an arg:

private getEventSource(url: string, token: string): EventSourcePolyfill {
return new EventSourcePolyfill(url, {
  headers: {
    Authorization: 'Bearer ' + token,
    },
  });
}

Answer 2

use this.kcService.getKeycloakInstance().token instead