title: Blazor component not refreshing
body: <p>So I have a Blazor application in which a user logs in and the header component changes depending on whether a user is logged in or not. After the use logs in, they are redirected to the main home page, but the header component does not update unless I hit the refresh button on the browser. I tried using <code>StateHasChanged()</code>. Here is my relevant code in the header component:</p>
  <pre><code>@using Newtonsoft.Json
  @inject IJSRuntime JsRuntime
  @inject NavigationManager NavManager
  
  @if (!string.IsNullOrWhiteSpace(FirstName))
  {
      &lt;div class=&quot;header-user-widget&quot;&gt;
          &lt;button class=&quot;btn btn-cart&quot;&gt;
              Cart &lt;span class=&quot;badge badge-cart&quot;&gt;@CartCount&lt;/span&gt;
          &lt;/button&gt;
          &lt;i class=&quot;fa fa-user-circle&quot;&gt;&lt;/i&gt; @FirstName @LastName
          &lt;i class=&quot;fa fa-sign-out-alt header-sign-out&quot; @onclick=&quot;SignOutClicked&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
  }
  
  @code {
      private string FirstName { get; set; }
      private string LastName { get; set; }
      private int CartCount { get; set; }
  
      protected override async Task OnInitializedAsync()
      {
          var page = NavManager.ToBaseRelativePath(NavManager.Uri).ToLower();
          var cookie = await JsRuntime.InvokeAsync&lt;string&gt;(&quot;Cookies.get&quot;, &quot;Login&quot;);
  
          if (!page.StartsWith(&quot;login&quot;))
          {
              if (string.IsNullOrWhiteSpace(cookie))
              {
                  NavManager.NavigateTo(&quot;/Login&quot;);
                  return;
              }
          }
          if (!string.IsNullOrWhiteSpace(cookie))
          {
              var decodedCookie = cookie.FromBase64String();
  
              FirstName = CookieHelper.GetValueFromKey(decodedCookie, &quot;FirstName&quot;);
              LastName = CookieHelper.GetValueFromKey(decodedCookie, &quot;LastName&quot;);
          }
  
          CartCount = await NumberOfItemsInCart();
      }
  }
  </code></pre>
  <p>And here is my login page:</p>
  <pre><code>@page &quot;/login&quot;
  
  @inject IJSRuntime JsRuntime
  @inject NavigationManager NavManager
  
  &lt;LoginBox OnLoginButtonClick=&quot;@LoginButtonClicked&quot; /&gt;
  
  @code {
  
      private async Task LoginButtonClicked(LoginBoxReturnModel model)
      {
          var cookieString = $&quot;UserId={model.UserId}|FirstName={model.FirstName}|LastName={model.LastName}|Email={model.EmailAddress}|IsAdmin={model.IsAdmin}&quot;;
          var encyptedString = cookieString.ToEncryptedBase64String();
  
          await JsRuntime.InvokeVoidAsync(&quot;Cookies.set&quot;, &quot;Login&quot;, encyptedString);
  
          StateHasChanged(); // This line doesn't seem to have any effect
          NavManager.NavigateTo(&quot;/&quot;);
      }
  }
  </code></pre>
  <p>Once the user logs in, they are properly redirected to <code>&quot;/&quot;</code> page, but the header is not updated. If I hit F5 in the browser to refresh it, then the header is correct. I feel like what is going on is that the application is navigating before the <code>StateHasChanged()</code> line has any time to refresh, thus it is never refreshing. If this is the case, how should I be implementing this?</p>