Angular: токен JWT не сохраняется в первый раз в локальном хранилище

Question

В приведенном ниже коде вы видите, что я пытаюсь сохранить токен firebase в локальном хранилище после входа в систему, что также работает нормально. Проблема в том, что навигация запускается до того, как токен будет установлен в локальном хранилище, и поэтому пользователь должен дважды нажать кнопку входа в систему.

Почему это происходит? как я могу это исправить? Это соответствующий код:

public signIn(email: string, password: string): Promise<User>  {
    console.log('Signing in as: ', email);

    this.userData = this.auth.signInWithEmailAndPassword(email, password)
      .then( credential => credential.user );

    this.setToken();
    if (!this.isAuthenticated()) {
        console.log('not authenticated');
        this.router.navigate(['']);
      }
    this.router.navigate(['/dashboard']);
    return this.userData;
  }
  
   setToken() {
    // this.afAuth.auth.currentUser.getIdToken(true).then((token) => localStorage.setItem('tokenId', token));
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
           firebase.auth().currentUser.getIdToken().then((token) => localStorage.setItem('tokenId', token));
           console.log('set token succes');
      } else {
          console.log('set token failed');
      }
  });
  } 
  
  
     getToken() {
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          firebase.auth().currentUser.getIdToken().then((token) => localStorage.getItem('tokenId'));
          // return this.currentTokenInlocal;
          console.log('get token succes');
        } else {
          console.log('get token failed');
        }
      });
  }