User Authentication with React & Firebase: Full Tutorial

imagine if you could easily Implement user authentication on all your website now what if I told you that in this video you were going to learn that in an hour I'm going to teach you the complete user authentication process using react and Firebase before we get started please help this channel by hitting the like button and subscribing I also want you to remind you that this is just a small fraction of my complete react course that you can find on udemy all right so without further Ado let me show you the project that we are going to build together today so here we can see the login page you can find the link for this project in the description of the video make sure to download and open on Visual Studio code so we can work together so the first thing the user is going to see is going to be this login page all the validation process here will be handled by Firebase for example if we try an invalid email we can see the correct error message showing down here also if we try to create a new account with an already existing user we also have an error and when we finally type in the correct credentials then we can go ahead and show the landing page for the user we also have this forgot password button that when clicked the user will receive an email to reset the password so all of that comes out of the box with Firebase and in this video I'm going to show you the complete process from creating a new project on Firebase to having all of this implemented so if you're ready I am ready let's get started so let's go to visual studio code and the first thing you need to do is download the initial version for this project so make sure to download it open the ter terminal run an mpm install or npmi so you can install all the dependencies then run vit so you can see it on the web browser so we are keeping the state with Redux we have reducers to do all the tasks we need here like toggle the is red property or erase a book everything is being handled now in Redux but we have these new components so if you go for example to the app.jsx and instead of using the books page here you use the login page this is ready for us to start working on the functionality so make sure to download this version run the npm install and run it on your web browser so we can get started so let's go to the next video so we can kick off this very cool project I'll see you then hey there in this video we're going to set up our first Firebase project so the first step is going to console. firebase.com and once you do it make sure to be logged in to your Gmail account if you don't have a Gmail account create one so you can use Firebase if you have multiple Gmail accounts like I do make sure to have the correct one selected before you go ahead so so now we can go to create a project and here let's choose a meaningful name for the project for example book list with Firebase let's check these two boxes and click continue now this is about Google analytics I want to avoid distractions as much as possible in this project so I'm going to disable the analytics for now now let's create a project this may take a minute so let me me speed up the video now the project is ready let's click continue and here we can see that we can use Firebase for iOS Android web unity and flutter in our case we are working on a web application with react so we are going to choose web now here we need to register the app I'm just going to choose the same thing so book list and let's click on also set up Firebase hosting this is important because later we are going to deploy the application so we can see it published online now let's register the app and now on the code side we need to do two things the first is to install Firebase in the project so let me copy this let me open a new terminal and run npm install Firebase okay now if we go to the package.json we can see that Firebase has been added to the list of depend encies and now going back there we have to import this code so let me copy the whole thing or just press this button here to just copy everything let's go back there and to keep things clean it is good that we add a new folder for Firebase so inside the source folder I'm going to add a new folder for Firebase and inside this folder I'm going to add one file called config.js and inside here we are going to paste all that code so this is going to come with all the API keys and everything to be configured and this is going to be available for us to use throughout our application we save this now let's go back there go to the next step now we need to install Firebase CLI so later on we can host our website with Firebase hosting this is going to install Firebase tools globally on your computer we can see the dash G flag right here so you can copy this and run this on the commment line I'm not going to do it for now because I already installed it previously but you can go ahead and do it if you have problems with permissions while you do that on Windows you can open Visual Studio code as administrator and then run this code on the terminal and on Mac you can add the PSE sudo before npm so sudo npm install and then you will be prompted to type in your password and you will be able to install it globally so let's go to the next step these are the things we are going to need to deploy the application we don't have to do this right now because we are just getting started we are not going to host it for now so let's go to the console and now we have the project setup and if we go to build we will see that we have many things here to manage on our website we have storage hosting we have the fir store database we have authentication and and these are some of the things that we will be using in this project we also have extensions we have machine learning so a lot of cool stuff that Firebase provides to you you also have interesting tools for releasing your project you have this whole analytics Tab and the engage tab which will give you AB testing and some more features so most of the things we will do will be under this build Tab and the first thing we are going to start is with authentication so we can now move on to the next video so we can get [Music] started hey there now that we have Firebase setup the first thing that we are going to work on in this project is going to be the login process for that we need to go to the Firebase console and configure a few things you can find authentication under build and and it is the first link once you go inside it for the first time it will be added to the project shortcut so here you have a few tutorials you can read the documentation you can watch this video but let's go straight to get started so we can follow the instructions now we need to choose one or more methods of login on our website every login method that we want to implement we are going to need to enable it first so for the for sake of Simplicity for this project I'm going to choose email and password the Gmail signin is also interesting but I don't want to spend too much time on the same thing because we have a lot of subjects to cover on Firebase to complete this project so let's go with email and password but once you learn how to set this up you will see how easy it is so you will be able to implement all these other providers easily if you want to do that let's go to email and password and let's enable it I'm not going to choose email link let's just go for the regular email and password login so let's save it and now this is enabled on the back end side so we can start implementing it on the front end now before we go back to visual studio code let me show you where the documentation is so you can go to the top right corner of the screen in this go to docs link then right here you have the complete documentation about Firebase I find it very simple to understand and they have a lot of coding examples so we are going to be coming back here a lot to get pieces of code and reuse in our project for authentication we can go to build then authentication once we go inside here we need to go to web which is the type of project we are working on and we can go to get started so here this is going to give you useful information about how to work with authentic ification so here we can see the configuration which we already placed on a separate file and the first thing we need to do is import get off and create the off variable so we can start working with authentication now instead of doing this on every component that needs authentication since we are going to need it on different locations let's do this on the configuration file so let's copy this line of code first and now let's go to the config file for Firebase which by the way I'm going to erase these comments if you want to keep it it's completely fine it's just explaining a few things I just prefer to keep it cleaner so I'm going to baste that line right here to import get off and I'm going to create the variable here and now one difference here is that since we are creating this variable inside the configuration file let's export this variable so we can use it in other components all right so now that we have created this let's go to the login page where we are going to get started you can see we have some State variables right here this is just to Define what is the login type if we are logging in or creating a new account this is important because the function we have to execute on Firebase is going to be different depending on if you are a new user or an existing user and there's also this is loading which we going to use to set a loader later so now whatever we need to use the authentication system we can just import it from here so we created that variable inside that configuration file and we exported it so now we can import from this component so let's do that now this is inside the views folder so let me just jump out of it then go to Firebase SLC config.js and before we do anything else let's just do a console.log with the a variable so we know what we have inside here let's save this let's go back there and now let's go to the inspector open the console and we can see we have a lot of properties regarding authentication including one that's going to be very important later which is the current user right now we are starting from the login page so we don't have any user logged in but once we are able to log in the application we are going to see the information of the user right here so now we have the authentication setup and as I've mentioned I have this state variable which is controlling if we want to log in or sign up I'm also changing the button down here so we can call different functions depending on what the user chooses so now we are ready to move on to the next video so we can start with sign up since we don't have any account created on the application yet let's start with the sign up process so hopefully by the end of the next video we are already able to create our first user I'll see you [Music] then hey there in this video we're going to build the functionality to sign up new users so the first thing we have to do here which will serve for both the login and the signup process is to get the information typed in these two feuds so let's go back to visual studio code and here we are inside the login page component we already brought the off variable and we did a console.log just to see what we have inside of here so the first thing we need to do here is to add the variables for the password and for the email we could add two different variables one for the email and one for the password but I want to teach you something that you can use and it's going to be useful especially when you are are handling bigger forms let's say you have a form with five or 10 feuds then it would be very tedious to create one state variable for each of the feuds so a cooler thing you can do is the following I'm going to create a new state variable and instead of defining it as the password or the email I'm going to call it user credentials and this is going to store both the email and the password so user credentials and set user credentials this is going to be a state variable and it is going to start as an empty object now the key thing here is that the names of the feuds so in this case the email and the password they have the names that we need as the final properties so this one is going to create a property called email and this one is going to create a property called password so what we have to do in these inputs is the following we are going to to set an unchange event for them when there is a change we are going to pass the event so we have access to which Feud is being changed and we are going to run this function called handle credentials and here we are going to pass the event and the cool thing here is that we are going to use the same function for the email and for the password and then we only have to create one function that will take care of all the f no matter how many feuds we have so right here I'm going to create a new function and every time we run this function we are going to set the user credentials again and we are going to bring the current user credentials let's use the spread operator to bring only the properties and we are going to replace dynamically the property that's being changed right now and we can do that using braces and we are going to pass e. Target do name which is going to be that attribute I just showed you and it is going to get e. Target dot value now to see if this is working let's do a console.log with the user credentials we save this we go back there now let's start typing something here so as you can see while I'm typing the email we are forming that object with the user credentials with the email now when we start typing the password we are now forming that object with the password property so the cool thing here like I mentioned is that if you have multiple form feuds you can just use that same function for all the feuds as long as in their name attributes they have the name of the property that you want in the final object okay so now that we are getting the credentials let's create a function so when we click the login or the sign up button we can send the credentials to Firebase so going back to visual studio code remember that we are going to need two different functions one for the login and one for the signup so let's start with the signup let's create a function called handled signup we are going to need to receive the event here to run the prevent default and don't submit the form and don't run the default form submission so we are going to start with e. prevent default and then we can start writing our function now we are going to copy this and let's go down here let's find that button so here we have the button for the sign up this is the one we want to attach this function to so we are onclick going to call a function passing the event this is going to be the handle sign up and we are going to pass the event with it now let's do a console.log here just to see if everything is working and then we need to choose sign up when we click sign up we can see that this is firing so now we need to know which function we should call from Firebase and what information we need to send so let's go to the documentation let's go to build authentication then web and let's go to password authentication let's remember that the method we chose was the email and password authentication if you are setting up Google login or Facebook or any of the other methods then you can just go to the correct documentation so for the password authentication here is how we should send the information to Firebase when we want to create a new account here we have coding examples with web modular API and web namespaced API I prefer to use the web modular API so here we have to import a few things from Firebase slash off let's get this now and going back there one would be the get off but we don't have to bring this one because remember that we are already running get off in this off variable so this is the one we are going to use and we need to bring only the create user with email and password now let's get the rest of the code here like I mentioned we already have the off variable we don't need to write that part so let's copy the rest of it and let's bring it here and inside our function we are going to paste that code and let's understand it this is an asynchronous function this is going to return a promise because we are going to submit this information to the server and when it is back we're going to be inside the then so as you can see when we get inside it means that we successfully created the user and we are now signed in if there is an error in the Pro process we are going to go inside the catch and we are going to have important information about the error now we just need to do some adjustments because remember that we have the email and the password in the same object which is called user credentials so here we are going to get these credentials from this state variable and if we are able to sign in then we are going to create the user let's send it to the console if we can't then let's just send the error so I'm going to send the error code and also the error message all right so let's go back there and see what happens now here let's remember to choose sign up and let's start with an invalid email and a one two three password let's click sign up and as you can see see we sent the request to Firebase and Firebase returned telling us that there was an error in this case it was an invalid email so like I mentioned in the introduction video Firebase is going to handle all these cases for us so now that we are receiving back an error we can show the error on the page we are going to handle this in the next video but for now let me try to create a valid account so I'm going to to use this email and I'm going to set the password as 1 2 3 4 5 6 let's sign up and it took a while and as you can see we received this object back from Firebase and this means that we were able to successfully create a new user and we are now logged in the two most important pieces of information here are the email and the user ID now we are not seeing anything in the interface because we still have to to manage what happens after we are logged in but if we go to Firebase now and go to authentication we can see that this user already appeared in the list of users so very quickly we were able to handle the account creation process now let's go to the next video so we can handle the errors and show the error message below the button I'll see you then hello in this video we're going to handle the errors we received back from Firebase so let's go to visual studio code and let's remember that we have two situations here one if the request is successful which we we are sending the user to the console and another one for the error so what we need to do is show the error to the user somehow and I think the best way of doing this is to add an error element right below the submit button so right here let's add an element and let's be careful with the class name here because we have some CSS for this so I created something in the CSS for a class name of error so let's add div. error and here if we type something like error we save this we go back there we can see that this red message is going to show below the button and this is where we want to send the error to now we don't want to be displaying this Feud all the time so a nice way of doing this is using declarative UI which means that we are going to have a state variable controlling the error and we are only going to show it if there is some error so we can start the curly braces and if there is an error then we can show this element and what we want to show inside here instead is the error so let's create this state variable at the top here where we have the other state variables we can create one called error and set error it's going to start as an empty string and now down here when we have any error we are just going to set the value to that variable and then it is going to be visible on the page so we are going to use set error to define a value to that state variable and we are going to pass the error message so let me just clean all these console. logs this one as well and as well as this one now here we can also delete the comments so we can start cleaning things up now we know that we have error code and error message we don't need to keep these things here anymore and we can now save this go back there and let's try again I'm going to refresh the page and I'm going to start with an invalid email try to sign up and then as you can see Firebase sends us back that error and we are showing this error right here so now any situation that can happen here for example if we try to create an account with an already existing user let's do that right now I'm going to use that same email that I already created an account with and I'm going to click sign up and as you can see now we are seeing a different error saying that the password should be at least six characters let's choose one with six characters click sign up and now as you can see there's an error again because the email is already in use of course we could personalize this message by getting the error code and creating like a dictionary where we could have our own error messages but for this example this is clear enough so we can see that we can't create an account because this email is already in use so like I mentioned Firebase is handling all these login problems for us we just have to get the error back and show it to the user now one thing we can do is clean this message when we try again you can do this when you type again or when you click the button again it's really up to you and the way we are going to do this is the following if we go back there we can copy this and after seeing the error we could have it right here so when we start typing again we are going to erase that message this would be one way of handling this so let's go back there and see let's press sign up we see the error and when we click the feud and start typing again we don't see the message that's one way of doing this but I prefer to leave the error message so the user remembers what was the problem while trying again so instead of cleaning this up here I'm going to clean this up when we try again so when we click the button to submit again then I will clean up that error message so let me refresh the page the error message will be shown now let me enter a valid email and a valid password and when we click sign up the error message disappeared and now we are probably logged in if we go to Firebase let's refresh the users list as you can see the new account has been created and now of course we need to see this being reflected in the UI but first we need to work on the login process so this is what we are going to do in the next video I'll see you [Music] then hey there in this video we are going to work on the login process which is going to be very similar to the signup one the only difference will be the function we are going to call from Firebase so let's go to the documentation and let's remember that we were under password authentication so this was the part to create a new account now that we are able to create accounts let's see how we can log in with existing ones so let's scroll down and here we can see sign in a user with an email and password and this is exactly what we need we don't need to import all of this again just to sign in with email and password function so as you can see the names are pretty much self-explanatory so going back to visual studio code up here we are going to import this this function and the names of the functions are super long and we are going to need more functions in the next videos so I prefer to break a few lines for the ones from Firebase so let's leave it like this and then we'll be able to read better all the functions we are importing from Firebase now going back there let's see the example so this is going to be what we are going to do let's copy all this and what we need to do here is create a function to handle the login so let's add a new function let's call it handle login let's paste all this here here we are going to need the event as well so we can do the prevent default things will be pretty similar inside here so we are going to run this and then we are going to reset the error and again we are going to set any errors that occur to that variable so we can see it reflected in the UI and here we will place the code with what happens if there is a success in the login so for this let's just do a console.log just so we know that the process happened without any problems and I'm going to do the same up here as well just so we know if the process occurred without any any problems now let's not forget to adjust the email and password let's save this and we need to add the Handler to the button so let's go down there and remember that we have a sign up button which is different from the login button so let's add it to the login button and here this is going to be handle login now we save this go back to the page let's refresh the page let's try a few errors first so again an invalid email we click login and we see the error showing right here now let's try that account we already created so I will try a wrong password login and as you can see wrong password now I'm going to use the correct one log in and this time we were able to log in successfully so as you can see once we did the first part the second was super easy we just had to call a different function now we are almost ready to go on and decide what we are going to show to the logged in users there's one little thing that we still have to do in this screen which is the forgot password button and this is what we are going to do in the next video hi there in this video we're going to build the reset password functionality this is going to be something extremely simple we just have to import a new function from Firebase so let's go to visual studio code and if we scroll down in the login page we can see we have this button right here and what we have to do here is set the onclick event and then we are going to call a function called handle password reset this is going to be a function that we will create right now so let's copy the name of it let's go to the top and here let's create a function with that name we don't need to pass the event for this one we're just going to have to do a few things so the first is getting the email now the problem here is the following some people will click on the forgot password without typing in anything so I don't think getting the email from this field is the best option in this case normally when you click forgot password you need to retype your email and here we can do this with the prompt function so let's create a new variable for the email and we are going to prompt the user to type in again so we can type something like please enter your email and then we are ready to execute the function from Firebase and the name of this function is send password reset email what we need to send as an argument is first the authentication and then the email address now let's not forget to import this function so at the top here let's import it from Firebase and then we can send a final message to the user so we could say something like email sent check your inbox for password reset instructions okay saving this let's go back there refresh the page let's click forgot password as you can see the feud was blank but this is still going to work because need to retype the email so the email was react. Firebase doour at gmail.com click okay email sent let's go to the inbox to check as you can see the email is already here which is fantastic let's click on the link let's reset the password save this and now if we try to log in now we are able to log in with the new password so as you can see one more time something that would require a lot of work from our side is made very simple with Firebase now one thing here is if you don't like this template as you can see there's the name of the project which is not cool there's also this message if you want to change the template for this email you can easily do that from Firebase you can just go to authentication and then templates so as you can see we have the password reset email which is the one we just received and it's showing the app name right here in the subject as well that's why we are seeing the project name so if you want to change this you can just go to edit template you can change the sender name you can change the subject all the text of the email so then it is going to have the template you want for your application all right so this part is also done so in the next video we are going to show the users the home screen of our application I'll see you [Music] then hey there now that we've finished all the work needed in the login page we are handling the errors we have the process set up for logging in and signing up new users we have the forgot password button working now we ready to go on and show the homepage for loged in users so let's go to visual studio code and the first thing we need to do here is create a piece of State in the application where we can store the logged in user this is an information that could be used by different components so it is a good idea to have an app level State and we are going to use Redux to do that for us let's remember that we have a few slices here so what we built in the previous section was this application with one slice for the notes and one slice for the books and now we are going to create a new slice for the users so let's create a new file right here and let's call it users slice now we can copy everything from the note slice just so we save some time now we are going to call this user slice let's adjust the name the initial state is going to be an object instead and there will be a property called current user which is going to start as no now for the reducers we are just going to have one reducer which is going to be to set the user we are going to use this function to both log in a user and to log it out so here let's call users which is going to be the state inside this slice and the action and what we are going to do here is the following we are going to do user do current user is going to be what we receive in the action so that's pretty much what we need for now and here we can just export the set user let's not forget to adjust the name of the slice here we are going to have a select users and let's correct it here here as well so this is all we need for the reducer let's not forget to add it to the list right here so we are going to have a new slice right now which is going to be the one for the users and let's import it from here now there are just two things that we have to do here first when we finish the login we need to set the user in the state so for this let's go up here and let's import the use this patch actually we can go to another component and just copy this line of code so we are going to bring use dispatch and let's go to the single book page we are importing a reducer right here so we can do the same thing right here we are going to bring use dispatch and we are going to bring set user from the users slice so right at the top here let's create a variable for the dispatch and now once we are able to log in or create an account successfully which at the moment we are just sending this console.log we can actually go ahead and set the user so I'm going to to leave the console.log for now just in case there are any errors we can see how this object is coming but here we can dispatch that action the name of it is set user and we are going to pass an object with an ID which is going to come from user credential do user and let's remember that one of the properties we had was called U ID when we log in this is the ID of the user and we are also going to create a property called email so we can store the email of the logged in user and this is going to be inside the email property now this what we are doing right here dispatching the action from here this is not what is recommended by Firebase but let's do it here first and then I will show you what is the recommendation from Firebase and what are the problems we can have in dispatching this from here now let's copy this line of code and let's do the same thing for the handle login now in the user slice in the set user function we can also do a console.log just to see if we are reaching this point in case there is any error I'm going to send this to the console also the payload just in case we need need to fix some issues so let's save this and let's see if this is working going back there let me open the inspector I'm going to sign in with my credentials we log in and as you can see we are reaching the set user and at this point we were able to set the user with the correct email and ID pretty cool now we can go back there we can already remove this console.log from here we know that this is working fine so we just need to go to the app page and instead of showing the login page we need to show the ad book page so here we need to select the user let's remember that inside the slice we have this select users so let's import it this is inside the store folder inside the users slice file and now we can just create a new variable for the user and we are going to use selector and let's use the select users so at this point we know if we have a user logged in or or not so we just need to decide what to show the user now let me show you the wrong way first because many people make this mistake so we could think that we could go inside the roots and we could do the tests right here so if we have a user do current user set let's remember that this is the property we created inside the reducer then we build this route again let me remind you that this is not the correct way but I just want to show you something real quick if we don't have then we can just go ahead and show the login page like we had before and here we are going to show the books page which was the original homepage of our application now before we save this let's just import the use selector I forgot to do this this has to come from react Redux so import use selector from react Redux now we can save this go back there and first we are seeing the login page let's log in do the login the login is done and we are able to land on the front page this is really cool but there is one little problem with this approach Let me refresh the page so we can be logged out and even though when we land on the application we are seeing the login page when we are logged out even if we are loged loed out and we go to a different URL for example the adbook URL as you can see we are able to access this page even without being logged in of course we wouldn't be able to add a book because to do that to add a book to the database we need to be logged in and Firebase would return an error we wouldn't be able to change anything but just the fact that we can enter here is already a problem so what we did wrong here is that we form the URLs and just inside here we decided what to show as the front page so all the other roots are built even with the user logged out so this is what I wanted to show you because I've seen this mistake before and what we need to do instead is the following this test has to be done outside here and then we can remove this URL for the login page and all of this is only going to be built if the user is logged in if not then we are just going to show the login page without any Roots now let's close the curly braces right here and now if we save this and go back there we can see we have the login page even in the slash adbook so we can't access other URLs of the page if we try to go to slash adbook this is not going to work because before logging in we are not building that routing structure so let's log in again and now we are able to view the page we were trying to view and this is the expected Behavior now there is one thing we need to improve here not sure if you notice but I was logged in and just because I refreshed the page to go to a different URL I got logged out again and this of course is a terrible experience for the user if every time we refresh the page we have to log in again we are not going to want to use this application at all so what we need to do is pist the login State the good news is that with Firebase there is a native function that can handle that for us and this is what we are going to do in the next video I'll see you [Music] then hey there in the previous this video we were able to land the logged in users on the homepage but there is one problem that we need to fix here because the login state is not persistent which means that if we copy this URL and open a different tab as you can see we are not logged in on this tab if we refresh the page here we are going to be logged out as I showed you in the previous video and also if we press control and open link on a different tab for example I want to view this book in a different tab I can't do it because I'm being logged out this is because we need the login state to persist in the browser session so this is something super simple to do with Firebase so let's go to the documentation and let's search here for set persistence let's click here so as you can see for a web application the default behavior is to persist a user session even after the user closes the browser it is just giving us a warning that some applications for example ones that contain sensitive data this has to be done differently but for our books application it is completely fine to just use the default Behavior if you're working on an application like this you can scroll down and there are some instructions on how you can change the persistence Behavior but in our example ex Le why is this not working why isn't the default Behavior not working remember that when we were creating the login function I told you that dispatching this set user function from here wasn't the correct thing to do so the thing is Firebase is keeping the persistence in the browser session but the problem is that we are only setting the user in the state when we run these functions so when we open our application on another page we are never reaching this point so this is why we are being logged out we can actually do a quick test right here so we can get the off and right at the top here we can do a console.log off let's save this let's go back there Let me refresh the page as you can see we have a current user we have the email right here and the user ID so Firebase knows that we are logged in we are logged in in this session Firebase is only going to log us out when we Define a log out function but like I explained we are never reaching this code because we loaded the application again and of course we not running these functions on page load so this is why it's not a good idea to dispatch this from here instead let's go to the documentation now let's go to the authentication section on get started and if we scroll down to set an authentication State Observer we will see that this is the recommended method to know if a user is logged in or not so remember that we were only setting ing the user to the state after the login function but the recommended method is by using this Observer this is going to ensure that when we open a different tab Firebase will get the current logged in state and we'll do what has to be done so let's copy this piece of code and here we can already delete this console.log what we have to do in the login page is the following when we go to a different tab we are going to land here anyway because we won't have a user set in the state yet so we are going to go to this page and when we go to this page we can run that Observer so we can do it at the top here first we need to import this so let's import this from Firebase so if there is a user we are going to do something so here we can just copy this dispatch and right here here we just have to change this to user so user. uid and the email is going to be user. email now we don't need this part of the code if this Observer detects that there is no user set we need to clean the state so we can be logged out of other tabs as well so here we are going to set the user to know again this is important it can't be an empty object because if we set an empty object this is not going to evaluate as false but a new value will evaluate as false so now we can save this we can go back there and now we are logged in and as you can see we saw the login page when we refresh the page then we got the information from Firebase and we populated our user state this is because this Observer runs for the first time when we load the component and then again whenever there is a change in the logged in state now the cool thing is that since this is going to run once and then every time the state changes we don't even need to have this then block right here because when we logged in there will be a change in the state of authentication and we are going to run the function of that Observer so we can remove both of these here this might be a bit confusing for whoever is looking at the code so if you want to leave the then and maybe leave a comment you can do that but we don't need to run that code here because whenever there is a change we are going to dispatch It Anyway from here so we are almost done with the authentication now we just need to work in the logout function and this is what we are going to do in the next video I'll see you then hey there in this video we're going to work in the logout function in the previous video we set the persistence so now even if we close all tabs open another browser window is still going to be logged in so we need to be able to log out when we want to so let's go to the documentation right below authentication web we can go to password authentication and if we scoll SC down to the bottom we will see how we can sign user out and we are going to use the sign out function so let's copy this part of the code let's go to visual studio code and we are going to need to do this in the header because this is where we have the log out button so I'm going to import this right here I'm not going to bring get off because instead I'm going to get that's the off from our config file and let's copy this part of the code and we are going to place this inside a function that we can call handle sign out and then we can call the sign out function now before doing this let's confirm with the user if he's sure he wants to sign out so if and let's use a confirm box let's tell the user are you sure you want to log out then if the user says yes we can go ahead and run this so we are going to sign out from from Firebase and then we also need to clean our state so this is reflected in the state of our application because if we don't do that on our side as well we won't be able to do anything related to Firebase and the database that we're going to implement later but we're going to still be able to move around inside the page so we need to make sure that we are going to clean our state so let's go to the login page and bring some things over here we going to need the set user and the use dispatch so going back to the header let's paste it here and we also need to create the dispatch variable let's do that now before we create the function and we can also copy this dispatch from here so if we have a successful sign out we can dispatch if not we can send something to the console there's not a big chance of any errors occurring right here because in the end this is just a function without arguments you're just telling Firebase to log out there's not much that can go wrong here but anyway if there is an error we can send the error to the console now the only thing missing is setting the click event for that button so let's copy the name of the function let's go down to the button here it is let's add the onclick event and when we click the button we are going to call handle sign out so when we go back there we can click log out it is going to ask us if we want to log out we click cancel nothing happens we click log out okay and now we are logged out now if we go to another tab we can see that we have been logged out from other tabs as well now if we go back here and log in again we click login we logged in and if we go to the other tab we were automatically logged in this is because we have that Observer that's paying attention to the off State so this is really good we are done with the login log out process there's just one thing that could be improved here which is the following let me log in again so now we are logged in if I copy the address and I paste on a separate tab press enter we are going to see the login page for a moment this was very fast we didn't see it but let's try to maybe open the book and then refreshing the page as you can see we saw the login page for a moment and ideally instead of seeing the login page like this it would be better if we could see a loader and this is what we are going to do in the next video I'll see you then hey there in this video we are going to do one last Improvement here to the login process we're done with all the functionality needed but as we saw in the previous video when we are logged in and we refresh the page or go to another tab sometimes we see this page for a moment before we can get the off information from Firebase so ideally when that happens we shouldn't be seeing that page but a loader so let's go to visual studio code and if we go to the login page there is something that I left right here which is this component called full page loader let's see what we have inside this component is right here and this is just a CSS loader so if on this page we have the full page loader and as you can see we have already this condition here if is loading is set to true then we are going to show this component and where is this variable this is a state variable that I left right here so if this is set to True let me save this let's go back there as you can see we don't see anything anymore because this is an element with an absolute position that is taking the whole screen 100% of the width and 100% of the height with a white background this is why we can't see anything behind this element so what I'm going to do here is the following we are going to start this page with the is loading set to true but whenever we have the onof state changed we are going to set it to false so we can do set is loading and then only here we can set it to false so when we open another tab before we check the status of the off object we are going to be seeing the loader after we Define what should happen if we are going to see the homepage or if we are going to see the login page then we are going to hide the loader and see the page we want to see so if we save this now and go back there let me just refresh the page as you can see we saw the loader for a moment which is something that exists in many websites and now I'm going to log in and what happened here is that the page got frozen and why is that this is because this is running again and again and again because we are changing the state of the application making this run again so this is running infinitely because when we change the value of set is loading we cause the application to reender and that fires this Observer to run again causing an infinite Loop so what we have to do instead is first we need to test if is loading is set to true if it is we are going to set it to false now doing this we make sure that we run this only once when we load the page then is loading is going to be set to false and we are not going to go inside here anymore so let's save this let's go back there Let me refresh the page maybe I will need to close this tab let me exit the page now load it again and we can see the loader when we first land on the page now let me log in again we log in we see the books and everything and if we go inside this page and we refresh the page we're going to see the loader for a moment and then we will see the information on the page and this is much better than seeing that login page even when we were already logged in so let me try to log out and we are done with the authentication process thank you for watching this video I hope you enjoyed if you have any questions you can always leave them in the comment section below don't forget that the video you just watch is a small fraction of my complete react course that you can find on YouTube to me make sure to check the description of this video or the link with the promotional discount

Channel: Daweb Schools • Learn to code today!

Views: 6,904

Keywords: react, reactjs, firebase, webdevelopment, frontenddevelopment, javascript, reacttutorial, learntocode, userauthentication

Id: cyqDCloxPNE

Length: 63min 35sec (3815 seconds)

Published: Mon Oct 16 2023