Firebase Auth Tutorial #6 - Signing Users Out

Key Takeaways

or rather my friends so at the minute now we have all of our signup form code written so we can sign new users up I'll be it this is not very fun at the minute all we're doing is logging out this credential not really doing anything for the user so there's no point in signing up but all that functionality is gonna come in time and promise you anyway now when we've signed up a new user when we use this method like you said automatically firebase logs us into the application so in their eyes now we're logged in and we get this auth token back okay so that says that we're logged in now then how do we log a user out of the application well it's actually pretty simple we just use a different method so like we use this method over here to sign someone up we just use a different method to log someone out now we have up in the navigation over here this logout oops not that one this logout link so what we need to do is get a reference to that attached a click event to that link and then when a user clicks on it we want to prevent the default action if there isn't it then we want to sign them out using the Sign Out method so then let's do that so if we go to the index and we go to the nav bar at the top we can see this thing right here where is it will log out there so this has an ID of logout so we're going to use that to grab a reference to this anchor tag right here so in auth is let's just neaten this up a little bit I'm gonna delete that console dot log we don't need that anymore but down below what I'm going to do is now a logout method so underneath this will say Const logout is going to be equal to documents doctor query selector and we're going to grab that logout and ID which is the link in the nav bar so log out okay so we have that reference we want to add an event listener to that so log out which is the constant we just created dots add event listener and this event listener it's just going to be a click event so when someone clicks that link at the top and then we're going to find a callback function we'll take in the event object by default and we'll use that inside the error function so that we can prevent the default action and we'll do that by saying e documents default like so invoke that function okay so the next thing we want to do is use a sign out method now again we use the auth object that we declared down here we set up a reference to the auth service and we use all the off methods now on this earth constant so then the way we do this is by grabbing the earth constant then using a method called sign out like so that's all there is to it we don't need to pass in a username or password or an email the user is already logged in and firebase knows this user is logged in so it's gonna take that current user and it's gonna log them out now again this is an asynchronous task it has to communicate with the firebase back-end go out and say look I want to love this user out and then it returns some kind of response to us so because this takes some time to do it returns a promise we can tack on the dot then method and inside here we can fire a callback function this is going to be an error function we don't need to take a response from the server this time all I want to do is just log a little message to the console to say look this user has now logged out later on what we'll be doing is when they log out we're going to be hiding content from them but right now I just want to get the basics of this kind of login or logout authentication flow going so so now we'll just log through the console a little message that says that the user has signed out so console dot log user signed out okay that's all there is to it so then let us now save this and test this out in the browser so we're currently logged in even though we don't see that token right here we're logged in because we recently signed up in the last video and when we signed up it automatically logs us in okay so we're still logged in because of state persistence which means that whenever we refresh the page firebase persists the state of the user was still logged in and now if I log out then we can see this user signed out and that was very quick right so when to the server Sanders out came back and then we logged this message right here user signed out okay so although there's no change to the front ending what we see and what we do and there's no real use to this logging in and logging out at the minute at least we've got the basic flow sorted so that when we click sign we can sign up and when we click log out we're signing the new user out of the application so now we've got those two sorted let us look in the next video and logging in a current user so the court news it is Marriott at the NIT means you don't code at UK we did that in the last video when we signed users up so now we've logged out let's look at how we love that user back in in the very next tutorial