Firebase Authentication | Register, Login, Signout with Email & Password

what's up YouTube Welcome to the video so the topic is how can we perform Firebase authentication using email and password so we will going to sign up a user using Firebase Au save its information to the database and then try to login with that ID and then we will sign out so let us begin now open the Firebase and go to Project settings and here I have my Firebase app choose CDN and uh before copying the code I will open the Firebase o folder in my visual code and uh I will create three files register HTML login. HTML and home.html I am going to close these files for now and come back to my browser and search bootstrap 5 so we can use the latest version in the introduction we can copy this and make it as our starter template remove this and this is our Firebase a and now we will copy the configuration from Firebase and put it down here remove these commments and now with the help of bootstrap we don't have to waste huge time on designing the pages we will just copy the floating label code from here so just copy this paste it in the body before the script and let's change this to email input and this to password input so now let's put these divs under a form which is the right way to do it and this form will have an ID ID of let's say main form and I will copy this this is going to be text and we will be saving first and last name in the database and we need two buttons so a button with type submit because it will uh get submitted to the form and cl with a class of button and button primary create new user button and the second button will be sign in so sign in the user and this button will be inside a link and the link will point to the lin. HTML let's also change the IDS to F name and L name now let's check this out so it looks like this to take care of this I will put some classes on my main form mb3 after each div I can use float right will have margin and two now I will copy this and paste it two times because I need some other functions like get database set and ref to save my data on the database so this should be database and some other functions like get Au and create user with email and password so I will be needing these two functions for the authentication and these three functions to save my data on the database now I need to initialize DB with get database function function and O with get o function and this will take my app now I will get the references so now we have all the references let's create our uh register user function and let's create an arrow function with event and here I have used the event to use this method which is prevent default it will prevent any default Behavior with the event because I am going to use the submit event that's why I have to use this prevent default now the create user with email and password function it will take all then the email input value and the password input dot value dot den and inside this Den promise I have to Define an arrow function which will contain an argument let's say credentials and inside this promise we can define a function to insert the rest of the information into the real time database but we will do it later for now let's put a catch statement and inside that we also need an arrow function which will catch the error and we can alert error er do message message so this is not necessary but you can do it if you want for now let's uh only print the credentials to the console and it's better if we if we have a heading over here so an H2 heading register user now come to the uh console and inside this there is authentication get started and add new provider email password check the first uh check box save so it is enabled now we will come inside users and let's try to register the user let me open the inspect first so there is a problem this should be Firebase o so that was a problem we uh created this register user function but we did not assign the event to the main form so we also have to assign the event main form do add event listener and whenever the form submit run the register user function so now this should work so amazing Cod wordss at you youtube.com and Hassan RZA create new user and we didn't put any uh popup so here are my credentials and if I refresh this my email is now register at Firebase AU so this works great now let's create the login page so I will copy all of this so paste it here we will have no first name and last name here so remove all of this and let's change this to sign in or or logged in whatever same thing this would be sign in user and we will be needing the get ref and child functions and the create user will be changed into sign in with email and password and there will be one more thing which will be DB ref which will take the reference and this DB constant and this register user will become sign in user and this sign in will take the same thing the all the email and the password and Dot then would be the same and the catch would be the same so this uh uh so everything inside here will remain the same for now so if we successfully log in the console will show the credential otherwise it will show the error and we have to change another thing which is this will be sign up so we are trying to go to the sign up page and this will take us to register this sign up and sign in is uh a little confusing let's make it log in login user the signin button should be a clickable button so it should not submit the form so I must sign in so I'm seeing the login user screen and it's saying that the register user is is not defined so in the login screen we have the signin user function so refresh and now the email and the password log in so we are seeing the user credential which means that our username and password are okay if I try to put the wrong email which is not registered and try to login it's saying invalid login credential and if I log in with the right credential then I'm seeing my credential in the console log now let's get back to the register and when a user is successfully created it is important to uh also save the information of the user into the database to save the other data to the database so we will use the set function and inside this the ref function which takes DB and the path so users o list slash credentials do user. uid so we are saving the information of a user with its U ID which is created by the Firebase Au and then we need to pass the second argument which is the object first name which will come from fname input do value so this is it in the login we will retrieve this information with the get function and inside that we have child function which takes DB reference which is a constant that we defined earlier and the part which is the same so user o list and we are giving the credentials uh this is a function from Firebase which will check the email and password if it is correct then it will go inside the then promise and the then promise will have the credentials and we can use use these credential afterwards so I'm using the credential to fetch out the rest of the information which was saved into the uh realtime database so dot then and this also requires an arrow function snapshot so if the the snapshot do exist then set the session storage you can use also use the local storage if you want uh a user to be permanently logged in but for me session storage is all right so set item user info and I will use json. string fi because I want to save an object and the object would be first name retriev from the Firebase snapshot Dov do first name and the last name snapshot. well. last name and we are creating an object which contains this first name and last name and then we are stringifying the whole thing which means that the object will get converted into a string and then we are saving it on the session storage in the uh next page we will retrieve this information now I will also save the user credentials the the same way and change the window. location to home do HTML now let's come inside the home so for the homepage I will again take the help from bootstrap and uh I will again get the starter template and another thing is I need a nav bar because the sign out button is usually within the nav bar so I'm going to paste the nav bar here change this to home and I don't need the search bar and this would be sign out and we will change the type to button and I will Define a script and we will get the user credentials with json. pars and from the session storage. get item function we will get the user credentials so user cred and this would be user info and we will get the user info and this uh sign out button will have an ID of sign out button and let me Define two headers H2 one will have an ID message and the other will have the ID GRE so now let me get the references the message head do inner text and the last thing which is the sign out function so Arrow function and the sign out function is quite simple we will just remove the items from the session storage then we will change the window. location to login. HTML and we will do another thing which is I will create another function check credentials this will check that if session storage has the user credentials so if it's uh not null or undefined then this will become true move to the login page and I will run this function on the page load so window do add event listener and on load I will run this function and another event that I want to assign is for the sign out button whenever the button is clicked sign out function should run and uh this user qu actually has an S at the end and these two lines should be executed only if the session storage has some credentials so in the else statement these lines would be executed and now let's uh create a new user let's just delete this user and create a fresh account so the same email Hassan razza create new user let's refresh and the account is created now uh we will come to the realtime database and here is our new user with the first name and the last name so now let's try to login with this user sign in login so so it's saying that user with email amazing coders at youtube.com logged in and it's saying my name uh before clicking this I want to show you that in the console you can see the session storage so here is the session storage with my credentials and my information if I press sign out and try to uh see the session storage you can see that its length is zero if I try to go to the homepage with no credentials then it is redirecting me to the login page so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 10,729

Keywords: firebase authentication v9 v10, register and login and signout with firebase auth, firebase v9 realtime database, firebase version 10 firebase auth, save/connect firebase user with realtime database, save firebase auth data to realtime database, firebase auth save user to realtime database

Id: FjXzJ2wVs5g

Length: 25min 4sec (1504 seconds)

Published: Tue Oct 10 2023