Username is not getting printed after logging in.

[chris7716]

Once the user is successfully logged in to the profile, username is not getting printed. Once the profile page is mannually refreshed, it gets printed on the page. I tried to log the username on console, it works fine and the username gets printed once the profile page is loaded at the sign in. I even tried printing a static variable in profile page. It also does not get printed while the profile page is being loaded after signing in. But it also gets printed on the page, once the profile page is mannually reloaded / refreshed.

auth.component.ts

import { Component, OnInit } from '@angular/core';

import { Hub, Auth } from 'aws-amplify';
import { Router } from '@angular/router';

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

  constructor(public router: Router) {
   }

  ngOnInit(): void {
    Hub.listen('auth', (data) => {
      console.log(data);
      switch (data.payload.event) {
          case 'signIn':
              this.router.navigate(['/profile']);
              break;
          case 'signOut':
            this.router.navigate(['/login']);
            break;  
      }
  });
  }

}

profile.component.ts

import { Component, OnInit } from '@angular/core';
import { Auth, Hub } from 'aws-amplify';
import { Router } from '@angular/router';

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

  userId: string;
  userName: string;
  var1  : String = "temp";


  constructor(public router: Router) { }

  ngOnInit(): void { 
    Auth.currentAuthenticatedUser({
      bypassCache: false
    }).then(async user => {
      this.userId = user.attributes.sub;
      this.userName = user.username;
      console.log(this.userName);
      
    })
    .catch(err => console.log("err assigning"));
   }

  logOut() {
    console.log("Log out");
    this.router.navigate(['/login']);
  }

}

profile.component.html

Hello {{userName}}