Firebase 9 with React JS Tutorial 🔥🔥

hey everyone welcome back to roadside coder and welcome to firebase tutorial with react.js so firebase is a backend as a service created by google what does that mean when we develop apps whether they be web app mobile app or any kind of app the process of developing an efficient backend managing database providing authentication whether it be email or google or any sort of authentication gets a lot tricky and is time consuming so this is where firebase comes in it provides us all these features in its sdk which is super easy to understand and work with and can save you a ton of time and resources therefore in this video we are going to build the back end for this crypto tracking app with features like authentication with email and google features to add and remove coins to watch list and much more so without any further ado let's get started [Music] so the app on which we are going to integrate firebase on is this particular app crypto hunter so if you don't know about this app this is the project that we built in our previous video so you can go and watch that tutorial or you can go to github.com slash push dash eon go to repositories search crypto over here and yep you'll find this repository i'll provide link in the description as well so here you're gonna see two branches one is the master branch another is the firebase integration so the master branch is the one that i built in the previous video so you can go ahead and clone this repository by copying this line and running git clone and this particular link and the code for this video is going to be inside of this firebase dash integration branch so here it is i have cloned that particular branch in rvs code so you see all of the code is over here now you can run npm install to install all of the dependencies now let me give you a quick overview of this app so inside of the app.js we have two pages one is the home page and other is the coin page so if i go to the app yep this is the home page and if you click on any of the coin this is the coin page now in our home page we have two components one is this banner component and other is this table component so if we go inside the home page we can see a banner component and a table component a coin stable component and in our other page that is the coins page we have all of the code related to our coins so to integrate firebase what we have to work with is this one so inside the app.js we have this header component that is this component right here inside of this header component we're going to add a login button so header component is located right over here so here we're going to add the functionality for user authentication and inside of the coin page we're going to add a button over here to add it to the wish list or the watch list okay so first of all what i'm gonna do is i'm gonna make a few changes in our project and that is i'm gonna go inside of coins table that is this component and from here i'm gonna take both of these states coins and loading state and i'm gonna move it to the crypto context just like this and now i'm gonna send this coins and loading to our app so comma coins comma loading cool now these coins and loading will be accessible in whole of our app now let me go back to the coins table so now that these both are removed from over here let me move them and i'm gonna take out both of them from crypto state so comma coins comma loading also we're gonna take this function the fetch coins function take it and add it to our crypto context right over here import the axios and the coin list now if you're unable to understand what i'm doing over here so i would highly recommend you to go and watch that previous video of the project tutorial or you can click on the time stamps below and you can skip to the part where i start doing the authentication in our app now i'm going to take this fetch coins and send it to our app just like that and receive this fetch coins right over here just like this and i believe everything should be fine now let's run our app by typing npm start now here it is our app has started let's see if everything is working fine or not yup looks good to me all right now i'm going to open a new tab and i'm going to search firebase over here and let's go to firebase.google.com and you can see i'm already logged in with my account so let's click on get started and let's get started with firebase and now it's gonna ask us to add a new project or create a new project okay let's go and create a new project i'm gonna name my project crypto hunter and i accept firebase terms and continue okay we don't need google analytics for this project so i'm gonna disable it and create project now it's gonna take a few seconds to create your project so let's wait awesome our project is ready let's continue here we are we are in the inside of the console of our project so let's click on this web since we are creating a web app so let's click on this web button and now it's gonna ask us to register an app so our app name was crypto hunter and let's register an app cool now it's asking us to install the firebase into our project okay let's copy this line npm install firebase copy and let's go to our vs code and i'm gonna install it so open a new terminal and paste it npm install firebase press enter okay meanwhile this is starting let's configure our firebase so after this it has provided us with this firebase config okay let's copy this up and go back to our vs code inside this config folder i'm going to create a new file for firebase config dot js all right and inside of this i'm going to paste it now let let's export this so that we can use it somewhere export default firebase config now you might be thinking why are we putting all of this sensitive information inside of this file right here shouldn't we use dot env don't worry it's completely fine to put all of this inside of our project because we can add the security rules in the firebase console but still if you want the complete security i would highly recommend you to put all of this code inside of a dot env file now if you don't know how to do this you can go ahead and watch this video link will be in the description so our firebase has fans installing let's close this terminal all right let's go back to our firebase console and let's click on continue to the console and here we are so let's configure our authentication first so let's click on authentication get started and what are all the authentication that we're gonna have we're gonna have email and password authentication so let's enable this save and we're going to have the google authentication so add new provider google enable and project public facing name and let's select an email id okay and save this all right so we have configured our authentication let's go back to our vs code and start integrating firebase so inside of src i'm gonna create a new file called firebase.js and instead of this firebase.js file i'm gonna initialize a new firebase app so i'm gonna say const firebase app equals initialize app and instead of this we're going to provide that firebase config that we had created earlier yep you can see it has been imported from this file and also we need to import this initialize app so this will be imported from firebase itself so import from firebase slash app and if we go on over here and press ctrl space you can see it gives the suggestion and if we click on it we have this initialize app auto imported let's save this all right so this is the variable that is gonna act as an entry point between our project and firebase so we're gonna use this variable to initialize our auth and our database so for our auth we're gonna write const auth equals get auth and we're gonna add firebase app inside of it now get auth will be imported from firebase slash auth now if you're coming from a previous version of firebase like firebase 8 you might be confused because in the previous version we used to import firebase like this so import asterix as firebase from something like this okay so we used to import whole of the library at once but this is not how it works in firebase version nine firebase version nine has modularized whole of the firebase so that it takes the less space and makes our app a lot faster so we're gonna import every single module separately so import get auth from firebase slash auth just like this and similarly if we need to import the database so import db equals get firestore now don't worry about this firestore thing i'm going to come back to this later but for now let's for configuring i'm gonna import it so import get file store from firebase slash firestore awesome now let's export both of these things so export earth comma db and we are done with initial configuration of firebase with react so let's go on now and set up the authentication inside of our app for that i'm gonna go inside of the crypto context our context api and create a new state over here for user so use state user and initially it's gonna be null now let it sit there for a sec and let's go on and build our ui for our login and sign up so for building our ui let me go back to our app so here right here we're gonna have a login button so if i go to our deployed website yep you see we have this login button over here oops i'm logged in let's log out yep we have this login button over here after clicking which we have this beautiful model with login and sign up or we can sign in with google so to create this model let's go to v4.mui material ui version 4 and click on get started and let's search model over here yep this model if we click on open model yep this is the one that we need so we're going to use this model to create that component all right so inside of our vs code inside of the components we're going to create a new folder for authentication authentication cool inside of this i'm going to create a new file called auth js rafce and let's say login for now and i'm gonna import this auth model inside of our header that is this file inside of the header below this select we're going to add this particular auth model component so let me import it yup it must have been imported let's see yep it has imported over here cool now let's go inside this auth model and let's see in this material ui documentation and let's go to this code and take all of this code i believe yep let's take all this code and we're gonna work from there so i'm gonna paste it over here and rename it to auth model let's see in our app if it works or not if you click on it yep it it's working fine awesome let's make the changes now now instead of this button i'm gonna have a button of my own so let's remove this and add button so this button will be imported from material ui and let's click let's add login this is gonna be variant of contained and it's gonna have style of with 85 height 40 margin left 15 and some background color of goldish so let's see yep login button is right over here i think we don't need this margin left so let me remove this yep that looks better now we're gonna add the on click just like it was added previously in this button so on click was this one handle open when this gets triggered it's gonna open the model so the code for the model is written right over here so inside of this we're gonna work on our login model so for now let's test it out yep it's working fine now inside of this we're gonna remove everything inside of this div and we're gonna add two tabs over here just like you see in our app in our final app if you click on login you see these two tabs are over here so if we go to the material ui documentation if we search tabs yep we have this tab bar component so we're gonna use that so how do we use it we have this parent component of app bar inside of it we add this component for tabs which will display all of these tabs and below this in each of this tab panel we're going to display all of the content for let's say login or sign up in this case it's item 1 item two etcetera so let's go back click on login and i'm gonna start adding stuff inside of it so first thing was app bar so insert this app bar first of all this app bar is gonna have the position of static and some style of background color transparent and color of white inside this app bar we're gonna have two tabs tab one will be for login and tab two will be for sign up so let me import all of this yep and for this value and on change let me go back to the documentation so if we click on this whole code you can see yep on change is going to trigger this handle change which is this one and for the value it's going to be this thing so i'm going to take whole of this stuff and paste it right over here value and for handle change for changing the tab so now i don't think it should throw any error yep it's fine let's go to our app and see yep login and sign up both are over here cool okay we have this weird padding over here let's see what's causing this so if you go to the styles i'm going to configure it so instead of these styles i'm going to add my own styles for the paper so paper is this thing the div inside of the model okay so i'm going to add these styles with 400 background color of theme dot palette dot background color which was already there color white and border radius of 10. now let's check yep it looks better now below this how do we render both of the tabs so if we go back to the documentation so it has this tab panel component we can either use this or we can use the conditional rendering so if we click on any of these tabs so it changes the value right so let me show you if we log value and if i change this yep you see one and if i click on this can display 0. so if the value is 0 we're going to display content related to the login and if it's 1 we're going to display it related to the signup cool below the app bar i'm going to add two conditions so if value equals to 0 then it's gonna display a login component otherwise it's gonna display a sign up component and value has to be one so now all obviously both of these component doesn't exist yet so i'm gonna go ahead and create both of these components so inside of the authentication i'm going to get a new new file for login dot js and sign up dot js start login r a f c e and yeah if you don't know what this rfc is i have installed an extension which allows me to do this which is this extension es7 react redux graphql blah blah blah so you can install that extension and make use of this stuff so i'm going to write login inside of this for now and instead of this sign up our afce enter sign up yup and let's import both of these inside of over here okay i think i have to manually import it import login from dot slash login and similarly we're gonna import sign up just like this let's check if it's working if you click on login yep login and sign up both are over here also from inside of this login we're gonna after we have clicked on login we need to close this model right so we're gonna take this function handle close and send it to both of these components so that whenever we need it we have the access to this so handle close yep let's go inside of the login and provide it in the props and to the sign up as well all right so now let's go on and build our sign up component first so instead of sign up we're gonna have three states so i'm gonna add the state for email import use state as well yep another state is going to be for the password let's keep the p capital and the third one is will be for confirm password awesome now inside of the return we are going to have something called box from material ui which acts just like a div but it has a few extra functionality like we can provide the padding so we're going to provide it padding of three and we're gonna provide some style of display flex flex direction column so that everything appears from top to bottom now inside this box we're gonna add a few text field for our email password and confirm password so over here we're gonna add this text field let's import it yep it's imported so text field is gonna have variant outline types gonna be email label enter email label is like a placeholder or something and value is going to be email which is our state and on change we're going to change our state and obviously it's going to be a full width so let's go and check it out instead of the sign up yep we have our enter email similarly we're going to have for our password and our confirm password as well so below this i'm gonna add that code yep this is the one for password and this one for confirm password let's check it out awesome looks good yup so now we need a button which says sign up similarly similar to this the sign up button so let's go to react and below this i'm going to add this button let's import it first yep it's imported so variant is going to be contained size is going to be large style some background color of goldish background color and it's going to on click it's going to have a handle submit button so i haven't created this handle submit function let me create it real quick const handle submit let's keep it empty for now cool let's go and check it out yep that looks beautiful this is what i wanted now let's go and create the ui for login as well so for login i'm gonna remove this up and first yep first we need the states i forgot so i'm gonna create the states over here which is just going to be email and password and let's import the user state just like this and inside the return just like we did previously we're just going to copy that up so box so all that we need is already inside of over here but what we don't need is this confirm password so let's remove that and import all of these components from material ui and box also we're gonna have a handle submit const handle submit empty for now cool i think this looks good let's go back and check it out instead of login yep it looks awesome now let's go back to our sign up and i'm going to create the sign up functionality from firebase first so inside of this handle submit i'm going to first check if both of the passwords match or not so if password is not equal to confirm password then we're gonna show it an error and we're gonna show it in the form of an alert so let's create a custom alert component for us so if we go to material ui and search snack bar so we have this snack but if you click on this open snack bar yep you see it displays this toast like thing as a notification so we're gonna need this in our app let's see how we can do this we need to have a button okay on clicking which we have this snag bar component which is gonna display us the appropriate message and okay we have these severities like error warning which will displace display these colors accordingly awesome let's go ahead and implement this so first of all i'm gonna go inside of our crypto context and i'm gonna create a state for our alert so use state and i'm gonna name it alert and our alert state is gonna have a few things first one first of all if it's open or not so open obviously it's gonna be by default false and message what's the message inside of this alert so by default it's going to be empty and the third thing is going to be the type if it's success if it's error stuff like that and we're going to send both of these to our app comma alert and set alert just like this let's close this and inside of our components i'm going to create a new file for alert.js and inside of here our afce i'm going to add the code for it so first of all let's import the error i mean alert context that we had created so const crypto state we need alert and set alert below this inside instead of this div we're gonna have a snack bar and instead of this snack bar we're gonna have a few things so let's let's go back to the documentation that will be easier for us so if we see the whole code um we have this handle click to open it up and we have this handle close okay let's take this handle close also we need this state let's take this whole thing okay let's save this i don't think we need this because the open state is already inside of this alert state so let me remove this and also remove this and click for now we're gonna use that whenever we want to open our snack bar so instead of this i'm gonna now add set alert so whenever you want to close the alert so set alert and open is gonna be false cool now insert this snag bar first of all snag bar has a few props which it takes so let's see it has open auto height duration and an on close okay let's take all of this stuff and paste it over here so open what the open is gonna be alert dot open auto hide duration uh it's a little bit too much so i'm gonna add three second instead of six seconds and on close and close yep fine that's fine now instead of this snag bar i'm gonna add the mui alert component so m ui alert hello it's not getting auto imported weird let me import it manually import mui alert from material ui so it's going to be coming from material ui lab as i explained it in a previous video that material ui lab is a separate entity inside of material ui cool now inside this material ui alert you're gonna have a few things called on close elevation variant that it's gonna be filled or not severity is gonna be alert dot type which we already defined it inside of our alert in the context also what is gonna display it's gonna display the message so alert dot message awesome so we're done with the setup of our alert let's close this up and go back to our sign up so if the passwords do not match we're gonna display this alert first of all we're gonna take the set alert from crypto state so let me import that crypto state yep it's imported so let's take this set alert and set alert will be open to true and message it's gonna have the message of passwords do not match and the third thing is going to be type which will be error and after that i'm gonna return let's test it out in the sign up if we put some different passwords and click on sign up hmm where nothing happened let's see what did we do wrong oh wait a minute i think we have to import this alert component inside of our app.js which we haven't done so instead of the app.js below this div i'm gonna import alert component oops alert not from material ui lab import alert from dot slash component slash alert now this should work let's see yep you can see password won't match but let's just start it again if i put something else sign up yep password do not match awesome it's gonna display till three second and it's gonna go away cool let's move forward with our sign up now we're gonna display our try catch block over here so inside of the first try we're gonna say we're gonna take create user with email and password from the firebase sdk so let me show you so const result equals a weight so since this we're using a weight this function is going to be async await create user with email and password so this is what is used to add the email and password authentication in firebase so what it takes is it takes the auth which we created earlier so auth we're gonna import it from firebase so yep you see we are importing from firebase this particular file that we created earlier so it's gonna take the auth and it's gonna take the email and password so after we have the result we're just gonna display an alert that welcome or login or something like that so set alert we're gonna say open true message sign up successful welcome result.user.email so result has a bunch of things let me show you real quick so if we go and log this result object but first let me do one thing let me after this after login we need to close this model right so we're going to take this handle close and we're going to call it over here so that the model gets closed automatically and if there's any error we're going to display the alert as usual so here i'm going to add the alert open true message and whatever the message is and type error and return it cool let's go and check it out so sign up i'm gonna use this email id okay that's fine i'm gonna add a password let's click on sign up and you can see sign up successful welcome my email id so if we go over here and you can see yep we have the result yeah there it is user credentials so inside of this we have this user and inside of the user we can see all of the details related to the user like uid and email id if the email verified is verified or not and bunch of other stuff so this is what the result variable provides us so we're just going to take result.user.email awesome so we have successfully created our authentication flow for sign up now let's go ahead and create it for login so if we go to login and but wait let me first test it out if the user is already there so see the user is already there i'm gonna log in try to sign up with this user again sign up yep it gives us error that email is already in use awesome so you see how easy it is to create the sign up flow with the help of firebase let's go and create the login flow now so instead of our login right over here inside of the handle submit we're going to have the similar code we're going to first check if email and password are empty or not so if they are empty we're going to throw the error please fill all the fields also we need to import this set alert so const set alert from a crypto state awesome so now if we leave any of these fields empty it's gonna display that please fill all the fields now for login we're gonna have a similar function like this like this so this was create user with email and password and now we're gonna have function with sign in with email and password again i try catch block inside of the catch i'm just gonna write what we had written earlier open true message error message type blah blah blah and inside of the try we're gonna have similar code so const result equals await and since it's a wait this function is gonna be async so wait sign in with email and password yep now you see this thing will be imported from firebase slash auth so it this also takes the auth that we had provided earlier the email and the password and this also results this also returns us with the similar type of object that we had seen earlier so let's go ahead and i'm gonna copy this up paste it over here instead of sign up i'm gonna say login successful welcome particular user okay let's go ahead and log in so this was the email id that i used and let me enter my password and click on sign okay this is this sign up oh my bad i need to add the login oh something happened yeah login successful okay but let me just first change this sign up to login um like yep so if we enter the wrong password and try to login yeah you see wrong password it gives us the error this works flawlessly now every time user logs in or signs up we need to have a state right which contains all of the user data which we already have created inside of this inside the crypto context called user but we are not yet using it so let's use it now so how will we know that user has logged in or signed up so below this i'm going to add a function actually i'm going to add a use effect and instead of this i'm going to add all of the code so let's remove this and i hope use state use effect is imported yep inside this i'm going to add on auth state change so it's going to monitor the state of our authentication of our firebase app so it takes the auth which was provided by this file firebase.js okay it takes this auth and then it's gonna give us a callback so user and this will contain the detail of the user if the user is login or not so if user is there then we're gonna set the user simply set user to user else oops else we're gonna set user set user to null simple cool now let's take this user and provide it to our context so user looks good now if i go to our header and i'm gonna take the user from over here from our context user so i'm going to check over here where this auth model is located user is there then display something else let's say let's say log out okay else we're gonna display this thing cool let's test it out okay lockout is there because user is already logged in you know if i refresh this app yup user is logged in already that's why this is over here okay then now instead of this logout i'm gonna display a user sidebar just like we have in our app so if we go on and sign up if you go on and sign in with google we have this user sidebar over here right so let's implement this functionality because this will have our logout button and after this we're going to go ahead and implement the google login functionality okay let's go to our app and instead of this i'm gonna write user sidebar and obviously this component doesn't exist yet so i'm gonna go inside of our authentication and create a new file for user sidebar dot js f c e just like this and i'm gonna say sidebar import it over here just like this and if we go now we can see the sidebar over here so how do we create this sidebar so if we go to material ui's documentation we have a component called drawer so this drawer will enable us to add this component so if you click on let's say right it's going to display it from right left from left top bottom etc so we're going to use this so let's see the whole code and i'm going to take whole of this code from over here which we are going to use it in our app and add it to this user sidebar file and i'm going to rename this temporary drawer to user sidebar awesome now if we go to our app what is this okay material icons obviously this is not installed so we're going to have to make a few changes in this file before using this which includes removing whole of this list function let me remove this from here as well i'm just gonna say hello for now okay and we have a lot of top left bottom right we only need the right one so let's remove this and all of this you only need the right let's check now okay we need to remove all of these imports let's see if it's displaying something yeah if you click on right yeah we have this tiny little sidebar we're gonna fix this now now instead of this button i'm gonna display something of my own i'm gonna display my own button which is gonna be this avatar if you noticed this avatar the profile picture of the user so i'm gonna display this so for that i'm gonna need the user from the context so const user equals crypto state and we're going to use this so we're going to import something called avatar from material ui so avatar avatar takes a few things first of all it's going to be a button so it's going to take an on click so on click is going to be the toggle drawer which was already there so if we go back um yep this toggle drawer i'm gonna take this on click and let's move forward yep instead of this i'm gonna display that on click cool let's import this avatar first of all up avatar imported now accept this we're gonna have a few styles for this avatar such as height with some generic styles some background color some cursor i think background clear is not necessary so yep that's all and apart from this we're gonna have a source so our user object contains something called user dot photo url okay and we're going to have the alt for this since it's an image so we're going to have user or display name as an image so if the user has a display name it's going to display display names first letter otherwise it's going to display user dot emails first letter so let's check it out yep you see i think we i didn't have any profile picture obviously because we logged in with the email and password but since we have logged in with google in this one so we have this profile picture cool so this looks good i guess and i think i don't need this margin left here let's remove this yeah cool now inside of this drawer i'm gonna have a div which will have a class name of class name i mean classes dot container and this container is going to have few styles let me add those first of all let me remove both of these styles and container is gonna have the following styles width of 350 and padding 25 height of 100 from top to bottom display flex flex direction of column so that all of the stuff will be displayed from in the from top to bottom and some font family of mono space let's save this and check it out if you click on this yep we have a sidebar with width of 350. now below this i'm gonna have another div which will be for displaying the profile picture of the user so div and similarly like we did with the avatar earlier we're gonna have an avatar inside of this so i'm gonna display an avatar inside of this with class name of classes.picture also this this div is gonna have a class name classes dot profile and below this i'm gonna display the user's email or display name if the display name is there it's gonna display display the display name or it's gonna display the email id and some generic styles like width font size text align font to weight and word wrap okay let's save this first let me add these styles for the profile but let's just have a look how does this look it doesn't look very good so i'm going to add these styles for this one and this one as well so let's go up i'm gonna add this style for profile let's see how does look okay i need to add the style for picture as well don't worry i'm gonna explain this so it's gonna be flex 1 and because so that it takes whole of the space available to it display is going to be flex flex direction is going to be column because we're displaying everything from top to bottom yep you see it's beginning to take shape some align item center to display it in the center and some gap between all of this stuff so this profile is going to be the first container and the other container is going to be for the log out button okay so we'll we'll make the logo button in a second and for the picture we're just going to display it with some width height and some cursor pointer some background color and object fit contain now below this let's just first create our log out button so below this div i'm gonna have this button right over here which is already imported i guess and on click it's gonna trigger a function called log out which doesn't exist yet so i'm gonna create it const logout yep now this shouldn't give any error let's go back and yeah if you see the log out over here and let's add the styles for log out since we have added yep we have add this class log out let's add the styles for it this is going to be simple we're just gonna have some height and width some background of golden ish color some margin top just like this cool now in this particular space we're gonna display our wish list or watch list coins so you see yep watch list so let's add the container for now then we're gonna add the functionality later so below this i'm gonna add another div with the class name of classes dot watch list and instead of this i'm gonna have a title of watch list with font size 15 and text shadows just like this so let me add the container let me add the styles for this watch list which is going to be this some flex 1 some width of 100 background is going to be gray some border radius of 10 some padding display flex and some gap and we're gonna have a scroll inside of it so let's see how that look yep that looks awesome looks exactly like it great let's create the functionality for log out now so if we go to our logout function which was yep over here we're gonna use something called sign out from firebase so if we write sign out yep you see it's displaying the auto import from firebase auth so if you see yep it has auto imported and this takes the auth that we already created now after this has run we're gonna display the alert so we're gonna take the set alert from our context so oop i think i need to create it inside of here inside of our function yep so i'm gonna take the set alert and now below this i'm gonna display the alert and close the drawer as well set alert open true type success logout successful and below this we're gonna have this toggle drawer which was already made over here okay i think we need to make this below this yep that's fine let's test it out now if you click on this and click on log out yep log out successful and we have the login back over here awesome that works absolutely fine now is the moment that you all been waiting for yes the google sign up so let's go on and add the functionality for it so i'm gonna go back to my auth model let me close everything and sort of the components authentication auth model.js below this i'm gonna add a box import it from material ui and this box is gonna have some class names class name i mean classes dot google and instead of this i'm gonna say span and it's gonna have r and below this i'm gonna display the sign up button for google so for uh crea instead of creating our own sign in with google button i'm gonna use a library which is called react google button which displays the sign in with google button with all of the styles pre-built so i'm gonna go ahead and install it it's all react google button now let's restart our app npm start and below this i'm gonna display the google button so i'm gonna add it so let me import it yeah let's check yeah google button from react google button awesome and when we click on this we're gonna call this function sign in with google so let me create this function as well remove this cool let's wait for our app to start and see how that button looks now if you click on login yup you see sign in with google but it's getting out of this div right here so i'm gonna add a few styles to it so i'm gonna add styles to classes.google if we go up right over here below this i'm gonna add styles for google so padding is gonna be 24 padding top some display flex flex direction column and some gap in between those so let's check it out yep it looks beautiful now it's not going to work obviously right now so we need to add the functionality to it so to add the sign in with google functionality let's go over here we need something called google auth provider so const google provider and it's gonna come from so new google auth provider yep you see this comes from firebase slash auth now we're gonna make use of this variable uh right here yeah we're gonna make use of this variable so inside of this if we go inside of this function i'm going to say sign in with pop-up so so that it displays a pop-up so auth it's going to just take the auth function which you always provide this auth and the google provider which we created right here right over here now dot then whatever result that we get from the login process so result we're gonna display the alert so if it was a positive result we're gonna say set alert and sign up successful and welcome user and we're gonna close the model so let me import this set alert first of all okay i'm gonna import it here const yep set alert else we're gonna display a catch block dot catch error we're going to display set alert open true message error dot message type error okay crypto state is not defined let me import it yep now it's imported let's go ahead and try to log in now let's click on login and sign in with google yep we see this pop-up click on an id and awesome we have successfully logged in yep you can see the profile picture with the name and everything awesome this looks great so we're done with the authentication process now let's move on to our database to our firebase file store database inside of which we're going to stay we're going to store all of our watch list coins right over here and we're going to add a button inside of this single coin page called add to watch list or something like that let me see yeah we're going to add this button as to add to watch list and when we click on this it's going to turn red and if we go here it's going to display all of our coins so if you have successfully followed the video till here and created your own authentication flow with firebase hit a like on this video because this really helps the youtube algorithm to make this video reach to a much larger public and also subscribe to the channel for more such awesome tutorial okay so let's continue let's go back to our firebase console and click on this file store database and here you see real time updates powerful queries and automatic scaling so this is the cloud firestore database let's click on create database and it's going to ask us to start in production mode or start in test mode we're going to start in test mode right now and it says that if the time is so it's going to give us 30 days to switch back to our production mode so we're going to remove this we don't want the 30 days delay because this is just a test app we want it to be working always so just click on the test mode and click on next and it says that we need to select a server so i'm gonna let it be the default one and click on enable all right so we are successfully inside of our cloud file store here you see this is our database we can add a collection and this will contain all of our data inside of over here we're gonna come back to this later but let's go to this rules over here so what is this rules so this rules tells us who can access our database and how they can access our database so for example in our app what we want is whenever someone is logged in only then he can add his coin to the watch list or it can delete the coin from the watch list etcetera etcetera so this is what we want in our app so what are we gonna write over here first of all we're gonna remove this line so we don't want the database to stop working after 30 days so now what does this means so this means that for any end point user can read or write if it's true or false we can add true so yep it's going to be true user can read and write if we add false over here user cannot read or write to any of the end point so this might be a little bit confusing let me explain it properly so if i remove this and now inside of this it says inside of our documents we're gonna add a api endpoint so our api endpoint is gonna be called watchlist so i'm gonna say match slash watchlist slash user id we're gonna store all of the coins related to a particular user in inside of their user id okay so now inside of this we're gonna add the check allow read only when so allow read if what happens if request dot auth dot uid don't worry i'm going to explain this in a minute equals to user id so what does this means so this request is the object that we send from our front end or to we send to the back and when we try to access the file store so what are all the things that are inside of this request so let's go ahead and search on the google so request in firestore let's see what it what do we get so inside this request object we have this auth which contains our uid or uuid of the requesting user the token and what else do it does it contains it contains the method if it gets or list or create update delete and it contains bunch of other things like query resource but what we need is we need this thing we need request dot auth we need we're gonna match it if the current user who is trying to access the data matches the field in our database only then we're gonna allow him to write it or read it so currently i'm just i've just added read so i'm just gonna add write as well so here i'm gonna add write you can also write like this read comma right doesn't really matter so now we can test it out over here so if we click on this rules playground if we click on this we can test it so currently it's get that means we're going to read the data right so let's take this and paste it over here so if we run this you're gonna see nope it's not gonna allow us to read the data but if we say the user is authenticated and run this again it's not gonna allow us because we haven't provided this uid so let's go to our app and provided the uid so this was our app inside the crypto context let me just go ahead and quickly just do a quick console log over here so that whenever we log in we get the id yep we have this user and inside of over here instead of the auth we must have something called uid yup here it is the uid i'm going to copy this up and i'm going to go here and provide this uid i need to remove this and i'm going to add this uid here as well and now let's try to run this you're going to see yep simulated read aloud and if we try to write it something let's say create run you're going to see it's allowed but if we say let's say false okay now we try to run this you're going to see yep simulated right denied so we're not allowed to write it over here now what if we have this logic multiple times or if we have a much larger logic over here inside of the firebase rules we need to add it to some particular place so that we can use it again and again so yeah we can create a function for that so below this i'm gonna add a function which will check is logged in and it's gonna take the user id and it's going to simply return as true or false if the user is logged in or not so i'm just going to take this add it over here and instead of this instead of writing this thing i'm going to say is logged in user id this should work fine i guess so let's go ahead and say get yep it's working fine awesome let's publish this cool so we have successfully created our firebase rules over here i would highly recommend you to go and read more about it right over here here in database rules so i'm going to link to this article in the description below you can go ahead and read more about it here so let's close this up and go back to our app and let's create the ui for adding all of the stuff to our watch list so if we go inside of the particular coin i'm going to add a button over here so let's go back to our code and let's close everything up and inside of our pages coin page i'm gonna add over here let me close this up so below this span i'm gonna add that button but before that let me take that user info um from our context so comma user we're going to use that so if the user is logged in we only want then to display that button so let's say user and we're going to add the button over here just like this so now let me import this button from material ui yup and this button is going to have the styles that we already do it so yep let's see ah there we go we have an add to watch list button right over here now when we click on it we need to invoke a function for adding to watch list so right over here i'm gonna create a function let's say here const add to watch list and inside of this i'm going to add the code for adding to our watch list so we do something like this const we're going to take the first fall reference to our database to that particular table so coin ref equals dock so this dock will be imported from firebase firestore just like this so doc and what are we gonna have we're gonna have our db so if you remember we created this db inside of this firebase.js yep this db so we are importing this we're going to have db comma first thing we're going to have is watchlist so inside of here if i show you inside of the data we're going to have the watchlist collection and inside of this we're going to have a user id and inside of that we're going to add the data so watchlist comma user dot uid so we have the reference to our table over here now below this we're going to add a try catch also this is going to be an async function inside of this i'm going to say await set dock so we're adding a dock right we're creating it so set dock coin ref we're gonna give this reference and what are we gonna do we're gonna have an array of coins inside of this inside this user.uid we're gonna have array of coins so coins colon watch list if there's something inside of the watch list okay i haven't created this watch list yet so i'm gonna create it just in just a second if it's if there's something inside this watch list then we're gonna take all of that watch list and we're gonna add a new coin so coin dot id which is the current coin so this coin comes from right over here this coin so we're fetching a single coin right so we're gonna add this coin dot id otherwise we're just gonna add if there's nothing inside of the watch list then obviously it's gonna have only one thing so i'm just gonna add coin.id over here that's all and let me first create this watch list state inside of our crypto context so below this use state watch list and by default it's going to be empty now i'm going to send this watch list to our app and receive it right here so let me minimize this um yep right here so yep now it's going gonna check if there's something inside of the watch list then it's gonna add it otherwise it's gonna add single coin cool now below this we're gonna display the notification that okay we have added the coin so set alert coin dot name added to the watch list also we need this set alert so comma set alert yep this is added otherwise in the cache we're gonna display the notification that error now we're gonna create a variable to check if something is added in the watchlist or not so i've added this variable so in watch list equals watchlist dot include so if the watch list already includes this coin this is gonna be true otherwise this is gonna be false so let me this is some for our ui stuff so let me show you where i'm gonna use this so over here i'm gonna say if it's already inside the watch list then it's gonna display remove from watch list from watch list otherwise it's gonna display add to watch list okay let's test it out but first let me add the on click as well so on click add to watch list we go to chrome if you click on add to watch list nothing seemed to okay bitcoin added to the watch list let's go to our database let's refresh this up and we can see we have a collection called watchlist a document of user id and a bitcoin which space which is added to our watchlist awesome this is working absolutely as we have planned now we need to display all of those coins inside this watch list also we need to change this but currently if we go to our context we're not setting this watchlist in any way right so how are we gonna set this we're gonna use something called snapshot which is given to us by firestore but before that i forgot to add the responsive styles for this button so if we make make the screen smaller yep you see it's breaking the breaking the app so let me add this responsive styles first then we can continue inside of our used styles right over here i'm gonna add these styles and remove these xs and md which were already there okay so display flex align items gonna be center and in the extra small align it is going to be start so if we go back now yep it looks fine looks better yeah this is what i wanted anyway let's move forward so inside of the crypto context as i was saying we are not setting this set watch list right so how are we gonna do that we're gonna use something called snapshot from firebase for adding that logic we're gonna create another use effect and instead of this i'm gonna check if user is logged in or not so also i'm gonna add the user to the dependencies so that this fires every time the user logs in or logs out so if it's gonna check if user is logged in okay so it's gonna take the reference to the user just like we did i mean reference to the database just like we did over here so coin ref import the dock and adb yep just like this the db and the dock okay we have the coin reference now we're gonna check on snapshot so on snapshot check if our database is updated or not so we're gonna check this particular database if the data is updated for this thing so coin ref comma coin it's gonna take the coin and it's gonna check inside of this if coin dot exists is a function to check if it exists or not if it exists it's going to set the watch list it's going to set the watch list to coin dot data dot coins so it has this data thing has all of the data inside of this user dot uid you can console log over here you can console log this thing and view what are all of the things inside of this else we're gonna say no items in the watch list so we don't want a lot of snapshots to be created like this is like an event which constantly monitors all of our watch list so after a snapshot is done we want to unsubscribe from it right so we're gonna say const unsubscribe so it returns a function for unsubscribing so after our component is mounted i mean unmounted so we're gonna say return and we're gonna call this unsubscribe inside of this okay this should be where i believe so that this is accessible over there yep so that it's not only block scoped cool oh okay so we need to add this inside of this block so it's gonna check if user is already there then it's gonna run it otherwise it's not gonna run it and right now our user is not logged in that's why so if we refresh yeah obviously so now it's gonna work so i believe this has populated our watch list so uh you know what i'm gonna go and console log this console.log this whole thing let's see um yep we see this list over here with bitcoin inside of it okay so now we're gonna take this and we're gonna render it over there now if you go to single coin page you're gonna notice that yep it's it's displaying remove from watch list here so now if you go back to the coin page i need to add one more style over here background color if it's in the watch list it's gonna display the red color that is ff000 just like this cool now uh if it's already in the watchlist i need to do one more thing and let me say in watchlist if it's in the watch list then it's gonna run it's not gonna run this function it's gonna run another function called remove from watch list so remove from watch list otherwise it's gonna run this function so this doesn't exist yet obviously so let's go up and below this i'm gonna create another function for this all right so this function is gonna be similar to that function above so i'm gonna copy that's everything inside of that and paste here so only thing that's going to be changed is this line and this messages and all so here i'm what i'm going to do is instead of checking this i'm going to filter out that particular coin and add it to our database so i'm going to say this list dot filter and watch list is not equal to coin.id so we're going to return everything that is not equal to this particular coin id so now this is gonna remove that coin from the watch list and we want to merge this with everything that is already there in the document so we're gonna say merge to true yep just like this and then instead of this set alert we're gonna say this coin removed from the watch list and we're gonna have the same catch okay let's test it out if we click on this yep it's removed from the watch list and if we go over here we have an empty array what's this find dom node is deprecated i think this is some material ui error and i think we can ignore this error awesome now we need to display all of the coins inside of this watch list box i'm gonna go back to my vs code and inside of this component user sidebar okay so we left this space for displaying all of the coins inside of over here so we're gonna need our watchlist variable obviously so i'm gonna take it from the coin state watch list and we're gonna use that to display all of the watch list coins so you know what i'm gonna do over here is i'm gonna take our coins state which we already had in our context and i'm gonna filter it out with respect to that so coins i'm gonna take the coins and what i'm gonna do is coins dot map and we're gonna take single coin and what we'll do inside of it we're gonna check if watch list includes this coin if watchlist dot includes coin dot id if it includes this id then we're gonna return this thing a div with the class name of classes dot coin oops and inside of this i'm gonna have the span tag with coin name so coin dot name because you know inside of our west list we only have the coin id but all of the details later related to the coin are inside of this thing the coins array right so that's why we're making the use of that now let's save this and have a look how does this look and um if we go here okay there's nothing inside of the watch list now if we add some other coin yeah we have bitcoin binance coin yep now let's give these some further styles we're gonna have a span tag which will have some style of display flex and gap of eight between all of this stuff and instead of it we're gonna have a symbol for displaying our price basically so symbol so symbol is going to come from our state our context api let's see how is that looking yep it's beginning to take shape after this we're gonna display our price just like we already did in our previous video with the help of number with commas we're gonna display all of the commas with the help of this and coin dot current price to fix if you haven't seen that video i would say go and watch that yep you see and below this we need to add a icon to delete our this coin from the watch list so i'm gonna go ahead and open a new terminal and install a library called react icons npm installed react dash icons and we're gonna add an icon called ai fill delete so you can go on and google search react dash icons there's nothing rocket science in this you can understand this how this library works it has a bunch of icons and i have imported this ai fill delete icon so if i go over here and say import yeah if you delete from react icons slash ai so this is what we need and for now i'm gonna comment out this on click and let's see how does look right now yep if you see we have this delete icon and we have the cursor pointer as a style okay we need to add the styles to this coin first of all so i'm going to go up below our styles i'm going to add the coin style so padding of 10 some board radius some background of some goldish background some box shadow and some justify flex i mean display flex and justify our item space between so if you see yep it looks awesome now let's add the functionality to click on this and remove this from our watch list close this and here i'm going to create the function for removing from our watch list which will be same as we created right over here so inside our coin page we have this remove from watch list i'm going to copy it up let's go to user sidebar and i'm going to paste it the only difference is we're just going to take the coin from over there so coin is going to be received from over there oh let me import all of this stuff set dock yeah we're pretty much imported so now we are going to send this coin from over here to this thing and i think this should work let's try this out let me try to delete it yep it's deleted and bitcoin removed from the watch list let's try to add another coin let's try to add this coin solana yep solana is added delete yep it's deleted awesome it's working absolutely fine so guys i guess this was it so this was a firebase crash course for you all now firebase is a huge library firebase has a lot of things like real-time database storage hosting cloud functions and a lot of things so if you need me to create a much in-depth tutorial i can do that and i can create a full in-depth tutorial series for you all so if you like this video smash that thumbs up button down below and make it blue and also subscribe to the channel for more such awesome tutorial and don't forget to press the bell icon as well also if you like to further support me you can click on the join button down below it really motivates me to make more such awesome tutorial so thank you all for watching and i'll see you in the next video bye

Channel: RoadsideCoder

Views: 4,533

Keywords: react firebase crud tutorial, react firebase, react firebase tutorial, react firebase authentication, react firebase crud, firebase, firestore tutorial, firestore 2021, firebase tutorial, firebase crud, firebase react, firebase 9, firebase 9.0, firebase 2021, firebase firestore, firestore crud, firebase security rules, cryptocurrecy tracker, cryptocurrency tracker react, firebase google, firebase google authentication react, firebase google authentication web

Id: 8NMJxyDwP6A

Length: 73min 21sec (4401 seconds)

Published: Sun Oct 24 2021