Full-Stack Firebase Authentication & CRUD with React and Tailwind CSS | Build a Complete Web App!

what's up everybody Welcome to code TGA my name is LaVar and today we're going to be going over how to create a react app utilizing Firebase fir store and their authentication system so let's get started first things first we just want to make a directory in which we want to work with our project I'm just going to call this one Firebase project uh once that's created change directory into it so I'm going to work out of today you can name it whatever you want and then the first thing that we want to do is just create our react app so that's going to be npx create react app and then call it whatever you want I'm going to call mine code TGA feel free to call yours whatever you want awesome now once you've created your react app and it's finished loading go ahead and change directory into your newly created react app so CD into it and then you're just going to open it up in your code editor I'm using V Visual Studio code whatever code editor editor you like go ahead and use that but I'm going to be working out a visual studio code today so now I'm in my react app as you can see it installed all the components and necessary components and the architecture so we have our app.js file the next thing that we want to do is install all our dependencies so for this project we're going to be utilizing a few different dependencies um we're going to be using Firebase react router Dom which is pretty standard for our routing system Tailwind CSS that's my favorite CSS Library so we're going to be installing that Tailwind comes with a couple extra dependenc if you want to utilize them one of them being aspect ratio the other one being forms and the other one being typography so I'm going to install all three of those and then I'm also going to install a react UI component called uh headless UI it's pretty standard that you'll you'll find that a lot in Tailwind if you're not familiar with Tailwind so I'm going to install all those dependencies the ones that you need for this project are uh the Firebase react rouer Dom and Tailwind CSS awesome once that has finished installing and we've got all our dependencies necessary to continue we're going to initialize our Tailwind Library so all we need to do for that is MPX Tailwind CSS init and that should initialize our Tailwind uh config file so you can see it created a new file called Tailwind config and all we're going to do for this is we're going to update a couple things so that it can be utilized in our react app and so in our content file we just want to place the source folder and then the HTML JS and jsx uh tags in our content so that we can utilize them and then those if you downloaded those three dependencies typography forms and aspect ratio we can go ahead and import those as well I'll just uh you just go down into plugins and then you will require those within that array and now our Tailwind is installed and our config file is there but to top it off and to fin finalize it what we need to do is actually utilize Tailwind in our CSS file so if you want to go to your index.css remove all of that and we want at Tailwind base at Tailwind components and at Tailwind utilities installed in our CSS file just like this now that should be imported in your uh index.js file right here I'm going to go ahead and remove the app.css file because I don't need that for this and I'm also going to remove that import statement out of the app.js file so it doesn't break our code when we start our react app so that's how we install Tailwind CSS in our react application the next thing that we want to do is in our source folder we want to create a context file now if you're familiar with react you'll know what context is if you're not familiar with react let me give you a little bit of a rundown of how context works so in react we have our state VAR our variables that we utilize throughout our uh app and on some pages or components will utilize variables that are going to change and uh if they're going to change and they're going to be needed to be manipulated or called or set on that page those are generally local variables to that component or that page but some things require Global context so we're going to wrap our entire application around a global context uh component that will allow us to access variables and data throughout our entire app without it having to refresh and pull that data from our back end later on so the way that we do that is by creating something called context and there's multiple ways to do this uh I prefer context there's different libraries out there like recoil um man I've been so long I forgot most of them because I generally use context but use whatever you want for Global State variable Global State Management for this project we're going to just utilize context so go ahead and create a folder context and now we want to create a file off context. jsx look uh something like this so to begin what we want to do is we're going to import some uh libraries from react for this context to work and those are create context use context and use State the next thing we want to do is actually uh initialize our context by going by calling it as a variable and I'm going to use use user context and we're going to create context using the react Library create context function next we want to export this I'm going to call it user off because what I'm going to be storing in this context is all the user data that is needed throughout the app so no matter where they go within the website they can access their data and we can display things like their name or their email address or their phone number so to to do that we want to export a uh function uh user auth is what I'm going to call it's going to to return the user context in the use context function uh supplied by react the next thing we want to do is actually create our component and I'm going to make this one pretty simple for now and we'll update it later and so what this will look like is your simple standard react component default function with a oth context provider is what I'm going to call this one because uh that's what it is it's providing authentication context to the application and it's going to be able to take uh values within that context and whatever whatever children is wrapped with inside of the context provider is going to have access to all the data we store here in this context and if this doesn't make any sense you can go ahead and read about it on react documentation or you can follow along and see if you can make sense of it so a couple things that I did here is is logged out set is logged out to true what we're going to do is we're going to update whether or not the user is logged in or logged out through our context and this will help us route our user depending on whether or not they are logged in through our Firebase system um the next thing we want to do is actually wrap our entire application around this context so what we do is now go to the index file and we're going to remove this react strict mode uh you can develop in strict mode if you're unfamiliar with react but you generally don't want to go to production while it's still in strict mode um so first things I'm going to do is I'm going to import browser router from react router Dom and what this is going to do is this is going to allow us to um route our app if you're familiar with routing or routes or react router or especially react router Dom we're just going to wrap our entire app here in the index file with our browser router so that we can create routes for the user throughout our application and they can go from page to page or from different components depending on um authentication and and and uh yeah depending on roles and all that stuff that we Define later so I'll save my o context save my browser router and the next thing we want to do is wrap that context around the app so that way do that we're just going to import our off context provider and we're just going to wrap it around our app so now anything inside of our app component is going to have access to those variables like is logged out inside of our application so should look something like this and we are set within our index.js file and I'm not going to touch that anymore so I'll just close out of that the next thing we want to do is actually create the router that we just wrapped our component app around um and so what I like to do is just create another folder and we'll call it routes and I create two um routers basically within within this directory first one I call user routes and and we'll just give that a jsx tag and then we'll just create a you know a functional component uh user routes for now and then we'll create another one and we'll call this nonuser routes. jsx and same thing create a functional component for non-user routes now in our app file I'm going to remove everything that's there and I'm just going to create a simple div tag and then inside of it I'm going to actually you know I'm going to import that is logged out function that's in our context right here so what we're going to do is I'll keep this open so we can reference it and then let me close this let see if I can zoom in a little bit no I'm not going to deal with that right now but anyways we're gonna call this is locked out so if we want to walk through this context basically we've created a state variable this is how we manage state within re react as we utilize use State use effect and some of the hooks and this one we're just going to set a Boolean value to true because they are not logged in currently so as it comes packaged when they come to our app they're not logged in and then in the context provider to send to the children we have to send this prop value is logged out through the wrapper and now the children of off context provider have access to that variable so how we call that variable within the app is any component that you want to use that's wrapped inside we can now access it by just calling it here and uh we'll just set this one is logged out and the format will look something like this and we'll just call that user off context that we created in our context right here we're going to call this use context user context it's going to have access to that is loged out function and if we were to console log that it would show that it's uh is logged out is true next we're just going to do a simple tary operator there's different ways how you want that you can handle this but for this course or this little tutorial alone we're just going to make it super simple is logged out and then we'll just create a tary operator is if they're logged out they're going to have access to the nonuser routes so make sure you import that and if they are logged in they're going to have access to the user routes just import that and boom now our tary operator will let us determine whether or not that user is logged in or logged out and send them to the proper routing mechanism that we create here in our react app so let's actually just test this real quick so go ahead and start your um start your react app with mpm start give it a second to load and then we're just going to look at this and see if uh we get what we expect here since is logged out is set to true we should get nonuser routes which would look like this so we should actually just see context on the page that says non-user route and here we go it's loading takes a second sometimes especially if it's the first time rendering it all right perfect we got non-user routch just like we had planned or expected to see um when we did this so let's go right here I will thisof nonuser routes let's go back to our app and sure enough is logged out non-user routes now let's say we just put this as a as a false value we should now get user routes in our react app so that's how we're going to manage for this project how we're going to manage authentication and authorization on how they get to the proper routes and the pages that should be displayed for them next what we want to do let's just expand this now um the next thing that I like to do is I want to just set up the pages for these routes so I'll just in the source directory I'll just create a directory called pages and you can set up an architect your your app however you want but for this tutorial I'm just going to create a Pages directory and inside I'm going to call home. jsx and we'll do another functional component where it just displays home another page um we'll call This One login and this is where we'll create our login functionality here shortly on how a user can log in next we're going to do uh create create user. jsx RC um yeah I'm just going to delete that I misspelled it page all right create user. jsx RFC now we got to create user page and then we'll do the user dashboard um for users that are logged in and now we have four pages that we can utilize in our routing mechanism so let's close out of all these getting a little messy and we'll go to just our user routes and our non-user routes first our non-user routes all we want to do is create we're going to import routes and routes uh or route and routes from react router Dom so if you just want to import route and routes from react R Dom this is how we're going to create our routes our first route is going to be path uh just slash like this is going to be our standard homepage and the element that we want for standard homepage is just our home route uh so import that home component or page created home right y so not sure why it's not importing home but we'll do that compiled still fine and then also for non-user routes we want um to create a user so we'll do path equals I'll just call create user and we'll do element home create user and then the next one we want to do is log in um because we don't want this to be something that they only have access to if they and then we'll import our login function all right so for our route let's just test these out we'll go back to our uh browser and so yeah we're getting home at that home so if we go to create user in the URL we should get create user and then if we do [Music] login we should get login but what happens if we go to like um I don't know get started we get nothing there's a blank page there so the way that I mitigate that is I actually don't create a 404 page what instead I do is just copy this Home Path and I'll use the all symbol for anything that is not one of these two routes will always redirect us back to home so no matter now what we type in here will always go home so as long as it's not one of those two routes that that's what happens so now let's go to our user routes and all we're really going to import here is our uh user dashboard I'm not going to create a rout functionality for the users I'm just going to put everything on the dashboard for now I do messed up somewhere there we go there we go doing all right there we go so let's just test that go back to our app function and we'll test it by putting an exclamation exclamation mark in front of is logged out resulting in a false statement and now we have our user dashboard so perfect doesn't matter what we type here because we'll always just have our user dashboard because it's not actually a route it's just a functional component that's going to display for any user that's logged in okay so now we have our routees set up and we have our our uh logic set up for whether or not they're going to be logged in next thing we want to do is we want to create our Firebase directory so let's go here Firebase and then inside Firebase you can create a file did I not create it did something just create Firebase there we go now create a fold file in there I'm going to call mine fire. JS create a JavaScript file for Firebase rename want fire not file typos today Brett all right here we go all right once we've created this file the next thing we want to do is we're going to import a couple different things um we've installed Firebase when we installed all our dependencies so we want to import initialized app get fir store I'm going to remove get storage for now we don't need that and then get off and then what we want to do is just create yep a cons Firebase config object and we'll leave this blank for now because we're going to put stuff in it once we go to Firebase and then we're going to initialize the app with the Firebase config file that we put in later and then we want to export database which is get fir store and then we want to export our o which is get o and what these will do is these are now our our backend of service functions with Firebase to allow us to do crud operations to fir store and to log in and log out through the authentication the Firebase provides with their off function get off and then we're going to call these DB anytime we need to write or read to the database we're going to call that uh constant variable and then if we need to do anything with authentication log them in create a user or log out we're going to call that o variable which is now exported and able to be used throughout the app all right so let's go to the Firebase console and let's get our Firebase project set up so just firebase.com um I'm just going to go to console and what we're going to do is we're going to create our first project if you've already created projects you're familiar with this and we're going to call this one code TGA this you call it whatever you want I'm going to call it code TGA and uh sign off I'm not going to enable Google analytics for this project you guys can if you want to not a big deal either way it's not going to change anything for this for this tutorial so while that's being created let me explain to you a little bit about Firebase if you're unfamiliar with it it's a uh really really cool feature SL tool that Google offers people that is a little bit different than your conventional databases especially SQL databases that you're familiar with so no SQL based database and the way that they charge or the way it gets processed or cost have any cost Associated is based on reads and writs generally there's some other cost factors that go into it and you can go explore those in your plan but for the most part it's really free and it's really easy to scale so you can build your entire application on on Firebase and react or Firebase and express or view or angular and it's easy to scale because it's not going to cost you almost any money to get started so go ahead once you've created your project go over here and click the web uh tool and call it whatever you want I'm going to stick with the same name code TGA and uh I'm not going to set up Firebase hosting yet and then we're just going to register the app when you do this it's going to give you that Firebase config file that we were um that we had earlier so we've already installed Firebase we've already done all this in our project all we really need to do do is just copy this Firebase config file and then we go back to our project into our fire or into our JavaScript uh Firebase JavaScript and paste it right here for your Firebase config file and this is going to have all your keys and domains and all all the good stuff and then go ahead and save that now uh once we've done this what we want to do is um set up our Firebase store we're going to continue doing that so we'll go to continue console and we're going to go into this build dropdown and we're going to add authentication so it's going to give you a little bit of a rundown you could watch these videos if you want we're going to click get started and the one that we're going to use for this tutorial is email and password so we just want to enable email on password we're going to leave this one unchecked because we're actually going to let them create their password we're going to save it and now we have that enabled the next thing we want to do is go into our firestore database dropdown and we want to uh set this this up so we're going to create a database a second pick where location you want I'm going to put n five and then we're going to go next and we're just going to start in test mode and I'll go into the rules here shortly but for now we're just going to start in test mode we're going to go create and basically test mode rules will let us read and write to the database uh up until a certain date that we set so right now this will just go until uh March 4th of 2 202 for but we'll go in and create rules here in this tutorial all right we've done that we've set up our authentication and now we want to go back to our project and what we're going to do is we're going to create our function files so go to your Source directory and we're going to create a folder or directory called functions and I'm going to create two files in here I'm going to create one called off. Js and this is going to handle all all our authentication and with Firebase and then we're going to create another one I'm just going to call this crud or helper. JS are two ones I use the most so for our let's just start with our crud JS since we have that open we're going to import a couple things from Firebase fire store now if you don't know what crud is it's create uh read update and delete so these are our four main functions for updating and deleting things out of the database what I'm about to show you is not how I would recommend setting up your app but for demonstration purposes this is what I'm going to do and actually just create functions to do all our crud operations but I would actually recommend creating functions for specific tasks and not just generalizing it in the way I'm going to do for this tutorial but if you want a fast quick way to get this up and running this one is a great way to do it uh the next thing we want to do is import our database from that fire file so we created that fire we want to import this database from get fir store so now we have access to it so we've imported our collection delete doc doc get doc get docs on Snapshot which I'll explain here in a second and then set doc um let's do a uh Firebase has a really cool unique way of generating random identification processes to your documentation but I like to control my own uh uid generator so you can do this however you want but here's the function that I wrote for this uh it's just a create a random ID and this allows you just to write to the database so you don't have to read the database again in order to look for that uid that is assigned to whatever you write when let's go back real quick and I'll explain this to you if you're not familiar with fire store you have these things called collections which are like the over it's like a folder imagine this is a directory and we'll just call this directory you call whatever you want and and then inside the directory you can have specific documents so what I'm talking about on that uh identification is it will automatically create these identifications for you but you have to go read the document again to get that identification back or log the return statement when you create something in the database I just prefer to create my own because then I can create uh a function or a a system to how I create and organize my documents but if you want to let them create it for you you can do that too but let's say we create a doc we'll call this classes and then in this field or we'll just call it class because each class should have its own document so we'll go class and then we'll call this field title and then we can choose from what type it is there's tons an array and then an object in Firebase fire store is called a map so if you're looking for an object and you want to store it as an object that's a map and then an array is an array so these two are a little bit different but even though you would map over an array array in JavaScript that can be a little confusing to for people who are not quite familiar with Firebase fir stor but either way this is let's just create a title and we'll call it this is a test so you can kind of see how the format of Firebase fir store Works collection document and then we can just always have as many documents as we want within our collection and you can start collections within documents and get a different type of hierarchy if you need to do that but now if we if we called this document by class we would get the title and we could Lo that to for the user um but anyways that's just a brief explanation you can go look up Firebase if you're unfamiliar with it later so I create a random generator for my IDs next let's do a create function so the way we do that is we're going to export it because we want to be able to use it throughout our entire app and I'm going to call that create let's just do it simple create data and it's going to take a collection name and data type so like this will be an object for us or an array or whatever we want to log to the uh database first things we want to do is we want to get an ID and so I'm going to call that Generate random ID so we're going to call this function and create a random ID and then I'm just going to do a try catch and then let's just do catch error and then we'll console log the error if there's an error and then we'll close off that function and let's write that function with inside of our our Tri so the first thing we want to do is I'm just going to do I'm going to follow standard Firebase documentation and we're going to call this a doc reference number and so it's going to be the doc which we we're importing database which we're importing The Collection name whatever we send through this function so if we wanted to call it users whatever we want to call that collection name in fir store right here uh right here whatever we want to call that that's what we're going to pass as a argument within our function and then the data that we want to pass to the create data function and now what we want to do so we create the document reference and then we're going to await and we're going to set doc um and we're going to go doc ref with the data and so these when you're utilizing a backend of service uh you're using predefined um functions that are created by Firebase in order for us to and write to the database one of the things I'm leaving out here is I wanted to add that ID so we're just actually going to turn that into an object we're going to add the ID and then we're going to iterate over the data to make sure that it's logged or sent to our database with that ID so it should be sending an entire object with the ID and the data that we send through this function and so as an example let me write real quick to kind of show you how it works is let's say we had const um test data and we wanted to send this through it could say name John do age email tester gmail.com and boom here's our object that we can pass right here and then we could call that function anywhere throughout our um react app by calling the collection and passing the test data and then if we were to pass this or call this anywhere we would generate and create data into our Firebase fire store and we'll test that here in a second because we're actually going to log all of our users into the users collection okay next we're going to do read data going to be very similar so it'll look something like this and this will allow us to read any data uh from the Firebase fire store uh database fire fire store database read data pass the collection and the ID that we want to collect on and then we're going to pass the doc ref away get doc which which is the function provided by fir store in order for us to get the document reference that we're passing if the doc exists then we're going to console log the dock data and return that doc data otherwise we're going to consolate there's no such do document and the error message update very similar um let me just copy this real quick and then what we're going to do for update is instead of set Doc is actually update doc um with the doc ref and the ID so we're going to get the doc ref which is going to be the ID and we're going to update it by the ID and then we're going to pass whatever data we need to update within it so we only pass object or variables within the object that need to be updated if there is no up if there is no variable that is being passed for an object or a variable inside of our data collection it's not going to get updated so this is a very slick tool where you don't have to pass all the data in order to update the document you just have to pass whatever variable iable you want to update and this function update doc will take care of that for you and find what has changed and change it for you in the database super slick and then delete data this is the easiest function to write um and then and pass a collection name the ID and then we're going to create a doc ref and then we're just going to await and delete that Doc and it'll be deleted from there's no check you have to create your own check and your own error handle with with this is it's not going to ask you are you sure you want to to delete it it's literally going to delete it so be very careful when you're writing your delete functions uh with Firebase um perfect and let's just do one yeah this is a great day read all data uh what we'll do for this is this will say like let's say we need all the data in the collection itself um you know I just realized should we be good I'd actually get away from using the word collection but we're good here because there is one that as we're going to see right here it is a um import statement that you can import the the variable collection from Firebase fire stour so for naming convention I actually wouldn't use new collection as the name I'd probably do new collection or colle collection name as the uh as the argument but this will work for now um I'm just going to call this one new collection just so actually we'll just change it to make more sense collection name collection name all right so we're going to pass the collection name into the git docs and it's going to call the entire collection from that database and get all the documents for each document in that collection we're going to get it and as you can see let's see here we using yeah so we're just going to set push the new data array get that new data array and return all the documents in that collection with read all data now I'm just going to this is a bonus um but it's a slick bonus it's it's a Firebase the more you learn about it the more you read about it if you're unfamiliar with it is we have these snapshot listeners that can listen to updates on the database that you can put into your react app so that if anything changes in the database from another user at any point or you update it and the users need access to that updated data they don't have to refresh their page it literally listens and updates that documentation um it's pretty cool so it just listens for changes and we do that with the on snapshot function so we do the collection ref The Collection name and then uh we just snapshot listen for that any changes that would happen and then we do the call back so the call back here is whatever variables we want to set on that component itself in that local state we can call back and set those that new updated data in that component to utilize pretty cool operation and we can get into that later okay next we're going to create R off. JS functions so we need a way for users to log in log out and create accounts with our react app so we're going to import a couple different things first we're going to import from Firebase off we're going to in import create user with email and password and then we're also going to import sign in with email and password from the Firebase off Library the next thing we want to import is both the database and the off uh com variables that we created in our fire. JS um file so well let's just close this out we're importing our offb from our fire uh Javascript file and the last thing we want to import is from Firebase fir store because anytime a user um creates an account we want to create a spot in the database for that user to store all their data and we're going to store in the user's collection and to do that we need to import the doc and set doc functions from fir store to sign in super simple we're just going to create a function called sign in it's going to take email and password Bo it's going to I don't need to Lo console log out uh it's going to do a try catch um we're going to await sign in with email and password with the off uh with the with the off function that's initialized in our fire app we're going to pass the email on the password and it's going to log in with that function and then it's going to return that user so that's how we create aign in super simple few lines of code log outs even more simple once they're logged out all we really got to do is terminate that connection and we do that with the O signout function that comes standard with our o uh function from our fire Javascript file it's just going it doesn't even matter because it's stored in an index DB database spot in our cookies or in our storage on our application and so it just looks for that um um token and removes it and signs them out next is the signup function and so it's going to be similar to what we created in our crud operations we're just going to keep it separated from the crud um because it has to do more with o than it actually has to do with updating database schema so sign up it's going to take an email password and the user data we want to store in the fir store database so we call the function create user with email password pass the off the email and the password and then we set the new document in the user's collection with the user U ID that is created with the create user with email and password we're going to uh inst or import that user data into that function or into that object with the new uid and store it as one object in the document in the user's collection and then we're going to return that user so basically to anybody up we need to pass their data their email and their password and then we can sign them up that this will create an authentication it will create a login for them to be able to off through our site and it's going to uh allow them to read and write to our database that we set when we go into the rules let's actually do that now while I'm thinking about it let's go into the rules on your fir Store app go back to your console go to fire store and for our rules we're going to remove all this well if it lets me here we go there we go remove everything in here and what we want to do is we're going to do our rules version is two two um we want service and we're going to use the cloud. firestore service and we're going to do the object here and what we want to do is match anything in the documents so it'll look like this actually let me just copy let me just copy all this change then you can copy it off here and I'll post it on my website so you can just copy and paste but let me just walk you through this real quick any document in the users collection you can read if you are authorized like if you have if you signed up through the authentication system in our app they can read the us anything in the user's documents you cannot write to it um or you can write to it no matter what so if we're creating new users they can write to the database but you can only read the database if you an authorized user that's how you would write something like that and if we didn't want them to write it would look similar to this but that this function just lets you match that user's collection and any document in that in that collection for the entire database after that we won't we won't want anybody who isn't authorized to read or write to any of the other component or any of the other collections so to do that match any document to read and write they can't do it if it if their request off is n so pretty simple we're going to publish that and so now our rules have been updated and it's a little bit safer than just the dates that we had earlier in the rules spot so let's just set that up for now and call it good let's go back to our uh application okay sweet now that we have our functions written what we want to do is actually create our login so let's go back to our app and make sure we don't have any issues all right we are still at home um they have not logged in so let's go to Let's on our home page let's just do some fun react stuff real quick just to kind of get a into the groove um let's just create a few links like a little [Music] nav navigation um do home we'll do login oops H One login and then we'll do create user H1 register that'll work make sure it's still there and then what we're going to do is all right we got these let's let's have home actually take a prop called children if you're familiar with react you'll understand what I'm doing doing here and then in our user route or non-user routes what we're going to do is we're going to remove um home ah you know what I don't like this keep home keep home my apologies what we're going to do is we're going to create a component so let's go into Source let's go component components and then we'll create a component called nav Na bar. jsx and then we'll just make that a functional component copy everything we just did in our home app and or our home component and we'll just put that in the nav bar instead now let's just change these actually to Links so we'll call this yeah hbe link import from react router Dom call this one to home we'll do another one called create user which is register and then we'll create one for login and now what we want to do is we go to our non-user routes and we're going to wrap or we're going to make sure the nav bar takes that prop children like we had talked about and then down here underneath the nav we're just going to call the prop the children's prop uh down below and so basically now if anything that's wrapped inside of navbar uh will have access to the navigation so for the non-user routes what we want to do is we want to import that nav bar and close it off and we're going to wrap our entire rout all our routes in that Navar so now no matter where we go in that nav bar when we click on it well we did links right let's make sure we did it correctly nav bar should be Link Link react rouer Dom nav [Music] oh D all right sorry guys a little slow right now all right we've got this we just got to remove it from the home so let's go back to home how it was before RFC we'll just set it up so it's just home now let's go back here's our Navar up here home we got to register log in our navigation Works let's give those some separate option um let's go to our Navar and what we'll do here is I'll just go class name we go flex items Center and then we'll give it a gap X of four and just see how that looks so we got some gap between them and just to distinguish them to be just a little bit differently we'll just give these each a class name of text blue 500 and then hover we'll do text blue 700 and then we'll just copy those for all our routes now we should see some blue boom now we can distinguish a little bit differently all right so now let's we're at home let's create our register uh component go in here um I'm not going to really be styling it too much just for this for this purpose you guys can use Tailwind to style however you want tell one super slick um let's just do input um we'll go text placeholder first name input last name let's do we need email we need password let's do a confirm pass let's do one more password but let's make it a confirmed password and we'll write some confirmation logic um um in order for us to do this so let's look here register first name last name email password confirm password register uh we'll make the let's just go back here and we'll do this instead column class name let's just make this grid grid columns two and then we'll go Gap four for those we should get something yeah and now let's just make the max width a little bit more readable so it's not quite um it's wide so we go Max width let's do 5xl and then we'll Center it by using the MX Auto class boom and let's just give it a title to make it look um a little bit Slicker so in react you can wrap them with these empty tags if you want but everything in a functional component if you're unfamiliar in the return statement all has to be wrapped in one tag so I'll just use that for now we'll do a heading class name and we'll just call it register and let's see what we got here perfect and let's give it a little bit padding here at the bottom so it's not quite so OB all right super simple nothing uh crazy and then we'll make that button a little bit more stylish shouldn't we class name boom register all right sweet here's a registration page nothing on the login page now if you're if you know how to use react this is going to be kind you can go ahead and Skip but if you don't and you want some uh lessons on how react kind of works this is great for you so we want some US state variables so we're going to go constant first name set first name and we're going to import UST state from react same for last name same for email same for password and same for confirm password now we're going to do a const handle create user and what we want to do is console log those no that is not what we want to do we want to first check if password does not equal confirm password we're going to say um passwords do not match else console log create if create user um no that's not it either so what we want to do is else if there's no email we want to alert require email as if there's no password and then else we don't need the rest let's say they don't want to enter it we won't uh require it we're going to import that function that we created on the o. JS file so we went sign up so let's go sign sign up we import that up here import sign up from the function off and what it takes is the email so we want to pass the email the password and the user data so for that let's just create one object and go const user data equals and it'll be first name last name email and password and now we'll just pass that here in the argument of sign sign up up and then close that function off and now we have our function to create our user so if you're not familiar with react let me explain this to you really quick we're going to set these variables by using the set function um and it's going to set the state of the first name on change so the way we do that is let's go to our first name and we'll go on change and it's going to set the variable to whatever we type into that input statement so to see how it works let's just create a quick p and I'll just put this as first name and call that component so you can see it in real time on what it looks like so we're going to be down here we're going to be setting the first name to whatever we type in the first name input statement and we're going to be setting it and it's going to be creating that variable in real time of first name and we're going to log that first name in our paragraph over here so that we could see what did we I can't resolve fire we imported something wrong and our functions. o I imported that wrong so let's go where is it let's remove that and I'll just import it here oh Firebase fire off and then same with DB all right just make sure you have the right import statement in your in your functions so let me do the the same thing here in the O I'll copy that and in my crud operations I'm going to make sure that I imported that correctly boom all right let's remove off let's go back all right now we're not going to airor so now when I type in Brett we can see that it's logging here type in lar my name boom all right so it's working we just got to do that for all of these to for this to work in function so let's go in here and what we want to do is go back to our create user and we want to onchange all of these so onchange set last name onchange set email onchange set password and then on change set confirm password all right now let's just test our logic up here first oh we got to also call in our button so on button when we click it on click we want to handle that create user function um I'm not going to pass an e um event through this and we'll see what happens when we get that error whether it resets our entire form or not so let's say my name is Brett he body and my email is tester gmail.com and my password is password one two3 and I'm going to make this one one two three password and make them difference to see if my logic Works passwords do not match that's great okay it did not reset our entire form so that's good too and if we do password one two three let's see what happens all right we created it and let's see if we got anything in the console that would show we made any issues no issues so let's go into our Firebase console and see if it created our authentication sure enough in authentication we have tester gmail.com it created it let's go into our firestore database and sure enough we now have a user document that we created that is now stored there with Brett Peabody the password we don't want to pass into the back end like this so we're going to fix that right now um in here we don't want this password to pass in the user data we just want to pass it as the argument inside of our signup function all right but what should have happened is when we logged in into our context what should have happened is this should have been set to false because we're logged in so now we got to write that and make sure that uh it's setting the function or changing the global state of is logged in so that we actually get to the user D dashboard so to do that let's create another state function called user we'll set user and we'll keep it null as long as they're not logged in and then I'm going to use a hook that react offers called use effect if you're if you're unfamiliar with it this is basically a rendering uh hook that will render certain things we placed inside it's a function that'll render different functions and different callbacks that we want uh when the page is loaded so the use effect will be running as long as we give it the parameters of which to run so I'll just copy what I have here and then we'll go over it so use effect um we need to import on aate changed we need to in oh wait set is logged out to false and then on Snapshot we want to import we want to import doc from fire store we want to for our database from fire store we want to import our off from our fire from our fire uh Base fire [Music] um Javascript file and then let's change this out to True okay so let's walk let's go through this real quick we're going to subscribe um to any off State changes so it's going to listen for any changes on the authenticate on the authentication portion of our Firebase app so if the user logs in or logs out it's listening for that and what it's going to do is it's going to take the authorization of the current user if they're logged in and if they're logged in and there is an actual current user we're going to set is logged in defaults and then on Snapshot we're going to go get the user from the users's collection in our database with that uid that's returned and we're going to get hit that Doc and set that user in the doc data now one of the things we did earlier is in this o function we did not randomly create a user generated ID like we did in our CR operation right here we did not do that with our oth what we did instead was we had we we created a variable called user when we created our username and password and returned that uid and place that uid inside of our user folder so if we come here we have a uid right here that's our uid matches our document that's how they're set so we set the uid to the document and that matches with the user uid so in our function that creates the user how we do that is we wait for that U ID to come back that is given to us from the create username and password and then we set the doc with that uid and store that uid in a as a parameter inside that object that way we can utilize it whenever we need to call the current user who's logged into the application so when we go to our context What's Happening Here is it checks to see if there's a current user and there is if we go to our react app anytime you make changes to context you're going to get that page now look now we're in the actual user dashboard because we wrote that use effect but let me show you something real quick when you inspect go to application and you're going to go to this index DOD do index database where Firebase stores a local storage instance of your database and this is how we know that we're actually logged in this is what it's checking for so we don't have to write a ton of Jade we don't have to write a ton of token checking mechanisms Firebase kind of handles that for us through this onof state change looking for the current user and so if it has a current User it's going to take the uid of that current user and it's going to look for the document that's associated with that uid and set the user as a global variable for us to access so now we need to make sure we can access that Global variable user by setting it as a value in the provider and we save it now we'll have to refresh this page but you can see we're in the user dashboard now so let's go to the user dashboard uh let's close out of all these so we're not confusing everybody boom boom and then we'll go open our user dashboard and we're just going to import that user function from the context or function user variable from the context so that we have access and we go let's just call them by name welcome user. first name now I always like to put a question mark to check to make sure there actually is a user first before we log the first name because if there isn't it might break your code so it's good practice to kind of use that tary check welcome Brett perfect uh We've created the user it's logging the first name and we have access to everything that we need from the global context of our react app so it's passing anything that we stored and we could have stored whatever we wanted and had them fill out in that form and now we can call it with that user and no matter what if we refresh this page it will always make that call and read that database because it's checking the stored token but what we need to do is create a way to log out and test to see if it keeps us logged out through that logout function so let's go to our user dashboard and create a button Let's uh actually actually just do this wrap it in this tag this empty tag and then we'll create a button and we'll call it log out see if it's there boom we got a log out button so what we want to do here is we want to handle that log out so we let's write a function for it and what did we name it in our off log out so we can't have it with the same name so let's just go handle log out and then what we're going to do is we're just going to call that log out function and boom now we should be able to call it on that button down here below and it should log us out onclick handle logout so we're going to click handle logout and it will call this off function log out and the O is going to sign us out through the O function in the fire or through that off mechanism through our Firebase um get off variable here we go we log out and now we're logged out but let's check the index. variable or index do or index DB to see if we're still there we'll go to application index. DB and nope we have no fbas key showing us and it logged us out sweet so now we're logged out and uh if we click around we can't refresh the page we can't go to that user dashboard can we go back nope doesn't let us go back so our route is now protected because they're not a user and so if we register let's register another one let's go Jamie I don't even know that's how you spelled Jamie Jamie Pearson or something like that let's do James jamie.com password um let's just do whatever we want password here and then we register boom takes us to the dashboard automatically does it because this is the method that we have in our in our app.js file is checking whether or not that user is logged out if they're logged in we go to the user routes and that's handled here where we're setting that variable in the use effect of whether not they're logged in or logged out um this is one slick way to handle protected protected routes on the front end if you're utilizing a backend there's other ways to protect it and I'll make other tutorials on that but for now that's what we want to do it's a log out now we just need a way to log in so let's create a login page and we'll do that in our login page and we'll go const we'll just set some states email set email const password set password let's import our UST State function from react or UST State Hook from react and then we're going to go const handle log in and how did we have it in our off function we need to pass an email password and user data hold that up over there and then we'll go over here and then we will do sign oh wait no that's sign up we want to sign in we just need to pass our email and password my bad sign in with email and password boom so let's go down here and we'll just copy our create user functionality I'm just going to copy the email and password make it simple and let's see what this looks like email password and and then we'll just create a button for logging in we should be good to go let's go button onclick handle login button login look something like that you want to look at this so if we come back here simple login so let's go to what was our users oh let's make sure the password's gone yeah the password's gone we took that out of the object so it no longer stores the password in the database that's bad practice please don't do that um but let's do Jamie James jamie.com type in the password we created for that account and log in it should log Us in but it didn't so let's look at the problem here we have a typo in our email so we didn't handle errors when we created this we didn't create any type of error handling so a user wouldn't know what happened they would have to inspect the console and they're not likely going to do that so we need to make sure we create aor handlers as we create these apps but let's log in and now we're logged in welcome Jamie pretty slick that's how we can do it so let's do it one more time test it out and welcome Jamie we're logged in now let's log out and do a what was the other let's try the other one and just make sure that that data comes back from the database correctly and that our functions work and then password word one two three log in perfect and that essentially is how you create a Firebase fir store react app but we wrote a couple other functions um down here in our Crow application so let's just do a quick update let's just do an update because we're already reading the data here we're reading the data this is a snapshot listener it's one way to read it it we could do this exact same thing with Git data uh or git doc but what we're going to do now is we're just going to update one item and so let's go into our dashboard welcome first name blah blah blah let's go um let's go input type text placeholder and we'll call it new first name just make sure that it looks good new first name oh wa we want to put log out at the bottom here so we don't want it handling it this way let's just make this its own block and give it a few spaces all right new first name and then let's create a button for handling that new first name we'll call it [Music] button update name let's see Perfect all right now let's go and we'll update this name so we're going to create a state variable const new first name set new first name import the UST State hook and what we'll do for this is const handle update name and in our crud operation what did we use we said update data so let's hold this out to the side to use it as a reference go into this and what we want to do is we want to upate data with the UR user ID what did I just import I think we're good um so we what we want to do is we're going to update the data with the user ID and then the collection name is going to be users and the ID is going to be the user's U ID and then the data is going to be the data so let's try this and let's go onclick handle update name and then on this one whoops what we want to do is on change we want to e set that new first name why is it doing this to me there we go now let's see if we can update the first name here so update first name let's call him Kenny and see what happens boom we've updated the first name uh we should actually clear that out so the way we can do that where it automatically clears out is we're going to set this value equals new first name and then when we update the data we're going to set new first name to blank so that way when we submit and handle update name it's going to clear this value out of our input statement so let's test it one more time let's call it Lily update name and we have updated Lily in our Firebase fire store and if we go over here to um our app it's Lally in in our pod fire store so that's how you update it you can utilize and play around with those functions that we wrote on how to read write and update data um I hope this was helpful for you if you have any questions leave a comment below please click subscribe I want to put out more tutorials like this I want to go into more depth and really get into some more uh Advanced development and coding operations I want to do more of PHP stuff because that's my Foundation but react I love react I love Firebase fir store so I hope this was helpful um if you have any questions yeah just Reach Out write down below or you can email me at uh Lavar coda.com and I'll do my best to respond or you can go to my website coda.com I really appreciate you making it this far and watching it and putting up with me so I hope you enjoyed it I hope it was helpful um yeah anyways I'll see you around

Channel: Code Tega

Views: 740

Keywords: firestore, react, crud, authentication, tailwindcss, full-stack

Id: woITklcvthg

Length: 70min 23sec (4223 seconds)

Published: Sun Feb 04 2024