Simple authentication with Firebase 9 and vanilla JavaScript

all right so in this video we're going to make a really simple web page which allows users to sign up and create an account and also to sign in with an existing account so that they can see hidden secret content that they're only allowed to see if they are actually authenticated so this is one I've done earlier so for example if they put in an email and a password and then click sign in it will say yep you've signed in if they have an existing account that they've made and it'll say yes here's the secret content that you can only see once you're authenticated then they can sign out and same again and they can sign up in the first place to create that account and that will all be managed by Firebase underneath in the background so this is going to be real simple app we're not going to use a front-end framework like react or anything like that we're going to keep it as simple as possible just one small page of HTML because that's enough as it is it's complicated enough as it is the purpose of this is for learning how authentication works with Firebase if you're going to make a full web app you're going to want something more involved and that is more secure than what we're doing today um but this is just to get you started and to get you introduced to Firebase authentication in the simplest way that we possibly can so let's dive straight into it assuming you know how to make an HTML document um I've made one um called auth let's give it a title um let's call it uh authentication is fun because it is it's awesome so so um I'm going to just make a couple of divs that's where we're going to start so a div for the form where people sign up or sign in and a div for all that top secret hidden content that they only see once they are signed in so let me just give these IDs so that we can refer to them later so I'll just call this one um auth form and here I'll call this one Secret content so our two divs and then inside this form let's just put a um Let's do an H2 maybe so I'll just say sine up or sign in if they already have an account and there'll be an input for their email and an input for their password and then some buttons a button that says sign up if they don't have an account and we'll have a button that says sign in if they already do have an existing account let's hope let's check that we're always good to check um let's open this up in the browser and let's get rid of the old one that we've already made let's open up our new one so it's just got the heading and then two input fields for the email and password with either a sign up or a sign in button I think I'd like these underneath to make it a bit tidier and we need some more information would be useful on these input Fields as well so let me put a break or two here just to bring down the buttons underneath and then in the input field here let's give it a type and say that this is our email type in what that does is it just sort of guides the user for putting for entering an email address into that input field by prompting them if they don't have an at symbol or if it doesn't look like an email address but we'll also um put in the placeholder um and we'll call it would say email to sort of so that the text shows up to say yeah this is the email input box so they know which is which and I'm also going to give it an ID because our JavaScript later on is going to try and find this element from our HTML and it's good to have an ID to do that so we'll just call this user email to distinguish from the other words that all have email on them and the same here will give this a password type um this second input field will say it's a password type and that'll sort of cover up the what you're typing with little dots in case someone is sneakily looking over your shoulder to steal your password that's important and we'll call it password as the plates placeholder to guide them to write their password into that input field and we will say and use a password as the ID um so that we can refer to it later and then let's give these buttons IDs as well that's important this is the sign up button so I'm using camel casing each uh new word starting with a capital letter but um this is the first letter is is lowercase that's just a convention but conventions are actually really useful so let's use them and this is the sign in button okay so we'll set up with it um in the secret content let's just put something real simple for now just just to get the idea um uh this is top uh Secret information [Music] that you can only see if let's do a bigger a bigger word there's an H1 um or authenticated all right so let's just have a look at what that looks that all looks like I'm going to save this and refresh okay so a lot going on but you can see we've got the email has got um the placeholder email in it and the password's got the placeholder password if I start typing a password it's acting like a password input with covering up the text and if I try writing a new email here it's going to give it's going to prompt me to say please include an at symbol if I include an at symbol it's going to say yeah you need more than that so it's just guiding me towards putting an email address in there to prevent any errors that the user might make now obviously we don't want this to show normally that we'll have to wait for the person to sign in that's the idea or to sign up first and then sign in but at the moment we're just putting everything there so all the HTML is ready and we've got to sign up and sign in buttons as well actually I will just add one thing and that is once they are signed in we want a button here that enables them to sign out if they was so they can sign out once they're finished and we'll give this button an ID as well and obviously we'll call this one the sign out button all right so that's our HTML setup this video is not about CSS but I can't really tolerate it looking this bad so I'm just going to put style tag up there on the head of my HTML document and we'll do some very basic CSS sorry if I'm rushing but I just I want to get to the JavaScript which is the fun bit and actually connecting with Firebase because that's what this video is about so the body or the style the whole body together I'm just going to text align Center it to put everything in the center and let's give it a background color I'm quite into light C green at the moment just because life is stressful and that is nice and calming for some reason it's a calming color I don't know and and the text let's make it readable though so black I mean white could work as well anyway let's not talk CSS because that's not the point of this but if I say that at least it's um you know tolerable to look at um and it was just clear easiest easier for us to use all right so with the HTML being set up let's actually get into connecting to Firebase and making a Firebase project and connecting this HTML to Firebase in the background so make a Firebase account if you haven't already it's through Google it's very easy to do you create a new project um we'll give it a name and it's as simple as that we just make the project we don't need Google analytics this is just to do my project and once that's done we can have a look at all of the toys that we can play with and we're going to want to make this an app um so adding the app it's not for mobile it's for web so we click on the web button here and I just like to call it the same thing um you could register the app or something different but I just like to use the same title okay and now we're good to go uh we're gonna come back to all this later so that code we can come back to I'm just going to get off that for the moment um because the most important part once you've got your Firebase project is this bit here the build um all of these things that we can do in the build section so you're creating databases storage Etc but today we're talking about authentication so we're going to click on authentication and we're going to say yeah I want let's get started let's do it let's let's do this thing let's get started and enable authentication so lots of different ways to authenticate we're just going to keep it simple for today that's the point of this nice and simple with email and password but this is essential you you must enable authentication through email and password in your Firebase app so you're going to save those changes great so now let's connect our Firebase to I'm going to go to the project settings the little Cog up here project things and if we scroll down on the project settings it'll give us some code here that will allow us to connect our Firebase to our HTML web page that we're making now don't click on npm or leave it as npm because we're not going to install Firebase we're not going to do the whole npm thing we want this to be as simple as possible so we're going to use CD in here this configuration this is the configuration for our actual app but you'll notice that's included in here but the CDN one not only does it have the script tags that we can just paste into our HTML file to get the JavaScript part of our HTML document happening but it's also got the full web URL so we can get all that good stuff from Firebase just directly through that um uh URL connector so let's just copy all of this and it's good to go so in the seed remember in the CDN copy all of that code and it's as simple as that we're just gonna paste this in to our HTML document by all of this code this whole code it's all in the description just click on the link in the description if you want all the code for this whole thing it's all there but it's the code that's there and the link it's not going to work um for you until you configure it and you put your um Firebase configuration in there okay now that we've pasted that in um what we've got is we've imported things like this initialize app function from Firebase which allows us to connect what we're doing to the Firebase Library so that's good but we're not done we also need to import a whole lot of other things um from the same place really so I'm going to copy this but not quite I'm going to have to make a change so I'm going to copy all of that we're still importing this new stuff from Firebase button because this is authentication we're not importing it from the app bit of Firebase we're importing it from the auth the authentication part of this Firebase Library so um that's really important that we change app to auth here for this little bit and there's a few different things that we want to import so let's give ourselves some space the first thing is just this thing where we get all the good authentication stuff so get auth that's the first thing we want to import from Firebase authentication to allow us to basically get started in enabling authentication on our web page and the next thing that we want to import is the function where we can actually create um a user with so camel casing every new word at the start of a you know a start of a new word with a capital letter with email and password now I'm not making these up these are existing functions in Firebase so make sure that the spelling is exactly correct once they're once we've created the user we want that user to be able to sign in with email and password so this is a is functionality we're importing from Firebase Authentication and we want to know whether they are signed in or not and that's called the authentication state so we want to be able to do things if that authentication State changes from signed in to signed out at any point so that's the on auth State changed and functionality and the last one is just for them to be able to sign out so sign out that's another thing that we want to be able to do with this little web page so these five things we are importing from um Firebase auth or okay so that being done you can see down here what the other thing that we've copied here is this thing where we are initializing the app in the first place and so that is a taking our web page initializing the Firebase but with our particular configuration in there so all this stuff here batters configuration for the Firebase app that you have just created and that'll obviously be different for you um in Firebase by the way that you can also find this here that that's the actual important bit this is the config bit as part of this whole CDN so when we initialize the app we're initializing it to your particular Firebase you know app that you've set up but we also want to have a variable called auth and that is going to store you know the this thing the get forth functionality from Firebase but what are we going to pass in here you know to enable authentication um in our app we're going to pass in the app variable that we just made before so that's gonna yeah it's gonna allow authentication in our app but authentication for our app specifically that's been initialized and configured to this particular project that we have just created so it's setting up your Firebase account and the app that you have just made and the project the particular project that you've just made to connect to your HTML document that you're creating cool so with all that set up um I think we're good to go and we're good to actually write the code that we want to write um for our webpage so um firstly we're just going to define a whole lot of things we're going to make a whole lot of variables um you know Finding elements from our document so let's start with the user email here um let's call this one this I like to keep it the same user email equals and I'm going to grab it from the document so document dot now I like to use the query selector method user email this variable user user email equals document.queryselector and then it's a string and hashtag the hashtag indicates that it's an ID that we're trying to select um when we query the document and we called that thing user email that was the ID that we gave it so I'm talking about this element here where the user types in their email address that we've given it that input field we've given it the ID user email so this method here is going to allow me to grab that from the document you don't have to use it there's one called get element by ID which actually seems more common but I prefer query selector you don't need to use the hashtag if you're using git element by ID but I like the hashtag and it's the same when you're using CSS so I just like it consistent in that way but that's just me um be careful when you're copying and pasting but we've got a lot of similar variables to make so if you copy and pasting be careful because you just have to make sure you do actually make all the changes that you need to make but let's call this variable user password and let's grab from our documents the user password ID which is that input field where they stored their password and then let's also grab the whole form this whole div remember we want to hide that div once they've signed in so we want to be able to do something with that so I think I called it um auth form didn't I um equals to document dot query selector um hashtag auth form I will just check that is what I called it isn't it um or for me yeah so we'll grab that um but then there was the secret content one as well wasn't it so um let's call this um secret content and this variable I like the variables to be called the same thing um if that confuses you and you want different names for the variables compared to the IDS then do that but um for me I like it kept the same um I like to use the ID name as the variable name it's again that's just my preference but you don't have to do that but the important thing is that these ID names are correct and that you are grabbing the element from the HTML that you want to grab and store in a variable the reason we do this is so that we can use these variables in our JavaScript code later on okay so then we've also got all these buttons to make so we have the or variables to make so we have the sign up button and that was the we call the ID was exactly there sign up button um different functionality so when we click that button we can have a different function for the sign up button compared to the sign in button and you must change the ID here otherwise really easy mistake to make is if you these IDs are wrong you're going to click on the button nothing's going to happen because it's not grabbing the right thing from the HTML so if you're not going to type all this out be very careful that these are correct and then we hit the sign out button we must change this ID so that we are grabbing the sign out button element from our HTML um when we are referring to it by this variable name so if you remember at the moment we've got the secret content that's already visible so one of the first things we want to do is to hide that now because I've already made this variable which grabs the secret contents div that I made and I can just use that variable that's what they're there for that's why we do this that's why we make these variables so secret content I actually want to change the CSS I'm actually using the JavaScript to change the CSS so I'm going to say dot style dot display because at the moment the display is that we can see it but I want the display to equal um in quotes we say none we want none of it we want to hide it it's gone so um so block is when we show something with the display and none means we're hiding it so the secret content is gone for now and it should only be visible once the user signs in so let's just save and let's just check that um and you see if I refresh yep it's gone so we can't see that secret content we have to sign in or sign up first in order to see it so let's actually write the function for signing up a new user creating a new user so I'm going to make a variable with the name of my function called user sign up not singing signing user sign up equals and this is going to be an asynchronous function I think that's the best way to to do this so an asynchronous function if you don't know what that is don't you know maybe another video for that but this asynchronous function for um you know waiting for something to happen before it sort of um fulfills the promise as it were so and then I'm going to use an arrow again Arrow functions a good thing to to you know do more learning about if you need to but for now just the arrow taking us to the actual code that we want in our function you know what it still says use a singer why am I obsessed with sign ups okay um it's my secret singing desires coming through subconsciously um so once this function runs we're going to make a variable um which is going to be called you know well I'm going to call it sign up email just to be specific that we're taking the email address that they're putting up but this is going to be the for them signing up equals and we're gonna um the reason that we're doing this is we're going to take the user email uh variable that we made before so user email but take note that this variable here user email it's grabbing the entire element from our HTML it's grabbing all of this and while that's useful we want to grab that element from the HTML it's not actually the HTML that we're interested in it's the value of what the user actually types in as their actual email address that's what we want we want the email address not the HTML element so this variable is going to store actually what they type in there and then we'll make another one for their password so the sign up password um variable is going to store what they type in to that password input field so this dot value yeah we're taking the element from the HTML but it's the value of what they type in there is what actually counts okay about semicolons all right so then we actually get to now use the stuff that we've imported from Firebase let's create user with email and password function um so that's you know what Firebase does for us so that's awesome so let's use it now and what we want to pass in here firstly is our auth variable um you know we made this up here and that's going to grab all the functionality from Firebase and use it with our particular app so it's going to create a user but it's not going to create it anywhere it's going to create it for our app and store it in our Firebase account that's what we want and was it what is it going to store there it's going to store well we'll tell it to store um what the user has typed in is their their email for signing up so that's you know we've just defined that that's the value of what they type into their email input field and then the sign up password for the same reasons you know the yeah same thing so that's what we're going to pass into all the functionality that Firebase has for us and it's going to create a user in the authentication part of our Firebase project um so that we know that yeah that uses there and then we can authenticate them okay so um dot Vin um because it's an async function so dot then other stuff is going to happen assuming that all of this happens successfully then we can do stuff so what we want to do is a couple of things firstly let's actually you know pass in this user credential and we'll do something with that so again I'm going to use an arrow to take us to some more actual functional code the code there in the fancy brackets and we'll do a couple of things um we'll make the we'll make it very well called we'll just call it user um which is going to equal um it is it's this this whole user again a lot of this is done for us we've got this user credential but we just want the actual user part of it which will store in this user variable and that we're going to be useful for us later on but what we can do what's probably a good idea to do is just to log in the console um that user just so that we can check it out and see you know see what it's actually creating for us more importantly we actually want to um give the user a success message so let's have an alert pop up um that says um yeah your account has been uh created with an exclamation mark for extra endorphins which are important good so okay um hopefully all of that works um we create the user with what they've put in as email and password we get this user credential we log it in the console we have the success message if it doesn't work though um we want to catch the error so dot catch um and what happens if we catch an error well we want the actual era we want to grab that and the code that we're going to run with that so again Arrow you know taking us to the code that's going to run just to make it a little bit easier it will make a variable um call error code which is just going to equal we're going to take that error and and the the code part of it um oops Yeah hang on error.code is what I wanted and then we'll grab another one which is the error message um which is again grabbing that error but the message part of it okay and then we're just gonna in in the console just log what that error is so that we can go into the console and and see um the error code because we just made that variable and the error message okay that's hopefully going to help us out if something goes wrong hopefully we won't need it okay great so this is a function our user sign up function window you know now that's not going to run at the moment it's not going to happen hopefully all the code is right and it works but it's not going to happen um unless we call this function so when do we want to call the function we want to call it when we click the sign up button so different to the sign in function so when we click sign up we want this code to run so we need to actually you know we've made this variable for our sign up button element from our HTML let's refer to it here assign all these are quite similar so be careful with sign up sign in sign out we're going to add an event listener so this add event listener method I'm going to add that to our sign up button um and that is it's we're waiting for an event the event that we're waiting for we're putting quotes is a click we're waiting for it to be clicked the button and then what do we want to happen when the button is clicked well we want this function to run the user sign up function so we will call the user sign up function um and hopefully you've spelled it better than I have in the way the spelling's all correct um use a sign up function will run when we click the sign up button because we've got that event listener now we don't have the event list now the button's not going to work okay so hopefully that's right let's save this and let's check that this actually works let's see how we go so I'm going to refresh the page now I'm going to make up a new email address obviously I'm just using fake ones um let's I'll be Andrew today Andrew at Gmail Gmail Dot com all right and I'm just going to put in you know test one two three there's my password okay so let's try it out if I click sign up what happens it says your account has been created so that's great that's indicates that something's working I press OK and then if I inspect and have a look at the console here um yeah you can actually see there it is there's all the data um and some empty Fields as well about what has actually been put through to Firebase and the fun bit is if I come to Firebase and I refresh my user so I'm in the authentication part of Firebase here and I'm in the users if I refresh this you can see yeah there's Android gmail.com there's when I created the account that's when I signed in there's my unique ID so Firebase does all of that for us if we just write this code in our HTML great that's awesome it gets a bit easier now because signing in once an account has been created which is what the sign in button is for it's pretty similar so what I'm actually going to do is I'm going to take all of this you know that from where I started the function I'm going to copy all of that and I'm just gonna come down a couple of lines and just paste it again be careful with copying and pasting because you have to be really careful that you are changing the things that you need to change but what I'm going to do is change this from user sign up to use a sign in and then instead of this variable being the sign up email I'm going to change it to the sign in email and the sign in password now I'm still grabbing the same thing I'm still grabbing the user email input element from my HTML and looking at the value of whatever the user types in but this is going to be different this is a fair signing in with an account they've already created so probably not 100 necessary but I'm just I'm changing the names of these variables that I'm putting inside my sign in function just so that just to be clear with them being different but don't forget to change them in here I need to change this to sign in email not sign up and my sign in password but I'm not actually using the create a user function from Firebase what I'm wanting to use here is not create user um but sign in so I'll change this to sine in with email and password remember this is not something I've made up this is from Firebase itself so spelling needs to be correct um and then I probably I don't need to console.log the user I can get rid of that um and my alert is not going to say this let's be more specific let's say um you know you have signed in uh successfully exclamation for endorphins and then the error stuff is all um that can all be the same okay so now that I've created this user sign in function again in order for it to work I need to call the function so when do I want to call the function when I click the sign in button okay which is separate to the sign up button so just like before I'm going to create an event listener um in fact I'm just going to copy this because it's very similar again um but and the event listener is not going to be for the sign up button it's going to be for the sign in button and the function that I want to call when I click the sign in button is not user sign up but it's user sign in I want this to be the function that runs so user sign in function will run when I click the user the sign in button okay so let's check this out like save it and refresh and okay again if I use the so I use the Andrew at gmail email address gmail.com when I created my account so that is there in Firebase that's so it should be able to sign me in if I use that same email address because it's already there so test123 and I click sign in and it says you've signed in successfully which at the moment is the only thing that I'm asking it to do when I sign in so that's great um just a demo though what if I typed in something else what if this was not Andrew but Fred at gmail if I then click sign in um it doesn't give me that success message or the exclamation mark and I don't get the endorphins but what I will get if I inspect is I'll get an error and it's actually telling me user not found which is quite useful so it's telling me what the error is um so that's great so it means that my error thing is working as well Okay cool so that's great except remember the point of this is that once they're signed in they can see the secret content and that's not happening at the moment so we're going to create another function which is about checking their authentication state so I'm just going to call it chip um auth state so the state meaning are they signed in or not so can't check auth State equals we're going to make it another asynchronous function um and the arrow is going to take us to the curly brackets and the code that we want to run when we call this check or state function and again we're going to take advantage of the Firebase library with all of the good stuff that they've already got on auth state change is already a Firebase method that already is built in for us so we can take advantage of this and and we can you know put in um again it's the auth you know so the we're checking our own app so that's what this was for before this is it gets all the configuration for our own app with the Firebase configuration that we've set up um and then what were the other thing that we're passing in is it's actually the user so this user that we've you know it we're checking the authentication state of a specific user um and so the arrow taking us to more code uh what we want to happen if the user authentication State changes depends on whether they're signed in or not so we're going to use an if statement here so if and then a condition and if that condition is met we'll have some something happening and if it's not uh we'll have something else happening so two possibilities if they basically if they are signed in we want something to happen and if they're not signed in something else to happen so it's actually real easy we just we just put in user if basically this means if the user exists right if they exist and they are signed in and everything's good then they are or basically saying if they are authenticated so it's very existential but if user then great we're good to go we're signed and we're authenticated um so what do we want to happen if they are authenticated well we want to we don't need to that sign up or sign in form to be visible but we do want the secret contents to be visible so remember we've already made the variables for those two divs we've got the auth form div and the secret content div and we've made variables to allow us to be able to refer to them both the auth form and the secret content so we can just change the CSS of them um the display of them by saying um their auth form dot Style dot display if they are signed in so if user means if they are signed in we want that to go away we want none of it so let's hide the form but let's show the secret content so secret content dot style dot display equals so in this context the opposite of none is Block in other words let's show it um so that's if they are signed in if they are not signed in we want the opposite we want to hide the secret content so I'm putting this in the in the fancy brackets for the else block this is if they are not signed in then if this condition is not met we jump down to the else statement and it's I'm pasting this but we're going to make it the other way around we want to show so in other words block the authentication form to allow them to have another go at signing in or signing up but we want to have none of these secret content for them because we want to hide that if they're not signed in okay great now we're not going to call this by clicking a button it's just we want to monitor the authentication State all the time so I'm just going to call this function check auth State and with the brackets I'm going to call that just as it is so that means it's basically always going to be checking are they signed in um and if they are then we'll show the content and hide the form and vice versa if they're not signed in great so hopefully that works let's give it a go um I refresh the page and I'm authenticated I already am because it already knows that I was signed in as Andrew so let's check it again I'm go uh well I can't because I can't sign out um but um yeah let's let's do the sign out function so that I can sign out sign out function is reasonably easy let's just um make it here so I'm just going to call it um user sign out use a sign out it will make it asynchronous again um async um and the arrow is going to take us to the block of code that we want to run I just said sing out which makes sense but it's not what I mean uh sign out I've got this obsession with singing today so the the code for signing out is just we're just going to await we're just going to wait for it to happen basically and again we're going to take advantage of the Firebase function the sign out function is already there with Firebase it's gonna um log that person out or change their state to be logged out and again we're going to take advantage of the auth setup that's already been set up for our account and it's actually as simple as that so if this function is called it's just going to use the built-in functionality that Firebase already has to sign that user out and change their state accordingly so again it's not going to happen unless we click the sign out button well that's what we want to give it instructions to do so again we need to add an event listener um for not the sign in button but the sign out button and what function do we want to run again it's the user sign out function that we just wrote that we want to run if they are going to sign out okay so let's save and test that out see how that's working so again it's automatically recognized that I am signed in as Andrew but if I click sign out look at that it hides the secret content and it shows the secret form now why is it doing that because I didn't tell it to do that in my sign out function but when I click the sign out button it signed me out which meant that it changed the state so because I am always checking the authentication State because this function is is just being called there so it's always checking um once the authentication state has changed so remember you know Firebase is doing a lot of this for us it's signing out and then changing the authentication state to say yeah you're not signing anymore so this user is it's not meeting the conditions of this if statement so we're going to go to the else block and we're going to show the authentication form and we're going to hide the secret content so when I click the sign out button it calls this function but that also changes the authentication state which means that the else block of code runs here instead of the if block of code and so things change in my HTML page okay so with that done um we're good I'll just I'll demonstrate that we can also maybe I'm not Andrew maybe I'm this um gmail.com and she also has test one two three and she doesn't exist yet okay so if I go to my user list she's not there but if I click sign up it's going to say your account has been created and she's authenticated okay and if I refresh in Firebase you can see there she is um and if I sign her out I can sign in as her and be authenticated again or if I sign out as her I could also be Andrew Now Android has the same password and I can sign him in and he's authenticated as well so very simple but that is a starting point for what you can do with Firebase authentication and so you can have a web page front end that allows you to sign up new users and to sign them in and have different information show to those that are authenticated and then allowing the users to sign out of your web page as well

Channel: Keith Paterson

Views: 7,915

Keywords: Firebase, Firebase 9, Authentication, JavaScript, HTML

Id: ERoJpIT1BHY

Length: 45min 7sec (2707 seconds)

Published: Sun Feb 19 2023