Keycloak-angular: Add function to return the instance.tokenParsed

[czeckd]

Thank you for your module!

I'd like access to the data contained in the Keycloak instance.tokenParsed. I can get at it via the KeycloakService.getKeycloakInstance function, but it'd be tidier if I could access it directly.

Right now I'm specifically after tokenParsed.email and tokenParsed.name, but the other fields could be useful in the future.

Would this something you'd be willing to add and/or would you like a pull request for this functionality? Is there a better way to access this information?

[mauriciovigolo]

Hi @czeckd, how are you?

First of all, sorry for the lack of response. Was travelling the past two weeks and didn't have time to watch the issues.
So, about your issue, what about using the user profile? The keycloak-js give us a function to get the user details. Currently the KeycloakProfile has the following attributes:

interface KeycloakProfile {
  id?: string;
  username?: string;
  email?: string;
  firstName?: string;
  lastName?: string;
  enabled?: boolean;
  emailVerified?: boolean;
  totp?: boolean;
  createdTimestamp?: number;
}

Just included in the header of the example keycloak-heroes at the user area, the name and email from the user. Take a look at the app.component.html and app.component.ts.

• app.component.html

<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
    <div class="userDetails" *ngIf="userDetails">
        <h2>{{userDetails.firstName}}</h2>
        <p>
            {{userDetails.email}}
        </p>
    </div>
    <a href="#" clrDropdownItem>Log out</a>
</clr-dropdown-menu>

• app.component.ts

import { Component, OnInit } from '@angular/core';
import { KeycloakProfile } from 'keycloak-js';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userDetails: KeycloakProfile;

  constructor(private keycloakService: KeycloakService) {}

  async ngOnInit() {
    this.userDetails = await this.keycloakService.loadUserProfile();
  }
}

Let me know if this helps you, otherwise lets talk and think about solutions.

Thanks!

[czeckd]

This will work perfectly! Thank you so much!

[jinojohn]

Worked for me too.!! Thanks a lot

[andreivictor]

I've noticed that loadUserProfile() generates a HTTP request (url: `../account).

So if you are obsessed in reducing HTTP Requests, I suggest to use this method only if you can't find the proper information in the tokenParsed property.