React Firebase Authentication Tutorial | Firebase 9 Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be teaching you guys how to build um some sort of authentication system using firebase 9 and above um in react so firebase updated to its new version and i realized there aren't a lot of videos using this new version and since firebase and since firebase is a very commonly used technology um i decided to make this video and what i'm going to teach you guys how to do is basically a very simple web page like this the reason is that i want to focus purely on functionality and how to make it work um but basically as you can see i can come over here create a user i put like an email like user gmail.com then um put a password like password um click create user um initially it will automatically log in as you can see it says user gmail.com is logged in and now you can click on the signup button if you want um so i'll click on it and you can see it's not logged in anymore um if i also if i try to log in with the same account like user gmail.com you should see that um it will in um and we'll see this again and this is persistent meaning that if i come over here um copy this link open a new tab close this and go again the user at gmail.com will still be logged in until we just sign up so it's a very since it's like simple authentication system which i will show you guys how to make so before we get into the video if you guys could leave a like and subscribe i would massively appreciate it because it will help push my videos to more people and it would just help the channel grow which i'm really happy with the growth rate um but if you guys could help me out i would really appreciate it so with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] and i basically didn't change anything all i did was i created a react app then i came over here instead of my app.js i added like the basic html structure of this which is very simple so i didn't see the point of just showing it um all i did is i just put a bunch of um h3 tags a bunch of inputs one for the email one for the password this is for the register user part of the website then a button that says create user and then another another div with um the login header um two inputs for the login the button and then we have this another header over here which is just going to show the you the email of the person who is logged in and finally i added a button which is going to be the sign out button so by the way the code for all of this will be in the description so even if you're having some trouble just setting up this initial state don't worry you can just copy and paste the code from the description which will be working perfectly so what do we need to do now well with every firebase project we need to start by installing the firebase library so we're going to open this up over here we're going to open up like a terminal as you can see and inside of this terminal i'm going to install by using yarn add and then the library which is firebase if you're using npm just write npm install firebase and we'll press enter this will install start installing all the packages and we can already start by creating over here inside of our source folder a file called the firebase config this is how i like it i like to call it um but basically it's just a javascript file which will contain all the like the configuration information for firebase this is necessary for every firebase project and if you're interested in like if it's your first time using firebase um i would recommend actually watching a video i posted last week where i teach the basics of firebase um but you won't need that because i'll also explain what the firebase config file uh like does so now that we've created this and the firebase library has been installed we'll just close this terminal over here by just pressing this what we need to do now is we need to fill up this firebase config file and the way we do this is we need we need to actually go to firebase.com so go to firebase.google.com um i'll go to console and if you don't have a firebase account you can just create one then i'll come over here to to this and we'll say your firebase project if it is your first firebase project this will probably be empty uh but since it isn't mine i'll i'll just click over here to add project which you guys should do as well then we need to put a project name i'll call this um authentication tutorial something like that um but you can put whatever you want uh let's go to continue then it will ask a bunch of stuff i'll just ignore this and click continue again then we'll ask for an account um i'll just select the default account for firebase then click on create project and it will start creating our firebase project this doesn't take long at all but when it finishes creating i'll be back in a second as you can see it says your new project is ready so i'll click on continue and it will generate this page over here so since we're focusing primarily on authentication i will only work with the authentication part of the firebase system and again if you want to learn about firestore i have a video explaining there um how to like add stuff to the database and stuff so if you're interested in that you can just watch that video so what we need to do first is we need to set up a connection between our react app with our firebase application so come over here to this button then go to project settings and i'll scroll down over here and you should see that it says that there's no apps in your project so we need to generate an app so i'll click on this over here which basically means web because we're making a website and i'll give a nickname to this web app which let's call it again tutorial firebase i don't know whatever i want and i'll click over here and i'll click on register app then when this app is registered it will generate as you can see a bunch of code that we should put inside of our react app more specifically what we need is we need this import statement over here called initialize app so we'll just come to this firebase config file and we'll just put the initialize app at the top um and then we need to copy this whole firebase config thing over here and just come over here and paste it directly i do recommend if you're interested in publishing this app to use environment variables for this over here i won't be using because um this i'll delete this project right after i've made this video but this information over here is very crucial that like it's very important that you keep it a secret so using environment variables and not publishing this to github is uh necessary so i wouldn't publish this to github i'll just keep it like this and yeah that's that's basically it um this is the information we're gonna use to connect to our firebase app so now all we do is we just create a variable called app and we set it equal to um initialize app and we pass the firebase config and this will initialize the connection between firebase and our project and this app variable over here is extremely important because with that we're able to add to our project all the different things that firebase provides for example since we want to add authentication i'll come over here and you'll see all this page over here but what we want to click is we want to click on get started and it will open up the authentication kind of console and it will ask a bunch of stuff most importantly you can authenticate with firebase with all of these different things over here which is amazing it's one of the best ways in my opinion to authenticate because it is secure and it's really easy so you can authenticate with google facebook um even game center i don't even know who uses that um but even with a phone or like phone verification and email and password which is the one we're going to be using most websites use this over here so that's what i will be using i'll click on email and password and you can see that if we click on this over here it should enable this authentication type for our project now it also allows you to authenticate without a password by emailing you a link and i can make a video on that if you guys want but we won't be using that but it's really cool that you're able to do that as well so now that we enabled email and password authentication i'll click save and you can see that it says it's enabled but most importantly um we can click on users over here and you should see that um it has a little management place over here um so that we can add users for our project so instead of creating a database on firestar separately and i'm storing user like authentication information there the authentication part of firebase already handles this so no matter which sign-in method you create if a user signs in and creates an account or registers to your project their information will be hold over here their information will be held over here so with that in mind um let's start by um implementing the authentication stuff directly into our project since we just um set it up so that it's it's enabled so what we do to to start adding authentication to our project is we need to come over here and we need to import a part a a thing from the authentication library inside of firebase so to access that we just need to say firebase slash off and everything related to authentication will be in the slash auth path in the firebase library so the first thing we need is the get auth function which is similar to the initialize app it basically says that your app will be using authentication so we'll come down here at the bottom and we'll create a variable called auth and set it equal to get off and pass the app to this so that we say that this app will have authentication but one thing we need to realize is that we also want to access this auth variable in many different files in our project so i'll just write export so that if we want to use this we can just import it in different files and now that we set this up this is basically done we don't need to do anything else here so i'll close this firebase config.js and i'll open up our app.js which already has a bunch of stuff but as i mentioned before all of this is very simple they're just html stuff included into our project what really happens here and what really needs to be done in order to make authentication actually work is first of all we need to create a few different functions that are going to be used in our project the first one will be the crea register function which uh will be used to register user then we're gonna have a login function which will be used to log in um if you already have an account and finally we're going to have the log out function which as by the name you should imagine it will contain the log out functionality so what i want to do is with firebase most of the functions will be um will return a promise which means that there's two different ways for you to handle them either you use the promise like the dot then and dot catch um like syntax or you make like you use the async await um syntax um if you're confused about both of them i do have a video which i'm going to link into a card up here um which explain both of the approaches but both of them work and you should see examples using either way um so it doesn't really matter i'll be using async awaits since it is the most modern way to to handle this so if just to keep that in mind i'll be using async await so because of that i need to make all of this functions async because inside of them we'll be dealing with firebase stuff and i'll just save this for now this will probably give us an error because we're not doing anything inside of the functions but what we need to do is um but now that we have the functions done we need to do something which is crucial for this project which is we need to get the data or whatever the user is writing inside of this inputs so we have two inputs over here which are the um email and password for regstring and we have the input for email and password for login so how do we get whatever is written on each of them so that the user or when we sign in or when we call these functions over here we know what data the users or which which email and password the user is trying to use to sign in well to do that it's pretty uh easy all we have to do is take use of the use state hook in react so i'll create four states uh so the first one will be used all of them will be a string and the first one will be the register email which will be the email used to register a new account and it will contain a function called set register email like this and we'll do the same thing for the password so register password and i'm set register password over here and then finally we'll do the exact same thing for both the email and the password of the login but we'll call it um login email and login password so i'll just copy this paste it over here and then i'll copy this and paste it over here as well but change this to a capital l and do the same thing with the password and those states will hold in whatever info we have or whatever value our inputs currently have which is exactly what we need so in order to say that i want to change the value of the register email state for example whenever someone changes the whatever is written inside of the email input we just have to give it an unchanged over here an unchanged property that will automatically change every time there's a change inside of the input um so just say set register email equal to event dot target val if you're not familiar with the syntax this is really basic and react and i would definitely recommend um learning this before trying to deal with authentication because it will get pretty confusing um but basically we're just setting the input or the state value to whatever is written inside of the input so just copy and paste the on change into the other input for the password but change this to set to register password instead of set register email and i'll do the exact same thing with the login but it won't be login it will be oh it won't be registered it will be login and for the password the same thing but it won't be email and register it will be login and password like this so now we're keeping track of all of the values inside of the inputs which means that we can actually start implementing the firebase authentication stuff inside of these functions and as per usual we're going to start with the register so that we can actually create users into our account so the way we do this is there's a function inside of um the firebase library which is the create user with email and password it is pretty self-explanatory by the name and almost all of the functions in firebase are very like the names are really good which i really like um so what we're going to do is we need to import that and we'll import that from the firebase library inside of the auth directory and we'll just say create user with email and password and instead of this register over here we'll write await create user with email and password why do we say await is because as i mentioned this will return a promise so if we want to get that promise we'll just say const user equal to this and this function over here create user with email and password it will automatically generate a new user and add it into our users thing over here but at the same time it will also log you in so if you create a user an account you don't need to log in you you create an account and log in automatically and the user information will be stored inside of this user variable over here now if we want to deal with like errors um since we're not using the dot then and dot catch approach we need to actually put this inside of a try catch um and handle the errors in the catch case so we'll say catch error and we'll just for now console log any errors that occurs we can actually grab the message um for example if there's any error inside of this we can grab the error message and just console log that now what are possible errors that can occur here well a user can try to log in with or try to create an account um with information that is false like um an email that doesn't um like an email that isn't an email or some stuff like that but these errors will most likely occur more in the login since people can try to log in with accounts that don't exist so this is how we would handle that cases um one important thing to understand is that when we grab this user over here we can try and console login like this console.log user and and this user variable over here will contain all the user information we need um like if we want to access information about the user um so for now just console.log it over here now one thing to keep in mind is we're not actually filling anything inside of this query user with email and password we actually need to pass two things over here in order for it to work the first thing we need to pass is um our auth variable and the reason for that is because we want to say that we want to like reference to which app we're talking about which firebase app we're talking about so that's why we created this auth variable and we exported it so we need to get it up here at the top so i'll just say import from the dot slash firebase config file and i'll import the auth variable and i'll first pass it over here i'll pass off and then we just need to pass the email and password being used to create a new account which in our case is the regis register email like this register email and the register password like this so i'll save this um and you'll see over here we have registered email and registered password and now um if we try this out which i'll do right now i'll come over here and now all we have to do to make this work is we need to copy this register function name over here and paste it as the on click for the create user button so just pass this over here and when we click on the button it should indeed um create a new user inside of our firebase thing over here so let's try that out let's come over here let's write um a new email i'll write a fake email like page attack gmail.com let's write a password let's write password 123. when i click create user it shouldn't break anything which seems like the case and if i click on my console you see that we're console logging something called user credentials because we told our code to console.log the user after it creates and indeed it created a correct user a curry like you can see we have an access token we have our email we have a bunch of information which we can all access anytime we want because this is this means that the user logged in and if you really want to test to see if it's working we can come to the authentication tutorial part over here which is the the authentication page and if we refresh this we can see we now have a new user we can see how they were how they logged in we can see their email we can see when they were created and when they last signed in because we automatically signed in when we created our account now you might be wondering well but what about this over here it's not showing the name of the user who signed in yeah obviously it's not showing because um we didn't set it up to show uh what we need to do in order to make um this part over here show like the email of the user who is logged in is we need to access the auth variable that we just um got from our app and we can say dot current user and this should represent uh the user that logged in and if we say something like dot email it should show the information about the user so the email about the user who is logged in and auth remember is just a variable that we got from the firebase config the variable contains the information about who is currently logged in and you can see that it works for us it shows that page attack gmail.com is logged in which is perfect but there's a caveat if i refresh my page it will give us an error and the reason for that is because um it's not actually like how can i say this it's not actually like when you refresh your page this auth variable doesn't contain a current user because it needs to wait a bit for it to populate information and validate the user who is currently authenticated so the way we handle this is i'm going to create a state called user over here so i'll say const user so this will just represent the user who is currently logged in and it will be equal to um an object so i'll say use state and it will be an object and what we want is we want to grab something from this firebase auth library called on off state changed and this is actually a function that can be used to rep that will be fired or triggered every time there's a change in the auth state so what i mean by that is if i refresh my page and firebase recognizes that or if i just go into this website for the first time and firebase recognizes that i i was logged in it will automatically change the value of this um auth variable over here to contain the user who is logged in so over here at the top what i'll do is i'll call this on auth state changed i'll pass the auth variable and we can actually grab the current user directly from here like this it's almost like um it's a like the use effect which is a hook in react it's very similar to that um it's just a hook that you pass the auth and you have a callback function over here it is very simple to to use all you have to do is um you just have to pass the off then you grab the you make a callback function which um tells us what to do when the user changed their login so if they log into another account or if they sign out so what do we want to do is we just want to set user to be equal to uh the current user that is logged in which is the thing we got from here so now instead of saying that we want to grab the current email from the auth we just say that we want to grab the current email from the user state which will work perfectly because user is being populated only when the auth variable actually changes so when we refresh the page you should see that it says page attack gmail.com because we are logged in and it's not giving us any errors so this is perfectly done um and it's really nice one thing i want to show you is how can we actually sign out so in order to sign out we'll just come over here and i'll come to this log out button over here and it's pretty simple actually all we do is we just call a function called um sign out and i'll just put this over here and we just pass the off variable as the argument to this function now we need to import sign out from um the the firebase auth library so i'll just put it over here and this actually should work perfectly so i'll copy this log out and put it as the on click for the cyanide button over here i'll say on click and i'll put log out and you can see that if i click on the logout button we we should sign out now it's given us an error again because it says that we cannot read um email from user which is the object and the reason for that is because when we log out this user object over here or this user state becomes empty again because it will it means that our auth state changed so the current user is now an empty object because we logged out right so now we're trying to access email from a user object which doesn't have the email property so all we have to do to fix this is very simple we just put a question mark over here which means that if user has an email property then show that information if not just chill don't do anything so i'll save this and you should see that it's it works it works perfectly um so now that we have this kind of done we have the register part and the logout part kind of done what we need to do is do our login functionality so what if the user already has an account and they want to log into their existing account well it's very similar to the create user and for that reason i'll just copy the all this information and paste it inside of the login but the tiny caveat and difference between both of them is that we don't want to create with like a user with sign with email and password we want to sign in with email and password those are two different functions and to get this function we'll import it inside of the instead of this over here i'll just put this over here and i'll put a comma over here and it is so similar uh to the create with a email create user with email and password that this will remain the same the only thing will change is we're trying to sign in with the login email state instead of the register email and also the login password state instead of the register password um we can also keep console login the user who's logged in and we can also console.log um if there's any errors while logging in so we'll just copy this information and we'll paste it um inside of our login button on click over here and that means that it should be working so let's test it out let's come over here we should see that we only have one user right we only have the page attack at gmail user inside of our account so let me try register or logging in with them i'll write pedro tech at gmail.com and i'll put the password which was password one two three when i click login you should see that we're now logged in if i keep refreshing it will work perfectly it will always recognize that pedro tech is logged in if i try logging in with another user like i don't know a user that doesn't even exist let's see what happens it should console log a message inside of a console with the error message so let's see what appears i click log in it says there's an error and the error is that auth has an invalid email so you can see we can do some arrow handling based on this error variable over here that we get on the try catch so if you're interested in handling that you can play around with it and you can do a lot of stuff with it so now that we're logged in let's just log out because there's a final thing that i want to show you guys there's a problem um if i create a new account for example um i don't know pedro at gmail dot com um it's different from page attack the password is one two three four five and i click create user you see that um i should be logged in did i actually um log in um oh your password needs to be six characters oh yeah this is the thing i want to tell you guys you can edit this kind of um validation um inside of firebase if you want to right now it's set to the default one which is for example um this has to be an email format and this has to be at least six characters so if i put my password to be one two three four five six seven um it is at least six characters so when i click create user i get logged in as you can see you can change that to to like match whatever you want for your website and with that in mind um this is the end of the video i really hope you guys enjoyed it um if you enjoyed it please like down below and comment what you want to see next subscribe because i'm posting um two times a week actually because these past weeks uh we're pretty hard because of midterms um i'm still at university so um i'm trying to make as many videos as i want as i can but um sometimes it kind of been hard however i'm still here pumping content for you guys so if you enjoyed it please like it below and yeah it will help support the channel so if you're interested in the code it will be in the description if you have any doubts just ask me in the comments i'll help everyone that i can and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 13,845

Keywords: computer science, crud, css, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, FIREBASE, firebase 9, firebase authentication, firebase auth, authentication tutorial, react authentication, react auth, sign in react, react sign in, react login, firebase react

Id: 9bXhf_TELP4

Length: 28min 38sec (1718 seconds)

Published: Mon Oct 18 2021