Firebase Functions Tutorial #7 - Firebase Users

Key Takeaways

a rather gangster firebase has a built-in authentication service that we can use for our projects which is freaking awesome now in this lesson we're going to enable it and allow users to sign up on our website and also log in to now I will be moving quite quickly through this because there's quite a lot to do and also I want the focus of this course to be on functions not firebase authentication but I do have a whole series on firebase authentication with about 25 videos all about that inside it so I'll leave the link to that playlist down below and if you want more information or you want to learn more then definitely check out that series so the first step if we want to use authentication is to enable it on the backend right here from our project console so if we go to authentication and if we go to silent method over here then we click on the signing method we want to enable over here and click enable then I'm gonna click on save like so and now it's gonna allow us to use firebase authentication to log in sign up etc using email and password which is what I want so back to our project first of all you'll notice we already grabbed the firebase off script and we added it to our HTML so we can use firebase or thin our project now I'm gonna head back to the authentication JavaScript file over here because this is where we're going to add all of this code now if we go back to our project first of all you can see already when we refresh we see either the login modal or the register modal so we need to create a function to handle the submission of both of these different forms and when we submit this form we want to login that user or at least try to login with that user and their credentials and this one we want to register that user we also have an error field in each one of these forms if we scroll up we see we have a paragraph tag in this one and this one down here in the class of error we can output any error that comes back from firebase if a user tries to login for example with the wrong code Scholz or they try to sign up with an email that's already been taken or a password that's too short all that kind of stuff we're going to output that feedback in one of these two paragraph tags dependent on whether they're trying to log in or register so there's a lot to do anyway let's get started by going to auth is and the first thing I want to do is get a reference to a few different elements inside the Dom so I'm going to paste these in so you don't have to watch me type in them out but there's three things we have the register form so document query selector and we're looking for the register class and the same for the login form we're looking for the login class and that's those two forms right here so login and register so we have those and also the sign out link so we're storing that in a constant called sign now it's looking for something with a class of sign - out which is if I remember correctly down here and that's in the head at the navigation ok this so we have a reference to all of those things that we need now the first thing I want to do is handle the submission of the register form I've just noticed a spell toggle incorrectly up here it currently says to go so I'm gonna just spell that correctly if I can for my own sanity and then I'm going to create another comment and this is going to be for the register form all right so we have the register form constant which we're going to grab and we're going to add an event listener to that and the event we want to listen for is the submit event so when this form is submitted which by the way happens when you type in your credentials and then maybe press ENTER or when you click on a button or a submit that's inside the form now we have a button so when we click on that then it's going to fire the submit event for the form so when that happens we are going to take that event object into the callback function and the reason we take that event object in is because we need to say e dot prevent default and that's a method which is going to prevent the default action or the default behavior of a form being submitted so if I submit a form then normally what will happen is the page refreshes now let me just take this off you know so it doesn't work and then let me refresh if I try to submit the form it's gonna refresh the page that's the default behavior right there now as soon as I add II don't prevent default and this is the register form so let me save and try this again go to the register form if I now do it it's gonna prevent that default action it's not gonna refresh because we don't want that to happen so the next step is to grab the values that a user has entered into the different input fields so the way we do that is by first of all getting a constant and storing them in so I'll grab the email first of all and that is equal to register form which is the form we have access to now we can grab the individual input fields and the values from those fields by referencing the name of each field so I have for example the register form I can then say dots whatever the name is of an input field to grab that field so I could say email and it grabs me the input field inside the register form with a name attribute of email then to get the value from input field I say dot value okay so we're gonna do exactly the same thing this time for the password so let's alt click both of these positions and change that to password like so so we're grabbing the email value and the password value and remember email and password have to match whatever is in the name attributes over here if this was email yaaaaa then we would have to say over here email yah yah okay but it's not so it'll so let's rewind and reset them ok cool so we have those values let's just make sure this is working and we're grabbing those values by logging them to the console email and password and I'll show you that so if we try this out I'm going to open up the console over here by pressing control shift and J and we can see that console now now if I got some register I'm gonna to say ABC and then I'll say test if I register we should see those right here so we're successfully grabbing those values right now now we need to use those values and use firebase to sign them up to our application now to do that we need to say first of all firebase remember we have access to this firebase object because we use this script or right here and then from that firebase object we need to say we want to use the Arth service so we use the auth method which again we have access to because we have this script right here the off script okay so from there we say dots and then we use a method called create user with email and password now I need to make sure I've spelt this correctly because it is a gigantic method so create user with email and password I think that it's correct if it's not that will be an error but I'm pretty sure that's correct okay so then we pass in two arguments the email and also the password that's those two things we grabbed right here so this reaches out to our firebase project on the backend and it says hey I want to create a new user with this email right here the first parameter and this is their password now this action it takes some time to do it's asynchronous and it returns a promise now we know when we have a promise returned we can tack on a dot then method so I can say dot then right here and this fires a function when this action is complete when they've signed the user up and in that function we can take in the user object that has just been signed up so when firebase takes these credentials and signs up that user it creates a user object Forest and it gives it as back in case we need it when the action is complete so I could say right here console dot log and I'm gonna say we've registered so we know what exactly has happened here and then we're also going to log out the user to the console as well when we create a new user now I also want to under that take the register form and I'm to use the reset method and that clears the fields inside the form so anything we type in it's gonna clear those and reset the farm to the original state so that's pretty much done and I don't know where that's coming from it should be reset it's not the other one reset like so okay that's pretty much done one more thing I am gonna add on the catch method and the catch method is used to catch any errors because imagine we try to sign up with a password that's too short or with an email that's already been taken by another user then firebase is not going to create this user for us and instead it's going to return an error object and in that case this catch block right here is going to fire this function inside here and we take in the error that is returned to us from firebase now we can just log that to the console for now if we want to or what we could do is we could output this error message inside the paragraph tag wherever they are these things right here okay so let's do that so this remember is the register form so we want to output the error inside that paragraph tag inside the register form now we already have the register form right here but we also want to grab the paragraph inside that now we can use a query selector which is now scoped to this register form so it's going to look only inside this form and we want to grab the error class inside them so it's only going to grab the one inside the register form then once we have that we can set the text content of that paragraph tag equal to the error that we receive back and from that we get a message property that is the error message coming back from firebase all right so now then I'm going to try this out I'm going to come over here and I'm going to hard refresh first of all I'm going to go to register and I'm gonna try to register as a new user so Sean at the net ninja code at UK and password is just test one two three now I'm gonna register and let's see what happens over here okay cool it worked it says registered and this is the user object right with information about that user if we wanted to use it at this point now also it reset the form but beyond that it's not really doing anything else but don't worry we'll come to that later in we know now that this is working now if I try to register it with something that's not valid for example if I just put in here Mario which is not invalid email and I'll just say test as well and I'm gonna register now you can see the email address is badly formatted that error message is coming back from firebase because it's looking at this as saying well now that's not an email so I'm not going to sign you up instead I'll send you an error message we catch that and we update the text content of that paragraph tag now if we make this better so I'll say Mario at abc.com and press register this time it says password should be at least six characters and we only have four so this all works so we've now adorned the register method the next thing we need to do is go ahead and log currently registered members in so I'm going to create a new handler down here in fact I'm gonna grab this copy all because I'm super lazy and I'm gonna say login former here paste it down below and I'm gonna change a few things so this should be a login form because remember we grab that right here the login form and then this is the same prevent default that's fine this and this should both be changed to login form the name attributes are still the same email and password we want firebase to off now we don't want create user with email and password this time we want sign in with email and password so sign in with email and password and we still pass in those two arguments email and then the password again it takes some time it's asynchronous so we tack on a dot then method to the return promise we take the user that's logged in if it was successful and we're gonna say logged in right here and output the user and then we'll take the login form and reset it if there's an error we'll take the login form first of all grab the error power rough inside that and set the text content equal to the error message we get back so that was simple right we just modified this for the login for now so now if I go to refresh and I'm gonna log in with short at the net ninja which I just created a minute ago and that should work Shawn at the net ninja code at UK and then down here the password was test123 I'm gonna register and it says Hogan form is not defined so let's change again to login like so and save them and come back here and try this again so Shawn that's the net ninja code at UK and then test one two three or login and this should work awesome so we logged in and we get the user who just logged in now if we try to log in with something that doesn't exist so Mario at the net ninja code at UK and also whatever the password is test one two three I'm gonna try to log in and this time we get an error that says there is no user record corresponding to this identifier this user may be deleted now I suppose this error is not something you'd ever really show to each user because it's not really a user friendly error even though you probably understand what it means but you probably look at this and say okay I'll provide my own error instead that says something like invalid login or something like that but for now for our project this will do so anyway that's our login form done and that's also our register fondle so this is good now there's gonna be one more thing we're doing this because in our website I want to listen for when a user is authenticated when they're logged in or registered because when they registered they're automatically logged in and also when they're not because when they're not logged in to the application then I'm gonna show them this screen with this modal if they are authenticated and either they just logged in or they just registered I don't want to show them all this and I want to show them the website beneath does that make sense so what I'm going to do now is set up a listener to the firebase authentication service and that is going to listen for any kind of authentication changes inside our app and by that I mean it's gonna listen for when a user logs in or logs out and all that kind of stuff so what I'll do is set up what's known as an auth listener now down here the way we do this is by saying firebase and then getting the auth service again and from there we say dots on earth state changed so what this does is listen for state changes in the authentication of a user if they've logged in then it's gonna fire a callback function if they've logged out it's going to provide a callback function again and in both cases we get access to the user who either just signed in or null if they just signed out so what I'm gonna say is if user do something now if the user has just logged in or registered this is going to evaluate as true so that means at this point they're logged in now if it evaluates as false because the user is null that means they've just logged out and instead will do something else so what is the thing that I want to do when a user is logged in well I want to hide the authentication wrapper this whole thing right here right and I also want to remove the active class from both modal's because then it will hide both of those as well even though the nested inside this old wrapper I still want to remove both of those classes so to do that I'm gonna first of all grab the auth wrapper we have a reference to that from the top and not set it equal to something I'm going to use the classlist property to get all the classes and then I'm going to use the remove method and I want to remove the open class and that means it's gonna remove the open class from this right here and when it doesn't have that class it's not gonna show over here so this will all disappear and we'll see the website underneath that's when they've just logged in or registered when they're authenticated ok now likewise I want to grab the modal's and hide though so off models and I want to use a for each method on the Easter cycle through them fire a function for each one we'll take the individual modal each time then we'll access the classlist on each one and remove the active class because remember they only show if they have the active class so we're removing it from each one right here okay does that make sense now okay so now if they are not signed in if they've just logged out instead what we want to do is the reverse we want to add a class of open to the auth wrapper and we also want to add a class of active to the first auth modal not both of them just the first one to show one of them so I'm gonna grab the author wrapper again and access the class list then I'm gonna say I once add a class and that class is going to be open all right and then I want to grab the auth modal's I just want the first one so I'm gonna use square bracket notation much like I would an array and grab the 0th index that gives me the first modal so this one right here so we're gonna grab that and then we're going to access the class list on that as well and we want to apply the class of active to that so it shows as well so that means if they've just logged out then we're going to show the author wrapper and the first modal which is the login form okay okay so let's save this let's give this a whirl I'm now going to login right here in fact if i refresh i should already be logged in right because i logged in are registered as Sean before and that locked me in and I've not signed out since I don't think so let me try this if i refresh nope okay I'm not logged in as a minute oh yeah it showed that for a second and then when it figured out I was logged in right here you've fired this function this evaluated is true so it hid both of these things and now we can see this jazz right here now I want to sign out at this point but if I click this nothing's gonna happen because we've not hooked this up so now let's create some kind of event handler for this to sign use out so do we have a reference yes we do sign out so this right here is the link we're going to click so down here I'm going to do a comment and say sign out and I'm going to use the sign out reference and then I'm going to add an event listener to this and it's going to listen for a click event it's going to fire a function when this happens we don't need the event object inside this function we're going to say firebase off to access the auth service I'm gonna use a method called sign out simple enough to remember that one okay so this again asynchronous when it's done we can fire a callback function and all we're gonna do right here inside this callback function is just console dot log signed out so we know that that's worked now what's gonna happen at this point well it's going to sign us out right and that takes some time to do when it's done if I is this function and it logs this to the console but it's also going to do something else because you remember we have this listener right here that is listening for Earth changes so when I sign out this function is going to fire because there's been an authentication change it's going to evaluate the current user which will be null because we just logged out and a user no longer exists therefore this will be false it won't fire this but it will fire the else clause and therefore it will open up the auth wrapper and make the first modal in that wrapper active so if I save this I'm gonna cross my fingers right now or refresh over here and it's just gonna take a second log me in over there and if I now try to sign out then it should show me the modal again awesome if I log in so Sean the net ninja code at UK and test123 should log me in and show me this sign out and I see this let's see if it works with register so Mario at the net ninja Cody at UK because when I register I also get a user back and so this right here is going to evaluate to true so it should hide them again and test one two three register now I'm automatically logged in again and we can see that I've registered this is the user logged in sign out and I'm signed out again now watch this if I log in as short at the net ninja code at UK and then go to test one two three log in and logged in right now if i refresh we're gonna see that login form for a second or two until firebase figures out that were actually authenticated and fires this callback function and then hides those things so we see the website now I don't want that to happen I don't want to see that's modal to begin with while it figures it out so what I'm gonna do is go over to the index page and I'm going to take off this thing right here this active class because even none of these have a class of active to begin with then none of them are going to show this author up and we'll still show so it will still hide the contents behind the auth wrapper however none of the modal's will show to begin with now it's going to figure out whether I'm logged in or not when it first loads the page and it's going to fire this function if I'm logged in this user object will be true therefore it's going to remove all of these classes and it's going to show me the content behind it if I'm not logged in then it's going to fire this thing right here and it's going to add the class of open even though it's already there so it doesn't really matter the first time around and it's also going to make one of the modules active this one so we then see it but not to begin with when we first load the page and I will demo that right now by refreshing and we don't see that modal it figures out that we're logged in and then we go to the page if I sign out and then refresh again we don't see the modal but now it shows us after it's figured out that we're not logged in we're not authenticated okay so who I know that's been a long video and it's been kind of off track because this is cloud functions but I really needed to get this sorted out so that we can work with authentication and authentication triggers in our cloud functions this necessary evil I'm afraid but I did want to fit it all into one video so I'm not wasting loads of time over several videos and again if you want more information if this kind of went over your head a little bit then definitely check out my authentication series all about firebase auth or right here on this YouTube channel the link is going to be down below but anyway now we have that sorted in the next video we can go back to cloud functions and start to look at authentication and authentication triggers