Sign In with Google - Authentication using Firebase 9 or 10 and Vanilla JavaScript

okay so in this video we're going to create a simple HTML web page that allows a user to sign in with Google so it's nothing more than just this just a button that allows them to sign in and the Google pop-up will show and they can choose an account and they can sign in to your little web app with their Google account and it'll tell them which Google account they have signed in with and a sign out button will pop up and they can click on that to sign out and then they can create an account with a different Google address or they can sign in with the same one I'm going to use Joseph blogman here one that I just made up and you can see now I'm signed in as Joseph blogman with my blogman Joseph email which will be deleted after this by the way in case you're emailing it alright so very simple just a web app that doesn't do anything more than that you can see there's no CSS it doesn't look fancy at all we're not using a front-end framework we're not using react we're not using vue.js we're not using anything like that in future should you be learning how to use a front-end framework yes probably particularly if we're using authentication and signing users in then for the purpose of security a front-end framework May well enable you to do that a lot better and there'll be more functionality with things like react or view that you can use as well but for today we're just focusing on the skill only of authentication with Google and we're going to use Firebase to do that Firebase version 10 or Version 9 it doesn't matter for this project it's going to work the same way so Google authentication with Firebase focusing on nothing more than that let's get started so in order to do it we are going to have to use a server so this live server extension and visual studio code if you haven't got that just search to that and install the live server and that'll allow us to actually use a local development server just to get this working however you don't have to use live server you can serve it up in any way you want for example if you took this web page and published it onto GitHub um then when you click on the URL for GitHub you can click on it and that's going to work because GitHub servers are going to be doing the work that needs to happen in the background so or you can do use any other local server environment that you want to but for me I'm using the live server extension and visual studio code all right let's get into it so I'm going to make a new file and I'm just going to save it on my desktop for now and I'm just going to call this one uh Google auth dot HTML because it has to be an HTML file of course and once uh the visual studio code is recognized as an HTML file I'm just going to use the exclamation mark tab to give me some boilerplate code to get started and I'll give it a title I'll just call it my fourth app and we're good to go so as you can see from the demo there there's nothing more to this web page in terms of the HTML than just a couple of buttons so I'm going to have a button that says create account um slash sign in big and the reason for that is because the function that I'm going to attach to this button is going to allow the user to create an account and then automatically sign in once that account has been created with your Firebase project or if the account is already there it's going to just sign them in so this one button will do the same job and then my second button is going to be the sign out button to allow them to sign out assuming they have already signed in and then I'm also just going to put a div in here and with nothing more in it at the moment than just a message and that message will just for the moment let's just say you have signed in so kind of a success message there all right and there's literally nothing more to the HTML except obviously I do want to be able to use these elements from my HTML later in my JavaScript so I will give them an ID each so that I can actually refer to them later on this one I will just call sign in button with camel casing so taking care about where the capital letters are it's probably the number one error that comes up is when there's a capital letter in the wrong place and this one I'm just going to call sign out button with camel casing there as well and my div I'm just going to give it an ID of message okay great so now I'm ready to jump into the actual JavaScript which is what the focus of this video is but before I write any JavaScript of my own I'm actually going to jump into Firebase here and I'm going to create a project in Firebase because that'll actually give me some of the code that I can use to start my JavaScript program with so I've created a Firebase account if you haven't you'll need to do that just go to Firebase and create an account and then once we're there we can go to the console and just get started by creating a project and I'm just going to call this Google auth and continue we don't need to enable analytics and I can create the project and once that's done I just click continue and then I've made my Google auth project like I'm just going to use this HTML symbol here I'm not making a mobile app for Apple or Android today it's a web app so I just click on that and I personally like to just use the same name that I used for the project so Google auth and then I just register that app and now my app is registered with my Firebase project and this code is important but instead of focusing on this right now I'm just going to go back to the console so we can see what else is going on in Firebase we'll come back to this code shortly so if I go to the console you can see there's my project in the build area there's all these things I can do with Firebase I can make databases Etc but today I'm just focused on authentication so I'm going to click on authentication and get started and that brings up all the different possible providers that I can use for signing in and authenticating today I'm using Google so I'm going to say enable and enable Google authentication it needs a support email before it lets you go any further so by default that will just be the email of the account that you signed into Firebase with and once that step then you can just click save and now Google as a provider for authentication through Firebase is enabled in your Firebase project so that's perfect and down here you can see there's a tab for your users there's no users yet but once this app is up and running and people start to sign in people I just mean me because I'm just using it to test they will show up here in this user's authentication area that's kind of where all the data for your users is going to be stored within your 5S Firebase project so exciting very good in here we've got the settings the project settings and if I click on that then I can it'll take me back to the code that I was talking about before so if I just scroll down put in Project settings you can see this is all the the code now the npm code here I'm not going to use this is probably what I would use if I was using a front-end framework and if I had some sort of local installation of Firebase but I don't so I'm going to use the CDN and you can see there as well as the script tags that allow me to just paste this code directly into my HTML document and have this as being my JavaScript section of my document it's also got the actual web URL for the Firebase Library so that means I can just connect directly to the internet and it means I don't have to install anything locally so it's it's for a beginner project it's a lot easier and the config object that is all the specific information for my Firebase project and that is there in all of them including the CDN you can see that Firebase config object is there as well so all I need to do is copy that and I can literally just paste it directly in to my document and then I am able to get started so there's my script and there's my config and I'm ready to go you can see it's also imported this initialize app function from the Firebase Library the Firebase app Library and that is great and it's also made a variable for me called app which is using their initialized app function and and setting in there the Firebase config that is specific to my project so that gets things initialized and it says yeah when the user is using this website we're going to be connecting to a specific Firebase project with this config that I have set up in my Firebase account so perfect so I'm ready to go I'm ready to now turn this into something as useful for Authentication and to do that I'm wanting to use not just this library but I want to I'm going to copy this whole thing I'm going to import some functions from Firebase that are going to be useful for authentication so I'm just going to paste that because it's going to be very similar but I'm not going to import this one I'm going to delete that and also it's not quite the same area that I'm importing it from so it's not Firebase app it's Firebase auth so I'm just going to change that from app to auth that is really important because it's this Firebase auth library that I'm going to import all these really useful Firebase features from so the first one I'm going to import is just called get auth and that is just my authentication sort of startup function so that's really important probably the most important one to get the authentication happening and then I'm also going to import a Google auth provider function so this one's specific to Google so I'm going to get my Google provider in there and then I'm also going to import the sign in with pop-up so these are all please make sure these are spelled correctly and we are using either capital letters uh you see the Google starts with capital G but the other ones don't so sign in with pop up um just pay attention to where the capital letters are because obviously that needs to be correct for these to work and I'm also going to import a sign out um function as well as probably a really important one on earth State changed and that's going to allow me to monitor whether the user has signed in or out or whether the authentication state has changed from signing being signed into being signed out Etc it's going to allow me to constantly monitor that so that one's really important too okay great but those are that's that's it so it's those five that you need to import and that is all so once they are done um I'm going to create a new variable here another one so you can see Firebase made one for me I'm going to make a new one for authentication called auth and that is just going to be my get off function that I just imported there from Firebase with and the brackets can stay empty for that one so get off empty brackets and that's it that is my auth variable and that's going to be useful uh for the rest of my code just saying yes I want to use the authentication feature from Firebase great and then one more just for now I'm gonna make this one called provider and this variable is just going to store every time I do a new instance of this one here the Google auth provider function that I've also imported from Firebase so there it is Google auth provider and I'm just going to store that in a variable so I can use that later on in my code as well so that's specific to you know getting all that information from Google about the user's Google account great so now that that's set up before I start writing um Firebase specific functions I'm just going to do some more straightforward stuff in there I've got my HTML up here with these IDs so so that I can use and control these elements from my HTML I'm going to make variables for them as well so for me personally I like to use the same name for the variable as I do for the ID for me that's less confusing so I'm going to create a variable called sign in button and for some people it's more confusing so sorry if that's the case for you but because you're sort of naming two different things and that are with the same name but for me I like them to be the same name because it makes it really clear for me what I'm referring to but this variable you can call it whatever you like but it's it's the variable that is referring to or what I want it to refer to this element from my HTML which has the ID sign in Button as well so it's in my document so I'm going to use document Dot and then we're going to use this method the get element by ID so I'm grabbing the element from my HTML and in my string quotes there inside brackets I'm going to name it as the you know the ID which is the sign in button so that button which has that ID I'm grabbing it storing it in that variable with the same name and I'm going to do the same thing as copy that code and it can be the same thing for the sign out button and that's but this time I'm going to grab the sign out button ID and then I'm going to do the same for the message so that message um ID I'm going to grab that as well and store it in my message variable so document dot get element by ID and then in Brackets it's the the ID that I want to grab and in this case it's just message so what this allows me to do is it allows me to actually use these variables to refer to these elements from my HTML so that I can control them later in the code you can see why that's going to be important shortly in fact let's have a look now so if I save that let's have a look at what the website looks like so far I'll bring this in let's open it up in my browser you can see I've got these buttons and I've got this message that says you have signed in that's kind of weird though because I haven't so I don't actually want to see that straight away I also don't really need to see the sign out button because there's no point in a sign out button if I haven't actually signed in yet so I want to hide this and I want to hide this message when the page loads I only want these elements from my HTML to show up later on once the user has actually signed in so let's get that happening let's make that the first thing that happens in my actual main code here I'm going to take this sign out button and I'm just going to refer to it here the sign out button and then I'm going to say dot style which allows me to manipulate the CSS for that element dot display and display can either be like on which is we call it block or hidden which is none so it's like say I have none of it I don't want any of it I don't want that HTML element equals none that's what I'm saying so I'm saying the sign up button display is going to be set to none which means I'm hiding it and I also want that message to be hidden so message dot style to access the CSS this is kind of a CSS thing the display um and that equals none as well I want none of that message either and I put semicolons at the end because I'm conscientious and Tara okay so if I say that let's have a little look um if I refresh the page yep there they are they're gone um so I don't see the sign out button and I don't see the success message because I haven't signed in yet so all I've got is just the sign in button but at the moment if I click on it obviously nothing happens so let's actually start writing some functions some Firebase functions uh let's write the first one for when the user wants to sign in now like you could see I only want that function to be called when I actually click the button so that's why I'm gonna just create a variable to store this function in and I'm going to call it user sign in and I'm going to make this an asynchronous function so the reason for that is that for this function to work it kind of has to connect to the network it has to talk to Firebase it has to talk to Google so I'm kind of waiting for things to happen before the rest of the function is carried out if it's successful something's going to happen or if it's not then there might be an error message but making an asynchronous function allows me to wait for those things and it'll just allows it to be much more efficient um so we're going to use an async function for this so the parentheses and then um just the arrow I'm just gonna make it an arrow function pointing groups arrow pointing to the block of code that's going to run when this uh function is is called so um what I'm going to do in this function is I'm actually going to use the sign in with pop-up feature that I installed from Firebase earlier in other words if they click the sign in button they're going to call this function and we're going to get that sign in with pop-up happening so this sign in with pop-up function I'm going to pass it just a couple of things in there one is just the auth so that's the feature that I imported earlier so that's probably the main one it's it's getting that authentication functionality from Firebase and then also that provider variable that I made saying yes I want a new instance of my Google auth provider and that's going to allow Google to do all the work it needs to do behind the scenes and get that Google account authentication through Firebase happening so auth 5s and new Google provider in the sign up with pop-up feature so you can see Google and Firebase are doing a lot of the work for us we just kind of have to basically say yes we want to use these features that you have so generously provided to us for free um and that's it so if that works we can go straight to dot then um and create the code that we want to run if that is successful so if it is successful we're just going to put in this thing called um in Brackets here called result oh by the way just noticed that I have my my brackets for the then but then inside of that I've got my brackets for result and from there I'm going to do an arrow function to a in an area to a block of code and what's going to run in there we kind of you know for a simple app like this we don't really need that much but for now what I will do is I'll just make a variable I'm just going to call it user and I'm just going to grab this result thing this result is what comes back from Google so the result if they've successfully authenticated they're going to get this result which is all this data from Google so I'm going to say result oh sorry equal my variable equals result um dot user and to show you what that is just for fun you kind of don't have to do this but what I would like to do is console.log and this variable just so that you can see oops console.log I need brackets console.log user and that's going to allow us just to have a look at the console and see all this data all this information that has come back from Google once the user is authenticated um because that can be quite useful as we sort of develop our app from there okay so that's the user sign in function um if it works but of course it might not so if it doesn't we're going to put at the end of that dot catch just notice that I'm still inside the main function here I haven't gone outside of that I've just gone outside of the um dot Vim brackets so at the end of that I go dot catch and um for the error I just put an error here and this is mostly just about so I'll just do an arrow function here so we'll just make a variable here called error code which is just going to equal error dot code and you know at the moment I'm not doing too much with this but you can use those variables to you know display error messages to the user and things like that so I'll just make another one called error message which is going to equal error Dot message okay and that's that's pretty much all I need to do with that one at this point okay so that's my user sign in function um an even simpler function is going to be my user sign out function so again I'm storing this in the variable and that is so that when I click the button I can call this function um I don't want it running the whole time I only want this function to run when that button is clicked so I'm storing it in the variable again it's an async function like that I'm in an arrow to the block of code that I want to run and obviously as you might have guessed in the user sign out function I'm going to use the sign out feature that I imported from Firebase earlier on so that's what I'm going to put in my block of code for this function it is the sign out function from Firebase and then all I need to pass into that is the auth variable from Firebase so yeah I want to use the authentication feature for my sign out process here and that's as simple as that I can jump straight to dot then and then in here I can just write whatever I want to happen if the user has signed out so I'm going to do a very basic error function here um and you know you can do whatever you like if the user has signed out for me I'm just going to put in for now just to test it I guess a quick alert that just says you have signed out um successfully something like that okay great so of course in this block of code you know you can you can choose what you do for when the user has signed out I'm just putting in that message for now and again we can just if that doesn't work we can do a DOT catch press asynchronous function there and all we're going to pop in here is just the error and you know we really don't need to do too much than that so I'm just going to put basically an empty function I'm just going to pass through there um again there's room for you know development and doing more with that but today we're just going to keep it nice and simple so that should work to sign the user out once um they click the sign out button of course at the moment we haven't told the computer to do anything when those buttons are clicked but we're writing these functions to prepare for us to add event listeners to those buttons so that we can call later but before we do that um I'm just going to write another function here probably the most important one and this is the on Earth State changed function and unlike the others I'm not going to put this one into a variable because I don't need this one to run when they click a button when the user clicks a button I'm basically just going to have this one running the whole time this one is always checking has the authentication State changed in other words if they were signed in has that changed to them being signed out or if they weren't signed in has that changed to them now being signed in so again Firebase does a lot of the work for us it's already sort of there I've imported it in from the 5S Library so that's pretty much all I need to do is just call that function however I do again need to pass in a couple of things one like the others is this auth I need to say yes I'm using the authentication feature from Firebase but also I'm going to grab or all this user data that has come from Google um assuming they're authenticated I'm going to take the information from Google about that user and I'm going to do something with it so I'll make an arrow function and in this block of code for my function it allows me there to write an if statement so I can write an if statement and if they are signed in I can do certain things and I can write whatever code I want for if they are signed in or if the authentication state has changed to them being signed in and then I can also write code for if they're not so the condition for this if statement I'm just going to write user so if user basically that translates to if the user is signed in if the authentication state has changed so that they are signed in then I can run this block of code whatever that needs to be and if they are not or if that changes to them being signed out then I can write my else statement and a block of code there for what happens if they are not signed in if it changes to them not being signed in so for now I'm just going to keep that else statement blank and if they are signed in I'm just going to write an alert that says you have signed in but obviously you know you can see the potential here for all sorts of things that can happen um with this if statement so you know we've got code that we can write for once they're signed in and code that we can write for when they sign out so we'll develop that a little bit more later on but for now let's just save that and like I was saying before we need to add these eventlessness because at the moment these buttons are not going to do anything if I click these buttons um these functions are there but I haven't told the computer to do anything once those buttons are clicked I haven't told it to call those functions so I'm going to go to my um I my variables up here the sign in and the sign out button and I'm just going to name those variables so sign in button dot add event listener so that means we're going to be waiting for that button to be clicked so that's the event so in Brackets there I'm going to put in quotes string quotes the event which is that click so once that button is clicked then I'm going to call the user sign in button in this case so if they click the sign in button we're going to call the user sign in function that I wrote and again for the sign out button I'm going to add the event list now the event I'm waiting for is that click and if they click the button if they click the sign out button then I'm going to get the what's it called user sign out function to run so these event listeners are essential obviously the buttons won't work without them okay so now that that's it that I think I'm about ready to test it and see if it's working and to test it I am actually going to need to use this live server extension from Visual Studio code that I was talking about before now once I've got that live server extension installed you'll see there's a button down here called go live unfortunately it's not going to work right now and you'll see why if I click it it says open a folder or workspace so at the moment this is just an HTML page just sitting on my desktop and that's not going to work for using a live server so what I will just need to do is take this HTML document and put it into a folder or you know directory so I'm going to create a new folder on my desktop and just call it auth and then I'm going to move my HTML document into that auth folder now of course that's going to freak out Visual Studio code because it's gonna go ah where's it gone I can't find it anymore and to show how much it's panicking it's going to turn it all to red and cross it out Don't Panic as much as Visual Studio code does it's absolutely fine don't worry about it it's all still there we can just close this from our text editor and we can what we actually need to do is go to file and open that whole folder so we want to open that whole auth directory that we made from our desktop I'm going to click on that entire folder and I'm going to click select folder open the whole thing up and there is all our same code and it's there but now that allows us to actually use the live server we can click go live and it'll run that live server for us and it'll actually bring it up in our web browser so that's great however um for some reason it doesn't really tend to work so well if I click that the pop-up doesn't or it does work but then it goes away again so there's some issues with just running it just straight like that and it's partly to do with this so I'm actually going to delete what it comes up there by default in the URL and I'm just going to type in localhost and um localhost and then colon and then the name the number of the the port that I'm hosting it on so if you want to find that out just go to visual studio code and you can see down here it says Port 5500 so that tells me the port number that it's being hosted on so localhost colon and then the name of that Port um it might be the same for you it might be different but 5500 and then I click enter then it takes me to this directory that's being hosted and there's my page there I say yep that's the one I want to load and then if I do it that way it's actually going to function a whole lot better so that's just a little um trick that you might need to employ to get it working so hosting on that localhost let's test it out I click the create account sign in button and there come up my account so that I can choose between so I'm going to click my main one and yeah it's work so I have signed in um it says that I've signed in of course nothing else is happening at the moment because I haven't asked it to but let's check Firebase and I'm going to refresh this authentication page with my user data and you can see yeah there I am my Google account is now registered in my Firebase project and I'm now officially a user of this web app so that's great and at the moment I can't sign out or do anything so we'll add those pictures now but so far so good that is working at the moment great okay so let's come back to our code and let's see what we can do so I'm going to add more to this if the user is signed in function so you can see that once they sign in that's where I want I want to show that message and I want to show that sign out button so remember I hid these at the beginning so I changed the display to none for that sign out button well I'm going to copy that and I'm now going to I've taken out that Let's uh I've taken out that alert so I'm gonna instead I'm gonna show the sign out button so I'm going to change that from none to block so the sign out button style display is going to equal block which means I'm going to show that element from my HTML that sign out button which was hidden before and I'm going to do the same thing for my message so that message div I'm gonna instead of hiding it like I did before I'm going to change that from none to block and I'm going to show that message so that message said you've successfully signed in so I don't need the alert that I deleted earlier so that's what I want to happen if the user is signed in if they are not signed in so if they let's say they click on that sign out button and they successfully sign out well then I want to hide these things again so those things I don't want to show if they have signed out so once they sign out I don't want to see the sign out button and I also don't want to see the message that says you've successfully signed in if they've just signed out so let's save that and test that and see how that's worked come back to my app over here um great and because I'm already signed in it's it's showing it's working so the sign out button is showing and the message saying you have signed in is appearing which is great so let's click the sign out button and see if that works yes it does you have signed out successfully okay and then the sign out button and that message disappear perfect let's try it with a different account I click there create account and let me try as Joseph blogman great so now Joseph blogman is signed in and I can sign out as Joseph Bogman as well so that's great but what it's not doing at the moment is it's not telling me who I am signed in airs and that would be quite useful um so I know which account that I've I've signed in with so remember I said before that we would log all that information in the console about the user data that's come from Google so I'm gonna and right click inspect my page and let's have a look at the console and there's a whole lot of stuff there sorry but if I come down here to this user data and expand on that it has logged that for me in the console like I asked it to and you can see there's all this information that's coming from Google including all the spits and pieces that I'm not going to use photo for my profile Etc so I'm not going to use any of that but what is relevant to me right now is this display name which in this case is Joseph blogman and the email as you develop things further you know you can all this information is there for you to use so that's great so that just gives you a bit of insight there let's get rid of that and let's actually bring it into my code so what I'm going to do is right back up here in my message I'm actually going to add just a little bit I'm going to say you have signed in as and then I'm going to put a span in here and I'm going to give that span an ID of let's just call it user name camelcast again so and I'm going to keep that spam empty the HTML inside I'm just going to keep blank but so that I can manipulate this let's add this as a variable so I'm going to say const and I'm going to call it again just the same name for the variable username and we're going to grab it from our document document.getelementbyid and the ID was username and that's going to allow me to grab that that little span and so if they are signed in coming back to my on auth state changed function if they are signed in I'm going to add to my block of code for if they are signed in this user name uh dot inner HTML like I said there's nothing in there at the moment but I'm going to inject some HTML in there or some text inside the HTML element and what it's going to be is the user data that I got from Google this data that I was just showing you in the console before that I got from Google Dot and remember it was called display name spelled like that so let's see if that works first let's check that I've got that right so I come back to my um well let me sign in again and uh oh let's use Joseph blogman again why not so if I sign in as Joseph blogman now you can see you have signed in as Joseph blogman so it's taken that user data including the username the display name it's called and it's injected that into my HTML there let's just add one more thing let's add um after that span let's add with with the email and then let's add another span and we'll give this span an ID of user email so once again if I'm gonna actually use that I need to create the variable so let's copy it and paste that but instead of username I'm just going to make it user email and referring to the ID of user email okay and then I can in my on auth state change function I can add some code here to say that user email variable which stores that element from my HTML the inner HTML for that is going to be user dot email and that's going to grab that data from Google and get their email address that they've signed in with and it's going to inject that into the HTML up here in between here for that span that I've put inside my paragraph inside the message div okay great so I'm going to save that and let's test to see if that has worked so yes it has you have signed in his dose of blogman with the email blogmanjoseph gmail.com perfect and if I were to sign out um and sign in again as me the other me and there's at least two me's but just two that I'm testing today now I'm signed in as Keith Patterson with the email kpalian gmail.com great so you can also see in my Firebase if I refresh that authentication page that I do have those two users that are now registered with my very very basic web app okay great so that all seems to be working like I said this is an introduction to Google authentication with Firebase obviously if there's a lot more that you can do with an app like this we could make some CSS we could make it a lot prettier and then you can actually start to think what do I want to happen when the user signs in uh what do I want to show them what do I want to display uh displaying information about their own user account or just things that maybe they weren't able to see unless they authenticated and signed in first so plenty of potential this is just a starting point but have fun happy coding and good luck

Channel: Keith Paterson

Views: 4,381

Keywords:

Id: vuLTzi17k14

Length: 38min 57sec (2337 seconds)

Published: Thu Jul 13 2023