Adjust the user field in the "dummy" menu that is: "User: Undefined"

Question

Well I’m having trouble on this page of a project I’m participating in, when I enter as administrator, the user the header needs to appear User:, but he gets like undefined and I don’t know where the mistake is. Below follows the three screen code I’m trying to see if the problem is in them.

Dashboard.components.ts:

import { Component, OnInit, NgZone } from '@angular/core';
import { Subscription, Observable } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
import { environment } from 'src/environments/environment.prod';
import { AuthenticationService } from '@nuvem/angular-base';
import { HttpClient } from '@angular/common/http';
import { PageNotificationService } from '@nuvem/primeng-components';
import { User } from '../user';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  username: string;
  password: string;

  authenticated = false;

  private routeSub: Subscription;

  constructor(
    private authService: AuthenticationService<User>,
    private http: HttpClient,
    private pageNotificationService: PageNotificationService,
  ) { }

  getLabel(label) {
    return label;
  }

  ngOnInit() {
    this.authenticated = this.authService.isAuthenticated();
  }

  ngOnDestroy() {
  }

  login() {

    if (!this.username || !this.password) {
      this.pageNotificationService.addErrorMessage(this.getLabel('Por favor preencher os campos Obrigatórios!'));
      return;
    }
    if (this.password.length < 4) {
      this.pageNotificationService.addErrorMessage(this.getLabel('A senha precisa ter no mínimo 4 caracteres!'));
      return;
    }
  }
  protected getUserDetails(): Observable<any> {
    return this.http.get<any>(`${environment.auth.detailsUrl}`);
  }

  authenticatedUserFullName(): string {
    const storageUser = this.authService.getUser();
    if (!storageUser) {
      return;
    }
    return storageUser.firstName + ' ' + storageUser.lastName;
  }

}

app.topbar.Component.html:

<div class="topbar clearfix">
    <div class="topbar-left">
        <div class="logo logo2"></div>
    </div>
    <div class="topbar-right">
        <a id="menu-button" href="#" (click)="app.onMenuButtonClick($event)">
            <i></i>
        </a>
        <a id="topbar-menu-button" href="#" (click)="app.onTopbarMenuButtonClick($event)">
            <i class="material-icons">menu</i>
        </a>
        <ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
            <li #settings [ngClass]="{'active-top-menu':app.activeTopbarItem === settings}">
                <a href="#" (click)="app.onTopbarItemClick($event,settings)">
                    <i class="topbar-icon material-icons">settings</i>
                    <span class="topbar-item-name">Settings</span>
                </a>
                <ul class="ultima-menu animated fadeInDown">
                    <li role="menuitem">
                        <a routerLink="/diario-erros">
                            <i class="material-icons">error</i>
                            <span>Diário de Erros</span>
                        </a>
                    </li>
                    <li role="menuitem">
                        <a logout>
                            <i class="material-icons">power_settings_new</i>
                            <span>Sair</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li #user [ngClass]="{'active-top-menu':app.activeTopbarItem === user}" *ngIf="isAuthenticated">
                <a href="#" (click)="app.onTopbarItemClick($event,user)">
                    <i class="topbar-icon material-icons">person</i>
                    <span class="topbar-item-name">Usuário</span>
                </a>
                <ul class="ultima-menu animated fadeInDown">
                    <li role="menuitem">
                        <a>
                            <span user><strong>Usuário:</strong></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Dashboard.component.html:

<div class="ui-g ui-fluid">
    <div class="ui-g-12">
        <div class="card login-panel" style="margin: 0px auto 0 auto; min-height: 50px;">
            <span style="font-size: 20px;"> {{ authenticatedUserFullName() }} </span>
            <p style="font-size: 20px;">{{this.getLabel('Bem-vindo ao Ábaco.')}}</p>
            <img class="logo" src="../../assets/layout/images/login/abaco.png">
        </div>
    </div>
</div>