title: Session Storage does not clear out on logout and does not immediately display result on login Angular 8
body: <p>The user logs into the application where it checks for the loginID. If validated, the user details are returned through the authentication service. Now I am setting firstName, lastName, and id in sessionStorage to display the name on the sidebar immediately as user logs in. But firstName and lastName are only displayed either on home page refresh else it displays nothing or the previous user's name. On logout, I am removing the items from the sessionStorage.
  Login Routing code</p>
  <pre><code>this.authenticationService.login(this.username)
              .pipe(first())
              .subscribe(
                  data =&gt; {
                      this.router.navigate([this.returnUrl]);
                  },
  </code></pre>
  <p>Routing Code:</p>
  <pre><code> { path: '', component: HomepageComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent, },
    { path: 'homepage', component: HomepageComponent, canActivate: [AuthGuard]},
  </code></pre>
  <p>AuthGuard Code:</p>
  <pre><code> canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
          const currentUser = this.authenticationService.currentUserValue;
          if (currentUser) {
              return true;
          }
          this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
          return false;
      }
  </code></pre>
  <p>Code:</p>
  <pre><code>function authenticate() {
              const { username } = body;
              const user = users.find(x =&gt; x.username === username);
             
              if (!user) return error('wrong username');
              return ok({
                  id: user.id,
                  username: user.username,
                  firstName: user.firstName,
                  lastName: user.lastName,
                  token: 'fake-jwt-token'
              })  
  </code></pre>
  <p>Authentication Service on login and logout. At login, the username is passed to the login method and then sent for validation to authenticate method. The response is then returned.</p>
  <pre><code>login(username: string) {
          return this.http.post&lt;any&gt;(`${environment.api}/users/authenticate`, { username })
              .pipe(map(user =&gt; {
                  sessionStorage.setItem('firstName', JSON.stringify(user.firstName));
                  sessionStorage.setItem('lastName', JSON.stringify(user.lastName));
                  sessionStorage.setItem('id', JSON.stringify(user.id));
                  this.currentUserSubject.next(user);
                  return user;
              }));
      }
  
      logout() {
          sessionStorage.removeItem('firstName');
          sessionStorage.removeItem('lastName');
          sessionStorage.removeItem('id');
          this.currentUserSubject.next(null);
      }
  </code></pre>
  <p>In sidebar typescript:</p>
  <pre><code>ngOnInit() {
      this.firstName = JSON.parse(sessionStorage.getItem('firstName'));
      this.lastName = JSON.parse(sessionStorage.getItem('lastName'));
    }
  </code></pre>
  <p>In sidebar HTML:</p>
  <pre><code>&lt;p&gt;Welcome {{firstName}} {{lastName}}&lt;/p&gt;
  </code></pre>
  <p>I want the sessionStorage to remove the previous details as soon as the user logs out. And next user's name to be displayed as soon as the user logs in. It should not display name on page refresh after entering the page.</p>