In this lecture, we're going to subscribe to an observable for checking if the user is logged in.
Previously, we discussed how the SDK would manage the user's token on our behalf.
Why if we want to access this information from our app, for example, if we look at our app in the
browser, we have a navigation menu with links.
Some of these links would be shown if the user is logged in.
Other links should be shown if the user is logged out.
It doesn't make sense to ask the user to log in or register for an account if they're already logged
in.
The angular fire package provides an observable for the currently authenticated user.
Let's check it out.
Open the authentication service file.
We are going to store the user's current authentication status inside this service, by doing so, we
can expose the status to every corner of our application before we declare a variable for storing this
information.
Let's subscribe to the observable inside the constructor function.
Call the subscribe function on the off court user property.
We will log the value emitted by this observable.
We can learn more about the values emitted by this observable by hovering our mouse over the property,
according to our editor.
This observable will push an object called user or a no value.
If the observable emits the user object, we can assume the user is logged in.
This object will contain information regarding the user's account.
Let's check if this is true.
Refresh the page in the browser.
Open the console indie developer tools.
I'm currently logged in to Firebase.
It's because I created an account which automatically logs me into the system.
Therefore, I will find an object with my information if you don't see this object.
Chances are you've been logged out.
We haven't made the login form functional in that case.
You will need to create an account if you want to be logged in out of the box.
You've got an observable for verifying the user's authentication status.
Let's switch back to our editors.
It's not completely necessary to define a variable for this object.
After all, the angular fire authentication service is injectable in most components.
We can just inject the service to grab the observable.
However, we should simplify the observable by returning a Boolean value if a component wants to check
if a user is logged in.
It may not need the entirety of the user object.
It may simply want a Boolean value.
In that case, we should modify the output of the observable with operators.
Let's give that a try.
At the top of the class, create a public property called is authenticated dollar sign.
The dollar sign symbol is a special naming convention for identifying properties as observables.
It's not required, but it is a common practice among angular developers.
This symbol must be added at the end of the property name.
We should follow this practice to help other developers identify observables.
Next, we're going to annotate this property with the observable class.
At the top of the file, we will need to import this class from the Oryx James package.
Next, you will need to add a generic for the observable class, we are required to describe the type
of values that will be emitted from this observable.
Let's add a Boolean generic.
The last step is to initiate this property with an observable in the constructor function.
We will set the is authenticated property to the affect user observable.
And errors thrown our way.
As mentioned before, we are creating this observable to push Boolean values, the user observable,
will push an object called user or null.
We will need to transform the value pushed by the user observable to a Boolean.
We spent a lot of time transforming values pushed from observables.
You probably have a good idea of how to perform this action.
We can use paper ball operators to transform values before they are pushed to observers.
Let's change the pipe function on the observable.
We aren't going to need dozens of operators to transform the operator.
The map operator will suffice for our case at the top of the file import the map operator from the Rigs
Operators package.
Next, we are going to add the map operator to the pipe.
Inside the map operator, we will pass in a function for accepting the user argument.
We will return the user argument with the double negation operator.
This single line will typecast the user argument into a Boolean value, we can subscribe to this observable
from our components in the next lecture.
We are going to use this observable in our templates.