Aurelia authentication: How to obtain the user id

I am using the aurelia-auth library in a new project. Everything seems to be correct so far, but I am unable to show the user information on the navigation bar.

The library provides some functions that seems to provide such information, like getTokenPayload(). I am trying to access to this information in order to show the user id or the user name in the navigation bar.

I have seen that other properties (such as isAuthenticated()) are being accessed this way:

nav-bar.html:

<ul if.bind="isAuthenticated" class="nav navbar-nav navbar-right">
  <li><a href="/#/logout">Logout</a></li>
</ul>

nav-bar.js:

export class NavBar {
  ...
  get isAuthenticated() {
    return this.auth.isAuthenticated();
  };

I am unable to figure out how could I display on the navigation bar the user Id (obtained through the getTokenPayload() function) once the user has been authenticated.

Solution

You can call getTokenPayload in the attached callback for NavBar (you would probably want to call isAuthenticated to first check if the user is authenticated). Set a property on your NavBar VM to the token payload and then use databinding to bind to the user ID property.

Then, set up an EventAggregator subscription in the NavBar attached callback to subscribe to the proper auth event (probably 'auth:authenticate') and call getTokenPayload in the callback for that subscription and then set the VM property. This will make sure the property gets updated if the auth information changes.

You're going to want to subscribe to the 'auth:logout' event and unset the VM property you set above. Set this subscription up in the attached callback as well.

Finally, make sure to dispose of these subscriptions in the detached callback of the NavBar VM.