Firebase Web App Tutorial 05 - Connect Firebase to Web App & Firebase Web Authentication & Sign In

hello guys welcome to coding cafe my name is Mohammad Ali and in this tutorial we are going to connect our app or firebase web app to the firebase okay so for that all you gonna need is just go to google and write firebase so you will basically learn that how you can connect your web application to the firebase firebase real time database file as authentication and fire best storage so click on this firebase a firebase console now here you can see we have this add project just click on it and give this project a name so I'm going to give it a name as firebase web app ok fire best web app and then I accept the earth project and wait for it so our project is created successfully click continue and here you can see our project is created successfully now the next thing which we need to do is since you know that it is web projects or you can just click on this web icon ok and here all you will need is if you want I mean we have to basically give F nickname so I am going to give it a nickname that is blog web app ok and then click on this register app and then you will get these scripts which is your web fire base configuration initialize firebase and these are the latest version of firebase I am going to use the authentication basically we will add it ok now so okay first of all let's what we use to your code and what I am going through is click here okay inside this box and let's create a new folder and I'm going to give it a name as Jes okay a new folder okay all you need is just to click on this new folder icon and then we are going to create a new folder by the name Jes in which in this folder basically we will store all our north door JS files okay and on which will basically write deep chord so anyways now what we're going to do is inside this J's folder we are going to create first of all select this okay just click on it and then click on this new file we are going to create our file here which is our first one and it will be by the name index dot J's in X dot yes and then press Enter so you can see inside our J's folder we have this indexed or J's file now come here come here and all you will need is just to copy this from war up to here and this one also K just copy it come here and just pass that code here okay warfare best config and then we have this initialize firebase now the next thing is we have to I mean in order to add we to use the firebase auth fairway storage where base built and database you have to get the dependencies for there for that and we will follow this latest new version at the time when I am recording this video this is the latest version okay so whatever the version is in your case okay just go with it and copy this and then come here to the visual studio code and in our sign in dot HTML here in the head okay in the head we have to pass that here now what we're going to do is passed it three more times okay so the second one is for the earth I mean in order to use the firebase authentication we will say if best - authe then we have we will use basically the firebase real-time database so you must include the firebase I mean you have to include this one firebase - database not Jess and then the last one is we will use storage I mean in order to save our files the image files basically so sto our AG storage dot J's firebears destroy dot yes so that's it now copy this and go to the signup page and also make sure to press this here inside the head okay and yeah that's it now let's come back to index dot JS file and now the next thing is just come here and click on this continue to the console okay and just come here to the authentication and then sign-in method and here you can see email password all you need is just to make it enabled so you can see it is now enabled so now in this tutorial let's complete our signup page ok signup dot HTML using the node.js we are going to allow the user to sign in into the air basically so just for now I mean for retesting purposes we are going to create a user from here but we will implement the signup I mean we sign a feature I mean we will allow the user to register using the firebase authentication from the signup page ok in the next tutorial now for now let's complete our login page I mean to allow user to log in so I'm going to create an email mean just for the testing purposes let's say at the Elliot gmail.com ok from here manually we are going to create account 2 3 4 5 6 and then add user and you can see this new user is created ok I mean we have created here in the firebase authentication just to test an implement our implemented interest our firebase sign in I mean to allow you to sign in using the firebase authentication so let's come here and now let me show you guys the sign-in page okay when I user click on this sign-in button login button then we have to perform the I mean the backend sign-in so we can access this button by this IB okay so just copy this beauty and - login ID from here copy it and come here to the index dot yes and after this we can say dollar put double quotation hash and past that ID here okay medium - login make sure to use the same ID dot click I mean this is the event okay just like in Android studio or iOS applications we have some events click event on tap event so here we will use the click event and then we can say function now first of all make sure to put a semicolon here and then here for two curly braces now let's move it to the next line and in here we need to get the email and password I mean the user will type some email here some password here and we have to get that email and password and store it inside some variable and verified I mean if the fields are the email field and the password field is empty or not and then we are going to login the user so here we can just say let me copy it for the time saving okay and the ID of the email is I mean the email field is it is email okay so you are going to access it by their email ID dot so you are getting the value and we are storing it inside this email variable now let's compare straight for the password and by the way the password field IDs Sam which is password okay you can verify it now what are you going to do we can test if the email not equals to null and password is not equal to null but you know what I mean this way is wrong we cannot write the null like this you can just put this true I mean in double quotation okay this basically means if it is empty just like this and then in here if both of these are not empty then we will write the port for allowing the user to sign in using the firebase authentication so yeah that's inside the earth statement let's display an alert or you can say a message to the user that is Windows dot alert and we are going to tell the user that is let's write a message that is please fill out all fuse okay that's it and now here or to make it I mean you can type any message you want okay this is totally up to you guys home is incomplete now in order to create it we can just say result equals two so our best dot earth dot sign in this is capital okay sign in with email and password just exactly type it okay make sure to notice these capital letters between these words I hope you know this I mean if you have a little bit experience with fire this then you will understand that media short like this I mean in order to sign in with the firebase authentication I mean I Bess so yeah the first parameter it needs as usual is email the second one is password and then by using this result we are going to tell that is if any error occurs or not then we will notify basically the user so you can say result dot H function ever sorry error and make sure to close this okay I don't know it is automatically created let me write it again catch just type it manually I mean this thing okay function error now make sure to put a semicolon here and here we can put two career s and we can say war error or equals to error dot board Oh error message is to error called dot message sorry it is using this object of a dot message so if any error occur during I mean clear assigned Allah during the sign-in process then it must display this I mean a window a lot let's say inside this window a lot week and if there is error message okay so you can just try there is message and let's pass the error message to it and if you want you can also display it inside the console okay here so we can just say console dot log inside the log and pass the error called and let's go Beth this is totally up to you I mean whatever you like I just want to tell you guys okay and yeah everything is now ready but we have to add the authentication state for this just now what is basically the authentication start or resistance you can just come here to this link I will provide in the description down below you can just click on it and come here you can read all these but the important part I was cover I mean I will explain that which for resistance we are going to use so basically you will be using this persistence of I which is fire resistant start local and basically indicates that the state will be persisted even when the browser window is closed or the acuity is destroyed in we are using node.js okay not react native this is just for explanation purpose in north or jeaious and explicit sign out is needed to clear the state note that firebase all web session or single host or again or a single two men only now basically this means that now what will happen if you do not add this persistence then if we login to the app okay and we close the browser then we will be automatically log out from the F but we do not want it like this I mean we cannot log out the user until the user press the logout button from the man app from the home page basically okay when the user click on the logout button then only in that case we want that the user will be logout from the app otherwise not or if the user clear I mean delete all the history okay only then we can logout the user so we will be using this one so let us just copy paste this okay and you can read these other ones which is dot session dot none okay you can read it if you want but I just explained this one which is important okay mostly we use this persistence dot local so it is up to you I mean whatever you like so yeah I mean here we can just test it at West or Earth dot or persistence dot local make sure to put a semicolon here let's just save it and let's see what we got I mean if it is working or not so it is running successfully let us go to the browser let's refresh the page and now let me write the email and what is the email this is the email and I'm going to type it calm one two three four five six then press on this login button and we are login successfully but what you imeem we have not created another page on which you will send a user in case of successful login so first of all what I'm going to do is let's just come here and let's read our that code specifically so in our signup page above this ending tag of body here we can say script let's close this I mean and basically you are not login okay because we have not now connected our this let me tell you this index dot guess file here I mean my user click on this then we have to do something I mean we have to send the user to some other page let's say to the home page so we have to include it here so we can just say SRC and inside the J's folder which is this one we have index dot JS file so you can say IND X and X dot GS so we just include that and now in the other script tag let's close this and in here we can say for bash sorry right bear got auth dot all state changed function make sure to put a semicolon here then two curly braces and fast user sorry which is basically in firebase user and we can say if user which means if the user is logged in and we are going to send the user Windows dot location dot equals two and let's go get our patch first okay so click here and we are going to create a new file which dot HTML home dot HTML and for now what I am going to do is I'm going to just display a message in heading hat hat heading text okay so HTML let's pp here the Hat tag then the body tag let's add our heading tag and you can say congratulations just for ten testing purposes okay so that we can see that it is working or not you are logged in and let's go near this page here which is the one home dot html' and if the user is not logged in I mean just copy the scripted from here if the user is not logged in then on the home page what we are going to do is you can just pair the tag scripted here and we are going to send the user to the sign in page okay sign in dot html' let's save it let's test it okay and no sorry the email is earlier through that gmail.com let's click on login and here you can see it congratulations I mean this is working really nice congratulations you are logged in successfully you know I hope you understand everything completely and successfully so in the next tutorial we will work on the signup page we will allow user to create a new account using the firebase authentication so take care of yourself bye for now

Channel: Muhammad Ali's Coding Cafe

Views: 53,157

Keywords: connect firebase to website, connect firebase to web app, firebase web project, firebase progressive web app, create firebase web app, create user firebase web, firebase node js setup, firebase node js database, firebase node js tutorial, firebase node js authentication, firebase node js crud, firebase web tutorial, firebase web app tutorial, firebase web crud, firebase web authentication tutorial, node js firebase tutorial, node js firebase, node js firebase authentication

Id: wQGTfuYFD6k

Length: 21min 35sec (1295 seconds)

Published: Mon Jul 22 2019