Using Cloud Firestore For Your REACT Backend 2023 | CRUD App

what's up everybody it's Travis here from Travis dot media today I'm going to be showing you how to set up and use cloud firestore as your react backend now when you're building apps with react or really any front-end framework or library or whatever you often need a backend to store your data unless you're just pulling from an API or pushing to an API you need somewhere to store that so for me that's always been a question what do I do do I use my SQL mariadb do I need to use AWS do I use a hosted solution well cloud firestore is a wonderful option it's free it's very easy to set up and you can use it for your portfolio projects your demo projects even your production projects so we're going to be using a react to do app today and we're going to be integrating Firebase into that so I'm going to show you how to configure it how to use it it's also going to be a lesson in learning to read documentation which is very important for developers in devops engineers and before we get started let me just make this distinction in case you don't know what cloud firestore is so cloud firestore is not not a relational database so relational databases you have a table you have columns and you insert rows in that database cloud firestore is a nosql database and what it does is it has Collections and Within These collections there are documents these documents are like Json objects there are key value Pairs and they have the same data types you're used to Strings numbers booleans arrays and this kind of nosql database works great with front-end Frameworks and libraries so if you're building out some portfolio projects and you need an easy back end a free back end to handle your data use cloud firestore and by the end of this video you'll know how to do that so grab a cup of coffee turn off your phone let's build this app together so the first thing you want to do here is clone the repo so I'll have a link to this below but it's in my GitHub repositories it's called firestore react crud app and make sure you clone the main branch now I didn't create this initial application it was created by a safdar Jamal he created this crud app and he create created it to be used with the local browser like to save the data as a local item in your browser what we're going to do is we're going to swap that with Firebase so make sure you star his repo give him credit where credit's due I didn't want to build this from scratch so I found a really nice react crud app and I just tweaked it for air purposes so once you pull down this code base you'll want to do an npm install so open your code up go to your terminal npm install and make sure you install the dependencies once that's complete you can run the app with npm Run start and it'll bring you to this login page the email and password that's already there is what works it's hard-coded so click login to log into the application and you get this successfully logged in pop-up box this is what makes this app so clean for me it has nice visuals so you can add an employee so click add an employee fill in the information you can edit an employee change some value and you can delete an employee but I took out the back end so if you do that it's not going to take just wanted to mention that and then you can log out so click log out confirm it and you're logged out of the application so that's how it works we're going to replace that back in so again he used the local storage in the browser to save this data I took that out I put some to-do's in there to replace it with Firebase so if we look at the code don't get overwhelmed here we'll talk about all of it but essentially you have let me close this a number of components you have a login and a logout component don't worry about that we're going to do that at the end you have an app component which decides whether you go to the dashboard or the login component and that's based on whether you're authenticated or not hence we had to log in when we started the app once we log in instead of going to the login component we go to the dashboard component and then you have a number of components here we just need to look at the index file and here you see we're just storing State like the employees the selected employee is adding is editing we're just storing state I have a to do here in each one of what we're going to be adding handle edit handle delete and anytime you see the swall.fire these are these pop-up confirmations that say are you sure you want to delete this and provides the spinning thing and everything that makes the app look nice so right here you'll have a warning are you sure you want to delete the file and then down here delete successful that kind of thing so anytime you see that just think pop-ups and then finally you have your component down here so if you're not adding or editing it's going to load the header and it's going to load the table if you're adding it's going to load the add component if you're editing it's going to load the edit component pretty straightforward that's all you need to know the other components are just those the add edit header and table component again we'll go through all that but we need to get Firebase set up so again now that you've looked at the code if you log in you'll see your table component if you click add employee you see your ad component if you click the edit button you see your edit component and if you click delete you get that swall.fire which stands for a suite alert so it's a suite alert package it's a react package for this kind of alerts and so when you click delete you're going to see that pop up are you sure you won't be able to revert this yes to delete it know to cancel so with that out of the way let's go ahead and set up Firebase so go to firebase.google.com docs slash firestore and you'll have to log in your Google account everybody has a Google account I just logged into one of mine and we're going to start here so here's the documentation for cloud firestore not the real-time database but the cloud firestore and here's the introduction you can read about what it is we've already talked about that so we're going to move down to the get started section and from here we're going to go up to the top right and click on go to console so go to the console and you're going to create a new project so click add project let's call it employee database or whatever you want to call it click continue I don't want to enable Google analytics because this is just for testing click create project and it's going to create your project and my new project is ready click continue and it takes me inside my project so the first thing you want to do is go to build and firestore database click create database to create a new database in your project and you want to be in test mode so start out in test mode this gives you 30 days before you have to update your security rules you can extend this as long as you want but just start in test mode click next and select a location I'm going to go down and select one closest to me which is Northern Virginia select a location closest to you and click enable and let's start a small collection manually to begin with so click Start collection in the collection we're going to use is employees because we're going to have a database of employees and then we're going to add our first document so if you look at error sample data that's in this project you can find it under data in index we have an ID which we don't need in Firebase they'll generate one we have a first name last name email salary and date so let's add that let's add two entries just so we can get started so click Auto ID it'll generate an ID then do first name I'm going to put vob add a field last name Smith email Bob at example.com salary let's say Bob makes uh 62 000 a year and the date now we could do a date format I don't want to get into all of that in this video I'm going to keep it simple so let's just do a string and let's say 2023 a one five and click save now we have a collection called employees and inside of that collection is going to be documents to represent each individual employee so let's add one more real quick click add document Auto ID and the date is 2023.05 let's say 01. and click save now we have two employees in a database good start so we've created a database we've added a little test data the next thing we want to do is go to project overview we need to add an app to our project so that we can take that data and add it to our app to connect this database to our app so right here where it says get started by adding Firebase to your app we don't want iOS we don't want Android we want web so click web app nickname let's just say employee management and register app next we'll need to do an npm install Firebase but you actually don't have to do that because I've included it already here's Firebase so that's done and then you have this configuration so we need to add this configuration to our project so let's copy that and in our project we're going to create a folder undersource called config and I'm going to create a new file in there called firestore.js and I'm going to paste that information in now all of this data here is sensitive so we're going to create in the root of the project an EnV file.env and we're going to transfer the sensitive data to this EnV file to keep it out of our main project and to keep it from committing to the git repo so I'm going to grab all this data and I'm going to copy it over here and I'm going to set up my environment variables to do this in a create react app which is what this is all of the variables have to start with react app so it'd be something like react app API key and I'm just going to copy this react at part five more times one two three four five and fill in the rest auth domain and project ID and storage bucket messaging sender ID and app ID again it has to have react app on the front of it for it to recognize it's the way create react app is set up and these are all going to have equal signs and after that I'm just going to paste the values without the quotes So for API key I would just grab this copy it and paste it here and I'm not going to make you watch me so I'll go ahead and do that off camera so I filled that information in in my EnV file now here I just need to reference the variables and to do that you have to put process.env and then the name of your variable so react app API key and just do that for all of them and I'll be back in a minute all right so when you're done it should look like this process.env in the name of your variable and it's going to pull that from the EnV file and then in your git ignore make sure that dot EnV is ignored so when you commit your code you don't commit that EnV file great now let's go to our documentation and see if we're doing all of this correct I was just following what they told me so continue to console and let's go back to the getting started page so create a cloud firestore database we already did that set up your development environment npm install Firebase we already did that you'll need to import both don't worry about that either so if we go down to initialize Cloud firestore this is what we need to look at so we've imported the initialize app we have the Firebase configuration and we've initialized Firebase but there's two more things here one we have to import get firestore and then we have to initialize cloud firestore and get a reference to the service so we need to add that so let's grab this import and paste that as another import to import that function and then we're going to use that function down here to initialize cloud firestore and get a reference to the service then we'll be able to use this DB in all of our other files so paste that there so again I'm just following the documentation I'm adding everything I need so save that and let's see what's next so here we should be good here's add data here's read data secure your data all of that so let's actually do this to make sure that we've set all of the variables correctly and we've imported it correctly let's grab this import and put it in our index.js just to test and see if we have any errors when we fire our app up so go to components dashboard index.js just add this at the top this Imports the collection in git docs functions from firestore so save that and let's see if it works so npm Run start do we have any errors we don't have any errors so if you get any errors there you might have misspelled an environment variable when you are typing them out so make sure you check that but it looks like I'm good what I'm going to do now is I'm going to save this progress to a branch so if you want to look at my code at that point you can compare the two so let's stop this let's create a new Branch git checkout B and I'm going to say one added firestore config and also what I need to do is let's take this EnV file and copy and paste it and let's create one that's not hidden like an EnV y sample and let's remove all of these values that way if somebody's using this application they'll be able to see not my API key but the fact that I'm referencing them from this EnV file they'll know hey changes EnV sample to EnV and then set it up like that so it's just a helper for people using this project so save that and I'm going to check out this new branch and let's check my changes out EnV sample let's add that index we don't need to add this you can remove that because we were just testing to make sure everything was good so EnV sample and then firestore there's nothing sensitive here so let's commit that all right added firestore commit and publish branch now my repository should have a new Branch click view all branches and it should show me my new branch that someone can go in and check out so click on that and you should be able to go in and make sure your code's the same as mine if you're having any issues great so what do we want to do next so next we want to take this application we want to get rid of all this sample data and we want to pull the data from the firestore database so let's go to our code close these files up and let's go to index.js so you see here we're importing employees data which is right here we're just importing that manually so let's go to index and just remove that because we don't want to import fake data we want to import from our database and then we want to come to this to do so this to do says create get employees function and call it here so let's create a get employees function so const get employees I'm going to do a sync and inside of this we're going to use some Firebase code here to pull data so let's go back to our getting started guide and let's go over here where it says um read data and click on get data let's see how to do this so initialize Cloud firestore we've done that here's some example data get a document you can get a single document you can get multiple documents from a collection or you can get all documents in a collection this is what we want and there's various languages here there's Swift Dart go node.js which is not react so we don't need that we're going to stick with the web version 9 modular so the first thing let's import the collection in git docs functions well collection isn't a function but we'll import these helpers and then let's grab the code let's just take this code and work with it so right here where it says get employees let's paste that in and here it says get Docs from a collection and remember DB if we go back to air config the DB is the reference to the service so that's the first argument but then we need to put the collection name which for us is employees so that's going to get this query snapshot and then we can Loop through it in console log that information so let's try it out let's go down to use effect and call that function get employees use effect is called when this component renders so it'll be called when the page loads click save and since this is react we also need to deal with state so up here they're using use state employees is going to be the variable that holds the data and set employees is going to update that data so here they're using the old employees data the hard-coded employees that we got rid of so let's get rid of that and when we load this data we want to update the state as well so right here after this query is made we need to do set employees and it's going to be employees now this isn't going to work because we're just console logging out everything but let's just put it for now so save that so let's run it npm run start and we should be able to check our console and see an error oh so it says DB is not defined so let's go back we didn't pull in that DB reference so let's do import DB from and we need to reference that Firebase or firestore file where we initiated that DB so dot dot slash dot dot slash and it was in config slash firestore that should bring in DB and we got another error it says DB is not exported from firestore so we forgot to export this so let's go back to this file and all we have to do here is just export it we were creating that reference but we weren't exporting it so save that and we have another error which is I didn't put the call on the function so save that let's try it now and if we check our app we should have the information in the console so remember we're consoling the ID because the ID is not actually in this data object so we're calling the ID and we're calling the rest of the data so if we look here we have two documents we have the ID for both and then we have all of the values so that looks good but we don't need to print it to the console we actually need to get that information and display it on our page so undo this let's do const employees equals query snapshot and then what do we want to do well here's a good lesson in Reading documentation so go back to the documentation and I'm just going to open a new page so I don't lose this and since we're using query snapshot whenever you're using built-in things like this there are always methods to it there's always stuff you can do with that information so you're getting this query snapshot how do you get the documents in that snapshot so a good thing to do is just go to the search and type in query snapshot and here's query snapshot JavaScript SDK API reference let's check that out and let's see if we can find some kind of method to call to get the docs and if we scroll down we'll see Constructors and then we'll see properties so look at this there's a property of this query snapshot called docs and what it is is an array of all the documents in the query snapshot that's exactly what we need we need an array and then we need to map through it and list it on the page so that's perfect there's also other properties empty metadata query size if you need to know the number of documents a lot of helpful stuff here it's always good to go in and check out the API reference in things that you can do with these values so let's go back and do querysnapshot Dot docs.map and then we'll do Doc and this Arrow function and we need to do the same thing that was down here the doc ID in the doc data so let's do some parentheses an object and then we want to do ID is doc.id and then we can just spread the rest of the values so dot dot dot dot dot data so because we're using that docs method it's going to create the array for us and we're going to store it in this employees variable and from there we can use set employees so remember before they were setting that to that static data this hard-coded data now we're going to fill that state with our retrieved data so set employees to this array of employees in our database so save that and we should be good with pulling data so let's go back and our page loads and now we have the data now remember this project came from this other guy's repo so he has everything rigged up for us we didn't have to go in and map this stuff out if you scroll down you'll see that we're loading a header component so if we open this up here's our header employee management software and a table component if we go to table component all of this is set up for us it Maps through employees and it creates a table and it just creates a row each time it Maps through so all of that's set up for us we're focused on Firebase here not really react so if I reload what do I got I pull my data and see how it says no employees first that's because it's waiting to pull data we don't want it to say no employees ideally we want it to have like a spinner which we could set up but it's going to make this video way too long if we do but you can download it's like um react Spinners some package like that it's very easy and you can put it there instead but I'm going to erase no employees and save it now it'll just show kind of like a blank page until it loads and I think that's good we're now pulling our data so let me push that to GitHub get checkout two added git employees functionality gonna switch to that branch and I'll commit these changes so index we made some changes there stage that table we just changed this one thing stage that firestore we added the export stage that and commit added get employees functionality commit and publish Branch so if you need to check your code at this point go check that Branch out all right so we're pulling data the next thing we want to do we want to be able to add an employee to the list and that takes place in our add component so if we go to add we look here we have all of our variables like first name last name email this is going to be the state that we're going to update we have a handle add function that happens when you submit the form so let's run the app so you click add employee we get this new form when you submit the form it calls this handle handle add function first it's going to throw an error if one of the fields is blank and in the form we're setting the state for each value so we should just be able to create a new employee with those State values we're going to push the new employee to the employee list we're going to save it to Firebase which we're going to do here we're going to set the state with those new employees and then the set is adding just makes that pop-up go away so is adding false makes the pop-up go away so all we need to do here is add the add functionality so how do we do that well we go to our documentation so back over here let's go to add and manage data open that up click on add data and then we scroll down we've initialized Cloud firestore set a document to create or overwrite a document we don't need to do that um add a document here we go and we need to use the add doc method because that allows Cloud firestore to Auto generate an ID for you which we want Cloud for firestore to do we don't want to do that we're going to let them handle it so we're going to use this add doc method so to do that we need to import collection and then the add doc functions let's do that first put that at the top we also need to pull in that DB reference so go back to index we'll just copy it from there put that under that and then we're just going to copy this code and work with it so right here under to do just paste that in and since this is an await call let's go up here by handle add and add an async to this function wrap that e and all we need to do here I'm going to get rid of this console.log await add DOC The Collection the DB reference and then of course employees is air collection and then just erase this and put new employee because we already have this Json here ready to go and these values came from our state that we set down here in the form so set salary set email set date that's all set this employee is ready to go we just need to add new employee because the key and values are going to be ready for us to push to firestore and actually no we need to spread that soon we need to spread those values out accordingly so let's save that and actually let's put this in a try catch since this is a post function let's do a try catch and we don't need this reference because we don't need to get any data back so let's take that and just add it here and then catch let's do console.log error we'll just log the error erase that and that makes me feel a little safer save that erase this comment and let's try it out and go to add employee let's try a new employee so let's say Bill Johnson bill at example.com salary let's say he makes 29 000 he's struggling and let's pick a date like the eighth and click add let's see what happens so we get this check that says bill was added and there's bill but there's no ID why is there no ID because we're just updating the state with Bill's information but that information is being pushed to the database in there an ID is auto-generated so we're not getting that information back from the database so you don't see it here but if I reload the page it's going to pull that data again and it's going to get the ID so how do we make it update instantly well we can call the get employees function again if you go back to index you remember we created this get employees function when we call that it pulls a fresh pool of employees from that database so after we add we need to call that function but that function doesn't exist in this component so if you go back to index you can actually pass it pass that function to the component so that we can call it so if you go down here to the return area you'll see that here's the add component and you'll see up here is our get employees function so copy that come down to the add component and do get employees equals get employees that's going to pass that function to that component so save that we're going to go back to our add and make sure we're pulling it in up here so get employees so we're pulling that in we're sending it to it and we're pulling it in and then down here we can just add it after all this happens get employees save so we add a document the state is updated this pop-up goes away and then we refresh that list of employees let's try it out so let me refresh the page go to add employee let's do Donna Summers Donna at example.com she makes fifty thousand and pick a date and now when we click add it should add it to the database but it should also update the page so that the ID is showing so add Ed and there it is Donna is here here's our ID so with that we have our ad functionality working let me go ahead and commit that so you can compare your code so let's Commit This add file and in index the get employees we passed along so let's commit that as well or stage that as well and then up here added add employee functionality and commit and publish Branch great now what do we want to do next well next let's set up the delete functionality I think that'll be easy so let's go back to our code and figure out where that's at so here's index and here's handle delete so handle delete is called when the delete button is pressed so if we go back here there's this delete button when the delete button is pressed this handle delete is called and the ID is passed with it so if we go to table and then this delete button handle delete is called the ID is passed along with it and in index here it is so the first thing that happens is this pop-up comes that says are you sure you want to delete it and if you confirm that then it's going to run this code here now this code here gets that particular employee and then we're going to delete that from the database and then there's going to be this success pop-up to let us know that and we're going to get the new list of employees here in the state and update the state with that new list so here where it says to do delete document let's figure out how to delete documents so right here delete data this should tell us and first we have to import Doc and delete doc so let's put that at the top actually we can just add it here Doc and delete Doc and DB is already referenced so let's grab that code and it's just a one-liner so right here let's paste that in get rid of the await because that's not going to work here using a then we'll just do without it and here's the reference to DB and we have two values here so the first one is employees because that's the collection the second one is the ID so we need to know the ID of the document we're deleting so let's put ID remember that's being passed in so we can use that directly and that's going to delete our doc so let's try it out click save run your app and let's delete Bob so come up here click delete are you sure click yes delete it and Bob's gone now let's check our database it updated in the state that time we didn't have to call that get employees function again we just did it in the state so let's go to our actual database and make sure that's gone we should have three employees only yes and that worked great that was pretty easy all right so let's commit that and then let's move on to the edit functionality git checkout delete doc create that branch then we're going to push the index file changes delete dot functionality commit that and publish Branch that's going to be Branch four but I think you are not going to have any trouble with that one finally we need to look at the edit function so let's go back to index and there's one here called handle edit that's called but we need to actually come to the component to figure out what's going on so if we scroll down here's the edit component edit employee and when this form is called the handle update function is called so we need to go look at that handle update so if one of the fields is blank throw an error and again since all these values are being saved to State we can just reference the employee here and it'll be all set up for us and we need to do an edit and then of course the state is updated and the is editing goes to false and we go back to the main page so update document let's do that so let's go back to our documentation and add data let's do add data I think it's there let me scroll down so set a document I think this is what we need to create or override a single document use the set methods yeah let's do that there are some other options here like update a document to only update a particular value in that document but we're just going to overwrite the whole thing that way we don't have to keep up with what's there and what's not there so let's import Doc and set doc let's grab that so up here at the top of edit let's put that and then we need a reference to our DB so let's grab that from another file put that here and then let's copy this code so this code says set doc well we'll look at it in a minute copy that so down here at the to do copy that and paste it and let's make this async and here we have DB we need to put employees and again we can put the ID here because we have that information here and we want to get rid of this static data and spread in Air employee so that it overwrites everything not just what we changed but everything and let's save that and try it out so let's run the app now let's try to edit Bill's salary it's way low let's bump him up to 40 000 and click update updated and Bill it still says 29 000. let's refresh and it's updated so we need to do the same thing here where we call that get employees function to refresh our data so let's go back to index down here where it says is editing and we have the edit component let's send this get employees along so that we can use it and then back in our edit component let's include it let's pull it in and after all of that let's just call get employees to get a fresh list so save it let's try to update them again let's refresh the page go to edit let's bump him up to 43 000. update and let's see if it works real time so update updated and 43. so that's good to go as well and by the way this isn't perfect if this was a production app you'd probably want to change some things to better handle all of the state and things like that right now we're just having fun with it so we have our crud functionality we can create we can read we can update and we can delete awesome let's click log out to go back to the logout screen or the login screen and let's address this how do we do authentication with firestore now this is one of the good things about firestore it has authentication built in and there's a wide range of options we're just going to deal with username and password for now but you can have it send you a one-time code you can use Google Twitter Facebook oauth whatever and I'll show you right here so let's go back to our database let's go to build and Authentication click get started and look at all these options you have email password phone Anonymous Google Facebook GitHub Apple Twitter Yahoo whatever you want it's that easy so we're going to do is just email and password which is not my favorite thing it's not safe at all especially with web authen in Biometrics and all that stuff at the Forefront today but we're going to use it for air personal project so click email and password and you want to enable that and click save that's going to enable that option for our app now how do we implement this let's go back to where documentation let's go up to authentication and click on web and find password authentication see how important it is to be able to read documentation so before you begin add Firebase create a password-based account um I think let's go back and go to users and let's create a user just so I can test this out so add user I'm going to put Travis at travis.media and I'm going to do a simple password my password never use that click add user all right so we have a user that we can log into but we have to implement this functionality so how do we do it well they have a built-in function called sign in with email and password really it's that easy they handle all of the security and everything in the back end so grab this import statement we're going to import the get auth in the sign in with email and password function copy that and we're going to go to our login component so here see where he hard codes the email and password that's fine because that's what it's intended to do but we're going to remove that we're going to remove this hard-coded state which is why we didn't have to enter anything to begin with because it's already in the state and here we have this if email equals admin email so that's hard-coded as well if those all match then some kind of pop-ups are going to happen we don't even need to worry about that so this is the login form we're going to just redo this whole thing so let's go right under here and let's grab our code so grab all of this paste that here put it in line and look how easy this is I don't need any user credential information I can actually remove that and I'm just going to actually do another try catch and say try the sign in with email and password and then I'll do if there's an error I'm actually not going to put any of that right here so we're going to try to call this function and there are three parameters auth which we get right here and then email and password well thankfully that's already in place down here we set email we set password the state's already set up so we should have that information as well this should work like I should be able to run it right now and it work but we're going to do this so how they had it set up was if the email and password match all of that goes well then you get this pop-up that's like successfully logged in so let's copy that part of it that's good let's take that cut it out and put it right after our successful login if that goes well if it doesn't go well let's throw this error that they had set up so catch and here we'll just do that and let me remove this and I think that should work so Firebase makes it that easy sign in with email and password Supply the arguments finished all we did was add these nice fancy pop-ups confirming that things went well or things didn't go well so let's save that and we actually didn't import those functions so let's go back and get that we didn't even pull that in let's put that at the top and save it and I think we're good so what's happening also here's a local storage set item let's take that out because we're not saving to local storage but what's happening is there's this set is authenticated remember when we first logged in if you go to the app component app index.js it checks whether you're authenticated or not if you're authenticated you go to the dashboard if not you go to the login screen so what's going on here in this login is we're setting the state set is authenticated to true if everything works out so all of this technically should work now if this is a production app you should probably do something else like have some observer in your whole app checking for that but we're not getting into that again we're just having fun but this should work it saves the state that I'm authenticated so let's save it let's try it out hey this is Travis jumping in here from the future so this function is not going to detect the error correctly unless we await this sign in with email and password command so make sure you put weight here and then on the handle login add async and then in a couple of minutes when you add this register functionality make sure you do it there too await and this will all be reflected in the final code and that's all I have to say back to the video here's my login screen I'm just going to try the user that I've already created remember I created one for Travis at travis.media and then I think I put my password if I hit login let's see what happens it's going to take a minute because we're talking to Firebase successfully logged in and there's my employees it all worked out so how do we log out well let's go back to our documentation this is how you sign in how do you sign out here to sign out a user call sign out so we need get off and sign out from actually let's just copy this whole thing copy that go to your log out component which is pretty much the same thing here's the button it says log out it calls the handle log out function which is here so let's go up to the top paste this in paste in the import and then let's take the code and put it directly under this work with that first so here's the get off call and then it's this sign out auth then do something else so let's take our confirmations so are you logging out you sure you want to log out and then set the is authenticated to false which will set our state to not authenticated which will send us back to the login screen so let's grab this whole code here and if everything goes well which is here we're going to call that and if some error happens we're just going to do a console.log error and we put the whole thing in the wrong place let's grab this cut it and then that needs to go inside of handle log out let's put that inside of the handle log out function save it and now this should work as well let's try it out let's log in again Travis Travis dot media my password now when we click this log out button it should log us out set the state to not authenticated so click logout are you sure you want to log out yes as soon as we click yes it's going to log us out so yes and we're logged up so we have a login we have a log out but how do we register a new user I don't have to put that in manually I want people to be able to check my app out so what we're going to do is kind of a half job here just to show you how the register Works we're going to put a register button right beside this login and use the same form not a good practice you should create a new component and have some routes that take you to a register route but I don't want to get into all that we're already getting laid on this video so let's create a button right beside this let's go to error login down at the bottom where this input is here let's just copy that paste a new one beside it put some margin margin left let's do 12 pixels just to separate the two buttons and then let's add a name value here name equals login and then here for the value let's do register and then we're going to add name equals register adding this name will allow us to see which one we've actually clicked so save that and then just to test that let's come up here and do a if and to check what the name is of a button we can put document .active element dot name and actually we don't need an if let's just do console.log and make sure we're getting that right value so now we have a register button it shouldn't be the same color let's go back down and make it background color black here it is black and if we check our console out let's refresh we can click register and we see register here and by the way that worked with no values in the field so that's something you'd have to check if this is a production app but again we're just having fun refresh now if we click login we should see login down here awesome so let's refresh go back and we'll just set up something like this if document.active element.name equals let's do three login if we're doing a login let's actually move this up here so we can use it for both we're going to do this whole try catch to log the person in then we can do else if document DOT active elements dot name equals register we're going to register the person well how do we register we look at the docs so up here at the top it's a function called create user with email and password so let's take that function add that to the top of our code then we'll grab this code without the auth part because we already have that and we'll do another try catch in here under try we'll paste this and we don't have any fun pop-ups for this you can go up here to these swallow examples and add your own but I'm not going to do it but here create user with email and password I'm going to delete the then and here let me remove that and in our catch I'm just going to put console.log error and we already have our auth email and password values so let's save that actually we do need some kind of pop-up and state update here so that it says that we're authenticated and it sends us into the dashboard so let's just copy what was up here so this wall fire here let's copy that and let's paste it down here after the create user paste that in and we'll put set authenticator is true they register let's go ahead and log them in and then instead of successfully logged in let's say successfully registered and logged in save and that should give us the same experience so let's go back to our app refresh and try this out so here instead of logging in I'm going to create a new user let's do travisraj gmail.com and then I'm just going to again put my password and click register register and we're spinning successfully registered and logged in here are my employees I am logged in now we can go back to our database and if I refresh I should see a new user added there it is travisrods gmail.com created signed in your app is banging so that's it for me today I'm not going to take it any further because this video is already long but let me just show you one thing if you go to Google here if you want to integrate like Google oauth so that you can use your Google login for this app it's so easy look at this you want a Google pop-up window sign in with pop-up that's a function that's it that's all you have to do you're using the Google auth provider you can do the same thing with Facebook Twitter GitHub all of those have at it have fun with this app one other thing to note is that if I refresh I lose my authentication so Firebase has a way to handle that I think it's with some observability functionality that it has but you can dig into that but right now you have a pretty cool app I hope you learned a lot about Firebase how to talk to the database how to authenticate users and be sure to use it in your personal projects as well now if you found this video helpful give it a thumbs up consider clicking that subscribe button and I will see you in the next video

Channel: Travis Media

Views: 9,201

Keywords: react firebase crud, firebase tutorial, firebase auth, cloud firestore, firebase crud, firestore tutorial, react firebase tutorial, firebase tutorial for beginners, firebase tutorial with react js, firebase tutorial travis media, travis media, cloud firestore tutorial, cloud firestore react, react with cloud firestore, getting started with react and firebase, adding cloud firestore to react, cloud firestore authentication react, cloud firestore crud, react firestore crud

Id: LCvBPsuHe6g

Length: 51min 15sec (3075 seconds)

Published: Sun May 14 2023