React, Redux & Firebase App Tutorial #25 - Tracking Auth Status

Key Takeaways

alright then so now we're successfully signing in and signing out of the application and we can see the current earth status because we log the props to the console over in the nav bar so let's have a look this is when we're logged in on the firebase object we see earth has a UID so that is present there and when we're logged out the firebase auth is loaded is true but is empty is true we don't have that UID so that's when we're logged out so now we know this information and guess what we can do is keep track of whether a user is logged in to our application based on this property firebase earth and then either show content if they are logged in or show different content if they're not logged in an example of that would be in the nav bar if a user is logged in then they want to see this link new project they want to see log out so they can log out and this but they don't want to see these two things if they're logged in they don't need to sign up for a new account on login again and vice versa if they're logged out I don't want to show this to use a new project I'll log out all their initials because we don't have them we just want to show these two links right so let's use the fact that we know now on this firebase object whether a user is logged in or not to conditionally show either these links of these links to use it so over in the nav bar component let's open that up nav bar over here and let us do this little check we've already mapped stake to props over here and we're just logging out the state we're not actually returning anything right so now let's return some kind of Earth status so I'm gonna attach an auth property to our props inside this nav bar and I'm gonna say that is equal to the state then it's the firebase object then it's the auth object right so well let's delete this consult log anymore we don't need that but now we can access this property inside this component now we need to take those props into the nav bar remember so let's take those in and then let's destructor the props to get the auth property so I'll say Const auth is going to be equal to props so we're just grabbing the earth property we attached right there from the props so now we have that and we can do a check so let's console.log just off for now now let's save this and if we reload we can see right now this is the auth object but if we sign in using that test account so test at the net ninja code at UK and then test one two three four and we login then we should get this new object which is the object now in this component and that has a UID so they're different in both cases right so what we could do is we could check to see does this property UID exist on the auth object if it does that we want to show up the signed-in links because the user is signed in if it doesn't then we want to show the signed out links so let us now do that what we're going to do is use a ternary operator to do this so then underneath this console dot walk I'm going to say Const links is equal to and then auth dot UID and then question mark now this is going to be true if that property exists and it's going to be false if it doesn't now if it does exist then the user is signed in and we want to show signed in links so what I'd like to do is return signed in links right here the component and we can do that because we've imported signed in links now if that is false then the user is obviously signed out so we want to return the signed out links so signed out links and this is obviously false if it doesn't exist the UID okay does that make sense so now what we've done is this ternary operator to store either this component or this component inside this constant dependent on the authentication status now what we need to do is output this inside the template so instead of nesting both of these right here let's delete those and just output the links like so that's all we're doing so that's either going to be signed in links or signed out links dependant on whether a user is signed in or not so let's save that and view this in a browser and currently we're signed in so we see these two things right here but if I log out then we're signed out and we see these things right does that make sense let's go to login and try this again test at the net ninja Cody UK and then test wants you to be four and we want to login and now we should see these links so that's cool right we're using this authentication status now from our state stood on state dot firebase to auth to give us access to that inside this component then we're returning different content dependent on that authentication status and we can do this in different places around our application not just inside the navbar and we will be doing this a little bit or different variations of this as we go through the rest of the series