Full-Stack MERN Auth project: Build & Deploy (Reactjs, json web token, jwt, redux toolkit, cookie)

welcome to full stack myrn authentication where you'll learn to build and deploy a mernstack web application complete with authentication capabilities in this web app we will build and deploy a mernstack authentication application this app can be used as a starting boilerplate for all your future mirn web applications throughout the course we will be working with the latest versions of react mongodb node.js and express initially we'll install react.js and Tailwind CSS and dive into using the most recent version of react router Dom to create routes and Pages then our Focus will be on developing authentication Pages the application will have both email and password authentication using Json web token along with Google oauth for added convenience for State Management we'll use Redux toolkit facilitating the management of global States certain pages including the profile page will be protected on both the client and backend sites to ensure a secure user experience the profile page will offer functionality to update user information including username email and password additionally users will be able to modify their profile images with Firebase storage serving as the storage solution for these images account deletion functionality will also be implemented with Json web token cookie validation ensuring the security of this process the course will comprehensively cover crud operations including creation reading updating and deletion all facilitated by the mongodb database finally we will use the render platform to deploy our fully functional myrn stack authentication app for free this will enable you to share your Creation with others or showcase it in your portfolio the prerequisites for this course are a basic understanding of JavaScript and react if you are excited as I am to build this app then let's get started as you can see I've put the final version inside this URL of that 100gsprojects.com as you can see we have home page it's a very simple home page and then we have about page then we have sign in which includes the signing page and also the sign up page here we can sign up for example I sign up with my names and for username sand at gmail dot com for the email and also I just choose send for my password too when I click on sign up we can get the loading effect as you can see here and then we are redirected to the signing page and here we can sign in with the account we have created with the email and password just say send gmail.com and the password I have chosen here once you click on sign in as you can see the I get an error if I choose it wrong email and then I click here I I'm redirected to the home page and here inside the header I have a we can see an avatar and here we can update our profile including the image we can upload the image for example I choose an image from my computer here I choose some image for example I choose display image and once you click on it this is going to upload to Firebase and shows you the image uploaded successfully and the image is going to be replaced and then you can just choose change your name for example at the same time and then you can change your email and also the password and this once you click on update this is going to update your profile and if you refresh the page you can see that the profile is now updated inside the database as well also we can delete the account and sign out so once you delete it the account is going to be deleted from the database and also your sign out as well all the users information is going to be stored using react redox and also you have the ability to continue with Google and choose one of your Gmail account for example here I choose this Gmail account and as you can see we get the image from the Google and also the username is created for us automatically based on the based on the name of the user like the first name and the last name and some random number to be unique also we have the ability to sign out from your account and once you do that you you're going to be redirected to the signing page in the next section we're going to start installing reactius and tell me CSS and create our first template so see you in the next section so we're going to start with the front-end section of the project so we're gonna install react.js tell this CSS and then once we need to do some functionality we can just start building the backend using node.js and once we're done with the back end we can just interact and connect the front end and back end together so let's do that first we need to install our react.js and if you go to Google as search for react the website now the official website is react.div so let me Zoom it a little bit you can see the reactor div and if you click on it we can see that we can here we just go for installation now react actually is recommending us to use next JS or other third-party Frameworks to enhance the reactability but I highly recommend to everyone who wants to learn for example next year is to build the projects firstly by react and learn about it and I'm going to create the same project by next year's as well so you can just watch both of them and compare two technologies and understand the next years in a better way and also the for installation part the react is suggesting instead of using Create react app you can use Veet instead so for installing wheat it's very simple and it's actually it's faster than create react app but I'm gonna show you how to use create react app as well so you can have both choices for your application and later when we have completed our application we can deploy it to the render website so now I want to just create a folder here for example I'm going to create a folder called it changed its name to learn auth and if you open the visual studio code with the new window so let me open it first this is my previous projects let me just open a new window and then I close it here okay now we have a new window in the visual studio code once you have it you can just drag this folder and bring it inside the visual studio code and this is going to open it here you can increase the size here and we can close the vehicle tab here we can first start creating our front end which is a client side so I'm going to open the terminal you can use a contour backtick or you can just go to view and open the terminal here as you can see we have Explorer search Source control route extensions and open the terminal using Contour backtick so once we are inside this root folder inside the mirror off folder we can use npm create and you can just add the wheat adds latest and we just say client if you want to do the create react app you have to write down npx create react app and then you specify the name of the folder that you want the project to be created so once we do that and we press enter this is going to ask us which sort of Technology we want to install we want to use react so we just choose react here and then we want to choose between time to script and JavaScript I want to use JavaScript here and this swc and when I test it I realize this one is faster than the other one it's actually 10 times faster than create react app in my view and if you have a normal computer that doesn't have too much RAM or CPU you can use vid instead of create react app and have a better experience of creating a react app and after that you can just press enter as you can see now all the folders and files are created but without installation we need to install it but everything we need to install is added inside this package.json so if you use npn install we're going to install react and react though and also we have this public folder with the bit dot SVG or the SRC folder which includes our main.jsx if you use create dates react app this is going to be index.js and these at the GSX would be app.js so that's the difference and once we just go inside this client folder we just use CD client and we can just use npn I or MPN install to install everything from like a react and reactor while we are waiting for the installation which is very much faster than create react app we can just go to Google and search for Tailwind CSS wheat and once we do that we can see the installing television CSS we need this link and if you're using a react you need to choose this tab and there are four steps for do it doing it it's very simple we have done this part already we have created our vid application with react we have we are inside this folder the next step is to install Taylor CSS post CSS and auto prefixer firstly we just copy this one and we go back to visual studio code as you can see the installation is completed already so we can paste the code here and this is going to install tailbone CSS and then we need to install and initialize Tailwind CSS here if we paste it here and this is going to create a file called tailwind.config.js and we need to modify this file and actually the the modification we need is actually suggested here in the third step so we just need to copy this and replace everything here with these codes then this is going to actually check these files index.html and also this everything inside the SRC folder and whatever classes we add for the tilde systems is going to automatically be created as a as an output and in the build time we're going to have it so and then the other things we need to do is to change this thing we need to copy these three lines of code and put it inside index.css this is going to add the base basic and utilities and the components and like a base styling of our project using telman CSS so inside the index.css we can just delete everything using Ctrl a we choose everything and they paste these three lines of code so now let's clean it a little bit we don't want to actually delete for example this SVG we can delete it inside the asset we can delete this react.svg we can delete completely this app.css because we're going to use Taylor CSS and inside the app.jsx we can just choose all of them delete them and then we just use RFC to create a react functional component if you don't see this suggestion you have to install sound packages so I'm going to show you which packages you need to install before starting this application so I have these packages one two three four five six seven packages but actually some of them maybe you don't need for example console ninja is going to console inside this Visual Studio code instead of checking and going to the browser and check the console we can check the console logs inside the visual studio code and this is free and auto rename tag for example here you can see I have a div if I change the first tag to H1 as you can see the the closing tag is automatically is changed to H1 so this is for that and then we have this es7 react redox react native Snippets so this is the suggestion we give for example I write RFC I get the react functional component IFC is react function export component it's a different thing so you can based on your preference you can use different of them also we have here GitHub copilot this is actually you need to pay it's ten dollar per month and uh I got it for free this they just give me for experimental things but and also the GitHub kobal chat so I can chat for example here uh if I have a question I can ask the getter it's like chat GPT but inside your Visual Studio code so if you have a problem you can just highlight it and ask the question about that so this one is actually an experimental mode you cannot even buy it you have to go to the right list so you just could put your email and they're gonna give access to it so this is the time of my recording I'm telling you these things but maybe later when you're watching this video it's it's going to be publicly available but it's just not it's optional choice you can just choose these two so I'm gonna use GitHub copilot in this project so I'm gonna make the recording faster and get the suggestion so so for example here you can get a suggestion for example here if I want to write down something get a Google pilot sometimes give you some suggestion but the more you create an application they get a smarter they get they give you more such as Champions on your previous copy and also you need to have this prettier prettier when you for example do something and you save the file this is going to automatically uh make it formatted for you and also we need this Tailwind CSS intellisense so what this still is this is intellisense does it give you some suggestion for example here if I add a class name for example if I choose text for example red and if I choose Ctrl space this is going to give me suggestion this television CSS intellisense is actually giving me this suggestion so I can see the colors here so I can choose the colors for example at different colors and I choose it and sometimes it's very smart for example if I want a select column I just write down if c as you can see I get Flex column suggestion so I don't need to write down all of them so this is going to save you a lot of time and you need to actually test and see which short form of the writing is actually giving you this suggestion but in this project I'm going to use these shortcuts and teach you which shortcuts works with this extension so those were these extensions we need so now what I want to do you want to I want to start the application let me clear the terminal and here you can just use if you check the package.json you can see that we have some a script here for example if I want to run the application I can just say wheat or NTN run div okay and for the building nprong build is going to run the read build so later we're going to deploy the website I'm going to show you how to use the other one but for now we just use the divs we just say npm run div and this is going to run it inside a port number here is 51 73 but if you want to change it you can actually change it using dash dash host and change it as you wish and then if you want to open this one you can just keep the control or command and click it and this is going to open it for you inside the browser your default browser which in my case is a chrome and if you see this one in red color actually your Tillman CSS is working because I have added here takes red 500 otherwise you need to go to the installation process again so now we have just installed the Tillman CSS react now I want to add a GitHub repository for this the reason we need a good GitHub repository is we want to actually deploy this one website this website later in places like render so we need to have a GitHub repository to actually send the information send the codes to this website and also we want to commit and create a message in each step in each video so I'm going to create it I'm going to explain the code again inside the GitHub and also if you have a problem if you have any problem during this creation of these projects you can go to that GitHub repository and compare your code with my code for creating a GitHub repository you need to be actually inside the root not in the client because we want to have both the back end and the front end inside the GitHub repository so I I open and create another terminal so I'm going to go back to the root folder by using CD dot dot this is going to be inside the Merit of and here I'm going to initialize a git using git in it for having a git actually you need to have a node.js in your application and also if you don't see this thing and definitely you don't have node.js so you go to node.js website and install node.js before this project so you just say get init and then we just add everything to GitHub using git add or get add dots and then just create a message using git command Dash and we create a message and the message would be installed react.js until then CSS and create the first template so once we create the message now we can go to our GitHub and create a repository so you can just search for GitHub and go to github.com make sure that you're signed in with your application as you can see I already have an account it's totally free you can just sign up and here at the top you just click on this plus icon and click on the new repository and you can choose a name for it here for example I just call it mer off so this is available for me and you can just keep it private if you don't want other people's DC or code or you can keep it public so other people can see it you can have a description for example I want to just say man using Tailwind CFS for example and then here we just click on create repository once you have the create repository you get the suggestion how to add it I already created the message and add everything we just go to the next part the fast one we just copy the first one we go back and we paste it here and then the second one that's so first one is going to add a GitHub and picks your GitHub URL to your application then we're gonna create a branch in the main branch actually and then we can just push it together so what we do here we paste it here and this is going to upload everything that we have created so far to get up and now in the GitHub if you refresh the page we can see that we have the client folder here and we have one commit and the commit is installed we actually sent analysis and create the first template and if you click here we can see all the changes that we have done inside this section so that was it for the installation of the react until C assist in the next section we are going to create the pages we're going to create the pages for example all about signing and sign out and the profile page I'm gonna show you how to use react router Dom package to create these pages so see you in the next section for this part of the project all right in the last section we have completed the installation part of the project we have installed react.js and table CSS and created our first template in this section we're going to create the pages of the website for example if you look at the final version here we can see that we have the home page about page and signing page we have sign up page and also we have profile page with we are signed in but this page is protected so we cannot have access to it when we are not authenticated so let's create these Pages we go back to visual studio code and here inside the client folder inside the SRC we create a new folder called pages and here we just create the files for example sign in we just use the capital signed in Dot jsx and we can just use RFC to create a react functional component and then the next page would be sign up dot jsx you can easily use RFC to create a react functional component 2 so we just continue to create our pages about the GSX we have that we have profile Dot j6 and finally we have the home page Honda G6 but how we use these Pages now we don't have access to them we need to actually have a third-party application in react to create the pages but in next yes we don't need to do it we just need to create the files inside a folder so here let me clear this so we need to go actually inside the client folder and here we just install a package called react Dash router Dash Dom and once we install it we can just go to app.js and here we don't need this import react actually it's not mandatory we can just import browser router from the acrado we need to import routes and also route so plural routes and singular graph so everything should be covered by browser router so I change this actually H1 to browser router let's delete this actually class name we don't need it and here we cover everything with routes as you can see we are getting suggestion from GitHub copilot we can just exit that one and then we have a route here the route has a path paths means that when we use it inside the browser when we go to the forward slash they go to the home page so we need to actually to import that on the GSX so we can just click here and use control space and Auto Import it at the top so import home from forward slash Pages for slash Hall and the next one we need to add uh we we want to add more things just I want to copy this one four more times using alt shift done Arrow and then here we just change this on to for example to about and this is going to be about you can also import it as well and this is going to be sign in we just write down sign Dash in and here we use this sign in page this one is going to be sign up so we're gonna import it and finally we're gonna have the profile page so we just say profile and this is going to be profile we need to import it at top so we have we make sure that you have imported all of them and then you just add the route and then we're going to close this routes at the end so everything will be inside a browser router and inside the browser router we have routes let me save this one so we can sort it here use print here we can just format it so browser router browse and then we have routes so now if we test our application so here as you can see we are now in the home page if you just use forward slash for example profile we go to profile page we have sign in sign up and finally we have the about page okay it's working and also we can change this vid plus react here we can just go to index.html and change the title for example we change it to pause app okay and also we don't need to actually use this link we can delete that one we save it so now if we code here we can see that this title is changed to Off app all right so that was it for creating the pages so in the next section we're going to work on the header section and we want to add the header in all pages so for now that is finished we can add this one to the GitHub repository we don't need to do the get add or get commit in the terminal anymore we can use this Source control here if you click on the source control or you go to view go to Source control or use Ctrl shift G we can see everything we we've done be all the changes are here we can just click here on this plus icon to add all these changes this is similar to the git add Dot and here we create a message for example we just say add routes and create pages and here we can commit or we just click here and commit and push at the same time so if we do that and we go to our GitHub repository now if we refresh the page inside the commands we can see that we have our second command which is ADD routes and create pages each dot we have in at the end of each section I'm going to create a command so and then if you have any problem in the code you can just come here and check the section A click on it and see the changes and you can compare the code with yourself and find your mistake so that was it for creating and adding the routes in the next section we're going to work on the header section of the project so see in the next section all right in the last section we have completed creating the pages of our project in this section we're going to create the header section of the project if you look at the final version we can see that we have the header and this is common in all pages like about home or signing page we have the header in order to do that we can just add it inside the app.j6 outside the routes if you look at the our code and go to app.j6 if we put the header here outside the routes we're gonna have the editor in all pages so for example here if we create this header here we're gonna have it in all pages so first we need to create actually a folder a file actually called header.jsx but we should create it inside a folder inside the SRC and we call the folder components and inside this folder we're going to create a file called header.jsx and we just for now we create a react functional component and now if we go to after GSX we can add it here in all pages by adding the header component we need to import it at the top here and we just need to close the tag it can be a self-closing tag okay now if we check our website we can see that it is inside all pages sorry here for example here we have the about and then we go to sign sorry we go to find in page as you can see the header is in all pages so let's bring this one to the right side and here we bring the visual studio code to the left side so any changes I do inside the header we're gonna see in real time here so inside the header.jsx first thing first I want to change its background color to slate 200 so just the light gray color and then here we're going to have a div and inside the div we're going to have the header saying for example of app and then I want to make this one bold so I just change the font to be bold we just write down FB and then or you can just say font if NB this is going to so Jess asks okay if OB I think F4 OB is going to suggest us find both and let me decrease the size this is the normal size we have for our application after the H1 tag I'm gonna have a UL for the menu we're going to have an unordered list and inside this unordered list we're going to have a list of all about and sign in as you can see here and then we want to bring them next to each other so in this step we're going to change the display to flex they're gonna come next to each other and then we're gonna have just a 5-bit fee so we're gonna push them on the to the side and then we're going to have a space between them and if you want to do know what this class is inside the CSS this is a television CSS class but if you use Contour space two times you can see the Justified content a space between is the complete CSS for this one so this is going to add it for us but we just need to write down justify bit fee and then if you just use items Center we're gonna bring this one to the center and then for the big size as you can see they're completely connected to the sides we want to have a maximum width of for example 6 XL which is going to have some space but I want them to be in the center so I'm just I want to add MX Auto gear okay so now in the big size we have maximum of the 6xl also we want to have some padding as well padding of three so we're gonna have some space around it and also for the unordered list for this menu we can add the same Flex to bring them next to each other and also you can add a space between them using Gap and we just have for example Gap four so we add a space between these items and finally if we click on these icons I want to go to this specific page for example if I click on about I want to go to the about page but if you use we use anchor tag actually we're going to refresh the page when we go to in a different pages what what we do here we're gonna import a link from react router done and this link is going to help us to redirect between Pages without refreshing the page for example here inside the h110 we can have a link and then we're gonna have an attribute 2 to the home page and then we're gonna cover this H1 tag with this link like this now if we are in the sign in page if you click on this off app we're going to go to the home page we can do the same things for the other one here for example we can have a link we bring this here and then we just added two home page we can do it for the about page like this for the sign in page as well so now if we test our application for example here we go to sign in about all and deal goes to the own as well so now we have done with the creating the header section we have it in different pages as you can see in different pages we have this header and also we can add it to the GitHub repository we can just click here to add all of them and then we just create a message we just say create header components and then we can click here to commit and push to the GitHub repository and if you go to our GitHub and we refresh the page we should see a new command create header component all right that was it for the header section of the project in the next section as we need to start creating this sign in and sign up Pages we need to start creating the backend using node.js and express.js and also we need to connect to our database which is mongodb so next in the next section we're going to start creating the back end of our project so see in the next section all right in the last section we have completed the header section of our project in this section we're going to start working on the backend section we're going to create the server and run it using node.js so what we want to do here is we want to create the back end the package.json of the backend inside the root section the reason we are doing that because later when we deploy our website we want to run the that application from the root and we want to build the front end and run the front end using the back end I'm going to show you what I mean by that in the course but just you know that you have to create the package that Json of the backend inside the root section so here inside the terminal we go back to the root using CD double dot and then we can just use npm init Dash y to create a package.json inside the root and this package.json is just doesn't have anything now we not we just need to now install the necessary packages for example the first one is going to be Express server you just say Express and install Express and once we have Express and then we can use the express creating our application so what we do here we create another folder and we call it ATI or backend I just call it API and inside this folder I'm going to create a file called index.js and the reason I'm calling it index.js if you check this package.json you can see the main file name should be index.js if you want your file to be for example server.js you just need to change this name inside the index.js we need to import Express from Express but as we are using import and as a default we need actually to use requiring add a packet so what we can do here we go to package.json and here after the description for example we can just add type to be instead of common JS we want to use module so in this case we are not getting getting we're not going to get any error inside here as we are using import after that we can create our application we just say cons app equals to express and then first we need to just listen to a port number for example 3000 and then we can have a callback function with console log for example server listening on Port 3000. so in order to run this we can just go to the folder and run node but if you are outside this folder of API we need to run node API forward slash index.js if we run that we can see that we are printing server listening on Port 3000 but if you do some changes for example if I add an exclamation mark here we see that we have to actually restart the server to see the changes here so that is a bit annoying and time consuming the better solution is to install another package called nodma so nodemon is going to help us to automatically detect the changes inside the back end and restart the server so we need to install nodemon using npni node mod we can after that we can just run it using nodemon API forward slash index.js but the best practice is to add a script inside the package.json as you can see we have a test script you can just delete that and then we can just add for the development mode we want to use node model so we just say nodemon API for Slash index.js and for the production we need to have npns start so we can just use NP in the start node API for slash index.js so now if we run this one we just say npn run div inside of root we can see that the server is running on Port at 3000 and if we do some changes for example if I delete this exclamation mark we can see that the server is actually restart automatically and using node mod all right so that was it for creating the server we want to add this one to the GitHub but as you can see we have all the files here showing us these files are changed we need to upload actually these are the files for the installation of node node.js we don't want to actually add them to the GitHub the reason we are seeing them because our git ignore file is inside the client folder not the root folder so we need to just move this get ignore file and bring it to the here and now if it go to the source control you can see that only we have these files so we just add all of them and then here we just create a message for example just to create API or we can just say create and run this server and we can just commit and push it to GitHub and if we go to back to our GitHub repository and refresh the page we can see that the new command is created and the name is create and run the server all right that was it for creating and running the server in the next section we're going to connect the server to the database and in our case we are going to use mongodb so see you in the next section all right in the last section we have created our server and run it in this section we're going to connect to our mongodb database so what we can do here we just go to our files section and inside the index.js we're gonna use Mongoose to connect to the database so what we can do here I want to just open a new terminal and this is going to be inside the root section because we need the mongodb for the backend so make sure that you are in the root and we just install mongoose and after the installation we need to just import it at the top I just import Mongoose from Mongoose and then we can just use mongoose.connect but what we need to add here is actually we need to get this URL similar to this URL we need to get from all we call it URI actually we need to get it from the mongodb website we need to go there sign up and get this URI and then add it here so we can easily connect to our database so what we do here we just go to Google and search for mongodb in the search result we can just go to mongodb.com and make sure to it's very it's free to use and they have a free tiers so you just click on the start free and if you don't have an account you can sign up but I already have an account so I just sign in here and I use my Google to go inside the mongodb after going inside we need to create a new project so here I already have many projects for my practice before so you just need to click here and then click on new project so we just name this project I for example I just call it mer auth and then you can click next so here we don't need to do anything if you don't want to add on other people you just click on create project make sure to wait until everything uh is done and then go to the next page otherwise I've I some sometimes I I'm in hurry and then I do very fast so I get some problem so here we need to create our database they have changed their website recently so we need to just click on the database and click here on build a database as you can see they have the free tier here you can just click on three and later if you if your website is growing faster you can just upgrade it there's no problem so first you just choose the free section and then change the name here for example I just call it maroon and then just click on create so here we need to add our username and password so here is very important so you remember that we just say for example I just choose the name Sahand and password I just choose ahead so I can remember it but make sure you have a good password and username and then we can press on create user so we here is in my local environment and the cloud environment so we need to choose cloud cloud environment if you want to later use it for production and then here you just need to add the IP address of your server or your the computer that now you are locally connecting to the database this is going to make the connections secure so no other servers can have access to your database so this is my IP address is already added here but if you want just you can add zero zero zero and in this way in every from everywhere you can have access to it and then later you can delete that one because for Simplicity now we are adding this on but this is not actually secure so you need to add your server IP address so here we just click now this is going to allow us to have access from everywhere and then here we're gonna click on finish and close and then we just go to our data space so here as you can see and we have we can have access to our data or here we can just click on connect if you click click on connect there are plenty of options for connection but here you just need to click on drivers and then we already have these things we just need to copy this URL so copy this one by clicking here and then you go back to visual studio code and we can paste it here but you need to change the password Here the password is just here you can just delete this password and I just put my passcode which is my name and then after this forward slash you can choose a name for your database for example I'll just call it mirn auth if you don't do that actually they're gonna just put the name test for you so you can just avoid that one by adding the name yourself so actually we are not we are now connected to the database but actually this is not the best practice to add the database to to add your url here because if you want to share your code with others for example in public places like GitHub so people can see your password and other things so it's better to hide this one using an environmental variable so we can just create a file here but the file actually should be inside your root so you click on the outside and click here to create a file called dot em V and then you can just create a variable for example called and then you can just remove this we caught this one and put it here we have we just put it inside this one all right now instead of pasting it here you just you can just use process .env dot which is the name that we have choose here but as you can see we are getting an error here the reason for that by default actually we cannot use the dot EMV inside the back end we need to have an extra package called dot EMV to be able to read to do it so here we're going to install a package called dot EnV and then we need to import it at the top we just say import.env from dot EMV and then we need to initialize it using dot env.config like this if you do that you can see now we are not getting an error actually so that's a good sign but actually we are not sure that we are connected to the database so we need to have a feedback here so what we do here we just say if everything is all right then we just the console log connected to the mongodb for example and then if there is an error for example we can catch the error and console log the error okay so we can have a feedback like that so if we now look at the terminal we can see we are getting the server listening on Port 3000 and also connected to TV but if you for example in Dutch EMV we change the password for example I add a word a letter X here and then here I save the file to restart the server we see that there we are getting an error inside the terminal saying should be yeah bad authentication all right so what we do here so I'm gonna remove this x so now we are sure that everything is working fine for the mongodb all right so now let's add everything to GitHub so I'm gonna choose everything but as you can see the problem is now it is suggesting me to upload the dot EMV to the GitHub that is not a good thing because people can see everything from the dot EMV so we before doing that we need to go to dot ignore and add dot EMV here so at the end we just say dot EnV and if you saved now uh we should okay so let's close this and save our application so I already I think I already added that one so there was here so let's see if I save again if I do some changes okay so now it's working it's not suggesting media that EMV but it's suggesting me the dot ignore file which is fine we can just add it because we have done some changes in that ignore so now everything is added accepted that EMB that's because we have we have added that to the git ignore file and then here we just say connect to DB and we can just commit and push it now if you check our good I'll be positive you can see the new comet is the connect to DB all right that was it for connection and adding the database to our backend in the next section we're going to create the our first model for our database because we need some models which is kind of rules for our database and we're gonna firstly add the model for the user so so in this case we can interact with our database safely and add the user data to the database so see in the next section for adding the models to the database in this section we're going to start interacting with the database by creating a user model so I'm gonna explain what I mean by model when I'm creating it but just you know that there are some rules and conditions you want to put for the user model so these rules must be satisfied when we are adding or updating or deleting something inside the database so here inside the ATI folder we're going to create another folder called models and here we can just create our first model is which is user bot and we can just call it user.js or something like that but if you want to have a big projects and you want to search for your files it's better to have for example usermodel.js or something like that or you can just call it user dot model.js that is the same thing this model is actually it's not extension the last one is the extension so this is okay too so for the model in order to create it we need to import firstly Mongoose and then once we have the Mongoose we can just create first the schema a schema is the rules and conditions we want to add for the user so we're gonna create it using a method from the Mongoose called eskima so we just say new Mongoose Dot eskima and then the first things we want to add we want to have three things firstly we want to have username email and password so for the username and let's username is going to have the type of string and then if this is going to be required the type of string means that only you can have you cannot have number or Boolean for your username and any other types won't be allowed inside the database and you're going to get an error for the required through means you cannot add a user without having a username and then we're going to have unique true unique true means the username of each user must be different so you cannot have two users with the same username so this is going to be prevented by giving an error if someone is using the same username as others after that we're going to have the pass user email and password and they are very similar so I'm going to copy duplicate this one using alt shift Arrow dot two times you need to have a comma here between them and then this is going to be email so email must be string required and also unique and then what else we need is to have password but the password can be the same for example two user can have the same password so we can delete this unique okay and once we finish this we can have another things what I want to add here is time to step through timestamp 2 means each user is going to have two extra information the time of creation and the time of edit so mongodb is going to automatically add these two information so we don't need to worry about that so and then we can use this information later for example if you have a some admin panel you can have for example you can show your users and sort them by time for example after that we're going to create the model so the for the model we're going to use mongoose.user and uh just sorry Mongoose that model and then the user is the name of the model and it must be uppercase as singular because mongodb is going to automatically add the S and the plural form of the user inside the database for us and also we want to add this user schema here so the model needs to have the user schema and finally we need to export it as a default so we can use it anywhere else in our application so if you for example need this one in other folders and files we can use it because we are exporting them here so that was it for creating the model so later in the application we're gonna use this model to create everything else all right so let's add this one to the gear part so we have change to actually we didn't do any change here let me okay I just I think there was some space added here so I use Ctrl Z to revert that action and then you can just here add this model and then here we create a message for example which I say create user model and then we can just commit it and push it to GitHub in the last section we have created the user model and in this section we're going to create our first API route aopi route is kind of URL so we can use these URLs to interact with our API so what we can do here we go to index.js so I'm going to firstly add our first API route so I want to firstly make it inside index.js but later we're going to have separate folders for API routes and the functions that we're gonna create for them but I want to show you how to create it you just need to have app dot for example here you can see app.get request and response and then we can just have a response with the Json we want to send back a Json we just want to make a message hello word for example okay or we can just change this one to API API is working so now if you go to our browser and just remember our backend has the port number of three tiles so now we want to test that one we just say we go to localhost three thousand and if you remember we have created the route in the home page in the forward slash so if you test this one as you can see we get the message Api is working so this is the way that you create the API route so you just need to have a app.get to do that all right but actually what we want to do is to create the this one in a separate file and folder so as we have created a folder called for models we can create another folder for routes we just call it routes and inside the routes we're going to have our user route and also our authentication wrap so for the user we just say user Dot route dot JS we just imported import the express we just import Express from Express and then we can just create our router using express.router and this router has the uppercase R so be careful for that and then we can just say for example router.git right for the home page and then we can just have the same Json API is working all right but we want to export this one as a default here so we can use it inside the index.js so inside the index.js instead of doing this one we can just say app.use and then you can just subscribe it address for example we just say API for slash user and then we call that user wrapped we have created here but we have exported this one as a default and we call it router here but as we are exporting it as a default we can import it with different name so here we're going to import user route from routes forward slash user for DOT routes.js and just make sure to add a JS at the end because this is a backend we need to add it and then we have this user route here let me fix this one so after use I take that is fine so the address would be forward slash API forward slash user and then inside the user route we have forward slash so if you test this one it should be forward slash API for slash user and forward slash here so we get the same message all right but the actually the best practice is to actually remove this functionality this function and put it inside a separate separate folder mostly they create the developers create another folder called controllers which means the functions and inside this folder we're going to add all the functions all the Logics of our route so here we create a folder called controllers and then we add our first controller which is user dot controller dot Js so here inside this we're going to export a function and we just call it test for example and we just add the function here okay so now we have this function here we can use this function inside the user that route so we can just completely delete this and then we can just call that test which is coming from controllers folder user.controller.js we need to add the dot JS at the end all right so now if we test again we should get the same result if you refresh the pages you can see the API is working we are getting that one so we are getting the same thing but actually we have a clean index.js because we're gonna have different routes related to user authentication if if you have a different another for example we are creating another web page for for example creating a video sharing application you're gonna have routes for uploading video for example for deleting videos so this is going to be a lot of things here so but in this way we're gonna keep it clean also we're gonna keep the user.js Click by adding all the function inside a separate folder this is the best practice that mostly people do for creating routes so that was it for creating the test route let's add this one to gear top so here we're gonna just say create this API route and we can just commit and push it to GitHub all right in the last section we have created our test API route in this section we're going to create our sign up API route so the procedure is completely similar but as the authentication is very important we're gonna separate the user from the authentication so here we have the user a controller and user route we're going to create a separate files for authentication too so in this way we're going to separate the most important part of the your website which is the authentication so here we're gonna create another route called auth.rout.js similar to the test we can just import Express from Express we're going to create the router using Express that router bit uppercase R and here we can just create our first off our first method which is going to be post method and this point method is going to be for the we just call it for example sign sign up and then inside the index.js we're gonna have another one order because this is a different route this is inside of the previous one was the user so here we're gonna have forward slash API for slash off and then we're gonna call that off Route so here I need to actually actually here I'm gonna export it as a default so I can import it inside the index.js so let me copy this and here the user must be off this one must be off all right so we have separated the two rounds so instead of going all of them to API forward slash user now they have API forward slash off as well and also we're going to create a separate controller for authentication we just say auth.controller.js and here we're gonna export a function called sign up and here for now I wanna show you what we get here as you can see we get a request and response request is the data that is request is the data that we are getting from the client side and response is the data we sent back to the client side so let me show you what I mean by that by console logging um let me cancel log request.body okay and then we're gonna use this function inside the then you close all files so it's getting messy so we're gonna import that one in off that route here that sign out so we're going to import this one and don't forget to add that JS at the end so now we can complete the function and now we are actually getting the request.body the constant login let's and what we want to do we want to test what we can send here but this is a post method for the Post method we cannot use the browser to test our API route because we want to send it and we don't have our UI yet so what we can do is to use a function program to do it there are some softwares you can use to test your API like Postman and insomnia for the sake of this project I'm going to use insomnia insomnia is free and also it has a very nice user interface so we can just go to Google as search for insomnia API test if you if you search insomnia API test this website insomnia the rest this is the official website of the insomnia you can just click here and start here for free as you can see you can choose a free version you can do whatever you want in the free version actually you don't need to upgrade it these are unnecessary things and then you can just download it and based on you can just download it for your operating system I've already downloaded for my laptop before so I just open it here and once you're inside as you can see I have used it before for my applications you can just go to home page you click here in the home icon and here you can just click on the create and create a new collection request collection and just name it for example learn auth so here you just click on Create and we can create a different folder for our different routes for example for user we're going to have different folders we're going to have different folder off as well so here we can click here we just create a new folder I'm going to call this one for example we just create the first one you just call it off we're just gonna lowercase would be fine and then here we just click on the folder and we create a new HTTP request and we could we need to specify the I the address of our backend our API which is localhost clone 3000 and then forward slash API over slash auth and forward slash sign up okay and this is going to be a post request so we can change this git to post and inside the body we want to send something from the body of the browser and then we can simulate this one inside the software using we just click on body and Json here so here we're gonna add our Json Json format is like that you need to put it inside the column here code here and then we just here we just says username for example user pod and then we're going to have a comma the next one is going to be email for example we just say user one at gmail.com and finally we're gonna have the password I just call it uh choose for example I just put my name and then now if we press send we should see this data inside the terminal of our browser because we have here inside the controller we have console.log request.body and this is inside the back end which is here in this terminal we should see the request.body here so I'm going to send it now you can see the request is happening so if you come back here we can see we are getting undefined the reason for that is by default actually we cannot send any Json to our application and in order to receive Json we need to go to index.js and here after the creating the application we can just say after to use express.json this is going to allow Json as the input of our backend alright so now if we try again using insomnia the uh we just sent again this information and if you come back to browser if we come back to visual studio code we can see we are getting the username I hope you can see it here the username email and password here inside the terminal so we got the data from the body section but we don't want to just get the data we want to save it inside the database I'm going to show you how to do that here inside the controller of controller instead of console logging only the requested body we're gonna firstly we wanna destructure and get the name email and password from the request.body and then what we want to do is to create a new user and this is we're going to create this one using our model that we have created remember we have created a model here we can create a new user using new user and this user is coming from our model so let me just open this if you have this file open and then use Ctrl space at the end this is going to automatically import it for you so here I choose this one but make sure to add the JS here always if you don't make add this one you're going to get an error and then we can just add this information name email and password and we can use new user.save to save this okay that's enough but as this is asynchronous behavior because we're gonna send the data and save it inside the database and it takes time based on your internet speed and the connection to the server so we need to make this one awaits here so this await is actually tell the JavaScript to stay in this code until the result happened until we receive a promise and then go to the next slide so this is going to help us to don't get an error because we are we are waiting for this response and as we are using a weight we need to change this function to asynchronous so now we have a synchronous function which is having this await here and after that we can just have a response first we just add a status for example 201 and then with the message user created successfully all right so now if we test it inside the insomnia and send the same information uh we can see we are getting an error server return nothing let's see what error we have inside the our terminal all right so uh we are getting an error here for our data the validation field the username is required I said with uh here we use the name actually this one is username because we have we are sending username not name okay so let's test this one again so if it's sent we can see that we are getting the message user created successfully that's a good sign firstly we got the results and now we have to check if this user is added to the database or not so we go to mongodb again I I have closed my mango TP but mongodb has a daily session so every day you need to sign in again that's fine so if you go now inside the mongodb our last database must be available for us so we don't need to search for it so as you can see main off is selected what we can we can do here we already connected to that one we can just check our database so we go to database here at here and we click on browse collection if you click on this browse collection we're gonna see our collection as you can see the name of our collection is mine off as we have defined it inside the index.js not here inside the dot EMV we have just named this on man off if you remember and then we have the user model here the user inside because we have used here the name user mongodb is added s automatically for us so this is called users and our first user is added which is user1 user1 gmail.com and the password is Sahan all the information that we have sent from the insomnia now is inside our database but what if if we send the same information again if you remember inside our model we have made this username and email unique so if you send the same username and email we should get an error so let's test this one if you send we get an error but actually we don't see the error inside here we see it inside our terminal which is saying username is let's go to the last year error and here you can see that the user they said that your username has a duplicate key which is user one but we don't want to see the error here inside the terminal we want to send the error to the client side so here instead of just everything we put here we can just use it try and catch method so here after this new user we can use try and catch a statement and we try this one inside here I'm going to move it to the top and yes this is a weight so this is going to give us the response or an error so if we get a response it's fine we get it here and if the error happens we're going to catch the error and we're gonna send it to the user we just say response.status uh for example we can just say a status of 500 and then we have a Json and I want to set this error Arrow Dot message for example so now if you try again send the same information we should get an error but we should see the error here so we just sent as you can see we got the error duplicate key error and it shows us the error so that's fine the other problem we have is this problem we are saving the password as it is inside the database this is not actually safe because if someone have access to our database for example if we have an admin they see the password of the users of our website or if somebody hack our database they can easily see their password and then they can abuse that information so what we can do is to encrypt the password what I mean by encryption is we use some algorithm to Hash this password and combine it with other letters and characters and we save it like that and then once we need it we can actually decode that one or we can just compare it with our a new hash password if you want to compare it so we even we don't know the password of our users that's the best way and best practice to save password in database so there are plenty of ways to do that there are some packages you can use the most common one is the crypt.js so here we can just inside the packet we can just install uh the package if you remember the back end the package.json is in the root of our application so we need to be inside the root and then we just say npm installed bcrypt Js and once we have it we can just import it at the top we just import be correct Js from pickup.js make sure just you just install bcrip because JS not be Crypt there's some the same and actually they have the same functionality but the big red one makes problem inside the production section so you need to have the big crypto yes not the Big Crypt and then once we have this package we can just after getting the password Here we can change the password the the easiest way is to create a constant called hash password and then let me show you the best practice and easiest way that this is going to be pcrip hash sync all right secret because this is asynchronous we need to use hash sync if you use only hash you need to add a weight here so that is the simple simplest way and then we pass the password Here let me fix this cons with passive password and also this is the number of rounds for the sauce so this is kind of the random character that is going to be combined by our password and create this hash pass and then here instead of saving the password we are going to save the hash path and the reason we are just using username here and then we don't say a username equal to username after es6 actually if the name if the key and the value has the same name we can remove all of them so this is the reason we do that we do it here and now if we try to create another user or we just delete this user because this is not hash and save you can just delete this one and if we try it again here inside the insomnia we send this information we see that the user is created successfully and then if we check our database we refresh it by just clicking at the top and here you can see our password now is actually hash as you can see it's just a random letters and numbers and it is hard to understand the original password actually there are some methods to find the password but actually it's very time consuming to do that and takes time for the hackers to do it and if you choose this number um bigger and bigger the decryption gets harder and harder but actually if you use a very big number the computation time it takes longer because this is asynchronous takes longer to go to the next slide so you have to compromise between the complexity and the computation time all right that was it for creating this sign up API route what we want to do here is to add this one to get up now so I'm gonna just name this one create sign up API route and we can just add everything and commit and push it all right in the last section we have created the our sign up API route in this section we're going to handle the errors by creating a middleware and a function so what I mean by that is for creating a middleware so inside the index.js we can see we have different app that use that this this is going to be called one by one after each other and then if you create a middleware here if you create the same things app that's used for example we're gonna use this middleware we can use it in our application by calling it and what we can get here we can get the error we can get a request response and next error is the error the input of our middleware so any error happens we can send it to this we have the request and response and next is when we need to go to the next middleware we use this next so here let's first fix this okay so what we can do for example we can just create a constant for example we just say a status code so what is a status question for example here we just say a status code of 500 or 201 so for the error we have different numbers for example 404 is user not found or 403 is wrong credentials or something like that we have different stethoscope you can you can search it on Google and find different status quo for different errors so we get the status codes from the error we have okay so this is actually not we get a status code here and also what else if there is no status quo instead of getting an error here we can just say if there is no status quo just use 500 500 is actually the internal server error so whatever error happens in the server which we can just put it 500 and then we can just have it in other message for example for the message we can just say arrow.message and then if there is no message we can just say just say internal server error and then once we have the status and the code we can just return here with the response a status we just use the same status code here and the Json I want to make it more actually information here for example we can just say success false we can just have the error message and also the status code which is going to be this is status code and here because these two have the same name as I mentioned before we can just remove one of them and here we can just have only message all right so now how we use this middleware that is the next step you need to know so inside the auth.control layers we have request response we can add in other things called Next and here instead of just creating our response for the error we can just say next error as simple as that so now if you try to get an error for example if we send the same data if you see now we get the error message from our middleware which has this success false we have the message and also we have the status code which is 500. all right so as you can see now we don't need to write down each time response.status that Json error we just say next error that's it and there are some times in our application that we need to create a custom error so what I mean by custom error is sometimes we don't have an error in the system but we want to have show the error for example if the there is some request and there is no error in the server but we want to show the error to the user for example they didn't fill out some form some data that is not mandatory but we want it to be happen so we just we can just send that custom error so we can create if actually if file so if you go to con API we can create let's create another folder called utils and then here we can just add our file which is error .js for example so here we're gonna have we're gonna export a function and we call it I don't know why I'm writing the accounts all this one so export cons in evidence we can just call it error error Handler as you can see we get there is here and here we're gonna have two inputs which is going to be the status code and then the message so these are custom status code and the message we're gonna give to this function and create the error so here we just create a constant we call it error and we're going to use the error Constructor and this is the JavaScript Constructor which is going to create a custom error it just throw an error for us we don't need to pass this message here and then here we can just say error that status code is that a status code and then the error that message would be this message so all of them is custom and then we can just return the error so now we can use this actually this function in our application for example here instead of just passing this error I can create a custom error which is if you remember the name of our the name of our this function is error Handler so we just say error Handler we need to import it at the top and then we just pass for example and let's say I want to set do something different so you can see that any thing we can do for example here we just say something went wrong so now if we try again to get an error here we can see we are getting that custom error which is something went wrong and the status code is 300. obviously we don't need to handle the error with our custom error Handler because we already have the error in our system so we can just return this one to our next error but I as I mentioned before in some cases in our application we need to have a custom error so I'm going to show you when we need it I think in the next section we need to do we use that so just for now we have created this file let's add this one to the GitHub we just add everything and we create a message we just say add a middleware and a function to handle arrows all right so we commit and push it to GitHub all right in the last section we have completed our backend side in this section for the sign up page we want to create this UI as you can see if you go to the final version of that hundredgeprojects.com forward slash sign up you can see this page we want to create this one this is going to have a title three inputs one button for sign up and one button for continue with Google I'm gonna just create this one in the Google section and then we're gonna have this have an account sign in so let's start creating that we can just go to our own website the final version we just go to sign up and I bring it to the right side and our Visual Studio code to the left side so we can see the changes in real time so we can just go to sign up page we can we just need to go to the client SRC pages and sign up so here I want to have a H1 tag saying sign up let it save this so here we want to have some class name I want to just keep it simple our focus is just react and mongodb and the mirror stack the Italian CSS I want to keep it simple as much as I can so here I just want to create we just make the text bigger just a text 3XL and then let's bring it to the center using text Center and then let's make it semi-bold and then we can just add a margin at the top and bottom of seven all right so that's okay for the H1 then we're gonna have three inputs as you can see from the final version the inputs and the button are inside a form so we add a form here we don't need action for that and inside the form we're gonna have one input the type will be text you want to have a placeholder of saying username and you can see it here now and let's add a ID for that same username so actually I'm adding the ID because we want to track the changes inside the input and later we're gonna do it so just for now we add the ID so we can differentiate between the uh all inputs and then we're going to have a class name we just style it a little bit we just add a background a slate 100 and then we can just add a padding of three and let's make it with the rounded corner so we just say rounded large so that's okay for the input and then we're gonna copy this one two more times using alt shift Arrow done and then we can just change this second one to email the type would be email the ID would be email okay and then for the last one is going to be the password so this is going to be password as well and the type would be password so we cannot see the the things we write down we just get the Dots here all right so let's bring them on top of each other in the in the form we can add a class name and this is going to be Flex display Flex we bring them first next to each other and then we can just change the flex direction to column Flex Dash call and then we can add a space between them using gap for example four like this and as you can see they are connected to the wall I want to add this padding to the this div so we it can be applied to other things as well so we add a padding of three here as you can see we added padding to everything and then for the large screen as you can see the input is 100 so we can hear uh just to Max width we limit the maximum width to large so this is going to make the form a smaller in the larger screen too but I want to bring it to the center so I just use MX Auto which is margin margin X Auto so now we have it in the set all right so it's now it's okay in the Mobile screen and also in the largest screen so after that you're going to have a button the button is going to say sign up and then this is going to be with the type of submit but as a default we have a type of submit we don't need to write it down and then we're going to have a class name yeah let's make the its background color to be a slate and let's make it dark like 700 and now we need we can still not see the text so we can change the text color to white for example all right so now we added padding of three and let's make it rounded two so we just say rounded large and uh let's make it uppercase so all the letters would be uppercase sign up and finally we can just add a hover effect so when we bring the mouse over it we want to change its opacity so I want to change the opacity to for example 95 percent so if you hover over it we can see that it changed its color and then when it is it is disabled I want to change the opacity even more to 80 percent so when the button is disabled for example if I just say here disable you can see the color is this color all right so we delete the disable for now after that we're going to have this have an account sign in but we can just put it outside the four so we can just create a div and inside the div we're going to have a paragraph saying have an account okay it is so I have an account and then we're gonna have a span here saying sign in so but I wanted this span be a difference if I want the color to be blue so we just say text blue for example 500 and then I want this sign in when I click on it go to the signing page so we need to import the link so I can delete that one we just say import link from react router term and then we can just cover this span with the link and let's this is going to be forward slash sine Dash in and then you need to close it and then we bring this one inside this so now if I click on the sign in I go to the sign in page but let's bring them next to each other so in this step we're gonna use the flex and then we can just create a gap between there for example Gap two and then we can just add a margin at the top of five so we add some space between here and the top and I forgot here to add a question mark okay so that was it for creating the sign up page UI let's add this one to GitHub so we add this page and then we just say complete sign up page UI all right so we can add it to GitHub we can see it inside the GitHub now if you refresh the page all right in the last section we have completed the sign up page UI in this section we're going to work on the functionality of this page and connect it to our database and also the backend so what we can do here is we add an unchanged event listener to each input so I can do it at the same time by adding a cursor by just using alt so you need to just keep the alt and then choose here and just press enter and you can just add it on change this is going to call a function called handle handle change or I could handle change all right so now all of them they have it on change event listener which is triggering a function called handle change and we can add the function here at the top we just create the handle change we get the event here inside this parenthesis and then uh so we need to actually save the changes inside a piece of State let me close this first okay and then here we create a p sub state and we need to have a bracket and we want to save all of them in a one piece of state so we can call that one form data for example and this is going to be set form data and then the initial value will be an empty object so now here we can just change the change it like this let me just accept this one so we split use the strip operator to keep the previous value of the form data and then we have added the new one here and how we know which input is actually changing we we know the ID is different the idea of first one is username this one is email and this one is password so when they for example we put we write something in the input of the username this is going to be username and then we're gonna get the value of that here and then we add it to this form data and because we just keep the previous value as well so let me show you by just console logging their form data and then let's let's bring this one to the right side actually we are getting an error here let's see what error we are getting so the error is uses state is not defined so we need to actually import to use the state which is coming from react we just need to have control space and then add it automatically okay now we are not getting an error so the error are gone we can see the changes here let me clear this for example if I write down something here for example I just say user one you can see the username is user one and if I write down something in email this is going to keep the username because we have this spread operator and keeping the form data we just say for example user one at gmail.com you can see that the email is added and also we have keeping this username and finally we can just write down something for the password so now we have all the information inside this form data also I want to show you something else because we have installed a extension called uh console ninja I think it's called this one yeah console ninja we can see the console inside the visual studio code we don't need to see it inside here so this is going to you just need to hover over it and then you can see now the username is user one email and then it starts from the beginning to the end so the the last console log is at the end so you can just copy it for example here and it's a very nice and it the user interface is very beautiful all right so that is the console log but now we can use this form data and send this form data to our backend and save the new user inside the database so let's delete actually this console log we don't need it now but we want to add an on submit event listener to the form so we just add it on submit and this is going to call a function called handle submit and then we need to create this function here so handle submit this should be asynchronous because actually we are waiting for the data to be added to the database so this one takes time and always for fetching data we need to use a weight so this is going to be asynchronous and also we have the events here what we do first is to write down event that prevent default this is going to prevent refreshing the page when we submit the form so let me close this and I show you now if I click on submit this is not going to refresh the page but if you don't have this if it's submit you can see that the page is refreshing okay so after that we want to create a request to the database to our backend and the address for the backend if you remember it was localhost three thousand it was three thousand and then API forward slash Authentication forward slash sign up so we can just here create a create a response I just write down s and we can just use fetch to request and this is this one should be 3000 and then this is auth or first life sine ah and then we need to add the form data here so let me delete this okay so now we have just created the request and then we get the data so we need to convert the response to Json to be able to see our response from the back end let's console log data here and see that it is working or not so let's test this one so we go to our website Let's see we are getting an error uh okay I think yeah we missed some parenthesis here so this is a parenthesis is opening here okay we didn't close the parenthesis for the handle submit let me close that okay now let's try we already have user one in our database let's add user two so I'm going to copy this user2 at gmail.com and the password will be hand so if I click on sign up let's test that if it's working on it we go to database we refresh the page uh it's not added actually okay let's see what we get inside the console log okay as we are actually getting we are sending the data from localhost 5173 it's been blocked by course policy because the URL of our front end and backends are different so in order to be able to receive data from the different URL we need to add a course policy but actually in the final version we're going to have the same URL for the client side and the backend side because we want to deploy them both in the same website but for now we can just add a proxy to our front end so in order to create a request we don't need to do it for the 3000 we do it to 5000. so in this case we don't get an error so in order to add a proxy in the wheat we need to go to the client vid.config.js and here we add the server here first and then proxy and then if we go to the API so if you go to the forward slash API in any URL we're gonna use localhost 3000 instead and then so this is going to be completed and also we can add another thing so I think it's Target uh this one should be here so instead of this we're gonna have saying Target this one and also we want to change the origin to true let's close this all right so each time we go to forward slash API we're going to use localhost 3000 instead of localhost five tiles so here in the sign up we don't need to add this one anymore we just delete it so this is going to be forward slash API for slash opposlife sign up so now if we try again let me paste this user to gmail.com and that's the hand if you click on sign up the the error is this time 404 not file so the address is actually is not there I think the proxy is not working let's check the proxy again so the API that's fine maybe we need to restart this front end because we are changing a config file let's stop this and start it again Let's test again so we are getting the same error so let's see sign up that is correct forward slash API slash off let's check the network now that's the problem is the proxy let me check this proxy again and let's remove this change of origin and also we want to change the secure to false because they don't have https so the secure is false actually now let's try again I just quickly put the same okay let's open the console first okay it's not working so let me pause the video and check the problem I'll be back all right so I have tested everything so actually the proxy it was fine it can be the same things but the sign up section we have I have added the method of post we need to add a method post and header content type application for slash Json so we just say the the type of our content is Json and method is post and also we need to stringify the form data using json.strf5 and we just pass it to the body section so now if we try to sign up for example if it's user 2 at gmail.com I just choose a password and then we go to console I just clear the console and then if I try again you can see you got the message user created successfully and in the network section if we check this sign up sign up you can see that we have requested to this URL and the status quo was 201 and then the response was user created successfully and if you check our database and we refresh the page we should see that user 2 is added to our database as well so that was successful so the trick was adding this method headers and body section before I have done it with the axios axis you don't need to add these things you need to install axios and do it but axios made me some problem in the production section so I've decided to use fetch now but if you use fish you need to add these things so it's getting a little bit messy so X uses going to handle all of that for you but for fetch you need to add other things so now actually in the URL we didn't add any low compost 3000 or anything like that and in the production section we don't need to add a two because the URL of our client and the backend would be the same let's delete this console log now let's say actually we do something here because we do sign up but we don't see any loading effect so when we just submit I want this one saying loading and then this button be disabled and if an error happens I want to see the error as well so we can do do it by adding two extra piece of State 1 for error and this is going to be null at the beginning and then we're gonna have one for loading okay and then what we do here when we do the request before the request or we can just add a try and catch here try and catch a state head so we add a client cache statement we put everything inside the tribe okay before trying before fetching data I want to set the loading to true so the loading will be true and then when the everything is done and we get the data successfully we sit the data set the loading to false and also we set the error to false tool let me change this to our null to false the reason I'm adding the loading false here because sometimes we have an error in the system from the previous request so we want to remove that one as well so here initial value of the error I want to make it false two and then if an error happened first we set the loading to false and then we set the error to true now we have these two pieces of pieces of state and then we can just add them in our application for example for the button instead of saying just sign up we can create we just say if there is a loading we just say loading if not we just say sign up so now if we try to add something for example user 3 at gmail.com just pay attention to this sign up when I click this one will be loading and then would be a sign up so we have the loading effect also I want to make the button disabled when the loading is happening so just say disabled and this is going to be equal to loading so if the loading is true the disable is true if not the symbol would be false so let's try again with the user 4 and if you click you see that the button is disabled for a second and then we have sign up but what if there is an error for example we have user 4 in our database if you click we get an error but we don't see the error here so we can add another div here at the end for the error or if we add a paragraph We just say if there is an error then just create a message saying something withdrawal for example so let's save this and then I want to just make this one red too so text red let me just choose for example 700 and then we add some padding at the top let me just say margin top five the same margin to five we have here so if you try now and we should get the error let me see the console we are getting the error here but why we don't see it here let's check that we have done it correctly or not so here we cache the error we set the arrow to true and then the error is here so the error is true so if air is true and then we should see the text something went wrong but why we don't see it so let's refresh the page maybe it didn't affect and then we do it again it's just a user tree use a tree at gmail.com and then I just put a password okay let's try again yeah we are getting the error but we are not seeing it here that's a little bit straight so let's see okay so let's remove this first one for now this false maybe this is removing our okay let me pause the video and I'll check I will be I'll be back when I find the error so I find the error actually sometimes the try and catch doesn't work and the error and the we get the data but we don't get an error but that data is not what we want actually actually is showing the error inside the data so here we just have to say if the data has the error and then set the error to true so we do it like this and then we return let's try again now just just use a tree so we try to sign up let's actually cancel out the data appears we see that if they get it here let's try again so here if there is an error we just get the error here the message duplicate key for example so we should actually we see that we are getting the success false here so the data we are getting the data dot success or what we are getting here message and status code so we can just say if there is risk data dot success is equal to false let me fix this okay so the success is false and then we want to set the error to True Let's test this one okay now it's working so it just says something went wrong so we can just delete this one and then also you can remove the trying cache but it's okay you can keep it like that too because we have I have tried this one with axios before and with four axis try and catch is working but for fit I never tried before so now I'm testing it for the first time so for the fish you need to actually do the this one to show the error so now if we refresh the page we see that we are we don't have an error and then here but we should know if if there is no error we have to set the error to false otherwise we we're gonna have the error from the previous uh try so here let's try again now we see the loading effect and we see that something went wrong and then if we try again we should see that the message is gone so actually uh we can just bring this one a little bit upper so here after this sets loading true we can remove the previous error so now the error is going to be away and then we see the new error and if you try to get a correct one for example user 5 you see that we don't get an error and user is created successfully all right so that was it for adding the functionality for the sign up page so let's actually add it to the GitHub let's try to add this one we just say complete sign up page functionality and then they commit and push it to GitHub all right in the last section we have completed this sign up page functionality in this section we're going to work on the sign in page we haven't created a signing page yet first we want to create the API route and after completing the API route we're going to create this sign-in page UI and connect it to the API route so the procedure is very similar to the one we did for the sign up API route we need to go to visual studio code let me increase the size here so we need to let me close everything so we can have Focus and we just go to the API folder we go to the routes first of dot router.js we need to add another route with the post request but this time for the sign in first let's just delete this one first we need to create the function inside the controller of that controller.js so for the sign up sign in that's the same procedure we need to create a function we get the request and response request is the data that we are getting from the client side response is the data we sent back to the client side and we use next to use our middleware for handling the error so here we're gonna first as you can see we need to get the data from the the what we want to do we want to get email and password from the curse and body we use that email and password to verify that person all right so first thing first we want to add a try and catch method so let me delete this so here inside the cache let me close this one so we don't get an error so the catch we're gonna just use next and we pass the error so this is going to handle the error for the try first we want to check if the email is correct or not so we want to check the firstly the email so we just say uh we just we get the user we call it valid user and this is a synchronous function so we just use a weight and then we just use our user model that we have created and then we the user model the the Mongoose has a method called find one and we can search for the a inside the database for the email this email that we are getting actually you have to write down email email but after es6 we don't need to to do it because the the value and the key is similar we can just limit we can delete one of them so after that we get a valid user we want to check if the valid user is not valid if the user is not valid we're gonna return as you can see we can return with the an error but as we have created the middleware and a custom error message using that utils folder here euro.js we can just create an error and send it to the user so here we can just say next and we create we use the this function that we have created here error Handler so we just say error Handler and then we just add a status code and a message we need to import the error Handler so let's if you don't see the suggestion you just need to open the file here when you open it the vs code is going to find that suggestion so you can just Auto Import it at the top error Handler from utils for Slash arrow.js and for this one because the user is not existed the email is not valid you just say four or four and then we just say user not found okay and if the email exists we're gonna pass this one and then now we want to check the password as you can see we are getting the suggestion so we want to check the password valid password we'll use the bcrypt.s that compare sync method so this compare sync because the password we are getting from the body is the normal passport and the password inside the database is hashed and encrypted we cannot compare it directly we need to use decrypt.js so we compare this password with the password inside the database which we are getting the user and then we we just use the password here to get the user's password and we compare it with the one we get from the body and now we just say if the password is not correct we're gonna return an error but this time this is going to be 401 invalid password but the best practice is actually don't tell the user what is wrong with their sign in because people's gonna check if the password is wrong they're gonna just change the password each time I find their correct password so we just need to say run credentials or username or email is not correct so wrong credentials okay it can be four one okay or 403 both of them are fine and after that when we are completely sure that the email and password both of them are correct then we want to add a token to the cookie of the browser so token is just a hashed value of the unique things from the user for example it can be email ID or username we make this one encrypted and put it inside a cookie and later when we need to verify the user we can use that token so there are some packages to create the token the most famous one is a Json web token so we need to install Json lib token inside the hood of our project we just say npn install Json web token when you install it we need to import it at the top we just import JWT from Json web token like this and then here we just create the token we just say cons token jwt.sign and as I mentioned here we need to actually add a unique things from the user and if you check the database we can see we have username and email they are unique but the best practice is use this ID because this ID is automatically created by mongodb and it's completely unique and each time you get a different ID so you need you can verify that percent with this ID and then another things we need to consider because the token can be accessed by the client so if you just use for example email and or the username for example if you make a social media account people know each other's username for example or email so they can just create the token themselves and just do malicious things for that person if they you know the person is using it but still actually you need some extra security to pass but if the hackers know what they are doing and they know your username or email they can do it easier but the ID is actually something that people don't know from other users so you don't know others users ID alright so we're going to use the ID and the ID of the user we know the IDE is not is not going to we just use ID and then we have the user here and then the user has ID and its underline ID it's not ID in the database you can check its underline ID all right and then after that we just need to add a secret code so what is this secret this is something unique about your projects and in order to later use that token to verify the user you need to provide this secret key again so this is going to add an extra security to your token so your token is unique for your project and if someone else use different JW secret key they're going to have a different uh different token because it is created based on their own secret key and if this because this is a for you and you don't want to share with others we just needed to add it inside the dot EMV file so we can just keep it secret so inside the dot EMV we're going to add that JWT underlying Secret and this can be anything can be your name or anything you can just put some random letter of numbers to make it more secure but this is for you and you just need to know this one when you are doing in the production you have to add the same secret key and this is always yours and if you change it after creating some users and you change the secret key the the new users actually cannot go inside their account because you change the secret key all right so now you have it here we don't need actually this one we can just close this okay now we have the token we can just put this token inside the cookie of the user the client side so what we can do we can just say response which is the response dot cookie and then we're gonna pass this token here and we just name this token it can be token access token you can you call it whatever you want just say access underline token and then so this is going to be added inside the browser's cookie with the name access token and the value would be this token and this is the extra option we can add HTTP only true which is going to prevent the third-party applications to modify this cookie I'll change it so this is going to add another extra security for your cookie and also we can add the status of for example 200 and then we're gonna set back that user this valid user why we are sending back this one to the user because we want to use this data to add it for example to places like if you look at the final version and we have the this Avatar here and then the profile so we are using that data to create the client side so we need to send back that data all right so let's test this one inside the insomnia so we have just created let me Zoom this only if we can assume it so you can see better and we can increase the size let's change this name this was for sign up because the sign in is very similar I'm just going to duplicate this one you'll duplicate this one and then we just change the name to sign in and the actually the URL is API for slash R4 slash sign in if you remember inside the index 30 yes we had added this API for slash off and then inside the router we have forward slash sign in okay we forgot to add this function so we have created the function inside the controller now we can use it inside the route we just import it here too so sign in and sign up from the controller so now we just go to insomnia we have changed this one we don't need to send the username just email and password is enough and if you send this one and we know that we have the user1 gmail.com and be the passwords at hand and if you set this one we get this we are getting an error we're saying that res dot cookies is not a function okay let's check all right so let's see okay oh actually I have made a mistake here this is with two o's and cookie it pronounce like that and okay the spelling is like that so double O and K now is the check again we try again okay that is a let him see let me check again uh okay it's not cookies it's cookie where's that cookie sorry about that so let's check again okay now we are getting the response as you can see we we are getting a response it has the ID username email password and created ad and updated that app and also we have a cookie here if you click on the cookie you can see we have a cookie with the name access token and this is the value order and uh but the problem is we are getting the password here even the password is Hash it is not safe to send it to the client side and it's it's actually it's not okay to send the password to the client side so so we need to actually remove the password there is a very simple solution for that so here after getting the valid user we can remove the password from that after checking the password even here after the token is filed you can just create a constant and be the structure Actually the password and the rest so as you can see we we separated the password and the other things we can just call this one rest to make some more sense so we separated the password and the rest and then instead of sending back the reality user we can send back the rest so now if we try and if we try now we can we should see that we don't get the password Here we just get the rest okay and the reason we are adding this underlined dock is actually the valid user if you just destructure the valid user like that and if you try you can see that we are getting all the information in unnecessary formation because we actually we need to structure this underline dock here so make sure to always add this underline doc here at the end so you destructure it correctly and like now you get the correct answer and also each time you request you get a new token so so each time the person sign in you get a new Fresh token and this token actually is just a decision so if the person uh closed the browser and open it again I think they need to sign in again if you want to keep them sign in for a longer time you can just add more things here like uh you need to just add some age I think I believe you need to add H and then just put the time and this one is if you check here it's it's based on a second I think and then this is going to be you should divide this one and calculate how many times you need so if you try this one I think so if it said now actually we are getting an error let's see the error Edge is notified I think it's not H is something it's on I forgot to do how to do it I can search here how to add cookie which expiry date okay I think this one would be okay and then this is the answer okay you need to just yeah you just need to add item Max H that says it stinks let's try this one paste it here max age or we can use this chat actually it helps us okay you just choose this one and then in the chat we can ask add expiry date expiry date for this cookie okay you said you can add an expiry date to Cookie by passing the expires option to the cookie method and okay so it can be anytime one hour or something this is for one hour and let's pass this one so you need to actually calculate the current time and add the the time you need for example this is for one hour and then you just need to add expires and add the expiry date so let's test this file okay now we have a cookie and then actually you cannot see it now here but inside the header you can see that we have a date for the cookie to be added and then we can check it inside the browser as well all right so that was it for checking a bit insomnia but in the next section we're going to actually create the uh front end and then we test it inside the front end and you can you can see the cookie and everything else in more detail inside the browser so just we have added the cookie and everything is fine we just added the actual expiry date right so everything is fine this is for one hour you can just add it more time you can just add more time here all right so let's add this one to gear top and we just call this one create sign in API route all right in the last section we have completed this sign-in API route in this section we're going to create the front end for the signing page and create the UI and also connect it to the uh the backend so we just bring this one to the right side our final version sorry the the current one that we are working in the sign in page and I want to bring this one to the left side so you can see the changes in real time I can close everything and then we just go to client Source pages and sign in and this is actually very similar to the sign up page we can just actually copy everything and what we don't need to actually import this one in the sign up page I don't know what's that so we can just choose everything use Ctrl C and then you just go to here and we paste it here so now if you refresh this page we see that we get the same page as the sign up but let's change the unnecessary the necessary part for example the name here is sign in the function name is sign in and then uh the everything is similar we have error we have form data loading we have handle change that is going to track the changes inside the inputs we have a submit handle submit but here the address for fetching data is different is signed in API for slash Alpha slash sign in and then we don't need this console log we can delete this and then what we have here we have sign up for the title this is this should be signed in okay then I should see the sign in here and then for the signing we just need the email and password we can just delete this username part and the other things we need to add is this change this button and it says sign up it should be sign in and then here we are asking have an account it should be don't have an account don't have an account to make sure don't add this one here if you add this you should get an error in the production section just delete it just so you don't have another account if you want to add that font you you need to add it in a different way it should be a symbol let me check symbol for programming see we can get this one okay and this I forgot how to do it let's check the here so we just say add clone to Don't bit symbol let's see what we get yeah apostrophe I just say I don't want to get an error get an error in production to avoid the whisper you should always test this that's just saying nonsense it's fine it's not that important so you just say don't end up account don't add an apostrophe and then here this one should be sign up and then this one should go to sign up so now we can just test it we can just refresh the page now if you remember we have the user user one let me increase the size user one at gmail.com password is a hand let's see and let's see the console if you get an error or something so if you just click on sign in we are not getting an error so let's check the network as you can see we are getting the response here with the ID username email and everything else and then as you can see we we sent a request for this URL inside the header and also we got a cookie back here and the cookie expires at this time which is one in one hour and then it this is HTTP only and also we can see this cookie inside the application and if you go to this one you can see the address you can see we have a cookie with this value expires at this time HTTP only and the path is forward slash and if you refresh the page we can still see this cookie it means that we can use it to authenticate the user later or verify the user for doing some other activities like deleting or updating the account so this one is created but when we are signed in actually we want to go to the home page all right so it's very simple to do that actually you can just you yeah we have a react router down we need to import another things called use navigate I think use navigate and then we need to initialize it here we just say cons navigate equals to use navigate and then we can use this navigate to go in another page so if everything is all right here and there is no error we can just navigate to forward slash which is all paid so let's test this one so let's again use this user okay if we now click on sign in we should go to the home page okay you can see we are redirected to the home page and also we can do the same thing for the sign up if the sign up is successful we want to redirect the person to the sign in page so we go to the sign up page 2 and then we can just do the same things we can use we bring the use navigate initialize it here and then we can just after everything is alright we can just navigate to the sign in page all right so let's test this one too so be sure everything is working correctly we can just create another user for example user I think we have created a tip five maybe just say eight at Gmail user 8. user 8 gmail.com you can use the same password and we just click on sign up and we are redirected to the signing page we can use the user 8 sign in and now we are in the home page all right so everything is working successfully and nicely but we want to actually show the data of this user in other places like here in the Avatar or in the profile page but because we are using the data in different places we cannot use the normal passing props it is going to be very messy because you have to if you have a big application you have to pass the data in a different components so the best practice for that one is to use a global state so we we save this data the user data that we are getting from the response when we do the sign in where is sign in okay then you get the response we want to save this data so in different places we want to use this data so we're going to save this one as a global State using some like you can use a use context or you can use redox we're going to use redox toolkit which is the new and it's easy to use the redox itself so we're going to use redox toolkit to save this information in a global State and then use this information everywhere we need for example in the signing page in a profile or for protecting a page so we can just use this information in the front end using Redux toolkit so in the next section we're going to start working with Redux toolkit and I'm going to show you how to use it so see you in the next section but actually I forgot to do the other things we want to add this one to GitHub sometimes I forget so we add everything we just create a message we just say we can just say complete the sign in page functionals and then we commit and push it to GitHub all right in the last section we have completed the sign in page functionalities in this section we're going to work on the creating the react redox toolkit which is going to help us to have access to the user's information in all places in our application for example in header in the profile page and Etc here if we search for redox toolkit the official website is redox toolkit.js.org and here we can just click on Twitter started and here we can just go to Quick Start If you scroll down a little bit and click on the JavaScript part first you can see we need to install redox js4 toolkit and then we need to create a store for our we created storage store all the variables here inside the store all the slices and then we need to create the and add this store to all applications using a provider and once we do it we create our Redux estate slice so in our case it's user user slice.js and then we just created and exported here export all the actions and then export the reducer and finally we can use this one actually we need to First add the slides in the store here and once we have added the a slice to the store we can use this one using use the actions of our slice in our application by just importing it by use selector hook which is coming from react Redux it sounds a little bit complex and complicated and hard to learn but once you build this one few times you're gonna completely remember it and you can do it so I'm gonna show you I'm gonna make it without looking at this one you can see how easy it is so Redux toolkit is actually inside the front end so you have to work on the client side so inside the client let's close everything and we need to create this store inside the SRC folder we just create another folder called redox and inside this folder we are going to have a file called the store dot JS and here we're gonna create our store so first we need to import something called config configure store which is coming from react redox forward slash toolkit but we don't have this package yet we need to install it so we need to go to our client site first this is our route so we just go to client by using CD client and then here we're going to install two packages redox JS forward slash toolkit and also react Dash redox so we're gonna need to these two uh packages and once we import the a configure store we can just export our store using the configure store and this is going to have our good users and then so first we don't have any reducer so first we're gonna keep it empty and then we're gonna as you can see we're gonna have the middleware which is good we are getting the get default meter pair and this get default middleware is going to do some options for us for example serial serializable check false is going to prevent some errors while we are using redox toolkit and then we're gonna close this okay so now we don't have this reducer we're gonna create it our first reducer which is a user reducer and just we have created a middleware to disable the seriesable check otherwise we're gonna get an error and then now we have this store we need to add it to our application and the place we need to edit is our app.js sorry actually we need to add it to main.js so this is actually the root of our application and then the app.js is going to be inside it so if we cover this app.js with our provider we'll react with Redux provider we're going to cover all our application and add this store to all application so here we need actually to import our store that we have created which is coming from the if you just remember it was inside a folder called Redux and then a store but don't forget to add the JS here okay so here we have we have imported stored from the Redux for slash esto.js which is here and then we need to import another things which is Provider from react Dash Redux and then here we're gonna cover the app you can just delete that react strict mode and then we can just add our provider that we have imported and this is going to have a store here so we're gonna pass the store that we have created inside the provider so now actually our store is working in our application all right so the next step is to create the user slice a slice is just like a piece of State like we use like a loading and error using user State a slice is actually the same thing so inside the folder the redox folder we're going to create another folder and just recall it user and inside the user we're going to have our user a slice.js and here we're gonna create our slice using Create a slice create a slices coming from redox js4 slash toolkit not option that redacts create a slice and once you have the created slice we're gonna firstly create the initial state which is for us if you remember from our signing page we had we had the error loading so this is going these were going to be actually false at the beginning so these are similar here we have user we have current user which is null at the beginning then also we have loading which is false and also Arrow which is false too and then we can just close this so we have the initial State now we want to create the user slice using that create a slice so we add this one here the name of this as slice is going to be user the name you just choose the name here and then we're going to have the initial state after that we're going to have our reducers resources are actually the functions we want to add so using these functions we want to change the state of our user for example we want to change the loading we want to change the error and connect user so the first reducer we want to add is I want to call it sign in as dot so we can just say sign in start and we can get the state here first we get the state and we just set the state that loading to true after that we're gonna have our second function which is signing success signage success is going to give us and we can get two things actually here you can get the state and action action is kind of if we get the data from here for example inside in where when we want to request we set the loading to true and set the arrow to false after the successful fetching as you can see we got the data this data can be added to our s producers as the action and this data we can pass it and then get it here as action.payload so here as you can see we are setting the current user to action.payload which is coming from our request for example data in our case and then we set the loading to false because first was true and then it's false because the signing is success and then the error is false as well because maybe we had an error before this request maybe this is our second request and the previous request had an error so we want to clear that error as well and then we're going to have signing failure signing failure means we get an error so here we get we're gonna set the loading to false and then we're gonna set the error to action.payload so it can be for example this error we can get here is true actually but you can get the data for example you can get the error a specific error okay so we have these things we can just close it now we close the reducer and also we're gonna close this user slice and now we need to export this so we can use it in other places so we just export this sign-in let's start signing success and sign it failure and these are going to be inside the user side.actions so in this case we can later using these functions by dispatching the actions all right so and also we need to export the reducer as well the export default the reducer and we call this reducer user reducer so now we have this reducer we can add it firstly in our store because we we didn't add any reducer here so here we just add this reducer which is user reducer and we need to actually import it at the top so we need to import user reducer from this user slice and because we have exported as a default here we can change the its name the name is actually reducer user site dot reducer but we can change it and we just call it user reducer okay so now we have done the first three part adding the store add the store to the our application create this slice now we can use these as slice and actions in our application for example in sign in.jsax instead of just doing this error and loading now here we can just delete that and then here we can just use our actions that we have created first we need to import them let's import sine in a start sign in success and sign in failure from the user slice and then we need to dispatch this actually functions so we need to import use dispatch from react redox after the import we need to initialize it like the use navigate you need to initialize use dispatch we call it dispatch and now before the request we dispatch the sign in success like this so this is going to actually make the loading true so we don't need to write down loading through so we just say sign in and start after the request instead of sitting the loading to false we can just say dispatch signage success and then we're gonna pass the data all right and then if an error happens instead of doing the set error we can just say dispatch sign in failure or here we just say dispatch sign it failure and we can pass this error as the payload okay so now they have just dispatch everything and instead of now getting the error like this using use effect we can just get both of the error and the loading we just need to destructure loading and error which is going to be by use selector and use selector it we need to import it from react redox and then this is going to be from a state that user if you remember we called our s slice use it so the name of this one is user so if you look at the Here sign in page we can see that we get the name estate dot user here so now we just got this sign-in success signing failure and signing a start we can now test our application if we go to here we can see that now we are getting an error let's see what we what's the reason for the error if you go to console you can see that uh the the name create a slice is not actually provided if we go back to a store.js no sorry it's user size that she is actually this created slice must be lowercase so we have to change the C to lowercase now we can see we are not getting an error and for testing the redox we need to actually use we can use a package called an extension called Redux Dev tools you can add it to your Chrome or Firefox and you're gonna see it redox here or you can just right click and here we just say Redux toolkit and just choose for example to write which is going to open it like this and then you can bring it to the right side and here I've opened it two times so you have this redox toolkit now if we sign in we should see our changes here inside the actions and States let's sign in with one of our accounts which is the user1 at gmail.com if we click on sign in we can see first we have sign in a start and then we have sign in success we have a payload here if we open it we can see the payload is the user information they have ID username email and the time of creation and update here you can see this in the state we have a user State and inside the user we have three things current user loading and error inside the current user we have the information of the current user so that was successful we could manage to do it and let's get an error for example we see that the changes here for example if I choose a user that does not exist like user for example 20 at gmail.com I just put a random password so now if you click on sign in we can see that we got this sign in as start inside the ACT if it difference you can see we get the sign in start and then we got sign in Failure at the end and the user the user now the loading is false and the current user the success is false the message is user not found and we have a status code of 404 as I mentioned before as we are using fetch we are not getting that Parts here we are not going to this part try and catch Vietnam dispatching the failure here okay so here we can just actually add a payload for the sign-in failure as well so here we have data Dot message okay and also we need to move this signing success here after this checking so we don't sign in success before checking the error all right so now let's test again if let's clear this one so we can put the just reset it now so everything is empty the currencies is null if you click now on sign in you can see now we got just the sign in a stud and sign in failure and the current user is null and we have an error user not file but as you can see we are getting this something went wrong here because actually here at the end we just said if there is an error just say something went wrong so we can change this one we just say if there is an error you just show the error Dot message or if there is no message just show something went wrong so let's change this one doesn't work like that so that is message and then we change this one to a question mark If there is this one we get this and then if there is no error you just make it an empty string here like this so if there is an error which just show the message if there is no message we're going to say something went wrong and then we can just protect this message as well if there and I think it's fine now we just check let's get an error okay let's refresh the page let me copy this if we sign in all right so we are still getting something went wrong let me actually console log error so we know that what we can actually use here which is console log loading an error so as you can see this loading is false but error is not user not fat so it's not error.message just the error so here we just say if there is an error just show the error otherwise say something went wrong if there is no nothing here and if it's false we're gonna see that empty string all right so now let's try again as you can see we are getting user not found here let's try a different error for example we just say user one and with the wrong password you can see we get wrong credentials and if we try to be successful for example a correct password as you can see the the error is just false and then loading is false and the current user is this user so let's see that we have just make everything correct here the signing failure we have the stated error action.payload and inside the sign in if the data is the false the data the success we just send a message as the failure so actually because we are now adding this one error that message here and data it's I think it's better to pass the data that message that both of them would be similar and then here we have error that message here we have data that message and here I want to change this one to error Dot message and we check if it's the same or not so let's try to get an error here so user 20 ER wrong username okay yeah now we got the user not file let's try to have a correct email we get around credentials and let's try to get an error that is not actually related to the username and password for example I wanna in the network I want to just make the internet offline and now we test uh we just get the fill to fetch error so that that is working actually very nice because uh we didn't create this error in our backend but we are actually here inside the try and catch we got a new error and we got it here and if you console log this one now error Dot message let's save actually yeah we don't have Internet maybe here it doesn't work oh let's try to console lock here the data okay we are not getting here as well so it's fine so actually we are getting the error and catch it here and then show it here fail to fetch I want to destroy something that is not available and we get this something went wrong but actually we cannot do it right now we get some uh but sometimes some error happens that we get something went wrong so in case that there is no error.message we have created this something went wrong here so we have an error but there is no message all right so that was it for the redox toolkit in the next section we want to work on something that if you pay attention to this one we have currency user here but if you refresh the page you can see that the current user is not so we don't we can we don't have this data it's staying here so that is actually just working for one time and then when we refresh the page we lose the data but we don't want to do that that one for the user so they have to sign in each time when they refresh the page we want to keep the data and show it for example in the Avatar in the profile page so we need to actually save this data so we're gonna save it in some places like uh the storage of the browser local storage but we want to do it by installing a package called Redux persist which is kind of official of the redox and we can simply add this one to our application and when we refresh the page we still can keep this data because we can retrieve it from the local storage so for now we just add this one to the GitHub and then we review what we have done we just add all the changes and we can just create a message called add redox toolkit alright in the last section we have completed adding Redux toolkit in our application in this section we're going to add Redux persist which is going to help us to keep the user's data even when they refresh the page and we're gonna store it inside the local storage of the browser inside the Redux toolkit.js.org website if you search here redox persist there is a link here used with Redux persist and there there is some procedure here we can follow as you can see we have to cover our application with uh let me Zoom this a little bit think actually let this search again all right so inside the store instead of adding the user review so we need to add the persisted reducer and then inside the app that's made.js file we need to wrap the application with the persist gate to and we're gonna add the persistor here which is we can create using persistent store function so I'm going to make it a step by step and you can just see it and compare it with this tutorial all right so we go back to visual studio code the first things we need to do to install this redox persist inside the client we need to just say Let Me Clear this so you can see it better all right so now here we just say npm installed redox Dash persist and then we can just press enter so once we have it in our application the first things we need to do is I mentioned inside the store.js so inside the redox s2.js here instead of adding this user reducer we need to add the persisted reducer but before doing that we need to combine all our reduces in our application we only have for now a user reducer but in most of the application people have more than one reducer so we need to combine it so the way that you combine it is to just create a constant and this is going to be root reducer and we're going to use combined reducer to add combine them together and this is going to be from Redux toolkit and then here we're going to add our user producer but we don't have more than that but in most application you have more than one reducer like post reducer video reducer depends on your application you're going to have more reduces so you're going to add all of them here combine them as you get the root reducer after that you're gonna have the persist reducer persisted reducer which is going to be equal to a function called persist reducer and this is going to be from Redux persist so we need to import process reducer from redox process and then this is going to take two things one is persist config and then the other one is this root reduce it but what is the persist config we need to Define it here we need to just say consist process config and this is to this is we need to define the name of the key version and etc for example T is going to be root what I mean by key I'm going to show you when we test this one inside the local storage you'd have the key and the value the the name of the key we're going to use root you can use anything you want for example user or anything else this is just the name of the data that you're going to save inside the local storage and then we're gonna set the first we're gonna set the version if you don't set the version is going to be -1 you just set the version to 1 and then we're going to pass this storage and then we're gonna close this but we need to import a storage a storage is going to be from a Redux persist as well but from Redux process forward slash Library forward slash S Storage so in this package is going to save our data inside the local storage of the browse so now the persistence reducer is ready so instead of having this user reducer here we're gonna delete this and add the persisted reducer what else we need to do is to create the persistor if you remember I said inside the main.js we're going to cover our application with the persist gate which is going to have persistent so here we're going to export a constant called persistor and this is going to be this is going to persist a store that is storage that we have this is the store our normal store and then we're gonna persist it that means we're gonna save it inside the local storage and this persist store is going to be from redox persist so we need to import it at the top here so actually we have done with the esto.js part and now we need to add this one inside the main.js file so we need to go to main.jsx as I mentioned before we need to cover this one with persists so we need to actually here we just say persist gate all right so the persist gate is going to be from redox persist forward slash integration for slash react and then we're gonna get the persistor pass the persistor and persistor is going to be from the storage we have created this persistor at the top at the bottom of this here and then we're gonna pass it here and then we're going to pass this loading null and we can remove that one as well it doesn't matter it doesn't have any effect but inside the website they suggested to add it here as you can see loading now all right so and then we're going to cover it so we're gonna close this tag so we have imported persist gate and also we have imported this persistor so now if we it's time to test our application with the persist redox persist so if you go back to our application seems like we are getting an error if you don't see anything in the page I'm sure it's probably you you're getting an error so you need to open your console and check it so the probability of loading is undefined inside the user use selector all right so that's the other one all right so because we are importing error and loading from our application but they are actually they don't have any value at the beginning all right oh it's it's looks like we don't have internet connection here because inside the network I have made it offline so let's fix this one first and then refresh the page I think we made a mistake somewhere here inside our application let's go back to a store.js uh so we have to find the persistent reducer okay we have added this one here like this it just have to be persistent reducer all right so now if we test again you can see now we are not getting an error here and let's sign in for example with the user one at gmail.com and then let's open the Redux on the right side let's bring this one here this one here all right so now if we sign in first we can see that the user is null if it's signed in you can see that the current user is this user with the user1 gmail.com and if you now refresh the page we can see we are having the current user is still here so we are persisting the result and and where is that result is coming from actually and also you can see here the processed here the version one so this one is added to the Redux toolkit as well so I want to show you where this one is actually is stored you need to go to application and then you go to local storage if you choose our website you can see now we have a persist one and also the key is root if you remember we have defined the key as root and then the value is this user the loading is false error is false and current user is this one you can see it here clearly as well so even you refresh the page you still can keep it here and we can use this data to show it in our application and when we just edit our user or sign out we need to modify this one as well we need to delete it and this is going to be automatically edited and updated using the reduct persist okay now for example if I delete this one and then I refresh the page you can see that now the current user is not so the current wizard is actually it's been fixed here and then here even is updated as well the currencies is now loading false error false so that was it for creating a redox process let's add this one to the GitHub repository here and then we can just add everything and then we can just uh say add redox persist and then we can commit a push all right in the last section we have completed the sign in page functionality by adding the redox persist in this section we're going to add the oauth and Google authentication as you can see from the final version inside the sign up and sign in page we have an extra button so if you click on it we're gonna see a pop-up window which is suggesting uh to choose one of the Gmail account so we can choose one of them for example I choose this one and this is going to authenticate me and add this one to the Redux toolkit as well and once we this is completed let's see what happens okay so let's see what happened to this one let's refresh the page I will try again I think there is no internet now so let's try again okay Firebase error fibers error authentication cancels pop up that's not important so let me try again we just click on continue with Google now it's working now I think there was a this connection with the internet you choose one of the accounts and then we're gonna be redirected to the home page and also we can see the avatar from that Google account here so we want to add this one to two pages sign in and sign up page but we can easily create a component and add it to the uh to both pages so let's go back to visual studio code and let's close everything inside the client we go to the SRC and here we're gonna create a new uh actually inside the components we're gonna create a new file we call it all oauth.jsx we can use RFC to create a react functional component and now we can add it to this sign in and sign up page after this button the sign in and sign up button we can add that oauth okay we need to import it at the top as you can see this is imported from the this address and also let's add it to the sign up page as well so here after the button we're gonna add that oauth okay so now if you check this sign up and sign in page we have oauth here so let's bring this one to the right side and this one to the left side so we can see the changes we do inside the oauth we can close these two pages and we just focus on the oauth component this one should be a button as soon as you make a button it comes to the center it's gonna say continue with Google and then we can just add some style to it so we'll check to change the background color to red 700. and then we can just add the ticks color to be white we can make it rounded add a rounded Corner using rounded large and we add some padding of three like this we can make it uppercase okay and then when we hover over it we want to change it to opacity to 95 percent so similar to this one we're gonna have the same effect here so for the styling that is enough we want to keep it simple and also we don't want to add the the disabled functionality for this Google as you can see it is added in both pages and then when we click on it we want to call a function but because it is inside a form in both sign in and sign up if you click on it this is going to submit the form actually and we get an error but we want to prevent this one by changing its type to button so the default type is actually submit for button but we can change it to button so when we now actually if you click we don't submit the form we we have this error actually found before for example here we don't have the error and then this this is not going to submit it and let's add it on click here you just say on click and we're gonna call it function calls handle for example Google click and then we can create this function here at the top so this is going to be a constant we call it handle Google click and this is going to be asynchronous because we want to request to Google and also the API and then we wanna we can use a try and catch so here we try and let's add the cache as well catch the error and inside the error I just want to console log uh could not log in with Google and then we can want to pass the error that's enough for this because we don't want to show the error for the Google for the user because mostly it's fine and then before adding this one we need to actually activate our Google authentication inside the Firebase so we need to go to google.com and search for Firebase Google and the search results we can go to firebase.google.com here we you need to choose your proper Gmail account connected to the Firebase for me it is this one and then you can go to the console here by clicking on go to console as you can see we have I have many projects before for my websites you can create a new projects and then you can choose it something for example I can choose learn as click continue we don't need Google analytics for these projects so I'm gonna remove this and then click on create project so this is going to create our projects in a moment and it is provide provisioning resources and this is gonna take a few seconds and this is kind of already finishing up now the project is ready you can click on continue and here as you can see we can get started by adding Firebase to our application we can choose between the Apple Android and web as we are creating a web application we click on web and we create a nickname for our application I just want to call it again man alt and click on register app and make sure you don't check this because we don't want to use Firebase or stick once we do that we're gonna need to actually install filebase as you can see from here we need to install Firebase and then we want to create a file called firebase.js and add these credentials there so if we go back to visual studio code and here let me clear this very clear we want to install Firebase inside the client so make sure this is client not the root so we just say MP install prior base and after that we can just copy this code and paste it inside a file in our sources here so inside the source folder we want to create a new file and we call it firebase.js and we're going to paste the code here as you can see we are just having a Firebase conflict including the API key the domain name and Etc and also be initializing the application based on this Firebase config and also we have this variable we need to export it so we can use it in other places in our application and also we can just keep this API key secret and as we are using Veet we need to add the dot EMV file inside the root of our application inside the client folder we're going to create another file called dot EnV and the file name the variable name should start with capital wheat underline and then we can just call it for example Firebase API key underline API key and this is going to be equal to this key we can just cut it from here and paste it here and then here the invite is different from the create react app in create react app we just say process.env dot that the variable name but here we should say import dot meta dot e and B wheat underline Firebase API key and also you need to add defeat at the beginning too so everything is ready now we can just now start in our this place and try first thing we want to do is to create a provider and this is going to be equal to new Google auth provider which is coming from we need to import it at the top we can delete this one we can import this Google of Provider from Firebase forward slash off we need to import later delete this so before using this we need to actually here inside the con inside the Firebase we need to click on continue to console and here we can click on authentication or inside the build you can click on authentication so you click here you're gonna get it started with our authentication here and here we choose Google and we just click on enable and you can just choose your Project's name for example I just say auth app this is going to be shown inside the pop-up window for your application and also you need to use your email here and you just press save and this is going to allow the Google authentication and also this is enabled in the setting here inside the authorized domain as you can see the localhost is added or authorized domain so we can use localhost to have access to the Google authentication but later when we do and when we deploy our application to production mode we need to add that URL that we get added here otherwise we cannot have access to the Google authentication so this is going to make our application more secure so let's test this one we are getting an error here I think we missed some if we didn't close some parenthesis bracket so that is fine so we actually we got the provider now we want to get the results from the Google first we use result and we're going to use a method called sign in with pop-up which is going to be from Firebase forward slash authentication as well which is going to take two things auth and provided we have created provider here at the top but we need to create the auth so we need to import in other things called get off we can initialize it here add a at the top we can initialize it here as well we just say cons auth equals to get off and also we need to add this app here because otherwise fibers won't be able to recognize who is actually asking the request so here we need to add that app which is coming from our Firebase file that we have created inside the SRC folder alright so now we get the result let me show you the result first by console logging the result so let's open the console here we go to console and we click on continue with Google as you can see the window pops up and then we can choose one of our Gmail accounts the few things I have to mention first thing first you just have to add at least two Gmail accounts to see this window all the time otherwise Google is going to remember your preview you sign in and doesn't show you this window and so some people think they get an error they don't see this window but actually they already signed in with one of their accounts so that Google is remembering their choice so be sure that you at least add two Gmail accounts to to see this window all the time and the other things I need to mention is this error this error is not related to us this is for the Firebase and recently we are getting this error and this is an internal error for this window popping up and it's only is showing in the Google Chrome actually so don't worry about this error and just ignore it maybe in the next version of the Firebase we don't see it so here now we just choose one of our Gmail accounts for example I choose this one and if we know we can we should see the result coming from Firebase and inside the user here we can see our display name the name the email and also the photo URL so this photo URL is if you copy it and they paste it in a new tab and we press enter we can see that we this is actually the image of the user the URL that the Google is providing us so for our application we need three things we need this display name we want to create this username from this display name we need this email and this photo URL by using these three informations we're gonna authenticate the user get the information and save the email inside the database so after that after getting the result let's just delete this console now we want to create the response okay we get the response so let's the response is going to be equal to a weight Fetch and we need to actually we haven't created actually the back end yet but first let's complete this front end and then we're gonna complete the packet so this is the address we want to create for the Google forward slash API for slash offer slash Google then the method is going to be post because we are sending the data and for the header we want to set the content type to be application Json and for the body we want to stringify and send some information and what we want to send is not this one let's delete this we want to send three as I mentioned we want to send three things this name display name email and this photo URL so I want to set the name and this is going to be result.user.display name if you remember that is the result dot user this user and dot display and then we're going to have the email and finally we're gonna have the image or photo you can call it and this is going to be resolved that user.photo URL we don't need anything else that's fine and we're gonna close this and let's we have closed this one and then we get the data by converting this response to Json and then what we want to do is to add this one to the Redux toolkit if you remember inside the sign in we have edit and dispatch signing start and signing success and failure we don't need this start and the failure here we just use the success one so first thing first I want to import the dispatch use dispatch from react redox we need to initialize it get the dispatch and then here we just dispatch signing success and we pass this data so we don't need to create a new actually a reducer for the Google because we can use the same sign in success all right so we have done with the front end section now we need to create the backend to handle this and get these three information name email and photo and we create a new user for our in mongodb so we go to our API we go to firstly we create a route we create a new router dot post and this is going to be or Google so forward slash Google so we're going to create a token here let me accept this so we just do the same things we do we did for the sign in we have created the token we separated the password and then we have set the cookie so here we do the same things we create a token using jwt.sign method and this is going to be user.underline ID this is something unique from the user and then we pass this JWT secret key that we have inside this dot EMV file JWT Secret all right so I took on totally lost here so once we create the token we're gonna separate the password and the rest here and then we're gonna set the expiry date which is in our case we just set to one hour and then we're gonna have a response we set the cookie with the name access token this we pass this token here and also we pass this HTTP only through to protect our cookie and finally we're gonna set an expiry date by using this expires so this is the time that we already have the same email in our database all right but what if we don't have the email but if we don't have this email before so we need to create a new user but if you remember inside our model our user has the username email and password but in from the Google we are just getting a display name email and photo actually so we are not getting a password and we are not getting a username so we need to create the username for the user and also we need to create a password because the password is required if we don't pass the password we cannot actually register any user so we need to actually create a random password for the user and let the user later change the password itself and also we need to create a random username based on the display name and the other things we need to do is to add actually the photo to because our model doesn't have anything for the photo we want to add the photo as well so here I just say profile picture for example and then this is the type would be a string but we want to have a default value so if the user didn't provide any image we want to add a default picture so I want to add a default image what you can do you can upload the image in your database in your storage and then use that URL for this one but we don't have it yet so I want to actually grab something from the internet and put it here so we can just search for example profile image and something like this one this image we can get or this image we can just click on it and right click and get the link address or copy image address you get the copy image address and then you just paste it here all right so now we have a default value we can change it later when we have our own image but for now I want to just keep this one here and if the be for example someone now now registered in our application this is going to get this default for example in the sign up now for example if you just use for example user 30 at gmail.com uh let me just set this one here same password and user 30 and if you click on sign up and then just ignore this error because this is a state here from previous one and then we can just go to our database and then browse collection we should see that the new user is added at the end which is user 30 which has a profile picture even though we didn't add any profile picture this one has a profile picture and we can show it inside the Avatar if and then later they can update it as well because we want to add the upload image functionality so that was it for the model so inside the controller now if the user does not exist as I mentioned we need to create a password for the person so we create a constant so here we just create a random first we create a random uh at first I put a name for it generated a generated password so as you can see we get a suggestion from the uh GitHub co-pilot so we are now this technique actually is going to create a random letter and numbers but eight digits this is eight digits okay so we create a render we convert it to a string based on the base the 36 base which is going to create 36 means a number from 0 to 9 and alphabet from A to Z okay so both of them together is 36 and each random number is going to be converted to a number or letter and then this is going to be actually I'll have to show you that's fine let me explain so this is going to be something like that we're going to create a number a random number using math.render and then we're gonna call convert it to a letter and number together but this is actually eight digits okay and then we're gonna slice it and remove this beginning but we're gonna slide this from the at the end we uh just count eight numbers one two three four five six seven eight from the end we just keep the last eight number and we remove this zero and Dot so this is going to generate a password for us and if you want a number to a password to be 16 digits which is more secure we can just add the same things at the end so this is going to be produced two times and this is going to be 16 digits all right and when we create the password we need to Hash it because we need to save the hash password inside the database not the normal generated password so we save the hash password so we are using actually bcrypt.js.hash sync to create a password so we convert this generated password and we hash it with the 10th round of salt after the creating the password we can save actually the new user which is a cons uh new user and this is going to be equal to new user as you can see suggesting as the username but we don't have actually username we have name so we need to convert that name as well so let me first accept this so the email is okay because we're getting we are getting the email here you're getting the email correctly we are getting the photo correctly as well but the name is just a display name and a display name cannot be stored like a username because maybe two people have the same display name all right so here uh password is fine we have just created the hash password and also we want to add the photo file picture which is this photo we sent we get this photo and we save it as a profile picture just we have here inside the model profile picture and this should be photo not the image okay so email is fine password is fine and profile picture is fine as well but username we need to create the username so how we want to create a username R we can just convert this name we can actually split it so we're gonna split it by a space because if you remember the display name is two first name and like family name together and they have a space between them so we're gonna split that and then we're gonna join the we want to join them but join without a space and then we want to convert it to lowercase so we just say two lowercase we use this method okay and then this is going to create a username based on the name and for example if the display name if the display name is equal to for example my name Sahan babidel first thing first we want to split it by this space and then we're going to remove this base using the join so this is going to be like that and then we want to make it lowercase so we're going to make this S and G lowercase and then at the end I want to add some random numbers because maybe there are two people that have the same name so the username is probably probably be the same so we're gonna get an error because the username should be unique so we want to add some random number at the end it's very simple to do that actually we can use so we want to add a random number which is going to be for example math dot random and then we want this random number to be between 0 and 10 000 for example because we wanted a big number so the probability of two people have the same password would be very low so without multiply to this one to ten thousand but this is going to be half the like a decimal points for example it can be this one dot this so we want to make it this one actually rounded we can just use we can put this one inside the parenthesis and then we add Mass dot floor to get the lower number and then so this is okay this is something the number between 0 and 10 000 and then this is a number and this is a actually a string this is a string and this is a number so we cannot join them together so we need to actually convert this one to a string two so we're gonna add two string at the end all right so I think that that's that is going to work we're going to test it if there is an error we're gonna fix it so first we actually created this new user we know we want to save it to the database which is very simple we just say awaitnew user.c and then also we want to have a response with a cookie so we're gonna create a token with this new user.underline ID make sure this is new user and then we're gonna separate the password and the rest this is very similar and add this expiry date for one hour and the response with the cookie access token http the only and expires at that expiry date yeah that's it for the creating it maybe you must be wondering why we are using GitHub copilot as you can see the code is completely repetitive and as long as you understand the code that is fine and now the it's a Time the new error is the AI era and the people who can code faster actually is going to pass other developers but make sure you understand the code you just don't get accepted from the if you don't understand it you can just watch tutorials like this so I'm gonna explain you what the meaning of the codes and for the first few times I highly recommend you just quote yourself and don't use any assistant like GitHub copilot but later you can use it when you are completely familiar with the code alright so so don't feel guilty of using AI these days otherwise you're gonna miss the opportunity and other people is going to pass you because the note the technology is moving very fast alright so now let's test this one inside here let's go to sign up page and refresh the page we are still getting the error from the previous one in the sign in page we're going to fix this one actually we should fix this one and then here we're gonna open the inspect I want to see firstly we get an arrow or not so we're gonna continue with Google choose one of our accounts so we didn't get any error let's check our Redux so now our current user is not actually it didn't work so let's refresh the page here and then we try it again okay it's not working let's see what's the reason we are getting the error that this error is actually for for the previous error that's not important let's see why we are not getting in the front end so we have the response we send this data and then with this patch signing success the data okay so while you're not getting to this point actually let me cancel log data and then we try again okay we go to console let's refresh the page and then we just go to Google continue with Google I choose this account so we should see we are not getting the data response I remember we were getting the results so that was okay but using this result we are not getting it inside the off.controller so here we have created the this Google we tried and we responded if the user exists if not we're going to create the password and then we're gonna respond to the cookie access token okay we're sending the cookie but we didn't send any other response like a status code 200 and rest here all right so here uh here too in here make sure to add this so let's test it again let's continue with Google we click on all right so we are getting actually the data that is fine there is a problem here with the number we have created it is none so we're gonna fix that one and let's check this redox the current user is still not all right so let's fix this one first let's fix this number so math.random so here we actually we didn't call this random so that is the problem and let's try again but I don't know it shouldn't be the problem our success is signing Success is Not defined so actually we forgot to here to import the signing success so I'm gonna import it at the top so import signing success from redox it shouldn't be from here red docs forward slash adding user forward slash user slice all right so now okay let's refresh the page and then we're gonna continue with Google we choose one of the Gmail accounts okay we got this one correctly and let's see the Redux all right now we have the currency User it's still how you have this problem with the number so I'm gonna check it again but we have the currency user so the ID is this one the email is correct and then we have a photo URL let's copy this and test all right the 40 euros or K2 let's see what why we are getting none here so let's fix let's check it again inside the controller so we're gonna create a random number using math.random then multiply it to 10 000 to make it from zero to ten thousand but this is actually a not okay we created two string but this one should be covered all of them together must be a string I think this is correct I think why it doesn't do it no okay we don't need it actually that is okay two string username request.body.name a split that is fine join is okay uh uh lowercase that is correct too that's actually seems complicit correct Let's test it again I don't know maybe we didn't refresh the page and then let's test it again oh let's try with a different account this time so maybe the previous one is already created so we create this one all right so you're still getting none here uh let's see why we are getting enough so let's actually cut copy this one and go to the here to console and test it here so let's console log console.log this and we get undefined here as well so let's see let's remove this first we test it one by one so we don't get this one we just get the map that's random okay that is working and then we want to add the math.floor so that is fine too and then we want to add dot to string okay to string or a string yeah okay it's working now so what's the difference between the oh this one is working too we are getting the number 400 yeah actually so why is it not working here so actually let's instead of creating a random number let's create a random number and letter together so now replace this one with this it should be the same things so let's test this one and then now we actually have these two so we're not gonna create anything new so let's delete these two Gmail accounts from the database so I'm gonna delete this one and then the other one as well and let's try it let's try again to create them okay so yeah that's fine the username is created correctly I don't know why that one is not working actually I'm just completely confused all right so that is fine so we're gonna actually use the same system it's fine just we use the eight letter so if I find it later I'm gonna show you in an article so it's fine and then so it's working now we are getting the username and inside the redox toolkit we should get we should get it here as well so if we try again so now the current user is this Gmail account Sandra video we can create another one with this and we see the this one is replaced okay it's working and we get the username completely unique and email and the profile picture all right so we have already the everything we need to actually update our header and also create our profile page so let's add this one to GitHub our GitHub repository so let's add everything so so this is create and add of components all right so we just commit and push it all right in the last section we have completed the Google or functionality in this section we're going to work on the header and update the header section so similar to the final version we're going to see the Avatar and when we click on it we go to the profile page and then we want to make this full profile page private what I mean by private is we're gonna make a mechanism so when we go to the profile page and if the person is not signed in for example if I sign up we go and be redirected to the sign in page so I cannot have access to the profile page so here if I just say profile it seems like there is an internal server or error for this website for now we're gonna check it later but when we go to profile actually we get to redirected to the sign in if we are not authenticate I'm going to show you in our application so now in our application we we just see sign in even if we have any user if you go Redux you can see we have a current user code with second hand and but still we cannot see uh this user inside the browser so what I need to do is to get this information and show it inside the header so we go to header.js we go to our Explorer section inside the client side we go to the components folder and then we go to header.jsx here inside the sign in we're gonna make a condition first we need to get actually the user selector from RE react redox and then we're gonna get the current user we want to get the current user like this and this is coming from the user here all right and then you just make a condition here we add a condition if the current user is available so let me fix this so current user if you have the current user we want to show an image so here we're going to show an image otherwise you want to see that sign in here okay we are getting here a problem because we didn't complete it yet so let's add an image tag and inside the image The Source would be current user dot if you remember we just added the profile picture inside the current user so we just say profile picture and let's see that we can see it inside the browser as you can see now we are getting this profile picture let's make this one a smaller so we can see the changes so I'm gonna add an alternative for this one is going to be just profile and we're going to add a class name let's make it a smaller we just say H7 which means height 7 and then we're gonna add it with 7 as well so make it completely Square first and then we can just use rounded full to make it Circle and you can just use object cover so we keep the aspect ratio of the image because this image is a square we don't have a problem but if someone upload an image which is for example a different shape so we're gonna see it weirdly because it's gonna be scratched but now we're gonna use object cover to fix it so what else we need to do here instead of going to sign in as I mentioned before we're gonna go to the profile page instead but depending on the person's uh condition if they are authenticated we're gonna they're gonna see the profile page otherwise they're gonna go to the signing page so we need to actually create a private route and cover this profile page and when we are not authenticated we are going to be redirected to the sign-in page so we need to create another component and here the component's name would be private Dot jsx and we just create a react functional component using RFC and then we need to actually cover the profile page with this private route so we need to go to app.js x and then here we have the profile we're gonna cover this one using our private route so here we just use the private route which is coming from this component private route and then for the path actually we don't need path for that we just have an element profile that profile well component and then we need to cover this one so we need to close actually we need to close it here all right so now actually we don't see any effect because we need to actually create a condition here as well so inside the private route first thing first we want to import current user which is coming from oh sorry a current user we need to create here first we need to import use selector which is coming from react redox and then here we're gonna get the current user and then here we're gonna create a condition so the condition we want to make is actually it's very simple we just want to return let's remove all this thing we're going to return if there is a current user so they create the condition here current user if there is a current user we want to actually show the profile page which is our children and we can show the children using uh using outlet from react router top so here we're gonna show the outlet okay otherwise we want to redirect the person to the signing page but for redirection before we were using use navigate but here we cannot use a we need to use different things which is here navigate so the difference between this navigate and user navigate is this user navigate is actually a component so this is a react component which is going to redirect the person so we can use this component and then we can just use two to go to sign it so it's very simple when there is a current user we're gonna show the children whatever is inside this which is in our case is profile here so whatever is inside this outlet and if there is no current user we're gonna navigate to this signing page so we are now getting an error so let's see the error so the Aries private run is not a route component our components Children of the raft must be a route so I think we have added it all right okay let's see what's the oh okay so actually private route it shouldn't be private router like this this one should be route but the element must be the private route okay so private draft is coming and this is actually a route but the element is private route and then the private route is going to render its children if there is a current user otherwise they're gonna navigate us to the signing page now they are not getting an error this refresh the page so there is no error Let's test this one now if we click on here we should go to the profile page which is this one let me Zoom this you can see it there but if there is no uh current user we should go to to the sign in page so here we can just delete this local storage and once we refresh we shouldn't have any current user as you can see there is no image in the header and then if we click on here instead of going to profile we go to the sign in page and also we can test here if we go to the full size profile as you can see we are redirected to the sign in page so the profile page is actually now private and nobody can have access to it without authentication all right that was it for updating the header and then also making the Prof profile page private so let's quickly add this one to the GitHub so we add everything and the message would be for example we can just say update header components and make profile private okay so we can commit and push all right in the last section we have completed and updated our header section and also we have made our profile page private so in this section we're going to create the profile page UI so let's bring this one to the right side and then we're gonna have our Visual Studio code on the left side we just go to our profile page inside the pages we go to profile.jsx and here first we're gonna have an H1 tag saying profile and then we're gonna create a style this it's very similar to the one we did for the sign in and sign up page we just make the ticks to be 3XL we make the font to be semi-bold which is font weight 600 and then we can just and this is actually has a zoom level so if I remove the zoom I think yeah it doesn't have a zoom that's fine okay so here we just say text Center to bring it to the center and then we can just adding some margin y of 7 to add some space between on the top and the bottom of this header so after that we're going to have a form we don't need action for that and inside the form we're gonna have first we're going to have an image and the source for that one you're gonna have that current user dot profile picture but we need to firstly import the views selector which is coming from react redox and then we need to initialize it here and we can use that use selector and we get the current user and here we can just say current user dot profile picture okay if you get the profile picture here too Let me refresh so and then we're gonna bring this one to the center we want to make it similar to the final version let me show you the final version first so let's continue with Google and we choose one of our Google account for example I choose this one so now if you go to profile page we can see that the image is in the center and we have three inputs username even on password we have one button same update and we have two buttons here one for delete account one for sign out all right so we're gonna create this one so first thing first I want to bring this and first we just make a alternative we just say profile and then we create a con class name we can just add it height of 24. and width of 24 and then we can bring it to the center as this is an image and it's different from the ticks tag we need to bring it to the center using self Center okay it's all working now because we need to actually make this one flex and mix this form Flex so here we need to add the flex and then we need to change the flex direction to column so now it's in the center and then we just add a cursor to the pointer and then so when you make cursor pointer when we hover over it we should see a pointing hand and then we're gonna have rounded full to make it fully rounded like this and then we have object cover to to keep the aspect ratio so that's that's it for the image after the image we're gonna have three inputs first input is going to be it with the type of text and this is going to be with the ID of username after that we're gonna have the placeholder so we can see it username so we can see it now we can make this one uppercase capitalized and then we're gonna have a class name let's add just the background color of a slate 100 and then we're going to have we make it rounded large so we have a corner and then we're going to add a padding of three okay but they are connected actually to each other and here is just to this side so we can here inside this div we can just add a padding of three and then we can in the large size we can limit the maximum width to be large and then we want to bring it to the center using MX photo okay and then we want to add some a space between these here we can add a gap of four to add a space between everything we can print this image a little bit more down by just adding a margin top of two so that would be better and then we're gonna have two more inputs we can just copy it using alt shift done arrow and then here the second one must be email with the type of email with the placeholder of email and then the last one would be passport with the ID of password and then with the type of passport and we want to see what actually the current user username and email is so we can add that one by adding a default value the default value for this one is going to be current user dot email so you can see the email of the person so each time you come here even refresh the page you see this for the username so default value must be current user dot username okay and then for the password we don't want to show the password it's not safe but the people can change their password too when they want to update it so after the input we're gonna have the button so one button saying sign that size not signed update update and then for the button you can have a style we change the background color to slate 700 to change the text color to the light and then we're going to have a padding of three we make it rounded large so we have some rounded Corner we make it uppercase and also we want to add the hover effect with the opacity of 95 and also when you are disabled we want to have the opacity of 80 percent you see the opacity here but still I feel they are very connected to each other so I have Addis here caps for and this is the final version okay it's fine yeah it looks okay and then after the plot end we're gonna have two dead two buttons here but you can put it outside the form you can just add a div and inside the div we're gonna have a spin saying delete account and then this delete account must be red which is a text red let me just choose something like 700 and then we set the cursor to the pointer so when we hover over it we see a pointing hand and then we can just copy this one using alt ship Arrow done and that's the second one must be sign up okay and then we want to use flex here and justify between to add a space between them like this and then we can add a margin top of five to add some space at the top all right that was it for creating the profile page UI let's add this one to the GitHub we just say complete profile page UI can commit and push it to GitHub let's check our all right in the last section we have completed our profile page UI in this section we're going to work on the upload image functionality if you look at the final version of the project we can see when we click on this profile image we can choose an image so let me choose one of them in from my computer I have a picture of a rooster so the it is actually 1.6 megabytes so when we click on it then we press on choose it if we press open as you can see it's uploading and the image is shows image uploaded successfully and after a few seconds we can see that the image is here the the new image but as you can see still the Avatar is the previous one because we haven't click on update yet then we click on update when everything is updated we're gonna see the new image here because the database is already changed so what we want to do is to add and bendy click on this image we want to choose an image from our computer so we need to add input with the type of file but if you do it we see something uh I'm going to show you now what I mean by that is before the image we want to add an input with the type of file so when we do that we can see something like that choose file so we can click here and choose files from the computer but I don't want to see this one I want to maybe click on this image we choose this one so we need to create actually a reference from this input so we need to create actually a user ref reference so here at the top we need to import actually use riff from react and here we're gonna create a reference for our file picker we just call it file res or file picker if and the initial value would be null so inside this input we're going to refresh refer to this file ref so this ref is going to be that file rest all right so and then inside the image we're going to add and on click which is going to click on this input based on the file pics so we need to just say on click and we create a callback function we just say filedrift.current.click so when we click on this image we're gonna open and choose a file but I don't want to see actually this inputs so we can easily add hidden here when we add heated this is going to be heated but still we can choose the file here all right so simply we add an input and we refer to that input inside the image and we could choose that input all right so what else we want to do is to add some condition to the input if we want to add for example if we want to accept only images so we just say exit we just say accept only image all types of image so we just add a star here in this case we can only choose the images not other files as you can see here the format is only image files but actually you can change this one in the windows or in the Mac you can chase change it to the all files and then you choose any file so in order to prevent this we can just add a rule inside our storage in the Firebase so the people only can upload images not other things like videos and Etc but we need to firstly and create the Firebase storage so we need to go to the Firebase all right we already have authentication but we can add the storage we can just click on build and click on a storage here and then you can just click on get started and we want to add some rules too later so we just create a production mode so about the production models this means it shows nobody can read and write so we need to change this rule so we can read and write in some conditions so we click on next we choose some of their storage locations it doesn't matter whatever is closer to you to your choose and it press on done and this is going to create our storage and this is going to take a while so it is now setting up our security rules all right so the process is completed now we can see that we don't have any images or files yet we can upload a file here manually ourselves we can upload any file we want for example this image I can upload it but we want to actually Pro upload it from our website and also as I mentioned I want to prevent any files except the images so we're gonna go to the rules and now nobody can read and write because there is a condition here but you can change this one let me Zoom this a little bit okay you can see it there so we want to add some conditions it's very easy because we want to add read for everyone so we just say allow read and then for the writing we just say hello and by the way this is not JavaScript so we just say a lot right and then we can add a condition we just say if we just say the request dot resource dot size we want to limit the size of the file to be less than for example 2 megabyte for writing down two megabytes you just need to say 2 multiplied to 2024 which is one kilobyte and then 1024 which is another one kilobyte but one kilobyte multiplied by one kilobyte is one megabyte and you have two megabytes here in other rules we want to add you have to add two ampersand so this side and then we just add another request dot resource and this time we want to change its content type and we wanted this one to be matches only images so we just say image forward slash dot is start all the image types we want to allow so if the file is more than two megabyte or it is not an image we're gonna get an error so we we cannot upload the image to the fibers so this is going to be more secure and because as I mentioned people can change the file type themself here but we want to prevent it inside this storage so after creating this you want to press on publish and uh actually I wanna actually copy this one and then paste it for you because you cannot have access my Firebase so if you want to copy the code you can just copy it here I want to add it Center here and make a comment append okay so later if you wanna use this one just copy this one from here to here this is the our rules for S Storage so let me write down here Firebase as storage rules all right okay now we don't need to actually the rules we can come back to the files and we upload our files from the our website so let's continue this one so input is hidden except only image and what else we need to add here we can add because if it wanted to save the file that we upload we need a piece of State here I want to create a piece of state and I want to call it for example file and then or we just call it image and the initial value for this one must be on the file because we haven't choose any image yet and then when we there is a change inside this input we want to track it so any file is added here we want to put it inside this image this piece of state so here we just say set image first we get the event here and then we wanna Set uh the image this one use this function to add the image and this is going to be equal to e dot Target dot files but as we are choosing only one file we just want to get the first one zero so now if the console log image and then we choose it here let's see what's the error here okay we haven't defined user State we need to import it from react so now let's clear this if I choose a file we can see we are getting the file here that file has name last modified mini things all right the size so what we need is this actually we want to get the name later and we want to upload it to the our database to our storage Okay so now we have the image once we choose it we have the image so each time we have an image we want to upload it so we need to add a use effect uh hook to be able to do that so we just we need to import use effect here and then we can use the use effect here we just say use effect and then if there is an image if there is an image we want to upload it so we want to just call a function we can just call that function handle file upload or handle image upload and we pass this image and then we're going to close this and also we want to add this image if there is an image we want to do that's what we want to call this function so and then we want to create a function here we create the function here we get that image and then so let's first actually I console log here so I just remove this console log from here and then we put it here so let's test it again now if we choose this one and choose an image we can see we are getting this console log all right and uh no so it's it's ready to add our storage so inside this file handle file we're gonna get this storage first so let's remove this console oh so we just create this storage we just say storage is equal to get a storage get the storage is coming from Firebase we need to import it actually we need to import get a storage so just let me copy this so we need to import git storage from Firebase forward slash storage we also need to import this app which is coming from forward slash Firebase remember we have created a file called file and it's here firebase.js which includes our API key and it says also that is storage knows that where to put the search in which user so we create this storage and also we want to create the file name which is going to be equal to if you remember we had the image name we have this image and inside it has the name inside the console like we saw that one and we want it to be unique because each time we upload maybe some one person uploads a file two times so if we don't make it unique we're gonna get an error so we need to actually create a new unique things like a date so we can just say new date dot get time add it here so we get the new date because this is going to be always unique so because if you upload it now it's one date the time is different from there you upload it 10 minutes later so this is going to be always unique and then we have this file name and then after that we're gonna have this storage res there is less is going to be from Firebase storage so we need to import it here and then we have this storage we have the file name and finally we're gonna have the upload task upload task is actually is going to upload our image based on this as storage ref so we just create the upload task here and this is going to be equal to a method from a Firebase storage called upload bytes resumable and this is coming from Firebase forward slash is storage and this is going to take the storage riff and then the image that we have here we are uploading so let's save this one and then once you have the upload test there is a method inside the upload task called dot on and then this is going to take the stage change which means whatever change we see we are uploading every bytes we are uploading we're gonna track and then we just use that one for example first we can get this snapshot a snapshot is the piece of information we get and first we wanna actually record the progress what is the progress for example we are uploading every we have two megabytes for example you uploaded two megabytes and then every if few kilobytes we're gonna see the progress So based on the information we get back so we can show it inside the our place for example now we are doing the upload as you can see we are console logging upload is progressed this much percentage I think we are getting an error here because we didn't close this upload file let's close so this is for this and now we need to close this upload on so let me show you what I mean by that so let's open the inspect here this let's try to upload an image and always choose a big image like one and a half megabytes something because if it's too small you don't see the percentage because they quickly upload so here as you can see upload is zero percent and then it goes to the hundred percent all right and so we want to show this upload under this image so we want to keep record from this number so we can create a piece of estate here at the top we just make that one because for example we just say image percentage English percent and the initial value would be zero but here we're gonna set the image percentage to this progress so the progress is actually whatever bytes transferring over the total bytes multiply to 100 is the percentage but this is actually if you remember here this is not a rounded number it has a lot of decimals so we want to remove the decimals we can just put this one inside the parenthesis and here we just add math dot round to make it round so now if the console log the image percent and we try again we can see it starts from 0 to 16 and then goes to 100 all right so let's delete this console log after the getting the upload the progress by the snapshot you want to get more information we want to get the error for example so after this snapshot we're gonna get the error we can just get the error like this and this error we just create an arrow function we can also lock the order or we can create another piece of State we can call it for example image error and we set it to be the initial value can be is null Auto can be false we can just use true and false doesn't matter okay so here we're gonna set the image error to true what else we can get is the image URL when we upload it you want to see the image URL so here you can we're going to have another one this one is going to be we're gonna use a method called git download URL this git download URL let's accept this one first this get on audio is coming from forest fire space for slash off where is it okay get download URL from 5S through slash off what is this git we don't need this kit actually it is imported by itself so this get to download URL gets the upload test.snapshot.rev and then this is going to gives us the download URL and then we can we want to save this download to URL but we want to save it inside the form data because when we want to update the profile we have the image we have username email and password so this is a kind of an object of data so we want to save it inside perform data so here we just say form data and this is going to be an empty object and then here when we get the download URL we can set the form data we can set the form data we get the previous form data whatever we have for example we have added username email and we want to add the profile picture to download URL that we are getting here so let's close this so we don't get an error so let's see what error we are getting okay return is not allowed here let's see what we so we got this one I think we close it here what is this parenthesis for and now what about this uh so actually everything should be inside this upload test.on so these parenthesis should be closed here outside action so let's see I think so this parenthesis is opened and then closed here this one is the snapshot the first one let's bring it here so that and then we have the error let's see so we have that uh here that is fine so this error is going to gives us this set image that is okay too so we add some comma here and also here okay what else we need and then we get this okay that is not necessary here that's and this one too okay I think this is fine now we don't need this one too because we can return it directly here today so you need to close this parenthesis here and I think this part is completely okay now until here so what is this parenthesis for so the upload task we have state change and then we have the snapshot that's fine then we have the error finally we have this here so everything is defined here and then we want to close this upload okay so that should be fine so now if we console log form data where is founded here so if you took the console log first is an empty object and then if we upload an image after a while when they upload it they're gonna put this profile picture as you can see we have get the profile picture inside this at this object so this one we can just copy now and paste it here we should see this is the image of the rooster that we have uploaded with the high quality and if we check our storage and we refresh the page we should see that we have already uploaded many images and but because the date is different we get a different name and this is the last one if you click on it you can see the URL here as well this size the type Etc so we have the actually the image URL they have saved inside the form data so what we want to do is to show here the amount of percentage and then when the image is completely uploaded you want to see it too and also if there is an error we want to see the error so here let's go to the let's delete this console log and then so here after the image we have the input and then we have the image we're gonna have just a text a paragraph for example we want to have a paragraph and then we're gonna say if there is an image error if there is an image error you just say question mark so we want to have a span saying text with the colors red saying error upload uploading image so let's actually fix this so let's see so if there is no error we want to apply the next one for example if you just say if the image percent is more than zero and if the image percent is less than 100 this time if you want to show something else I'll show you here we want to say uploading image and then we want to show actually the image percentage so this one is the color is this one and then we just say uh uploading image we want to make it backtick here and this is going to be yeah uploading we just say uploading we add this one and then here we wanna just let's add this we add a space here and plus we don't need plus actually we want to add this question mark because we want to add a variable here which is image percentage and then whatever percentage is I want to add the percent at the end and also we just need to have this question mark firstly and then we don't need question mark anymore we're just adding more and more condition so if the next step the next condition is if the image percentage is equal to 100 oh sorry this one is error uploading and then this one is this one that is fine and also this one is this one so which is another span but this is green and I just say image uploads successfully and otherwise we want to just say an empty is a string so now we just need to close this let's see what in the what place we did in Stick so if there is a image error you're gonna show this but we didn't close this parenthesis okay and if the image percent is more than zero and image percent is less than 100 we wanna have this expand saying the image percent we need to close this parenthesis to and if the image percent is equal to 100 we wanted to have this one we close this parenthesis I think that's okay it's working now so uploading image percent okay let's test this already we are getting image uploaded successfully so we need to actually add some classes here I want to make the text a little bit small it's just a text is small and then we want to bring it to the center so we just use self Center okay let's refresh the page so we don't have anything now so I just want to choose this image again so you can see that uploading is working and image uploaded successfully is working but I feel we are getting some unnecessary things here so when we are using backtick actually we don't need to add this a chord here we just make it like this remove these quotes so let's try again oh it's working now already so let's refresh the page we choose this see uploading and then image output is successfully so we should try to get an error for example if I choose an image more than 2 megabyte or I choose a video instead for example I don't have an image more than this one so let's change this image format to a video for example I just say np4 I choose this and as you can see we get the error uploading image so we can have actually more specific error here we can just add something here we can just say file size must be less than 2 megabytes okay so this is working very nicely and then we just managed to handle the error and other things we see the error here but it's not necessary to show the error to the user but we can just say file must be this one and then you can see also a file type accepted here as well but it's not very important so that was it for this section so let's add this one to the GitHub repository so we just did the changes in the profile that jsx and we just say complete upload image we just say complete image upload function out and we push it to GitHub commit and push it to GitHub we just forgot to add something here actually when we have this one then we have this image when we change it correctly like this one so let's refresh the page first when we upload this one and if the upload is successful we want to see that new image here so what we can do is inside the image we want to create a condition here we just say if there is a form data dot profile picture show that one otherwise or show the currencies at that so if we don't have this one we don't see that so let's test this now we see the current user if we upload after a few seconds when the form data is updated we see that a new image but actually this is Temporaries here if you refresh the page we should see the previous image all right that was it for upload image functionality in the next section we're going to create the backend for the this uh update we wanted to create a backend we want to create the API route so and first thing first we want to make it secure because we don't want a person without authentication updates a user and we also want to add another condition so you cannot update someone else profile so we're going to work on that one also we have added this one we have to modify this one as well so I want to add this we just say update upload image functionality we just add some fix a small box okay so this is the also add upload image functions okay so the comment and push it so we we're gonna start clean from the next section right so see the next section for the upload API wrap all right in the last section we have completed the image upload functionality in this section we're going to create the update API draft so we can come back to visual studio code and we need to work on the API folder first we want to add that updater out we want to create it inside a user.rout.js so let me close everything and then open it again so here we're going to create a post method just say right a router that posts and then we want to create the address for the update is going to be update and then if you want to have the ID of the user so we want to add the ID here and then we want to firstly first thing first we want to verify the token of the user we want to see that if the person is authenticated or not and if they they are authenticated we want to update their account so we have created this route we need to add it to we already created this we need to create a function called verify token so here inside the API remember we had a utils folder we can use that one to create another file called verify user.js and then here we can verify the user using JWT and the token so we're going to export IF function and we can call that function verify token so this is going to take a request and response and then we need to if the person is actually verified we want to go to the next middleware so we want to use that next step so let's close this first so we don't get an error and then here first you want to get the token we just say token we want to get it from the cookie of the browser so inside the request we have something called cookie and inside the cookie we have the token which the name of our token if you remember is access token okay so cookies and then access token but in order to parse the cookie we cannot do it like this we need to install another package called cookie parcel so inside the root of our application you need to come back from the client if you are inside a client you just go back using city. and then here we installed using npm install cookie Dash parser and once you install it you need to initialize it inside the index.js you need to import it at the top import cookie parser which is like this cookie parcel camel case which is coming from the cookie pasta that we have installed and then after we have created the app or here you can just say app does use cookie parcel so now we are able to use and parse cookies in our application so after getting the token we want to check if the token is valid or not so if the token is not valid like this we want to return a response 401 you can just say you are not authenticated or we just create a message that's enough we can just say you you need to log in or whatever similar or just say you are not authenticated but if there is a token we want to test the token if the token is valid or not so here we can use the Json web token package we can just import JWT from Json token and then here we can just say JWT dot verify so this is going to gives us the information we need for example we can use the verify and that we're going to test this token we also need to add the jwc secret key just be added inside the environmental variable here and then this is going to gives us two things error or we get that user okay so after doing that we can just now we check if there is an error we want to say with the status code of 403 and we just say token is not valid otherwise we want to add this user to the request so the request had for example cookies we can we we had before if you remember we had request.body now we can add something to the request called user and then this is going to be equal to that user and then we're going to go to the next middleware okay so now we are ready to use this middleware so inside the user route whoever comes to this path we want to test if it's verified or not so we can just import the verify token that we have created here this function and we have exported that and if everything is all right we're gonna go to the next function that we want to create here which is called uh for example we just call it update user and we need to create this function inside the controller so we go to user.controllers.js and here we're going to create a function let's create a message here just say update user and then here we're gonna export a function called update user and this is going to be a synchronous and also we're going to have the next to use at our middleware for hand handling the error so let's close this so and then we're going to import it here inside the use user.raft so we need to import it so now we are here so we're gonna get few things here because we want to update first one first thing first we want to actually test if the the user is trying to update his account is really the owner of that account so for extra security we just say if this user from this remember here we send the user inside the request so request that user which is coming from JWT first you want to test it if they request.user.id so if it's not equal okay if it's not equal to the request that prams.id what is that params means the requested params that ID is actually is this one you get the params here request.parents that ID is this one so when we are requesting from the database from the API we're going to pass the ID of us here and if this ID and the IDS which is of the coming from the JWT is not equal they're going to send an error but actually we can actually use our middleware to handle the error instead of this so I'm going to delete this oh let's duplicate and then we just create hours and then we delete this one this one must be next we use our middleware and then our custom function which is create we have here this error.js it's called hand error Handler so we can use that error Handler here we can import it and then the error is 401 the message is you can only update your account and you can just delete this we can do the same things for our uh this verify user.js file to I forgot to do it because we have the next we can just return here next error Handler and then we can just do that like that we can import the error Handler here as well but make sure to add that JS at the end for the back end you always have to add this.js for this one too we can just say next and then we can just do the error Handler but this is a 4 3 and the message is token is not valid and this one you can just say you are not authenticated okay so so we have checked that if the user is actually the owner if not we're gonna say you can update only your account so after that if you're sure that the person is actually real we can use a try and catch a statement and then here we can just actually handle the error with our next error our error Handler the middleware and inside a try we can just create and first thing first because if you remember we can do many things here we can just update the user we can update the email we can update the image and also the password but maybe someone wants only update the username or only the email but he doesn't want to actually change the password but here we can see that the password is empty but if you click on update maybe it removes the previous password and also if you write a password here when we want to update it we want to actually hash the passcode too so what we do here we want to send the form data from our client side if there is a password we're gonna hash it otherwise you're gonna ignore that so here we just say if there is a passport if the requested body has the password you probably wanna encrypt it all right so and then we're gonna change the request that body the password to the new password which is encrypted we can use this speak crypt.js actually our package we need to import it at the top and then we can use hash sync method so we don't need to use a weight and then this one 10 would be enough the 10th round of Subs so now the password is Hash if there is a password and then we can update the user we just say const updated user or updated to your user and this is going to be equal to a method from our model we need to import our model and remember we add a model inside the models so if you open it you can actually import it you can just use control space to import it at top but make sure to add the dot JS here too we need to add the dot Js so we want to use a method called find one find pi ID and update this is a mongodb method so this method is going to take first thing first the ID which we can get from the request.parents that ID and then we're gonna use the set method which is going to get everything we have inside the requested body but as I mentioned before that is not actually safe to do that because maybe the user can send more than the information for example they can they can change the admin is admin to true and they become our admin so you don't need to actually pass the requested body all of them what we can do is to separately add that for example username will be request a positive username email password and finally the profile picture with the requested body that profile picture so in this case we're going to prevent the extra information for example is admin or other unnecessary things that the user can send actually so once we do that we can close this and then we can add another option here which is new true if you don't add the new true when you send the request back to the user we're gonna get a previews actually on the previous user that is not updated so we want to see the updated one we just have to add this new true so after that we're gonna send the user to the client side so we create a response here with a status of 200 and we do not send back the user updated user but this updated user has the password so we want to remove the password so what we do here we're going to separate the password and the others or we can call it rest and then here we just send back the rest exactly the same things we did before for sign in as well so here now we can test this one our route using insomnia so I'm going to create another folder outside here we're gonna create another folder I'm going to call it for example user and then here we're going to create a new HTTP request which is going to be localhost 3000 but here instead of office user forward slash update and then forward slash the I ID of the user so we need to get the ID if we need to first sign in with the user for example user one I'm gonna sign in when you sign in so you get the ID here so I want to use this ID so I'm going to copy this and then we go here and paste it here so I can update the user so this is a post request and then for the body you can click on the body and Json we can update for example only the username but this one is a Json so it's inside this and let's change the username instead of user one you just say user one for example updated so let's see what error we're getting either Json the Json only accept the double code okay now we try again as you can see now we have updated the username to user one updated so let's test this one inside the database too so inside the database if you refresh the database first we can see that the username is updated to user 1 updated so we can do the same things for the password and email or we can update them all together doesn't matter so we only have our updated the username here so that is working uh let's see if we want to get an error for example inside the header now we have they are sending so let's actually sign in with different account and we test it for example inside is sign in in the Json let's sign in with different account I don't know we have user 2 for example okay we have user two now we are we have created a cookie for user two so if we try to update let's actually change to its name update user so now if I want to update the username as you can see now we are passing the user 1 iD not the user 2. see if I send you get an error saying you can update only your account okay so this error system is working as well the status code is 41 it's all right so that was it for creating and updating updating the user and create its API route in the next section actually we are going to work on the client side and com we send the request from the client side instead of this insomnia so let's add this one to GitHub first so we can just go to our Source control we add everything and we create a message saying create user or update user API wrap can commit and push all right in the last section we have completed the updates user API route in this section we're going to complete the functionality on the client side and connect it to the API so let's sign in with one of our Gmail account for example this one and then well after that oh as you can see when we sign in with the Google we don't get redirected to the home page let's fix fix this font first I forgot to add that one so we go to components inside the client side then we choose the oauth.j6 and after this patch we want to navigate to the home page so first thing first we want to import use navigate some react router down we can initialize it here we just can't navigate equals to use navigate and then here we can just say navigate to home page forward stash okay let's test this one first let's sign in again with another account okay now we are in the home page so now what we want to do is to when we do changes like we change the image or username or email or add a new password and we click on update we want to call that API route that we have created in the last section and update the database so first thing first we want to add some unchanged event listener to these three inputs and update our form data our form data is actually including this image change but we want to add the others as well so let's close everything and then we go to Pages profile and then these inputs we want to add an unchanged events listen I'm going to keep the alt to choose all of them I press enter and here I add unchanged event listener and this one is going to call a function called handle change okay so let's create this function at the top and we can edit uh that's okay we add it at the end so we create a function called handle change this is going to get an event and then we want to set form data like this so we're going to keep the previous form data information for example if you have the image before or we have changed the username we can keep the information and add the new information based on the ID of the input we're going to add the value and then so let's actually console log the form data so you see everything's working so now is an empty up object but if you do some changes we should see the change let's go to console let's clear this so if I for example upload an image so after the upload is completed we should see that inside here the profile picture that that is working for the username for example I wanted to remove this one and just say this so as you can see we have added the username here too you can change the email okay and then we can change the add the password to to editing you can type here and this is the password so we are tracking everything now we want to actually submit this information to the database so we need to actually first thing first I'm gonna remove this console up then in the form I want to add an on submit event listener which is going to call a function called handle submit let's create a function here and then we want it in a sourcing first we just say e that prevent default to remove the default behavior of the browser which is refreshing the page when we submit a form and then we want to add a try and catch his statement uh do you want to create a request to the forward slash API forward slash offer slash update and this is going to be a post request let's change this total post and then the headers is going to say content type application Json we're gonna send the body which is the form data we have first we want to stringify it and then send it as the body and then we want to change the result to a Json and put it inside the data so now let's close this try and catch and here we add the error so now we need to dispatch it we need to dispatch it using the Redux toolkit so if you remember now first thing first this check what what is the error here I didn't close the function it's okay and now it's working so we want to go to add this to our user slice if you remember inside the redox remember that inside SRC redox we have user user slice and here we have added for the sign in start signing success assigning failure but you want to add the same folder update so we just add update and let's first close this we just say update user start we get the state you want to set the state that's loading to true so as this page this profile page is a different page and it's different from the signing page we can use the same naming loading error and current user but if you have something in the same page and you have some conflict you need to change this loading name for example to upload user loading but for now we don't need to do it for the new updates user success we get the state and action so we set the current user to action.payload we set the loading to false and error to false and then we're gonna have to update user failure so this is going to set the loading to false and set the error to action.pad so now we have added the tree we want to add that one here too to export them so this is uh update user failure update user start and update user success so now we can actually use them inside the profile the j6 so we need to import them at the top first we want to import we want to dispatch them so we import use dispatch first from reactive docs and if you want to import that update user they will update the user a start of this user's success and failure from reactory docks and this one should be redox user forward slash user slice so now we have all of them we can dispatch them so before requesting you want to add this patch the use of this user start after that that we get the result if the data if data does success is false we want to dispatch failure with the data that message and remember we just did this one for sign in so if you remember if the data that success was false with this page failure we just passed the data and return okay that was this one so we can just pass the data and return otherwise we want to dispatch the success and pass the data and then we we don't want to navigate we want to stay there okay for the error here as well we want this bash failure and pass this error similar to the one we did for the sign in page so this is going to update our current user so now let's test this one let's see if it's working or not for example first I start with the image so I'm going to upload a new image so and then you wanna let's see the first image comes here and then I want to press on update so let's see yeah you're getting an error dispatch is not defined so this patch is not defined okay we have imported to use this patch but we need to initialize the dispatch okay so let's try it again so now we press on update okay we are getting downloads uh not fun API all right that is not API for slash off actually it's API forward slash user because we have added this one to the user so where was it handle file up those okay here this one should be user so let's test this one again so let's refresh the page I'm going to test the image okay we should see okay there's no error now let's click on update oh sorry we have to add the I id2 if you remember inside the API route user that this is the address update forward slash ID we need to add the ID of the user as well so what we do here we want to add the ID so we need to change this one to a backtick so we can add an a variable here so this one should be forward slash and then we're gonna add the current user dot ID that which is underline ID actually okay so I hope that one is okay we can test it let's refresh the page I will click on update okay we are not getting an error okay then now they see the header is changed to the new image and then we can just update the user Let's see we update that and then we refresh the page you can see the new user is here so everything is working but we don't have the update effect this loading effect we want to see the loading and the because we see the changes but we want to see the loading and also you want to see the possible errors here at the bottom okay so we have this error and the loading we can inside our Redux toolkit what we want to do is to add it here at the top we want to import them so we have actually the current user we can add the loading and then actually error and then here at the bottom of the page actually I'm sure no we don't have okay after this we're gonna have a paragraph and inside this one we're gonna add this one we just say if there is a error then you just say something went wrong okay and then let's style it a little bit because should be there with the red color and something like that so we add a class name here the text would be red 700 and then we just said added margin top of five so that is okay for the paragraph and also we can add a message for the success too we can just add a new use effect use a state for the update success we can add it actually inside the what is it inside the Redux toolkit but it's going to be very complicated if you add too many things there we can just because this is just one page we can just use it uses State here and then after everything is fine uh here we can just say set update success to true and then you can add another paragraph here should you can duplicate this one but this one is update success and then the message is user is updated successfully and then here we change the color to Green okay so now let's test it again for example I just change this username to Sahan and I press date and we forgot to add the loading but here the user is updated successfully is added and then because we can update the button too so here for the button you just say if there is a loading say loading otherwise shows update so now we test it again this time I change the email for example okay the loading was working and user is updated successfully this year so let's refresh the page change something here update the user is updated successfully all right so that was it for updating our our user inside the profile profile page so let's add this one to the GitHub so let's go back to visual studio code and here we add everything to gearshot so I'm gonna press here on the plus icon to add everything and then we just create a message for example complete user update or update user functionality and we can commit approach to GitHub all right in the last section we have completed the user update functionality in this section we're going to add this delete account functionality so firstly first we want to create the actually the back end so inside the API we're going to create a new route inside the user.rout.js JS here we can just duplicate this we just add this one we change it to delete and we're going to verify the token so if the user is not authenticated they are not allowed to delete and then we're going to create a function called delete user we don't have it now but I want to add it to you just in case and then we're gonna create it inside the controllers user.controllers.js so here at the bottom we want to add that delete user functionality so this is going to be a synchronous function and first we want to check first we want to check if the user so we're going to test this one if the user ID requested user.id which we are getting from the this function verify user at the end request that the user we get from the jwc and set it to user so if this one is not equal to the one we get from the this parameter this params we're going to return an error using the alt middleware and the function that we have error Handler we pass the status code of 401 over 3 and we can just say you can delete only your account otherwise you want to add a try and catch a statement so let's here we want to handle the error using our middleware and then here we want to delete the user with the method called find by ID and delete so this is going to search all the users and then find the user with this ID request.pramps.id that we are passing here and then they're gonna delete it then we want to have a response with a status of 200 and there'll be the message user has been deleted so this is for the backend side that was quite simple but for the front end we just needed to add to this delete account so we want to add an on click event listener here and this is going to call a function called handle delete account and we need to create this function at the top so here we can just create it and this is going to have a try and catch a statement as well for the remember we need to actually remove the user from our Redux toolkit so we need to add some reduces for this one as well so we need to go to let's see first what's the error I think I didn't close this brand for a function so that's fine and then we go to SRC Redux user slice you want to add this as well so we can just duplicate this and this is going to be delete user you can choose this update use Ctrl D to choose all of them and then we just say delete user start user success and failure for the start is actually the loading is true for the so loading is true for the delete user start but for the success instead of adding a payload we can just delete this action and this one we just set it to not because we we don't want if we don't have any current user that time because we want to delete that and for the failure will be similar we'll pass it here and then we need to add them here to this user start and success so now inside the profile we can first thing first we want to request for deleting so we can accept this one actually but it has some I can delete this extra there so we got a request for the API for slash user for slash delete and we pass the current user ID the method is delete we're not passing any body or anything any data so there's there's no need to add the headers and then we're gonna get the data if it's false we want to up here we can dispatch delete user a start we need to import it actually at the top so as at the top we want to import delete user and start delete user success and delete user failure and then you can use them in our function so we're gonna start the loading by just delete user start after if there is an error we're gonna first dispatch the failure and pass the data and here too we want to dispatch the failure and if everything is all right we want to dispatch the success Let's test this one if we see if it's working or not so we go to our account we want to click on the delete account we're getting an error let's see what's there okay we are getting 404 again let's see the network let's refresh the page here you go Network and then we just delete the account okay we are passing this API forward slash user for slash delete and we are passing the user ID but we are getting the 404 not sign so let's see forward slash API user delete let's Okay add here we just say post ah this one should be a delete method not the post map okay so now we go and test again refresh the page click on delete so okay now the status is 200 the user is deleted and also we don't have any uh user inside the header as well let's try it again I'm gonna create sign in with this account called it's a hand and if you go here we can see the user name is ended by n a here if it's deleted and then sign in again with the same account like this as you can see the username is ended with n6 okay so that is working so let's add this one to GitHub so we can go back to visual studio code and we can just add everything to GitHub with the message add delete user functionality I will commit and push all right in the last section we have added the user delete account functionality in this section we're going to work on the sign out functionality so the procedure is very similar actually just for the back end we want to have a different Behavior so first thing first we want to go to the front end inside the profile.jsx oh let's add the back end first so if we go to backend API we go to auth auth.rout.js we just add another router but this is going to be a get request so router.get and then here we're going to have a get request to sign out and here we want to call a function called sign out click and we just need to import this function and then we're going to create it so sign out and then we're going to create it inside the off.controllers.js so here we want to add this sign out as you can see we can create a function with the name of sign out and then once we have this one we can add the and clear the actually the cookie so we don't need to handle any error or something we can just add response dot clear cookie as you can see from the suggestion the cooking name is access token and then with the we can just add a status of 200 and the message would be we can just delete it like this and we just assign out success so we have done with the API part so let's check it again so it's a get request to sign out then we're going to call this function which is here so inside the front end in the profile.j6 inside is sign out expand here you're going to add an uncut click event listener which is going to call the function called handle sign out so we're going to create this function here at the top so this is very simple too we need to just add a try and catch a statement in the catch we just uh first thing first we want to actually create the request the request is going to be for the sign out we don't need to get any response so we just say we can just use fetch just say await fit this address and as we are using Fitch we need to change this one to asynchronous we just need to create the request nothing else and then the default behavior is actually the method is get to also we can add the Redux toolkit so we need to go to user slice.jsx and then here we're going to add the sign Lookout 2 like a sign out for the sign out we don't need actually the loading or anything like that we can just set the current user to null like this sign out we set the loading false and arrow to false and then we just create the current user knob so let's actually export this sign out and then we're gonna use it inside the profile we need to import it and we need to import it at the top sign out and then we already have the dispatch so here we can just say after the successful we just say dispatch sign out for the error we can just simply cancel lock the error you don't need to show it to the user you can add the loading as like a start success and failure for this one too but it's not necessary because just to sign up so now we can test this one so let's go back to our website after refreshing the page we can just click on sign out as you can see it was successful so let's inspect and go to network and we just sign in first with some accounts for example this account and then we can just go to profile I want to clear the network and then click on sign up as you can see all we are getting actually an error it's working on the client side but the back end is not working all right so the problem is this one API user it should be API off so I'm gonna always make a mistake here so we can sign in again with another account so let's try to sign out at this time the status is 200 and then it was successful the response is sign out success so it's working let's check our cookie here we go to application and as you can see in the cookie the current user is null too inside the location and for the cookie we shouldn't see any cookie related to our application let's refresh this one as you can see the cookie is already clear so now we can add add it to the GitHub repository all right so we go to the our Source control and we can add everything to GitHub we create a message we just say add sign out user functionality all right so we can just commit and push to gear top all right in the last section we have completed the sign out user functionality in this section we're going to work on the home and the about page so let's bring the website to the right side and our website to the left side our Visual Studio code so we can see the changes in real time and then we can just go to the client SRC and then we just go to Pages first let's finish the home page so inside this div we're gonna have it let's bring the home page here here we're going to have and it it's one tag saying for example welcome to to my authentication app so after that we're going to have three paragraphs like here in the home page so the first paragraph you can copy the text actually from here and then as you can see we have it here let's uh before copying the other text we can just style it a little bit so in the div here we're going to have a class name we want to add a padding in the x-axis of four and then we want to have a padding in the y-axis of 12. so this is actually for the mobile size is okay but after the mobile size we want to have a different padding or we can just add a maximum width of for example 2XL and then this is going to limit it in the big size like this size and then we can just bring it to the center using MX but all right so that is okay for the H1 I want to have a so let's add a class name the ticks must we just make a 3XL make it bigger and we set the boldness to be font bold and then we're going to have a space after that it's just a merging bottom to be for example before and let's make the text a little bit lighter we just can use text a slate 700 maybe or 800 that's 700 P5 okay enough for the paragraph we're going to have marching bottom as well because we want to have more paragraph later and then we're gonna have a color we can just copy this one we can make the the text 700 but the title we can make it 800 right so now we can just copy this paragraph two more times using alt shift done Arrow we can just change the text of the second one to this one and this is the last so this is the one we created all right so it looks okay for the uh about this would be very similar so we can just copy this div we can close this and copy it and we go to the about the jss pick and and here we're gonna paste so inside about this we have the same text but we want to have like this one so the title is going to be about and then the text we're gonna copy from this page this is totally up to you you can make it much better but I just want to keep it simple and so that is 5 for the whole page I think I made a mistake here I added 2T okay so let's see yeah we have it about and on page so now the our application is ready so we can just add this one to GitHub and the text message would be add all or complete on and about page pages all right in the last section we have completed our home and about pages in this section we're going to deploy our application to render before doing that we need to add some extra script to our application for building purposes so most of the most of them are must be added to the package.json and the API the client side is not uh you just want to build it and then they're going to use it from backend to run the client size so I'm going to show you what I mean so here inside the package.json which is inside the root of your application we have two scripts now one is div one is the start we want to add another one because we want to tell the render which folder we have the client and Etc here we add a script for build and this is going to be equal to so what's let me fix this so we want to actually install both the front end and the back so we just sit here NTM install this is for the back end because packets is the package that Json is in the root and then for the client side we can just say see the client and empty the start or the other way is to say npn install the added prefix prefix means we just go to this folder prefix client so this is going to be a CD client and then npn install okay and finally we want to do the same things for the build so we add npm wrong build prefix client which is going to go inside the client folder and then run npn run builds which is going to build our clients so basically we're going to create and build the client and then use that client to run from our packet so inside our backend inside the index.js we want to tail the back end because our application is going to run node API forward slash index.js and then from index.js We're going to run our build application so here inside the index.js we want to add this part here so after this cons app first we want to define the static folder with our build folder which is the app that you use Express dot aesthetic and then we want to Define which one is our aesthetic folder and as the this is a dynamic folder structure so inside it actually backend inside our server here for example we have forward slash uh bills or client but inside the server maybe this is a different structure so we need to find the directory name so in order to fix find the directory name we need to import and path from path and then using that path we want to create our directory name so here we're going to create a constant this one is called underline underline directory name path that result this is going to find the dynamic directory name so in every places in any server we're going to find the directory name and then based on this directory name we want to create our static path so express.static we're going to open a set of parenthesis and then we just say path.join this directory name and then instead of saying public if this is going to be forward slash client our folder here client and inside the client we don't have something called inside the read we're going to have a different things here we have bills in P in bit we're gonna create the build inside something called this this all right so this is for the static one I think we made a mistake okay Express is like this okay so after defining the static folder we want to say after to use app.get then you get to any places like anything inside the client side we're going to get the request and response and they're going to send a file which is index.html here inside the client side we have a file called index.html that close this indexes.html we're gonna run that one instead so we just erase that send file with the same path system which is a directory name and actually we can separate this one just a client and then dist and then finally index.html but we need to add a comma between that so whatever directory name is in server go to the folder call client inside the build folder which is this and then index.html find that one and send it to the client okay so now we are ready to deploy our application so we need to do these changes so uh so now we can go actually to the website called render and deploy application before doing that we need to add these changes to our GitHub repository because we want to deploy it by our GitHub repository so we just say uh at pre-production at pre-production for example just the changes okay so now we have this one at least let's go and search for render so we need to go to a website called render.com with the title Cloud application hosting for developers and make sure you sign in I already signed in with my application with my account it's yeah I think I need to sign in again so I just want to sign in with my Google account it's free to use these are my application that I have created before if you wanna if make sure firstly your sign in and then you just click on new and here choose web service when you choose web service you can see your GitHub repositories here if you don't see it you need to actually sign in with your GitHub repository when you are signed in you can see your latest GitHub repository for example this one I just added now and then you can click on connect this is going to automatically connect to that repository you just choose a name for it for example meron Dash pause choose the origin print you just choose the main The Roots directory we don't need to change it because the root directory is actually the root directory we used here and we want to install everything from this package.json which is inside the root directory and then the the this is a node you can you can see that you can deploy many things here and then the build command is actually you don't need to add this one because we have already added this one inside the package.json here npn run build so we can just delete it we don't need to add anything here but for the start command for the start we have added npn has start which is going to be node API for Slash index.js so instead of this you're going to add npm a start we're going to choose the free tier so this is a slower and also uh but it is free you can test your application if your application is working nicely you can later if you want you can add it actually you can change your plan and then for the advanced part here you can click and then you can add our environmental variables so for the environmental variables we have let me paste it here you need to paste your mongodb url don't add the this don't add the code just that one after that we're gonna add our JWT secret key the next one is inside the client we have Fleet Firebase okay so everything else you can just leave it like that and here you can click on create web service so there is a problem here let's see the build one is required with just npn run built so we just click on the create web service so now it's deploying and building our application as you can see first is cloning our GitHub repository checking for the last commit and then now as you can see it's running our application first is installing this backend the front end and then building the front end so this is going to take a while I'm gonna just pause the video I'm going to come back when it's completed all right as you can see the building is completed it took around like 30 seconds it wasn't too long so now the build is successful now just deploying it to our to a URL so now it's starting our service and running the node API for Slash index.js so I think it's already done yes you can see it's already created a URL for us I'm not sure we can now test it let's wait a little bit until this progress is completed all right so as you can see the you you can see the server is listening on three thousands working so a backend is working it is connected to the mongodb and they said that your service is live so now if you click on this one we're gonna see our application but you're getting an error saying not found okay now it's uh changing a little bit okay now it's working I think we clicked a little bit early let's sign in or sign up with an account let's see this was working or not so it's just a user 40 at gmail .com this is email the username is user 40. let's click on sign up okay we are getting an error let's see the error and then we just go to network click on sign up to sign up is giving us user created successfully actually okay it was working actually let's see sometimes we get not found Let's test it again with the different user for example 41 if we click on sign out okay it's working now I think the they didn't completely build it yet so now let's sign in okay it's working out so we have the profile let's update our application the person for example user change it to user we click on update okay user is updated successfully and let's upload an image from our desktop I open this okay it's uploading now image uploaded successfully okay that's a good sign we can just click on update okay now image is uploaded as well let's first sign out okay sign out is working let's sign in again okay and then we click on delete account okay it's working so if I sign in now we get an error so for the Google we need to go to actually to our file base and add this URL to the Google in order that one to be working so we need to copy the URL actually and then go to here to Authentication and you go to setting and authorize domain you're gonna add the new domain here click on ADD and now we can just continue with Google and choose one of our Google account okay it's working out so now actually the application is working perfectly so I highly recommend first thing first you've been your live don't quickly test your account just wait a few minutes to completely your application is live and then you can test your application all right so that was it for creating our application I hope you enjoyed and learn many ticks so see you in another project

Channel: React & Next js Projects with Sahand

Views: 52,008

Keywords: MERN Stack Authentication, Full Stack Web Development, Web Application Security, React Authentication, Redux Toolkit Tutorial, Google Authentication Tutorial, Firebase Image Upload, User Profile Management, Private Profile Pages, CRUD Operations in MongoDB, Web App Deployment, Web Development Course, Learn React, JavaScript Authentication, Frontend Development, Backend Development, Modern Web Development, Full Stack Development, Secure User Authentication, Coding Course, jwt

Id: rXvQj-Z0v0s

Length: 317min 19sec (19039 seconds)

Published: Tue Sep 12 2023