Angular pipes are disconnected from standard change detection, for performance reasons. There are two types of pipes - pure and impure pipes - and they detect changes differently. The async pipe is the most famous example of a impure pipe.
I suggest you read up on both of these, because you’re using pipes in a nonstandard way, so you need to know what you can and can’t do. In this specific situation, the impure pipe’s change detection will not fire unless it views a change in object reference location that takes place inside the Angular zone. You make potential reference changes invisible, because you nest them inside a subscribe, which is outside the Angualr zone.
You are nesting subscribes. There is a subscribe inside the async pipe, and there is a subscribe to your authstate. So you need to remove the nesting.
The simplest way to do this is to create a provider that handles the data, by chaining requests, instead of nesting them. The provider then emits a stream of values. Your page listens to the provider and displays the data it hears from the provider.