React Firebase Tutorial | AUTH - CRUD - Image Upload

hello my friends today you are gonna learn how to use firebase in a react application we are gonna start with firebase authentication you will see how to login and register how to protect your routes against inauthenticated users and then we are gonna fetch collections from firebase db we'll add items using inputs and also we'll be able to upload images to firebase storage then you will learn how to delete and update items and how to listen firebase collections to create real-time applications and finally we are gonna fetch data using advanced queries i believe that it's an awesome crash course for beginners who want to learn firebase and for this project we are gonna use our latest admin dashboard design if you didn't watch that video it's still okay but i highly recommend you to watch it first it's gonna be much easier to follow okay i hope you'll like it if you are ready let's get started okay i created new folder here as you can see it's empty what i'm gonna do is creating my react admin dashboard to do that we are gonna use our previous project i recommend you to watch that video but if you didn't don't worry it's gonna be just basics of firebase you are gonna learn how to login register create new items and how to delete them how to get them so you can directly download this project to do that i'm gonna come here and i'm gonna copy this url and if you realize it's a branch so we are not going to directly clone this repository we are going to install only this branch to do that i will come here and i will say git clone and my branch name which is react admin and my url and i don't want to create any file i'm just gonna install everything here so i will say dot and enter and as you can see they are here but we don't have our libraries we have to install them if you are using yarn you can just write here yarn if you are using npm you can write npm install and it's gonna install all libraries okay they are here right now we can start our application i will say yeah and start or npm start and it's here perfect so let's create our firebase project i will come here and i'll say go to console and i'm gonna create new project let's give a name just tutorial i'll continue i don't need any analytics here let's create our project it's gonna take a while and okay it's ready let's continue so what i'm gonna do is creating my application you can create any mobile application or you can create web application of course we are gonna create a website so i'm gonna choose this one let's give name it's gonna be again tutorial or whatever you say we don't need any hosting okay it says we have to install firebase first and after that we are gonna use our credentials here let's create i will copy this let's open new terminal and i will say yarn add firebase okay let's copy here and initialize our application i will copy and i will come here inside source and create new file and it's gonna be firebase.js i'm gonna paste them i can just delete those comments and of course this is a secret key you shouldn't store this in any js file we have to hide it to do that we are going to use emv file i will say dot emv and let's take this api key copy and i will say react app firebase key and i'm gonna paste here if you want to you can hide your domain project id whatever you want but i just want to show you how you can do this basically i will just copy this name and paste here of course we are gonna use process dot emv and our variable name okay why we are using emi that because when we upload our application into github we are not gonna upload this file and no one will be able to see our api key okay let's get started i will say authentication we are gonna create new user and we are gonna try to log in i will say get started as you can see there are many options here we can log in using email phone number or any additional services here but in this project we are gonna create new users using email and password so i'm gonna choose this and i will say enable let's save okay it's ready if i click here let me make this bigger okay what i'm gonna do is adding new user here of course we are gonna register later but for now to log in our application i'm gonna create one let's say admin lama dot dev one two three four five six and i will say add user and as you can see it's ready and this is our user id and as you realize we are not able to give our other details like username display name address or and other things only thing we can do here is giving our email and password but don't worry we are gonna use firestore here and create all our details remember it's only for authentication okay let's try to login i will go to login page but as i remember i forgot creating any form here let's create we have login page here but we don't have any input okay let's say class name is gonna be login and inside this container i'm gonna create a form and it's gonna include oops let's delete this action it's gonna include two inputs let's say input type will be text and let's give placeholder and it's gonna be email by the way type can be email also and i'm going to create one more and it's going to be type password and placeholder password and of course we are going to have a button and it's gonna be login and i will come here and say type will be submit i'm gonna save and let's see okay they are here but i can move them here and i can make them vertical let's come here inside plug-in css and i'm going to say height 100 ph it's going to be full height and i'm going to center everything i'll say display flex align item center and justify content center as you can see they are centered both horizontally and vertically but let's do the same thing for our form i will come here and say form display flags again but this time flux direction will be called like that inside my form firstly let's give some bit and height and i'm gonna give some margin between them like that what about this button i will come here i will say button and again let's say 200 high 30 and i don't wanna any border i will say board and rom like that by the way i can center them where is our form as you can see display flags but we didn't say align item center okay it's much better and let's change this color maybe i will say background color maybe purple or whatever you say and text color will be white like that maybe a font weight it can be bold i will say phone fade bold and finally cursor pointer okay it's ready maybe i can create here some error message i will say span wrong email or password like that let's take care of this underneath this button i will say span it's going to be font size 12 and color will be red it's gonna be like a warning maybe margin top [Music] okay perfect of course we are not gonna show this right now let's hide it to do that i'm gonna use use state here and i'll say const error set error and it's gonna be use state hook and at the beginning is going to be false we are not going to see any error let's write here our condition i will say if there is an error gels show this span in this case it's false so we are not gonna see it as you can see if it's true it's gonna appear perfect so what i'm gonna do is creating here on submit method and i'm gonna call a function i will say handle login let's create this const and login it's gonna take event and we are gonna try to login using our firebase of course you can come here and say on click method for this button but it's exactly the same thing that because we are using type submit when we click this button it's gonna fire this function firstly what i'm gonna do is write in here prevent default let me show you first i'm gonna click this button and as you can see it's refreshing our page to prevent this i'm gonna write here event prevent default like that let's click again and as you can see it's not refreshing anymore okay let's try to login i will come here and i'm gonna go to docs let's write here maybe authentication okay learn to get started by the way i really don't like firebase documentation it's i don't know it's just weird you cannot find what you want easily okay we are gonna use email address and password and it's gonna be web application okay as you can see we are gonna need some methods we are gonna use firebase auth i'm gonna copy this and i'm gonna open my firebase and let's import them actually we can use this here because we are going to log in here but what we can do is exporting this get off i will come here and i will say const all and it's gonna be get auto methods of course i'm gonna export this that we can use in the login page i will say export and we can use it right now let's come here and say import all from our firebase file here and let's go to talk again and let's see what we have as you can see we have a function here it's gonna take three parameters first one will be our authentication method which we exported our email and password and it's a promise as you can see it returns our user credentials or if there is an error it's gonna return an error let's copy this and i'm gonna paste it here our methods here but we don't have any email or password let's create here two more use date it's gonna be email set email and at the beginning it's gonna be an empty string and password also like that so how we are gonna change those states it's really easy i will just use on change methods and whenever we change our email it's gonna set new email and it's gonna be event target and value so what's event target and value basically whatever we write inside this input it's gonna take this text and it's gonna set new email in this case our email will be this text here so i can do the same thing for passwords let's copy here i'm gonna paste and in this case it's gonna be set password even target and value okay right now we have email and password we can drag the past time here and if everything is okay it's gonna return our user and let's see what's inside this user i'll say console.log and user and if there's an error we can set our error and we can show our span here let's say set error and it's gonna be true let's write here a wrong credential first i'm gonna login oops it should be email that because we said type is email let's write test test.com some password here i'm gonna login what actually logged in oh instead of login we just created new user let's come back i'm so sorry guys it's gonna be sign in new user as you can see it's here but actually it was good that because you learn how to register i'm gonna refresh here and as you can see our account is here okay anyway it's exactly the same thing we are just gonna change this method let's come here and change this create user and it's gonna be sign in with email and password and again we are gonna pass our parameters and it's gonna return us our credentials nothing has changed let's try again i'm gonna write here wrong credentials i'm gonna try to login and as you can see wrong email or password and we are getting 400 status code here but if i change it and try to log in as you can see it gives our user here all those properties but as you realize after this process it still stays in this login page so what i'm gonna do is using react root rudom and navigate our url to do that i'm gonna use use navigate hook so i will say const navigate is gonna be use navigate and i can redirect our users to another page after successful login i can delete here i will say navigate and wherever we want let's say home page i'm gonna try again admin lamar.dev i'm gonna log in and as you can see we are in the home page perfect of course it warns us that because our password is too weak but anyway it's just a test okay i'm gonna close here but we have a problem that's because if i go to login page again as you can see we are not logged in and also we can see any pages here even if we didn't log in we can go to user page product page we can't see everything let's open our application and as you can see there is no protection we can see every path here so what i'm gonna do firstly let's create here a user let's say current user and it's gonna be false of course it's just a temporary variable after login process we are gonna update our user but i'm just gonna show you how to protect your routes i'm gonna come here and i'm gonna create new function require auth and here we are gonna pass our components so basically i can just say children you are gonna understand better don't worry and i'm gonna write here a condition i will say return if there is a current user just go to children and if there is no user just navigate to login page to do that we can use navigate component from react router dom of course it's a component as you can see it's here and i'm gonna navigate to login page of course slash login of course i forgot here my arrow okay what we have done here if we go to home page we are gonna pass this component into this function it's gonna be our children in this case and it's gonna check if there is a current user just go to children which is home page if there is no current user just go to login page that because we are not allowed to see this page so how we are gonna use them let's come here i'm gonna move this login page here because others will be required off and i'm just gonna wrap my home component like that okay i'm gonna save and let's try as you remember we don't have any user it means we are gonna go to login page i'm gonna come here and delete this path here i'm gonna try to go to home page and as you can see we are going to login page let's try again okay perfect so we can do the same thing for other routes here okay i created my other pages like that as you can see they are required it means if i try to go to users for example i'm not allowed we are going to login page and if i make this true we will be able to see our pages like that perfect but how we are going to use our user here of course inside appgis you can create your new use state you can say user and set user and you can pass set user prop here and after the login process you can set that user but it's not a good idea that because we should be able to reach that user everywhere for example here or in our sidebar or in any other components so what i'm gonna do is creating a context api remember for this project we have created dark mode context and i'm gonna do exactly the same thing i'm gonna create authentication context and after the login process we are gonna update our user and we will be able to reach this everywhere so let's open our sidebar here and there is our context i'm gonna close here and it's here okay as you can see dark mode context dark mode reducer and let's create authentication context reducer and let's remember what we have done remember firstly we are creating our initial state which includes our main variable here in this case it was dark mode we are able to change this to true or false and we are going to create our context we are going to have state and dispatch we are going to use our reducer and we will be able to dispatch our actions let's see what we had here as you can see we had three actions here light mode dark mode or toggle basically when we dispatch this action our dark mode is gonna be false when we dispatch this action dark mode will be true and there is a toggle and we dispatch this basically it's gonna return the opposite of dark mode and we are using this toggle here when we click this button as you can see it's toggling like that so i'm gonna copy here and paste inside my auth reducer of course i'm gonna change this name it's gonna be path reducer like that and we are gonna have two actions basically it's gonna be login and log out and our main variable will be current user and when we login remember it returns us our user here we are just gonna assign this user to our current user so i can pass this as a action payload so what about here if we log out basically it's gonna be null that's all it's that easy so i'm gonna close here and i'm gonna create my context again i'm gonna copy everything i don't wanna waste time it's gonna be much more easier firstly i'm gonna call my reducer it's gonna be auth reducer and initial state will be current user at the beginning is gonna be null we don't have any user yet and i'm gonna create my context let's choose everything here not this one not this one and here and i'm going to say both context okay so which values we are going to use we are going to use our current user and our dispatch that we can dispatch our reducer actions and that's all of course we should wrap our application with this provider to do that remember what we are doing i'm gonna go to index.js and as you can see we wrap our application with dark mode provider but one more wrapper is gonna be auth context provider i'm gonna import and i'm gonna wrap my application like that it's that easy so in this case anywhere in our application in any page in any component we are able to reach our current user oops it's gonna be going to user and we will be able to reach our dispatch that we can log in or log out okay let's close everything here and i'm gonna open login page again so what i'm gonna do is calling my dispatch method here to do that we are gonna use use context hook and we are gonna destructure our dispatch i'll say const let's say first use context as you can see it comes from react and which context i'm gonna use is gonna be our oauth context let's import this it's not coming off context from context and auth context okay what i'm gonna destructure here we have current user and we have dispatch here we are gonna use just this patch that's because we are just gonna log in we are gonna need this i'm gonna copy here and i will say dispatch and let's open our reducer first and let's see as you can see we have action type and for login we are going to need action pay dot let's write them i will say type will be login and we are gonna have payload and it's gonna be just this user which comes from our firebase and that's all in this case i can do the same thing for our application but this time we can reach our current user let's open our app.js and here i will say use contacts i'm gonna import this like that but this time it's gonna be current user we don't need that anymore i'm gonna delete like that let's come here and say console.log current user and i'm going to open my console as you can see it's null right now i'm gonna try to login i will say admin lama dot i will log in and as you can see we have our user but there's a problem here that because if i refresh my page as you can see our user is null again that because at the beginning in our context our current user is null it means whenever we refresh our application it's gonna be null again to prevent this after logging we can just take our user let me make this bigger we are gonna store our user inside our local storage it's gonna be user and user information if we do that even if we refresh our page the user will be always here and we won't need to log in again and again so i'm gonna come here and i'm gonna use use effect and i'm gonna say whenever our current user changes what i've done here okay whenever we change our current user we are gonna assign our details into local storage to do that i'm gonna say local storage and set item and we are gonna set our user its name is user and it's gonna be state.currentuser but remember it returns us an object but we cannot write here directly an object it has to be string we cannot store any object here so basically i can take this and i can use json stringify and what about here as i said when we refresh our page it's not gonna be null anymore it's gonna read current user from our local storage and this time we have to transform this to an object to do this i will say json and parse and local storage this time is going to be get item and we are going to take our user and if there is no user it's going to be just now as you can see our user is null i will try to log in i'm gonna login and our user has changed it's here perfect and even if i refresh my page we are still here we are not going to login page that because we still have user here perfect so basically we can sign in like that and we can store our user into local storage like that it's that easy so if you understood how to login let's take care of our lists here we are gonna fetch all data from firebase but we don't have yet it's just a dummy data let's come here and open up our sidebar where was this it was here i think okay as you can see this is our data but we are not gonna use this anymore we are gonna fetch everything from our db but before let's see how we can add new item i'm gonna click here and we are gonna use those inputs and inside fire store we are gonna create our new user so let's create our db i'm gonna click here and we can start with production mode or test mode let's go with production mode and you are gonna choose any location here i'm gonna choose usa doesn't matter and it's ready you can create any collection it's gonna be users products or whatever you want and inside those collections we are gonna create our documents but firstly i'm gonna go to rules that because we are not allowed to read or write any documents or collections by default i'm gonna just make this true and i'm gonna publish of course in the future when we create bigger projects we are gonna change here we are gonna write our own rules but for now it's gonna be just true okay let's come here and let's see how we can create new documents i will write here a document okay maybe here add new document okay this one i think okay let's see what we have here as you can see we have some methods here and we can create our own documents but what we are going to need is our database first we have to create our firestore db let's do that first i'm gonna close everything again and i'm gonna go to firebase and let's initialize our firestore let's go to get started again and let's see how we can do that and as you can see we have already initialized our application but we don't have any db we are gonna import this module let's come here and write it here and i'm gonna copy this and paste here and of course it's gonna be export again that because we are gonna use it in any other components and let's try i'm gonna go to new page and i'm gonna try to add new document let's come back and i'm gonna import document and set document methods here and when we click this send button we are going to create our document let's say on click method or again we can write type submit and we can use onsubmit method here i will say on submit and let's say handle add i'm gonna copy this and create my function here const handle at it's gonna be again event that because it's gonna be prevent default again prevent defaults okay of course we are gonna use those inputs but for now i'm just gonna show you how you can do this i'm gonna copy this and paste it here and as you can see it's a promise that means it's an async function and we are going to import our db here remember it comes from firebase by the way it's gonna be just javascript async i'm gonna delete here so when i click that button it's gonna create new collection which is this and inside this collection we are gonna create new document which has name state and country so what about this it's gonna be our document id let's try and you are gonna understand better i'm gonna come here open my console of course this is our user i forgot deleting this don't worry about that i'm gonna send nothing has changed that because we didn't write anything after creating our documents but let's see and as you can see we have this here we have new document and this is its id and all those properties perfect it works so what about if we don't want to add any custom id it's going to create randomly just late here in this case we are not going to use set document anymore it's going to be add document and here we are not gonna choose any document instead we are gonna choose our collection i know it's weird but this is how it works let's check on the documentation here as you can see when you use set method you must specify an id but if you don't want you can do this by calling add as you can see add document but this time we are using collection our collection name and its properties this time let's see actually what it returns let's say const response and it's gonna be console.log response i'm gonna come here and i'm gonna send ak i'll click and as you can see it returns this object here and as you can see our properties are not here but we can see its id let's try i will say response id i will send again and as you can see this is our new id let's try i will refresh and as you can see it's here it's the previous one and this is what we added first and also we can add here a timestamp let's say timestamp and it's gonna be server timestamp like that as you can see it comes from firestore and there's a comma here and let's see i'm gonna click again our id let's see here which one is the new one this is i think okay as you can see this is our timestamp perfect so creating new document is that easy of course you can write here try catch block if there's an error you can see that i'm gonna move this try block here and i will say catch if there's an error just console.log or you can create new state here and show your error and let's delete this but of course this is this call action but we are gonna need users collection let's delete this let's say this i'm gonna delete and i'm gonna create users if you remember for the login and register process we have to use authentication we have to create here our users if we only create here they are not gonna be able to authenticate so what i'm gonna do is creating user here and after if it's successful we are gonna create the same user here with same id and we are gonna use those properties but we have a lot of input here so i'm not gonna create them one by one what i'm gonna do is creating one new state and storing all those inputs inside this data let's say data set data is gonna be use state and at the beginning is going to be an empty object let's see what we have done actually here if you remember we have inputs here and we are mapping through these inputs and for each input inside this array we are calling our form input div here so where those inputs come from as you remember we have a form source here and we have user inputs and we have product inputs so what i'm gonna do is changing their ids for username it's gonna be username why i'm doing this that because we are using only one data here and we are gonna write on change method for this input for example for username we are gonna use this id for name and surname let's write here display name and email phone number password address and country and we are gonna use all those ids inside our firestore db so make sure that you are not giving any space or something here so let's come here and let's write our own change method i will say on change and it's gonna call let's say handle input function let's create this i will come here and say const handle input is gonna be event and we are going to change our data here of course const so we can reach their ids let's say const id is going to be event target dot id which we have created and also we can reach their value const value is gonna be event target and value in this case i can set my data again and it's gonna be the previous data i'm going to spread this and also we are going to add new one it's going to be id equals value like that you are going to understand better right now let's see actually console.log and data of course we didn't give our ids let's keep those form inputs it's here as you can see i'll say id it's gonna be input.i let's see i'm gonna come here and write something and as you can see display name is changing if i write something here as you can see this play name is still here that because we spread our previous data here it's not changing we are just adding one more value here idm value username and value like that perfect so we have our properties so let's edit to do db but as i said we have to create new user also so we are gonna use sign up bit email and password method let's remember again we are gonna use add document and also sign up with sorry create user with email and password let's do that i'm going to copy this and paste it here okay if we don't need that that's because we are going to fetch this from our firebase file now let's say auth okay firstly we are going to create using these methods after that we are gonna set new document and we are gonna create user in rdb let's do that i will say const response is gonna be await create user and i'm gonna pass here auth data dot email and data dot password like that and if you remember it returns us a user which includes an id and we can use that id and we can set our users into db to do that of course we are going to use set document that because we are not gonna generate any id we already have and it's gonna be document users collection and response user and id sorry it's gonna be uid okay so what we are gonna pass here we are gonna have timestamp and we are gonna have all those input properties so i will say data and that's all let's see let's try i hope everything is okay i'm gonna come here and let's refresh and close here i will say jane doe test and usa i'm gonna send and if everything is okay we are gonna see it here let's refresh and perfect it's here and remember this document id we are going to check authentication and it's going to be the same id and it's here 0pp 0pp perfect why we are using same id that because if you want to delete this user we are going to delete this from firestore database and at the same time we are going to delete this from authentication users and there is one more thing here and it's going to be our image right now we are not able to upload any image but we are going to use firebase storage and we are going to be able to upload any files here i'm gonna come to rules and again we are not allowed right now i will say true and let's try to upload to do that i'm gonna go to doc again and i will write here firestore storage i can directly write those codes here but i want to show you how to read documents that because if it changes if they change the version or something you can just follow these steps and you can see how you can implement the new version let's say storage for web and as you can see we are gonna need this gas storage method i'm gonna copy this and i'm gonna go to firebase and we are gonna initialize our storage and we are gonna export it of course it's gonna be our app and i will say export storage okay right now we can use it let's see how we can do it i'm gonna come here and as you can see upload files as you can see it shows one by one but we are gonna need advanced one okay this one as you can see we are gonna need some methods here we are gonna create our storage ref we are gonna pass our storage here which we have created and after that we are gonna give any image name you can give whatever you want and finally we are gonna upload our image let's copy here and i'm gonna go to new page and paste here you don't need get storage we already have it's here i'm gonna just import this like that and we can start uploading our files as you remember we have file use state here and whenever we change our images we are applying on change method and setting our file okay so what i'm gonna do is creating here a use effect that because when we choose any image here we are gonna immediately start uploading that image to our store and we are gonna get its link and when i click this button we are gonna send them to userdb here and additionally we are gonna add that image url here let's do that i will say let's delete here actually let's write it underneath our use states i'll say use effect and our dependency will be file and if there is a file we are gonna upload our image let's say const upload file we are gonna write our functions here and finally if there is a file we are gonna call this function like that okay let's go back to talk here and firstly we are gonna need a reference storage reference and as i said we can give any image name to do that we can directly use file dot name but if we do that if we upload multiple files with the same name it's gonna overwrite to prevent this we should create a unique name i will say const name or unique name it's gonna be new date i'm just gonna take the timestamp let's say get time and also i'm gonna add here file.name basically if filename is test.png is gonna create a new timestamp according to your uploading time and also it's gonna use that name actually let me show you you can understand better i will say name i'm gonna comment this out so i'm gonna come here and choose an image let's choose this one and i'm gonna open my console and it's here as you can see this is our timestamp and this is the actual name one.jpg those are coming from also log data and remember don't worry about that so let's upload this let's check here and we are going to complete our uploading task let's copy here like that let's open this again and i'm gonna paste the other code there is a warning here that because we don't have any default case i will say default it's gonna be just let's say break okay let's see what we have here we have a reference and we are gonna upload our file using this reference and our actual file and after that it's gonna start uploading and here we have some stages let's delete those comments actually okay and as you can see we are actually listening our uploading process here and whenever our state changes it's gonna inform us as you can see there's a progress variable here and we can see uploading percentage or whenever it browses it's gonna warn us or if there's an error we can write here any handling for now let's say console.log error and finally if everything is okay if there is no error it's gonna give us a downloadable url and we are gonna take this url and set our data again i know it's confusing but don't worry about that you're gonna understand better right now i'm gonna delete this we are not gonna console.log anything i'm gonna just set my data remember when we write anything in our inputs our data will be updated and also when we upload an image it's gonna take the url and update our data again to do that again you can say previous data and url but if you do that as you can see there's a warning here that because in this case the data is our dependency to prevent this you can basically use the function method what i mean by that you can write here previous or whatever you want and i will say take the previous data it's exactly the same thing we are just not using data variable here and i will say image it's gonna be download url [Music] like that i'm gonna save and you are gonna understand this progress better if i open my console that's open i'm gonna refresh the page why it's still here let's open our app.js we forgot this console log as you can see i will delete okay i'm gonna refresh again okay perfect so what i'm gonna do is giving a username for example test and i'm gonna try to upload an image i'm gonna upload this one 2.jpg and as you can see upload is zero percent still running and right now it's a hundred percent and it means it's into our storage right now this is how we see all those progress here let's check our storage i'm gonna come here and as you can see image is here perfect and if we check our data let's write it here again and as you can see username is test and image is our image era of course it uploaded again not because we save our file here so what we can do here we can disable our button during uploading process that because when we click any image and when we suddenly click this send button it's not gonna add this url to our data it's gonna upload but we are not gonna see it in our user collection to prevent this let's create here a use state again and it's gonna be percentage set percentage at the beginning it's gonna be null and whenever we change our percentage here this progress we are gonna set our percentage let's come here and say set percentage it's gonna be progress and how i'm gonna disable my button it's really easy we are gonna use disabled attribute and here i'm gonna write my condition i will say if progress sorry what was the name percentage doesn't equal null and if it's smaller than a hundred we are gonna disable that at the beginning remember it was null that means we didn't start any uploading process and also if it's smaller than a hundred which means the uploading process is still in progress if it's still in progress we are gonna disable it let's open our css file actually and we can give some style for this button i will come here and i will see if it's disabled make this background color what was the color it was still and i'm just gonna reduce this opacity a little bit maybe darker color it really doesn't matter and also i will say cursor not allowed let's see i'm gonna come here and i'm gonna upload this image and as you can see it's disabled even if i click here it's not gonna send anything okay right now we have an image let's quickly test it test with image actually i'm gonna copy this here here i'm gonna send let's check i'm gonna refresh here okay our image is here and if i check firestore and this one i think and as you can see it's here perfect and if i go to authentication you're gonna see that our user is here perfect and it's exactly the same uid so what about fetching file i'm gonna come here and for users for example as you can see we are using dummy data but this time we are gonna fetch our all users here of course we have two of them but we are gonna create more but before let's see how we can fetch all data get data let's click here get a document as you can see you can fetch just one document but we are gonna fetch all of them multiple documents and get all documents in a collection we are gonna need that and as you can see again we are gonna use collection and also we are gonna use this method and we are gonna fetch all data in the collection let's do that i'm gonna come here and copy and let's close everything and open up our list and as you can see there is a data table here we can also fetch our data in that component it doesn't matter actually let's fetch it here and as you can see this is our dummy data i'm going to delete this instead it's going to be an empty array at the beginning and then we are going to fetch our data let's create here use effect and it's going to be an empty array here that because this use effect will be fired when we call data table component and it's gonna run only once and i will say const data of course it's gonna be async function that because we are fetching data what's here okay let's import our functions like that and we are going to use this query like that of course we should import rdb remember it's in our firebase file let's import it here db from firebase okay of course our collection name will be users and as you can see it's not working like mongodb it doesn't return us directly all those users instead we should use here a loop and for each document we should set our data but before let's write here try catch block if there is any error i'm gonna write it here catch error and just console.log okay and what i'm gonna do instead of setting my data again and again i can basically create here an empty list and i can push each document here please dot push and each document let's let this console log by the way and after that after ending all those process i can set my data and it's going to be list and of course i'm going to call my async function here and let's see what we have i will say console.log and data okay they are already here and as you can see there is something wrong here instead of giving us our user properties it returns this strange object here but if you check its methods you are gonna see that there is a data method here and it's gonna include all properties as i said firebase is a little bit strange but this is how it works so instead of document if i say document.data let's check right now and right now there is another error that because we don't have any id inside this data so what i'm gonna do is i'm gonna comment of this set data and i'm gonna console.log this list and right now as you can see all those properties here and you can understand why we saw that error that because we don't have any id here it doesn't return document id if i write here document.id you are gonna see that it includes our ids so i can use both these id and this data let's do that i'm gonna close here like that with curly brackets and i'm gonna say id equals doc dot id and also every property inside this data like that right now i'm gonna save and this time as you can see we have id and all those properties perfect so i can set my data again i'm going to open this and they are here awesome let's close this console as you can see there is age and status here but we don't have in our db but don't worry you can change your users here or you can change your columns here instead of h you can say i don't know maybe country for status you can say address because remember we are using our columns here data table source and it was our rows as you can see temporary data right now we can delete this and we have user columns here as you can see it's image and username h if i say for example address it's gonna show this address and you can show anything else here it depends on you just play around this data table or your documents here i'm just showing you how you can fetch data create data delay data those are not important for now and as you can see we don't have any image that's why it's broken so let me show you how you can delete this user let's come here you already know what we are going to do i will say delayed late data and as you can see it's really easy again document rdb and we are going to use this method that's all and we are going to indicate here our item id document id it's that easy let's copy this actually we already have firestore library here we are just gonna need this one let's come here delay talk and also document here we are going to delete our item and if you remember from previous tutorial we have a handle delete function here it takes item id and it just filter our data it doesn't actually deleting anything from db because we didn't have but right now we are gonna delete this item let me show you if i click here as you can see it's filtering but it's still here if i refresh the page as you can see and right now we are just gonna delete from our db let's copy this and i'm gonna come here try catch block error if there is an error console lock and what we are going to try we are going to try deleting our document of course it is going to be async and after deleting we can filter our item and it's gonna be users and i'm gonna write here my document id let's see right now i'm gonna play it okay it's not here anymore let's check and perfect we delete it if we check here in rdb there is only one perfect so what i'm gonna do is adding here some other users and after that we are gonna test something else i'm gonna stop the video and i'll see you then okay i added some other users but i realized something here when we create a new user and when we click on this button actually we are not navigated any other pages to prevent this let's open up new page and after sending our document we can navigate the previous page how we can do this to do that i'm gonna use use navigate hook i will say cons navigate use navigate comes from rear cloud or dom and after adding our document i will say navigate and minus one just go back to previous page let's try i will write here something doesn't matter my username and let's give image okay it's uploading it's done i will click ah okay password should be at least six characters i will send again and as you can see it returns me to users page and as you can see there are some users here so what i'm gonna show you is using real time database what i mean by that for example this emma as you can see there is no image i will not delete this let's find out okay it's here i'm gonna delete it okay it's deleted but as you can see we are fetching data only once so even if i delete this user inside my db it's still here but if i refresh the page it's not gonna be here it's not a big deal but i just want to show you how you can do this as you remember we are using get documents function to fetch our data just once but also there is one more solution and it's listening for real time updates let's click and here its method is on snapchat basically we are listening our documents or collections or whatever and whenever it changes we can directly see the result what i mean by that let's call this function inside data table and i'm gonna just paste here and after that we are gonna call this function i'm just gonna comment of this data fetching we don't need this anymore instead i will say listen which means real time what i'm gonna do is pasting my function but of course it's not gonna be document we are gonna listen our collection db it's gonna be users you are not going to need any specific id because it's all collection and after that it's going to return as a snapshot and again i can create my list list empty array for each document of this snapshot let's say for each documents i'm gonna take each one and i'm gonna add inside my list list.push remember what we are doing first here we are taking its id in this case document.id and also every properties which is document.data like that and finally i'm gonna set my data and it's gonna be list and also i can return here any error if there's an error it's gonna be just console.log like that as you can see it works like how we can handle our file uploading here it's actually listening our uploading process and it just informs us for every processor and also we can return any error basically when you listen anything you are gonna use this structure and also we are using a variable here that because when we start mounting our component here we have to unsubscribe again and again otherwise it's gonna listen this forever and it's gonna cause some memory leak to prevent this i'm just gonna return a cleanup function and it's gonna be unsubscribe okay i hope everything is okay let's see i'm gonna refresh my page as you can see they are still here i'm gonna come here and let's delete one of them for example jane doe okay it's the first one i'm gonna delete this and it's gone we didn't have to delete we didn't have to refresh it's immediately changing our user's result it's that easy by the way guys i want to create a tutorial about all react hooks so you can understand usefact better how to use cleanup functions and also we are going to cover how to use usedrav use callback function use memo just keep your notifications open and it's going to be coming soon ok i hope you understand how to return all call action you can fetch only once or you can listen your collections your documents let's delete here by the way okay by the way guys as you realize for users we are using user data table if we go to products we are still using users to prevent this what you can do if you remember we are able to use some props here for example for products as you can see there is a title here we can use it here and also we can pass here which data table source we are going to use as you can see we have only users columns here but also you can create product columns which includes product title its price i don't know other features and after that you can pass it as a prop and you can fetch data according to your list page for example here as you can see we are fetching users call action but basically you can take here for example type prop and you can pass it here that's all i'm not gonna show everything that because it's not a complete project i'm just showing you how to use firebase and for the upload process it's gonna be exactly the same just right here probably you don't even need me anymore you know what you are gonna do updates and as you can see set documents again remember as we did before we are setting new document we are giving our collection name and its specific id and we are changing its properties that's all i'm not showing that because i've already shown this remember if you want to add any document you are using add doc and here is gonna be collection and you don't have to specify any id but if you are updating any document or you are adding new document with a specific id you are basically using set document and that's all i think but i want to show you some specific things for example how we can fetch data using queries maybe we can find some widgets here maybe this chart and after that we can end our tutorial let's take care of them okay i'm gonna close everything here and i'm gonna open widgets not showing this like that and as you remember we are using different kind of widgets and we are separating them using switch case of course if you want to if it looks strange for you actually for me too you can create source folder here as we did for our data table you can create different components here and you can give title its link title its icon and in the home page you can just pass that component according to this type it really doesn't matter it was just a beginner tutorial so it's not a big deal don't worry about that of course if you are creating something complex six or seven components are not enough here but for beginners it's totally okay so what i'm gonna do as you can see we are gonna have a counter here for example for the user we are gonna get the user number but it's gonna be only for this month last 30 days and here there is a percentage what we are gonna do is fetching user number for this month also the last month and we should compare them and write here the percentage how we are gonna do this let's create use effect here and we are gonna fetch our data i will say use effect and as always const fetch data is gonna be async finally we are gonna call this function by the way we are not using our function directly inside use effect but because we are not able to use async function directly here we are not allowed okay what i'm gonna do is taking today's date so i will say const today it's gonna be new date and also we are gonna need last month how we are gonna do this i'm gonna create new date again set month so we are gonna assign new one to do this we can use today and we are gonna get its month and we are gonna write here minus one and also one more it's gonna be previous month or two months ago or whatever you say and it's gonna be two why we are doing this that because as i said we are gonna need two different data first one will be from today to last month and second one will be from last month to the previous month you're gonna understand better right now by the way we should make time date also let's see actually i think i made a mistake i'm gonna open my console ah okay it's giving timestamp if i write here new date again it's gonna give the date version okay perfect and i will do the same thing for this one new date and let's see it's gonna be january okay perfect so what i'm gonna do is fetching two different data to do that we are gonna use firebase query let's see how it's gonna work i'll say const what can we say last month query it's gonna be query from firebase and we are gonna use our collections and we are gonna pass as we always do db and let's say users and after that inside this query we can filter our items to do that we are going to use the key that we can filter our documents and it's gonna be where and here which property we are gonna filter as you remember we have timestamp here we can use this property and we can say just take users which belong to last month and we can do the same thing for the previous month so what i'm gonna do i'll say timestamp inside code of course timestamp and i'm gonna write my condition here and it's gonna be smaller than today and also we can use multiple var key here so i will say again where again timestamp but this time it's gonna be greater than last month so let's see last month let me close here okay let's import them by the way it's not coming i think okay let's come here and i will say import from firebase and firestore so what we are gonna need we are gonna need collection query and where and also we are gonna fetch data it means we are gonna need get document and also we are gonna need our db remember it's inside our firebase file import db from firebase like that okay perfect collection why it's yellow connections it's gonna be collection okay so i can do the same thing for the previous month i will duplicate this let's say previous and this time it's gonna be smaller than last month and bigger than previous one okay our queries are ready right now we can fetch our data const last month data and it's gonna be await get documents and last month query i will do the same thing for other one let's say previous and it's gonna be previous and by the way it's gonna be documents so we have our data right now we can compare them now we are gonna do this if you remember we have amount here but we are using this as a dummy data instead we can create our use effect and we can update our data i will say const amount set amount and it's gonna be you state and at the beginning let's say no and also for this difference we are gonna do the same thing what's this difference remember it's our percentage here so i'm gonna duplicate this and it's gonna be difference like that let's delete here and we are going to set our data firstly i will say set amount and it's going to be last month data but remember we are not interested in any user property we are going to just take its length like that oops i just write twice let's delete this okay as you can see for that because we just created four users in this month but if i change for example these two it's gonna be let's say february i'll update and this one let's say january so in this case we are not gonna fetch this one because it doesn't belong the last month or the previous month so let's see i will refresh and as you can see only two and all widgets are same that because we are just fetching users but don't worry we are going to handle that so what about this difference i will say set difference and i'm gonna write here some math i will say last month data dot length minus previous one dot length and i'm gonna cover them that because they are gonna be divided by again previous data and length and multiply by a hundred it's gonna give us our difference let's see okay it's not defined there is something wrong of course i forgot docs like that i hope it's okay right now and as you can see a hundred percent more than last month that because it was one but this time it's two it means a hundred percent if i create one more user let's create hello and username why i am uploading this i don't know but anyway i'm sending okay there is a problem that because we forgot at here i'm gonna send again okay it shows users page again and as you can see 200 percent more than previous month perfect it works so what about others for example this second one let's create one more collection i'm gonna say products for example auto id and let's say title iphone 13 maybe price it's gonna be number of course but it's not really important but anyway let's do that i'll say status for example is gonna be active oops let's update this okay by the way i forgot timestamp the most important thing i'm gonna choose here just today i'm gonna add and i want to duplicate this oh i can't do this here okay let's add new one february 22. so how we are going to change these queries according to our type let's come here and for example we can say query and it's going to be users orders earnings maybe let's change this one i will say products or products title will be products it's not gonna be money but i'm gonna write here query and it's gonna be products that becomes it's our collection name remember and for our queries i'm going to update them instead of users it's going to be rquery data.query and of course inside home page order earning balance but i'm going to change this one i'm gonna take this here and it's gonna be product and here perfect as you can see this is our product number which belong this month but our difference is zero percent that because our other product belongs to previous month it's that easy what about negative one let's create one more quickly it's gonna be again previous month that's because it's gonna be negative i'm gonna save but there's a problem here that because it's still green and we see this icon here we are gonna change them and as you remember our class name is positive but we are gonna change it and make it dynamic let's delete this and i will say percentage and also look at difference if it's smaller than zero right here negative and if it's not just write here positive and right now as you can see it's red that because we changed our class name but we still see this up arrow here let's change it also i will come here and another condition if difference is smaller than zero we are going to use keyboard arrow to icon of course question mark here and if it's not if it's positive it's going to be keyboard arrow up icon like that of course we don't have this icon let's import i'm gonna duplicate this and it's gonna be done oops what's wrong here ah i didn't relate this one i'm gonna play it and that's all positive and negative and you can create your orders earnings i think you have learned enough to handle anything in firebase it's really easy as i said it's a little bit strange i agree mongodb is much more easier but if you are using firebase you don't have to create your own back-end server for smaller projects of course if you are creating something complex you should definitely create your back-ends and also i'm gonna show you firebase admin oops okay there is a typo again but doesn't matter it's like google search and there is a firebase admin sdk and as you can see it provides more feature like creating token token verification user roles refresh token all those things and don't worry about that when we create any big project with firebase we are gonna use all those features but for now for the basics it's totally enough it was pretty well but i want to talk about firebase i hope you enjoyed if you learned something new today please like the video and just write what projects you want to see in the next videos and that's all if you want to support lamadev you can use the link in the description below or you can join the channel and don't forget to follow lamadev's social media accounts and i hope i'll see you in the next tutorial goodbye

Channel: Lama Dev

Views: 146,273

Keywords: react, firebase, react firebase, firebase auth, firebase crud, firebase image upload, firebase firestore, firebase real time, react admin, react project, react firebase crud, react firebase auth, react firebase admin, react tutorial, firebase storage, firebase login, react firebase login

Id: D9W7AFeJ3kk

Length: 87min 42sec (5262 seconds)

Published: Wed Mar 30 2022