Complete Nextjs fullstack Authentication course

hey there everyone hitesh here back again with another video and I would like to welcome all of you into this really long and hopefully really long next JS course I wouldn't be calling it as the next year's crash course because it's not a crash course it doesn't just give you overview but it's a real world production grade application that you can deploy and can use in the real world this application is specially designed in such a way that it provides you a path to learn nexjs absolutely from scratch I'll give you the prerequisite as well but the goal was not to just teach next year's but to teach it in certain way that you feel absolutely confident about building application using next.js I want to lay down the entire architecture of nexgs in such an easy manner that you feel that it's like a walk in the park no longer afraid of being app directory and Source directory and all those jargons you will be able to dive deep into the actual documentation of the next shares if you find any problem you will be able to tweak it out now this application is decently complex so we need to pick up a tech stack I will choose that I will also give you the prerequisites and everything that is required I'm pretty sure you are excited to build this application with me this application one more very important thing this application will lay as a foundational block of some of my upcoming tutorials in the future as well as if you are trying to make any application which is really really complex in next year's this will lay down a solid foundation for you so everything is all set up and I'm pretty sure you are all excited about getting started with the next years along with me this is going to be one of the best ride and again trust me you will have so much of confidence that's my goal bring confidence in you so that you can build application and again even if you are not that much confidence in building a full stack application no worries I'm here I'll walk you through with each and every word that we are going to write no copy pasting of the code we'll be writing everything down and I'll explain you every single logic that is required for that so I hope you are excited for that now first let me tell you what are the tech stack and what are the prerequisite for that let's start with the prerequisite now this entire next.js application is built in typescript but again if you are not much familiar with the typescript that is totally okay I am not using any a crucial part of the typescript which is making it just for typescript people if you know JavaScript that is also fine you will be able to understand hundred percent of the code so there is no too much higher dependency of the typescript if you know it that's great otherwise I do have a series on typescript as well you can watch that otherwise it's not that much of a hard and fast requirement on top of that nexjs is a framework which is built on top of a library known as react.js everybody's favorite now react.js is amazing but I don't expect that you have 100 knowledge of react.js if you know how to just use a simple user State use effect and just can write some buttons in next year in the react.js that is all that is all but if you don't know even that much that's also totally fine I'll still try to explain you some of the bits and pieces of it but I would certainly say that the experience of react.js would be super helpful in this series and that is it now I don't expect you to have too much knowledge on the back end part I just expect you have heard about some of the backends and stuff this would be also a great starting guide for you to understand about the database that we will be using which will be mongodb in this case everything that we are writing in this in this entire example and this entire app is fully productionable so you will be able to put all of your application into the cloud and you will be able to serve the users and everything not only that that this application will be available to you on the GitHub not just to Simply watch and see it but actually to contribute in that I am deliberately not touching too much on the styling part of this application I'm keeping it very raw so that you can bring in your Tailwind experience and can contribute in this repository you can the functionality of this app will be 100 working but the UI part you can modify it as much as you like I'll keep it open-ended so that you can focus more on this remember this is a Nexus course not a Tailwind course so I'll keep your Tailwind aside on totally you so that you can bring your knowledge and can contribute in this application remember don't fall into the tutorial hell you need to contribute something in this as well all right I hope you're excited now bringing in about the tech stack side that what is the text tag that we'll be using let me walk you through with that so the text tag that we'll be using is absolutely simple there is nothing too much to be scared about that first thing we obviously will be using next.js together we'll be reading a lot of documentation so that you can actually learn that what it takes to read the documentation bring the code from documentation and write along with it so this is the first thing that we'll be doing and we'll be using App router absolutely latest as modern as possible we'll be firing up an npx create next app later so we can pull in the latest of the next JS apart from this for the database side we'll be using mongodb and we'll be using mongodb in the cloud the only thing that I don't like about it it's too white it should have a dark mode but sadly I couldn't find it so we'll be using and creating a new cluster I'll walk you through from the scratch that how to create a database and how to use it and apart from this since we are building up an authentication system I'll walk you through what we are building in a minute but we will be needing some kind of a mail service now one of the production grade mail service is a mail trap I'm not affiliated with them but I have been using them for a while for teaching purposes I found it pretty interesting instead of just exposing your Gmail and firing up email from that that's not a good idea use professional tools and mail trap is one of of the many such tool that you can use so I'll be using this one so apart from this I'll be using a little bit of excally draw everybody's favorite to just draw some diagrams and explain you the stuff all right so this is all what we'll be doing first let's dive into the theoretical part and what we are about to build so what we're about to build is pretty simple so first and foremost we will be having at this screen and this one is going to be a simple sign up screen now this is not going to be any ordinary sign up screen in the world of next year so you obviously cannot just rely on the front-end part we surely will have front-end part we need a back-end part as well I'll talk about that in a second so now apart from this we'll be having a simple login screen as well so what we're building basically is a user authentication system now since in the latest a lot of upcoming tutorials will require this authentication system so we have a proper course here which explains you everything about what happens what goes in the authentication system as much as in the core way possible all right so we have a sign up we have a login and apart from this once we have this sign up and the login we will also have a profile section now this profile section will have a couple of pages again we'll not focus about what we are serving on the profile we are more concerned about how we can actually reach through the profile if there is a unique ID with the user associated with that how can I grab that unique ID from the URL there's so much to explore about this so this is going to be a basic application where user will be able to sign up login and profile that's all but there are also cases where user might also request you couple of more features so we'll be designing them I'll walk you through with the scenario of how we can actually go ahead and reset the password or maybe also verify so user account needs to verify as well so we'll be working on the functionality of reset and verify once you understand even one part of it the next part is super easy to understand I'll walk you through with that scenario as well how to reset the password how to verify the user so all of this functionality will be taking it down it's absolutely a core of any application that you'll be building so we'll be working on that part and after this I'll keep it a little bit open-ended so that there is enough space that you can contribute in that part all right so hope that is good and I'll just write the tech stack here as well so that we don't get any troubles or problem in it so we'll be using next year's I know that's very small I don't like even the small fonts and stuff I always keep them Big Easy to watch in the tutorial for the backend part we'll be using mongodb so we'll be going with the mongodb now of course we'll be needing a few of the stuff since we are on the mongodb we'll be going with the Mongoose we'll be going with the node mailer as well and couple of more things will be there like I'll be using react hot toast and all these things I'll not configure them properly I'll leave them as a simple exercise for you but don't worry we'll get the enough of the messages and everything for us so again it will be super fun to work on with that all right so this is majorly The Tick stack that we'll be going through so I think that is it that is all what will be going of course I'll walk you through how we can configure the mail trap and stuff now let's first start not not by creating anything but actually to understand the theory about it now the theory is actually very very amazing here so let me just walk you through so first and foremost just understand that everything in nexjs has changed any tutorial that you're watching which is older is no longer going to work so you need to really understand this part now everything that you work on with this now actually goes inside the source directory so consider this as this is my source directory so this is the source directory where you will be working inside the source you are going to find that there is a directory known as app so this is our app let's explore this so this app directory has a couple of things inside it the first part in fact if I bring this app directory here and try to explain you that how does this app directory actually goes this app directory can easily be divided into two portions of it the first portion goes here second portion goes here the first part you can easily call this one as backend and yes there will be a lot of people who will try to explain it with the meaning of this is a server component is it a client component yes we'll go through with that we'll understand the difference of it but not right now they are much more easier to understand in this way and context so we have this back end and we have got this front end so this is all that goes into this app directory and this app directory is obviously a part of this source so go ahead and just let's just go ahead and have an arrow just like this so we have this Source but apart from this app you will also find that it's not just everything goes into the app directory some things goes outside of the app directory as well for example most of the time when I design my models you can absolutely place these models outside of the app directory not just the models I will also keep some of our helper files for example I want to shoot an email I want to verify my tokens JWT tokens yes we'll be using them so how that works we'll be keeping them outside as well all right this is the whole gist of everything let me summarize that quickly now in the latest of next.js you'll find everything is inside the source directory and inside the source directory you have this app app has two portions of it the back end part and the front-end part of it but it's not like everything goes inside the app directory there are other files you can obviously create it like models helpers components there's so many of the files that you can create which can rely and reside outside the app directory now more notoriously you will see not notoriously but yeah more of the time you'll see that the backend portion is actually written inside the API folder and yes the naming convention is super super important in the next JS even a slightest wrong thing in the next in the naming convention will just create a havoc in the folder remember this is a framework whenever we talk about framework There are rules and regulation you have to follow usually these rules and regulation comes with the variables names or maybe uh how the process needs to work how the response needs to send how the app directory should work out so all these things need to go hand in hand now you'll find a common thing as well that whenever you are writing most of the part in the apis in the back end you are using file name as route and in case of the front-end part you are actually using the file name with the name of page it could be page.tsx it could be page.ts usually TSX and Route is usually route dot either JS or either TS whatever you are using we'll be using typescript so we'll be calling it as a route dot TS and here the page so I have now this diagram makes it so much clear that how things are going to go and how things actually work now apart from this there are certain files which also needs to be inside this app directory and how this actually goes and work on now one of the most important thing that you'll be looking up for is notice this this is what the meaning of app but hey there is a very common file which you'll be using a lot which is known as middleware where does the middleware looks like it's inside the source directory but it's not inside the app directory yep that's how usually the configuration is there are other files and folders you can have middleware just like the middleware is here you can have your customized error Pages lots of other Pages which I'll walk you through with the documentation as well you need to put it a little bit outside so let me walk you through with the documentation as well so let's just say we want to understand about the middleware right now we don't understand too much the working part of it but if I go ahead and look for it notice here this is the middleware and here's the convention use the middle page and notice here for example the same level as page or app or inside the source if applicable so as I told you it's actually inside the source everything is inside the source but it doesn't need to be inside the app directory this is where it confuses a lot of people but don't worry I'll walk you through with every single thing how to read the docs and everything how to even see and utilize will be utilizing this exact piece of code so you don't have to very even a tiny bit for that part all right so this is all the basics that we have done and we have understood the basics meanings of how the things are being done let's go ahead and create with that I have already created an account on mongodb Atlas you also need to do this so let's go ahead and start I have actually removed everything from scratch we're going to be getting with there so just click on build a database and I'll be using AWS but I'll be using free one I'll not pay money this is YouTube I'm teaching for free so I think this should also be free uh so I'll be choosing a location which is nearby to me and where is nearby to me I think Mumbai is the nearest looking for me and yes I am from India so I think that's it and create this this usually takes a couple of minutes to spin so go ahead and be a little patient about that I also want to create a user and a password so I'll actually do this later on and connect from IP address and all of this so we'll be doing that manually so I think we'll not use this quick start of the security guide I'll just walk you through this is actually way better to explain if I go ahead and explain everything in a much precise and easier way so there we go our cluster is created now first first thing that you have to do is go up here and let me just go ahead and show you this so all right I'll just shrink myself a little bit move here all right so uh first thing that you have to do is look up into this security thing so this security thing is super important first go ahead and click on network access here this network access simply means to say that from where your application should be available your application is maybe Universal your database might be in AWS should they talk to each other or not so in this case I have given access to all of this so you can just go ahead and also click on ADD IP address you can either add your current IP address but since you are not on a permanent IP your IPS soon as your router shutdown sends reboots it might change so in this case just for an example this is not a production level setting we can go ahead and say 0.0 dot 0.0 and slash zero which means I want everybody to be able to access my database if they have correct ID and password again there is one more layer which is ID and password so that needs to be there I can confirm this and this will add there is nothing to add then go ahead and click on database access that who can access your database right now we don't have any user so I'll click on add user and I'll add a simple sample user with the name of YouTube and I'll enter a password and again you really need to be careful about what you are using as your password if you use any special character that might be URL encoded or might create some issues in that so be careful about that the usual practice is to use numbers and letters that's all and what we're going to do is we will be also adding a built-in role so click on that drop down and we'll be selecting read and write to any database right now and I'll just click on add user so this will simply add a user which can actually talk to any of the database now that is it that is all you have to do now click on the database and all you have to do is click on this connect and it will give you this Compass click on the compass again and this is the URL that you want to copy so just click up here it will copy it now notice here carefully that if you go ahead and carefully look onto this one this actually gives you the username but doesn't gives you the password so password is something that you have already given there so go ahead and use that one I'll just close this one that is all the requirement here for having this now let's just go ahead and move on to the next JS home page and we'll be creating a new project here so I'll just go ahead and open up a folder so this is the folder that we are using I already built this app obviously otherwise why would I be recording the tutorial so I'll be calling this one as auth next JS and this one is for YouTube so I'll be just grabbing this one let me fire up my vs code there we go vs code here we are and I'll just go ahead and just fire this up here and let's create an xjs app all right so this looks good full real estate all right let me go ahead back up here and just click on this small command which says npx create next app very nicely hidden there I'll just go on to vs code and we'll start that so I'll just go ahead and open this up and just paste it up here and I guess the dot command still works if I want to install everything here let's go ahead and try this out and I'll just put up a DOT to just create a project in this same directory and it will ask us a couple of things do you want to use typescript obviously I want to use it let me also move myself a little bit on to the perfect place all right looks good looks good okay do you want to use es linting for this one so obviously I want to use es linting so I'll just go ahead move it up here and let me just all right just give me a second all right so we want to use eslinting uh yes we want to use es linting do you want to Tailwind yes maybe you can contribute with the Tailwind a little bit so I'll just go ahead and yes do you want to use the source directory with this project uh we want to use the source directory or we want to use the app directory now this is where a lot of people get confused yes we want to use Source directory because as I mentioned up here the source directory is now everything remember the source yep source is everything and this will also give you the app directory so moving back yes we want to use it you want to use app router a 100 you want to use app router this is the way forward so anything that you're learning from now onwards you want to use app router I'll just hit enter would you like to customize the default import Alias I usually no but I'll show you that if you write yes what actually happens if you go ahead and select yes it gives you two options you can use at the rate or you can use or asterisk for showing where is the home of this home directory so we'll be using at the rate which is also the default and then it will just create a simple project in your application in your folder not your application so this doesn't usually take much of the time should be really really fast and yeah mostly uh the things are installed all right so there we go okay let's clean this up first let's understand the directory structure which I was telling you so notice here in the source we can see there is the app directory and inside this all the files are there we have the page.tsx which is always the common file there is also a layout which is also a wrapper and inside the layout we actually get the page so notice here if I just show you this is a wrapper so everything that you are passing in as a children the whole job of this is to just render this if I go ahead and move it to next line it's much more easier to understand so this layout is nothing it's just a wrapper maybe you have a common navigation bar maybe you have a common footer so all this can be actually injected into the layout and then children whatever is being passed on it just renders it as it is so that's the basic meaning of how the layout actually works base.ts is the way how we deal with the front-end part of it and most of the client side or the client rendering will be doing through this I'll show you the difference between the client side and the server side in the next JS you don't have to worry in that part absolutely simple and basic I will go with that so we'll close this one this is the basics of it now inside this app directory there is so much that you can go ahead and work on with this and we will surely be doing that in just a second first let's open the package.json and you can see in order to run this we have to say npm run Dev which will run the next Dev which is let me tell you is painful ELO painfully slow not low painfully slow application to run so if I go ahead and say npm run Dev this looks like it it's faster but it's not so I'll just copy this and go back on to the browser and I'll start this and you will notice every time it takes build the first build is painfully slow but this is how you get your application all right now it's not just that we will be just working with these dependencies only we actually have some of our own dependencies as well which will be super helpful for us in the future so we'll be first installing them installing them is super easy you can just go ahead and say npm install the first package that we'll be using is xeos yes you can use fetch as well but I want to give you the taste of how things actually work in the production but feel free to use fetch there is no such hard fast rule then we have decrypt decrypt JS now bcrypt JS is a library which use is used commonly to encrypt the stuff we'll be encrypting our password obviously we don't want to store the clear text password in our database not only that for creating the tokens as well if you remember I told you uh just a few minutes ago that hey we'll be using this middleware models and helpers and they will be useful to reset and verify the tokens we don't want to send ABCD we want to send a really long strings which is encrypted to the user so for that we'll be using the bcrypt JS it's a super simple and amazing library for this one now apart from this we'll be sending the tokens and securely we'll be sending it not to be stored in the local storage but we'll be sending and securing the cookies from the server side so that it doesn't get manipulated on the front-end side for this we'll be needing a Json web token so Json web token this is the library that we use for that now after that we'll be using node mailer this is one of the most simplest library to shoot out an email either you want to send it or shoot it out from the Gmail or if you have something else like AWS maybe Bluehost whatever you're using you can just go ahead and use the node mailer for that now another Library which I'll not be setting it up but I'll give it to you for as an exercise is this react uh hot toast this is one of my favorite Library which works really amazingly well it actually gives you small pop-up messages that hey just a user successfully signed up a user didn't sign up so we'll be using that I'll not be using it so you can skip it at this moment but it will be super good for you to contribute further down the road all right so I guess this is all that we need as of now if we'll be needing something else we can just oh I forgot one guy which is Mongoose how we are going to talk to the database now Mongoose is a library which helps you to talk to mongodb it's a wrapper around mongodb drivers makes our life a little easier so we'll be using that now one thing a lot of you who are coming from the backend development might be noticing I'm not using Express you don't need it you you don't need it in the next years this is all what we'll be using so go ahead and install that if we'll need any more Library we can go ahead and use it later on I think this is more than enough for as of now and further down the road let's go ahead and work on with this okay so a couple of things I'll mention it straight forward I'll be creating couple of directories first and foremost so that you get a feel of how the directories and all of this is layout because notice already you can see the source and then app then all the things are inside that but it is too difficult to see I'll show you in the part here so if I go ahead into next.js notice inside the source everything is inside the app but here the structure the directory structure of the vs code might confuse some of the people so everything is inside the app all right I'll show you more of this as well now let's go ahead and create couple of more folders and directories and stuff like that first and foremost now click on the source very carefully click on the source and create a new folder and we want to create a folder known as model or you can say models both are same so it helps us now to actually see that oh now we can see that everything is inside the app and there is a model directory as well we obviously will need some helper as well to shoot email and stuff like that so it's a good idea that we create these helpers as well again this was not going to crash your app or anything it's just a folder in directory structure all right now we have these application there's a lot more that you can go ahead and create like that so we'll be using that part as well now one of the most important thing that we'll be using is the environment variables obviously our database strings cannot go in the clear text format they need to go somewhere secure so that when we deploy them in the production they actually are secure there as well so one neat trick is you can come here into the vs code and just double click here and it will automatically create a file in the root of the directory that's where we want it it is dot EnV these are your environment variables and you can access them easily and in the production as well in every single hosting these environment positions are there that where you have to inject them in the digitalocean AWS everybody has these secret managers we'll come back on to this one right now we don't want to add anything like that I'm just creating a folder structure which can help you to do all these things all right so this is the basics that we have that everything now notice here everything is still inside the source as I mentioned then we have this app and then all the things are here now one more interesting thing which confuses a lot of people is majority of your file will go into the app and I told you just here that inside this app somewhere here it is your backend also goes your front end also goes so we need it's time that we verify that that how does that works so inside this app I'm going to go ahead and create a new folder and I'm going to call this one as login so login is going to be first now I have to ask myself before creating these folders am I creating it for backend or front end I am creating it for front-end so if I'm creating it for front end I know I have to call it as page yeah that's that's the page we talked about so I'll go back and inside this I'm going to go ahead and create a new file and I have to call it as page dot TSX the name is super super important call it something else and it will crash up everything here that's how it works so now that we have this page.tsx now it's time that we simply go ahead and just simply have the basics of a simple hello world kind of a thing or just have it a simple test or something like that so I'm going to go ahead and say export and default export default function and we'll call it as login page just like this now inside this login page obviously you want to return something to just say hello world or something like that right now I'm not worried about the functionality so I'll just go ahead and say hey return and what do I want to return a simple div and which will say login and a Dev close that's it that's all what we are doing now obviously I would love to just properly align this this is really really bad I'll enable my uh oh there we go so I need to just have this no no Auto prettier is coming in I'll make sure I enable that so that it doesn't bother you that much but I have to just save it now the moment I save it that is it I don't have to worry about any route or anything I can go back on to my next app and I can simply go ahead and say slash login and that's it probably I didn't started my server yep my bad so I will just go ahead and say npm run Dev and there we go our server is up and running all right looks good looks good let's go back on to the browser and hit a login route again and this is painfully long so we can see that this is a login of course you can use go ahead and use your skills like you can go ahead and add a class name then you can go ahead and say Hey I want to have something suggestions please Flex okay no suggestions I'll just leave it I'll just add a simple classes here so class name we'll just go with the text Dash Center text Dash white I was expecting that it will give me all these suggestions and we'll just also say text Dash 2 Excel yep so that at least we can see that there is a nice login there should be text Center as well align Center yeah there should be text Center all right anyways we'll just figure out the CSS part little bit later on but as we can see now can I go ahead and use a sign up here nope I cannot this is a 404 page by the way you can customize your 404 page as well you can read the documentation a little bit and you can customize just read about hey I want to learn about 404 not found.js so you can create a new file there with the name of just not found as you can see app blog not found so wherever your app is inside the blog and this is where you can just create a file and customize this one I'll not do that as of now I just want to show you the basics of how things are working now let's try to crash this app so let's just say I understood the basics of it but I didn't understood truly of it so I'll just go ahead and again click on the app create a new folder you always have to create a folder for every single route I'll just go ahead and say sign up and obviously it's engineering that we try and fail the stuff as well so let's just say I call this one instead of the page I just call it as login dot TSX what happens in that case again we are going to go ahead and say export uh default command suggestions and we'll call this one as we should call it as sign up page that would be more cool to crash because we are in the sign up so let's just call this one as signup.tsx so now we have export default and I'll not call it as login page sign up page there we go and inside this we're going to go ahead and say We'll return what do we want to return a simple div with a flex it's probably not we'll also have a simple sign up and we'll have a div just like that and again of course this needs to be there all right so we're returning this now let's just save this there is no problem here it says compiled successfully no problem there but if I go up here instead of hitting the sign up now if I let's try login First login works and then I try sign up nope it doesn't work so now we understand the importance of the file and naming convention because it's a naming based routing so I'll go ahead and turn it up into page.tsx and what you're going to notice as soon as it compiles all you got to do you don't even need to hit the reload so it works out of the box so this is how the naming convention and everything works up here all right let's go back and try to explore a tiny bit more into that how the things are going to work all right so as I told you everything is inside the app and there's one major portion of it so we have talked about how the front end part will look like and I told you you can also work with the back end part of it but the backend part needs to be inside the folder of API let's go ahead and do that so inside the app we'll create a new folder naming convention cannot emphasize it more API and inside this API this is way how you actually Define your routes so for example let's take this API and in this API the way how you are going to make your folder is going to be your API route so for example if further inside this API you create a folder or maybe a couple of folders let's go ahead and work on with that so you created a folder named as users maybe for an example and you also created a folder name as a what else home so you can go ahead and create and this will Define that how the routes are going to work so API slash users and similarly API slash home so this is how it actually works absolute basic there is nothing too much complex about it but this is how it actually goes I'll go back and now inside the apis I want a new folder structure to be followed which is known as users so obviously my route is now not just the API directly but API slash users and then whatever the file folder how am I creating and as I mentioned inside this API just like in the front end it is exactly almost copy paste but the file name is just route so what we learned here is if we want to create a sign up we have to create a signup folder first and inside that folder we have this page.tsx similarly in the users also we need to create a folder first now this folder can be anything a sign up anything whatever you like so I'll just go ahead and create a sign up and once I have this sign up now inside the sign up you have to create a route that is Route dot TS of course it's not X because it's not a component now just to make sure you understand it more proper inside the users I'll create one more folder that will be login because obviously anyhow I have to create login route and I'll just create a new file and that will be route dot TS so this is now a proper folders and structure that we have that we have this login API route we have this sign up API route as well this is now finally a complete guide that how actually the folder structure and everything is is laid out this is absolute basic uh but there's a couple of things I cannot just go ahead and work on with sign up I cannot go ahead and work on with login because these apis needs database connection and this next.js is an edge run framework so there is always edged runtime so it doesn't stay connected with your database every single time there is a database call you have to actually call your database make a connection with it and then you talk to a database send some file receive some file all these things actually go ahead and work through that now in order to actually have this you need to have some configurations so I'll just close this app notice here we have helpers outside we have models outside just like this we can also have our database connections outside as well and there are a lot of ways how you can go ahead and do this so at least let's go ahead and connect the database I'll first go into EnV and I'll create couple of environment variables so that they are helpful for us and later on we can use them so first and foremost we'll be having this underscore URL or URI whatever the way you prefer I'll also be using a token underscore secret that could be any secret I'll be using something like next Js YouTube whatever and we'll also have a domain this will also be useful later on so I'll just use an HTTP local 3000 that's my domain name this will be helpful for me when I'll be shooting some emails so I obviously want to click on the and have the localhost so this will be useful later on now let's go back on to getting the string so let's go ahead and connect compass and just literally copy this come back here paste it up here and all you have to do is add your password here so obviously I'll be adding my password but behind the scenes so once this video gets over this part of the video gets over I'll add my password so I'll just say add my password so obviously I'll not add it in front of you otherwise I don't want to mess up anyways it's a test database but still okay so I'll just save it and we'll try to connect with the database I'll walk you through with the connection at least the code part of it now notice here we have app helper modules so similarly we'll have the DB config whatever the name you want to give it I'll give it a name of DB config I think that makes sense so DB config yeah that sounds good to me now again inside the dbconfig I would love to keep uh I can just actually close all this close others yeah close everything all right so inside the DB config come on yeah now inside the DB config I will just have a dbconfig.ts file let's go ahead and create so DB config.ts in this part the naming convention doesn't really matter much so you can just call it whatever you like it is not going to bother you anything at all in order to connect with the database let's get some more screens real estate the first thing is who actually is capable of connecting or talking to mongodb it's Mongoose so we're going to go ahead and have Mongoose and that Mongoose will be coming up from Mongoose and then we'll be exporting this method as well and it obviously needs to be a sync we are talking to database and as I always say database is always in another continent so things needs to be async so I'll just go ahead and have a function just like this connect we'll call this one as absolutely simple connect and we'll wrap this up into try catch block so I'll just go ahead and have the try try catch there we go the catch part is the easiest one so first we are going to handle that part it's really simple we're going to have a oops console dot wrong and we'll say the classic the most horrific error which is something went wrong but we'll also go ahead and use the console log for displaying the error you can go ahead and use error.messages as well that's totally up to you no problem at all in that case let's try to get a string of mongoose connections so Mongoose dot connect obviously dot connect and this requires you to have just the URL now I'll not give the URL which is suggested me by the copilot I'll be using my own string and that you'll see quite a lot in this entire Series so process.env dot um and again make sure you take the URL and name of the variable pretty accurately it is URL I'm using I should be using all uppercase to make it actually all underscore URI this one should also be domain so everything is consistent there I'll I'll simply copy this and we'll say manga URI now here's the interesting thing since we are using typescript there is no guarantee that this URI will always resolve but I know it will always so I'll just put an exclamation to make sure that hey I take care of it you don't worry it will always be available and that's it so all you have to do is this much now once you have done this much then you can actually grab a connection so we can go ahead and grab a connection and actually let's hold this into a variable so connection will be given to you by Mongoose dot connection once Mongoose has connected it will give you Mongoose dot connection the string will be available and based on this you can actually listen to variety of events for example one such event is a connection and every event is being listened by the word dot on now inside this you can go ahead and try the connected connected this is the one event and it fires a callback obviously so once I have this call back and I'll just go ahead and use it like this and we'll remove this yep sometimes these Auto suggestions are just painful but bear with me so we'll just simply have a mongodb connected successfully successfully yeah I would love that okay so this part is all done you can also listen to some of the errors in case you wish to so similar to that connection dot errors and you can just go ahead and listen to these errors just like this I'll come back here if there is any error you can just go ahead and say hey mongodb connection error please make sure mongodb is running then we can pass on error as opposed process string and we can exit gracefully here so this is all that is required to go ahead and get connected with that and I'll save this one as well so there we go so this is the basics of it now the most important part is this connect needs to come in in almost every single place in the API because without the connect you cannot talk to database and every single time an API call is there you have to have to connect with the database there is no exception there is no option that is available for you this is how it works so there is no exception on that part all right so I think this is a really really a good progress that we have made about this application so far all right so this looks okay this looks good okay what else we can do uh next up now next up I want to do is actually I want to prepare my at least a sign up screen so that I know that there is a sign up screen and how things are actually going on working on with this all right so let's go into again I don't want to go into API backend part I'm not handling I'm handling first the front end part so this is my sign up screen I'll go into page.tsx and I will obviously import few of the things now one thing important that you need to understand from the front end part I need to grab some data and send it to the back end just like you do in a regular application in react application or maybe there's a backend in Django spring wherever that is you collect the information and make an xcos request or fetch request to that the same thing I have to do but there is a problem in the recent version of the next JS everything is a server component and server component don't have access to anything that is on the front-end side it's on server so the most crucial thing that you need to understand here is that whenever there is this dilemma between the front end part or the back end part you need to understand it very clearly that anything that's on server needs can access everything on the server side file system anything that's on the server front-end part if you want to take advantage of you state use effect anything that's on the front end part of it Windows location maybe you want to access the location the URL anything that's on the page that's on the client side and you have to explicitly make make your application as a client side cut it no confusion absolutely simple anything that's on the back end here's a simple hint most of the things in the API folder yep that's on the back end side that's default server component so that is that but anything that's usually outside not always but outside is usually a client component if you want to take some data in this case the signup form we want to take some data from the user and send it on the back end so obviously that is going to be on the front-end side so let me walk you through how we can convert any component into the front end or the client component it's super super simple let's go ahead and go up here all you have to do is simply say use client just like we have used strict we can go ahead and say use client that is it one decorator and it is now a client component you can use all of your window object you can use all of your use date you can use all of your use effect everything yeah how cool is this all right so now we'll be needing some of the libraries and stuff so obviously I'll be needing something to redirect the thing so I'll be just going ahead and say Hey I want to import the link this is the next link okay I'll be also needing react as well so I'll be saying that hey let's go ahead and bring in react and from the react we'll be saying we'll be using a couple of stuff but as of now let's bring in react only I don't know what we'll be using and we will be using because once the user is successfully signed up I want him to redirect or get redirected to the home page for this I need to use router here's a common thing which a lot of people are going to make mistake the router is changed in x.js in case you are coming up from the previous routers I'll go ahead and say I want to use router so this is the way how you bring in use router and this router actually notice your suggestion it's absolutely wrong this suggestion doesn't work you cannot bring it like this and let me show you how you actually bring it you have to actually bring it from next come on I can write it next slash again this suggestion is also Wrong by default even your GitHub co-pilot every suggestions these are all wrong because this is the latest version of it this one is now coming up from navigation yep use router not user router use router this is the one I want to bring in use router is actually coming up from navigation and I tried it while building the application every single time the suggestion I relied on it it gave me the wrong suggestion so maybe it will take some time and last but not least we'll be using xeos so I think we need to bring it like this and these suggestions are usually correct not this time again suggestions are good but they always don't work always so we'll be just going axios all right so this is the basics now you'll also get these squiggly line because a lot of time a lot of models Mongoose xios this is perfect installation there is no problem in the installation but typescript is one such thing which requires type definitions as well and since the axios types are not defined we have to actually explicitly install it I don't remember them always so always remember this you can click up here and then you'll get this bulb icon and you can click on it and you can say that hey uh right now it's for error for the unused input but it will also give you that hey install the dependencies or the types for it so I usually click on that that's how I actually go for it right now we are not using Xeo so that's why it's getting a little bit bothered so no no worries on that part okay how we are going to get a sign up now first and foremost we haven't designed our model yet but I'll do that very very soon so first let's go ahead and try on the front-end part what user data you want to accumulate so I'll go ahead and say I will grab a user so so it will give me a suggestion hopefully set user react use date and I'll just go ahead and close it like that now what all information I'm looking up for uh maybe I'm looking up for an email maybe I'm looking up for a password of course and also maybe username so let's just say username that is all that is all the information I'm looking up for as of now and of course once a user actually gives me this all information there should be a method which does all the sign up thing so we'll be just going ahead and say const and I'll say on sign up and this method obviously will be talking to database so this needs to be a sync and there we go right now I have no clue that how this will work so I'll just keep a method as it is I'm not worried on that part so I'll just keep it as a test all right now right now there is nothing uh more in my mind I just want to have a simple divs here so that I can just go ahead and place it up here so I'll just use a little bit of my CSS that I have pre-written here so I'll just use that instead of this login and stuff so I'll just go ahead and give it to you directly there's nothing basic all right now inside this we are going to first have in simple H1 which says login and I think that should work a tiny bit decent let's see that if we are crashing our app or it's going good and we should be ah we should be in the sign up page so we should not be saying login we should be saying sign up that's better all right so our looks sing up all right sign up there we go all right looks very tiny but I'm okay with that now after this I'll be creating a couple of input forms for this I'll be starting with the label we just need to create one and then after that we'll be just copying and pasting so have some line break then let's go ahead and have a label this one is going to be HTML for not for email but I'll I'll edit that this one will be for username I'll First grab the username this one will be for username all right by the way we have we have all lower case that's nice we have this label up here and let's see how does that look yeah username not the best but I'll I'll work with that all right next up is we need an input now input field will have some other things ID username okay I'm fine with that type is text and the value is user dot username yep absolutely correct and on change absolutely perfect in case you didn't got it we are grabbing the event we are calling this set user which is a method a function responsible for updating my variable user so that's why I'm using here is set user and set user in which we are keeping existing user everything same and the username only is getting updated with the E dot Target dot value which is coming up from here absolutely simple uh no problem uh we'll also grab a couple of modes like for example it is not suggesting me anything but all right I want placeholders as well placeholder and I'll say username let's see how does that look decent not the best but I'll just work with that in case you want you can go ahead and add a class name we can add a little bit of padding of four there's some suggestion let's see if that suggestion uh okay not the best not the bad all right I think padding four is too much uh I'll just go ahead and padding one is uh two we'll go with the two we'll go with the two all right okay so this is just a decent as I told you you can use your Tailwind skills and just uh design this much better now the best thing about this is now I have to grab email and password so I can just go ahead and copy paste this so I'll just grab from here I'll make a duplicate of this one and obviously they made a mistake yep we shouldn't be copying and pasting till the div my bad and we'll just copy from the label to the input now we'll copy and paste better so we'll just go ahead and use multi-cursors username username username username username this needs to go on email let's see if we have made any mistake should be okay and then let's copy and duplicate this and this one this time will be password so command D command d control D also multi-cursor I love that password the text should also be password password and that should be it for majority of the portion username email password horrific form but it will work it will work now let's go ahead and grab a button as well so we'll just go ahead and say button just like this and this button will have class name ah I love that and what we're going to do is just have this button and we'll call this one as sign up suck sign up all right sign up button sign up here right here okay a couple of more things we need in this one is first and foremost this sign up needs to go uh somewhere so obviously we cannot just go like this so we need to have an on click suggestions please no suggestions on click yeah on click sign up so I'm referring to this method which I created above I don't know how this method works but right now this is all the basics also apart from this I'll use a link so link will go to a login and will say something like this this page will go like visit login I'm not interested about login page yeah that's basics so there we go now we have a sign up page looks decent and we have this username email password uh so right now I don't want this email okay so we got this one so password sign up everything is working nice we are happy with this this also is taking us to the login page which is not yet designed but we can actually quickly design that very very uh Basics all part of it so nothing too much worried on that part as of now we are going absolutely good with that let's also try and do login also in this same video Also let's let's try that okay so I'll just go up here and we'll go to vs code okay this part looks good notice here how easy it was for us to actually Design This I'll go ahead and create copy all of this so copy this let's go into the login and page and let's go ahead and paste it obviously we want to change first the sign up page to login page that's the most important thing login page okay let's analyze this from top to bottom uh this needs to be client okay link is there react is there use router is there we are not using it but we'll be using it very soon to forcefully push the user to slash profile or something like that all right so this is what we have as a user we'll be grabbing only the email and password so this time it's a login so I don't need this field all right no suggestion please thank you this one is on login makes sense on login and then we are returning this sign up nope it should be login and login all right and then we have this username is not here we are just email and password so I think we can just get rid of this very first and should be all okay yep all okay so there we go email is there nice and easy password is there nice and easy uh this one is obviously going to be on login did we boarded anything else yep we don't want this on so this one is good we have got this one password is getting password value good good good login here and what we can see visit sign up here we are not too much worried about providing a proper message to the this is not what we are going to do all right and now notice here though all the error is because of axios but this is not going to bother anything this is just because of we are not using it right now notice here XC is declared but it's never used so don't worry don't bother this is just squiggly line warning I'm not going to do anything all right save this and let's see if I go ahead and there we go sign up is good and our login page is not good now it's good take some time some reloads common so we have some email and password and that's nice and we can visit the sign up page and yeah it takes a little time did we properly linked it looks like not yeah not this one is sign up so there we go small debuggings sign up there we go login sign up all right so at least we are able to do this much of the thing now not this much is not enough we need to do a tiny bit more tiny bit more I want to walk you through with One More Concept which will act as a foundational for a lot of upcoming things don't worry about these Reds I know these are bothering you but these are okay okay just like we have studied about these logins and everything we need to study about one more thing which will also be super super helpful for us which is known as how we can grab and build a profile for the user now notice here this profile is not in the API this is not in the back end part I'm talking about the front end part only so I'll just go ahead and say that hey app I'll create one more folder for you which will be profile and as you know in the profile I obviously have to create a page.tsx so page.tsx and we'll just go ahead and say export suggest me please suggestions no no suggestions hate that export default yeah now suggestions ah good I like that and we can just go ahead and say return give me something yep nice and easy and a profile and an HR and what else profile page okay I'll take that now I'm not going to take this much I'll just go with this and I'll just go ahead and wrap this up this div isions are good as long as you know what you are doing or what your application is trying to do otherwise you'll fall into the crap okay I'll just indent this a little bit so that it doesn't bother you that much all right so this is my profile page and as you all know this is super easy to work on with this later on we'll learn how to protect these profile Pages as well so I can go ahead and work on the profile okay profile page works absolutely fine but what about if I go ahead and move into the profile and type slash One how can I grab this one because this is a very crucial part of building the application how can I grab not just one but if I go ahead and write ABC here this is a common syntax you'll be doing this thousands of time there's a special syntax of how you do this in the next year so let's go back on to the code there we go so in any folder or any route where you want to grab this ID there is a special syntax in next.js right click on this create a new folder yeah folder not file all right and make sure you put this into square brackets in the square bracket whatever you want to extract whatever the object named remember we have this request.body similar we have request.params in case you worked somewhere in the next.js not next year's express.js similar to that you have to grab your ID it could be user ID it could be ID whatever you want it could be anything but it needs to be in the square bracket but for example if I go ahead and say ID ID this is not alone enough this since is a folder and every folder on the front end needs the page known as page.tsx you have to create that so I'll just right click and create a new file and I'll call this one as page not a page page dot TSX there we go now inside this page.tx you will be able to grab it how first I'll go into outside page because we have this already created for us I'll copy this and I'll go into this page.tsx inside the square ID yep the square id1 so this is going to be the page where I'll actually grab everything now notice here this is not my client component I haven't said use client or something like this I'll just go ahead and call it something different because profile page there's already profile page although it's not going to bother me anything but I don't like it I'll probably call it as user profile not even page user profile whatever the name you want to give it's not going to bother you all right so how can we grab these parameters really simple you have to Simply say I want to grab some params that's it this prompts needs to be of type any but if you know the exact type strings whatever you're passing on you can get that type but since I'm not focusing too much on the typescript so that everybody can understand next.js so we'll simply go like that now how we can actually grab this so just here in the profile page we'll first uh add some classes here so that it can be easily visible so we'll just grab text Dash two not to 4XL we need we need big one for Excel text is already white yeah I think that's enough now just go ahead and inject your variable and all you have to go ahead and say is params.whatever you are grabbing in this case we are grabbing ID so just grab the ID that's it now let's go back and probably we have got some errors I know it is compiling successfully let's go ahead and kill this probably I saved it at the wrong time all right compile successfully now let's go ahead and grab this come on take so much time so we can see the profile and ABC I think we should actually span this up all right to show you in a little bit better manner although it doesn't really matter but I'll just go ahead and do this I'll cut this out and I'll go ahead and say span just like this paste it up here and I'll add some classes onto this one and we can close this down and we can say hey what do you want I want first of all padding off two and I want it to be rounded I want a PG Dash golden do you have golden yeah they don't have golden we have to go through with the orange and the text is going to be black I guess text Dash black you can use your own CSS of Tailwind there we go we got it we just need a tiny bit of margin on left we'll just grow with the two there we go so although it was not intended to make it look like that I know what you're thinking don't think that it's not that uh so I will go ABC and we can go one one two two three three whatever you're grabbing it's gonna grab it from there so this solves a lot of our future problem that we'll be having looks nice absolutely gorgeous there and simply if I go on to just the profile one page is also getting served there but that is this page this page that right now here this is a different page and once you have this uh some IDs after this like 9988 whatever this is a difference page that is being served so this actually sums up your Basics about nexius I know this is a really really long video but again uh we'll be having a really long short videos about discussing about next years and everything now we are in a perfect position that we have our folder structure ready everything is almost ready that how we want it to be our DB connection is also ready now in the next video or if you're watching in continuation that means just to skip forward what I'm going to do is now first we'll create an API how we can create a back end I'll just close a lot of things here okay so let me just walk you through what we are going to do next up in this one so the next plan is really simple we simply want to work with the back end now we have worked quite a lot on the front-end part handle the parameters file structure directory structure client component server component a lot of things we have discussed now the next goal is how I can design apis that will make me a full stack developer almost so in in the next video or just a fraction after if if you're watching in continuation next up we are going to take an attack on building the apis we'll start obviously with the sign up API the most basic will extract the data and we'll sign up a user and throw up into the database that is all what we want to do and that would be a fantastic start and then eventually we'll do login then mailing verify tokens and all of that but slowly slowly we want to take enough of the gradual that it's enjoyable it's fun and all of this so I hope you have enjoyed this one and in case you are watching it along with me then hey let's catch up in next video if you're watching it in the next one just the moment of pause and let's catch up on the other side all right hey there everyone hitesh here and welcome to another video or another part of the video in case you're watching in sequence and it's a next year's complete full stack course that you're watching on YouTube of course so in this video I'll walk you through with the next step now this video is almost a part two so in case you have in case you haven't watched the part one go try that or in case you are jumping directly on this portion please don't it's not a good idea so we have seen that how we can handle the front and part a little bit more like a file structure we haven't learned how we can make a web request from the front end to our backend because our backend was not ready in this particular section we are going to learn that how we can create models which can talk to a database we have already configured our database we have already injected our environment variables learned that how we can have a database connection file which can which needs to be called in every single API call because edge cases not edge cases Edge functions which actually run so they don't have a constant database Connection in this we'll start by creating a simple model and that model will be a structure of our database and there's a lot of ways how you can design it I'll walk you through with some of the quirky things and interesting things about it you'll definitely enjoy that part and then we'll directly jump into the sign up portion so that we can write a simple apis which can or basically controllers for API which can do the logical part take all the data and send it to the database that's our first goal then we'll figure out what to do next up so that is how we'll be going now let me take you on my screen first so this is our screen that's where we have been enjoying so notice here the models is right now totally empty we have almost nothing in our model so it's a good idea good time to create a new file into it and feel free to call it whatever you like and why is it not listening to me why is it not listening to me so just give me a second probably my keyboard is not working yeah should be working now yep and we'll be calling it as user model M should be capital or not I'll keep it capital user model dot again this would be a simple JS you can make it TS as well I'll make it JS usermodel.js because there is nothing too much sensitive going into this one first question who can talk to my database obviously Mongoose so go ahead import Mongoose that will be coming up from Mongoose now how do we create it simple const let's call this one as user schema and that is going to be simply new Mongoose dot schema and there we go basic just like this now before we go ahead and work about rest of the things let me tell you something really interesting now there's a special way of how you export your models from a mongoose in case of nexjs because there are chances that the model might already be created in the database so in most of the cases in the express and all that the model file doesn't run again and again automatically but here we need to actually import this file quite a lot of time and we need to take care of the cases if it is already created then use that if it is not created just create that so there's a lot of ways how we do that one of the very common user built syntax is just go ahead and take a user and simply go ahead and say Mongoose dot models and then create this users because remember in the mongodb even if you call this in the Mongoose or the model file as user with a capital u everything is lowercased and is pluralized that's mongodb thing it does it for everything so that is the first thing if it is already created use that otherwise we are going to create our own model so we're going to go ahead and say Mongoose a DOT model demo model and then we will be creating this is going to be a simple model which takes two parameter what do you want to call it in the database and how does it look now usually you'll see that something look like this and again that's totally fine and you can go ahead and call it like this as well there is absolutely no problem in that case why is it giving it like that there we go why is it bothering me this much there we go or if you wish you can go ahead and call it as lowercase users that is also totally fine anyhow end of the day it is going to get created as user slower case and once you are done with this then you can go ahead and Export it as a default so export default user that's what I prefer that whenever I'm taking this user I always call it as uppercase because it has a lot of superpower it's not any ordinary variable it's coming from from Mongoose so dot save method find one there's a lot of features that comes up as a built-in now apart from this I'll not talk too much about the Mongoose superpower because Mongoose definitely itself deserves a course but I'll just go with the basics for example I'll just go ahead and say hey I'll be having a username and that will be of type string and we're going to go ahead and required it true and provide a customized message of hey and we'll also keep this uh username as unique so that will be nice and easy we probably can have a trim but I'm not interested in that already too much and then we'll be having email will be having a type of string and required true please provide an email and let's keep emails as unique as well that is it this much is already more than enough all right now next up we'll be having the password which will be a type of string and require true please provide a password that's it don't want to do any further into the password category now apart from this you'll see that in these kinds of model there are common fields which are there for example uh usually I go with the role because I bring my roles from an enum file constant file from where I can bring the enums like is admin manager student teacher there's a lot of roles with that in this case I'll drill it little bit down so that it doesn't create that much of confusion all the introduction grade application I usually keep it as a role but I'm going to go ahead and use this one here first of all is verified so is the user verified by default no it is not type Boolean of course default is false so my user is by default not verified I will send him an email in which all he'll click a link and once you click the link then only he'll get verified similarly as I was talking about the role I'll just go ahead and call this one as is admin and is admin will be like type Boolean default will be false and probably that's it now again as I mentioned I usually don't go with the is admin I usually go with the role because that's a better approach but again will not go about the better approach or data modeling in this case that's uh very basic now comes up the interesting part now what a lot of people does is they try to keep their tokens as a separate model itself I don't do that usually I try to keep them all separate because I think somehow that they are part of user itself and mongodb is a document database so I think this is a better approach okay I could be wrong you could be right so there's a lot of debate about it so the way how I do it is I keep a couple of string like forgot password token and this forgot password token is usually a type of string and I keep on updating the values now along with the forgot password I keep the forgot password token expiry so forgot password pass word token expire nah not happy with expire I go with expiry expiry which is a type of date similar to that I do have a verify token as well very no no suggestions please give me a suggestion that verify token that is also a type of string and similar to that verify token expiry now how does this token works there's a lot of mechanics into that and I would love to share this but this is the whole our model is now complete now let me take you back on our excali draw and show you that how actually the token part and everything works so for this we need to understand what are the three parts of our application so the three part of our application uh the first one being the first one is the user wherever or it would be better to write browser or I'll just write user slash browser so whatever makes sense to you so this is our user and browser so this is first part of it the second part of the application is our controllers or you can say our apis uh I think API would be a greater name but obviously I would love to call it as controller but I think in this case API is also fine and the third part is actually our database where all of these things are stored so if I go back all this data about is admin forgot password token and all these things are actually kept up there now how does this forgot password token or verify token works that is also a very interesting use case so I'll just walk you through so this thing uh known as your verify token this is nothing it's just a field which holds some string values now obviously these string values are encrypted that's why we brought in the B crypt.js and we love to store the complex things the way how it works is in your API call if somebody makes a call to your let's just say user slash verify so you simply generate this verify token and this verify token is going to be long gibberish string something like this this is how it usually goes so this is let's just say a long gibberish thing now this is generated by API now there are two portions of it now this only alone is not generated this thing is actually one portion of it is updated into the users database now our this model has something inside us right now it is empty but as soon as somebody hits that API call that long generated string is actually copied and is saved into database of that users now one portion of this is actually sent to the user as well all right now API doesn't keep anything it's just a business logic it doesn't have the capability to save anything it just simply goes ahead and sent one copy to the database one copy to the user now what next now what next is once somebody actually verifies that this token actually comes back to you now how it comes back that's we'll study in this lecture but this might come up into a URL you can extract it from a URL we know how to do it it might come up into a request body as well that's okay we can also handle that part but the whole idea is this token actually comes back to you now once this token comes back to you in the database we have to find that where this token is just like we can find a user based on email just like we can find a user based on ID we can also find a user based on this token yep we can do that now once that particular user is actually being found and let's just say you have found this and there is this user now this user information comes to your API based on this token now once this is actually being done you actually invoke the API Logics and simply go ahead and certain Fields into it for example we are talking about verify you go ahead and update verify as true so now this is a verified user so this is how the basic logic of how verification works somebody clicked on it you know the request is coming up from that token now apart from this you might have noticed that I also keep the verify expiry as well because I want to give the user only a certain time duration when this verification can happen I don't want it the verification that I send an email today it happens 30 days after that so I'll definitely don't want that that's why I keep that expiration I always bring back the user only basis on that the token should match and the time should be certain limit in under certain limits I'll walk you through with that as well so this is the base case of it now with a similar way your forgot password token also work I'll walk you through with that scenario as well because I can understand this can be complex so I'll again retrade that part it will be a revision as well so I'll just go ahead and remove this this this and we'll just get back to this one all right so what happens in this forgot password token we can now remove this part okay so we have a forgot password token again what is the forgot password token nothing it just encrypted a long string a hashed value that's it so this hasht value looks something like this this can be something like this with few numbers really long strings something like that and what's the job of the API is to send the copies simply it takes one copy send it to the database I'm going out there we go and this one copy is sent to the user browser it doesn't keep anything for itself it just removes it API cannot hold it so now user had this has this token of forgot password and the DB also has this token on the forgot password again this is sent to the user or the browser or you can say to the email that is also a good word to have here so now this is being sent to the email now what next obviously we have to search it so now this token will come to you from the user side so user will hit a route maybe forgot password whatever the route is it will give you that a particular long token again I repeat this token might come up into the URL in the request body it doesn't really matter in this case we are talking about this forgot password so obviously with forgot password I need this token and I also need what is the password that you want to update so that I can add this into my field with my logic so that is there the logic is same for verify and the forgot password now what I have to do next I have to take this long string and I have to search it here in the database just like I can search for email I can also search with the token and this will return you an user entire user who is having this token when this user actually comes to the API the API is perfectly capable after matching the token and the expiry that hey the token is valid the expiry is also valid then it simply goes and update one field so I can simply go ahead and say hey update user dot password that gets a new value whatever the new encrypted value user has given you a value you encrypt that and you update that so you simply go ahead and simply say updated password password if I can write that updated password so that that is all you have to do that's it you have updated your password so this is behind the scene logic of how the verify password Works how the forgot password work or any other token based mechanism that you are used to this is how all of them works quite a lot of theory isn't it uh yeah but I hope that you are enjoying this I hope that I'm able to explain this so much Basics to you and you are enjoying that all right so now that my models are all done now it's time to open another file my models are there my database connection is there notice here the database connection I can just call this connect and connect to any time with the database now what's interesting is go into the app and inside the API we have users and inside that we have the sign up and we have this route now this route is actually empty right now in this case but you might be wondering can I create only just one file in the sign up yep there is no other file you can create and this might be bringing to your question another question so I'll bring this up a lot of notes Here that I also handle a lot of things so for example if it is slash API slash users slash sign up if this is the case then I have a lot of things that I handle here for example uh on the same route how do I handle the get request or the post request or the put request or the delete request so how do I handle all of these cases now there is a nice way of how you handle this the standardization of the apis I'll not talk about too much of the standardization of API that again requires a separate course in itself but the ideal is that you handle all these things via the request method a lot of time when we actually teach the tutorial it's okay then we go ahead and simply ask them to Simply create routes with a different uh controllers like for example create user or maybe something like we asked to create update user but the whole idea is this is not a standardization approach it's okay for tutorial part there is no harm in that but if I go ahead and say simply user then if it is a get request I should be getting a user if it is a post request I should be adding a user if it is a request I should be updating a user delete request then I should be deleting a user so this is a standardized approach and this exactly is being followed in the next JS as well a lot of behind the scene details so all we got to do is simply write the functions for the Post method get method and all of that now the syntax is a little bit you have to first get it and understand it once you get one syntax all of them are exactly same so first we're going to go ahead and simply bring the connect that's the most important thing so connect and the first time you'll be seeing the default import statement so yeah this is the first time you'll be seeing it from if I can write that from and this will be coming up notice here you can write at the rate yep that's your root directory and then you can simply go ahead and say Hey I want to go where should I go what's the name dbconfig okay DB config and inside the DB config there is this DB config file okay this is dbconfig.js I guess let me just check this uh dbconfig.ts although you don't need to import the TS but sometimes I have seen that there are some issues in bug because I didn't mention a DOT TS a very rare very rare sometimes it even gives you problems but it has happened to me couple of times okay the first thing that you have to do is simply go ahead and connect that's it that is it don't need to do anything no then catch it just needs to connect but we need couple of more things as well the first obvious thing is user we need model so that we can add things into the database and that will be coming up import user and that will be coming up from at the rate app models and users make sure you double check this because I have noticed this this actually creates a lot of problem just now you have seen because our model is not coming up from App model user our model is sitting somewhere else and that's totally allowed you can keep it here as well there's no problem in the app models and user that is also one way but we're keeping it all totally outside so in the models and then we are getting in notice here this is still going to give you a problem the reason for that is you need to give the file name so inside the model we are calling it as user model so make sure you are cautious about that the user model that should be happy okay now the next thing is you need to grab request and response so in case you have worked with Express or anything of a backend you notice everything actually is dependent on request and the response you need to take something send something in the next JS you actually work with it little bit different we go ahead and First grab next request yeah come on suggest me here there we go next request and we also get next response so these are the two things which actually helps you to do all of this they all comes from the next server just like this we'll be encrypting some of the passwords so let's go ahead and import decrypt Js and that's coming up from B crypt.js and what else I guess that's it uh this one we don't need JWT because we are just talking about sign up so that's not required uh it's declared but never used we'll use it no problem there all right so now this connection and everything is done so I'll just keep it there outside so all the connection everything is done now the way how you define a syntax of handling a post request because data is coming to us so we'll first say export and then we'll be using a sync because obviously talking to database database is another continent it takes time and then simply write the function and then what request you want to handle is it a post request is it a get request is it a delete request so whatever that is you just handle that in my case post makes sense so I'll just use that then you simply go ahead and say that hey I will be handling a request you can handle both request and response but there is no need of handling everything here in the first parameter you can just say I'll handle the request and then say hey I'll get the net next request just like this and there we go that's it that is how you handle and if you want more things to be handled just create another function which is post which is get you get the idea you get the idea now in here the simplest part is to handle the try catch via the try catch so I'll just go ahead and have the try catch and the error is going to be of type error type any by the way not ideal case of handling everything with any now how we're going to return a response that's also super easy you simply go ahead and say next response and we will not be handling the errors like this although you can there is no hard and fast rule but I prefer to send a Json response with the error message and status code I think that's that's a better approach so that's the first part of it how we'll be handling now the next question is how we're going to grab data from the body in case you have worked with Express or something request.body was our friend which actually does that it is almost similar to that but in here you actually have to await a little bit so await a request it's not body.json don't go with these suggestions it's Json just like this and we can hold this into a variable let's call this one as request body just like this and lot of example you'll see calling it as request.body I also picked it up from the doc so yeah all right notice here it's request.json just like how it works now further down this you can actually extract all the variables that are coming in so we'll be doing a little bit of the destructuring so from request body we need to extract some stuff and what we'll be extracting is const let's grab some stuff from request.body I know that from front-end side I'll be getting a user name I'll also get an email and I also get a password because this is the first time I'm registering a user now again it makes sense that you first go ahead and do all the kinds of check if email is not there if username is not there if password is not there then go ahead and throw this response although we have handled a lot of these error cases required and all of that in the Mongoose itself so in the error response they'll be getting a good message and all thanks to the custom messages that we have written here so it is handled a lot but not entirely so I highly recommend you do on your own validation I'll just move on to the basic validation but before that I'll also do a console log of uh entire request body so that we can see that what is happening not ideal for the production grade so remove these console logs but I'll just keep it to check things now I'll go ahead and first check check if user already exists very simple basic check all I have to do is use the superpower of this user remember this user is coming up from the Mongoose so this has a lot of superpower and it can find a lot of things for us so for example it will say find one and what do I want to find I want to find an email so I'll just go ahead and say email and that's it I want to find most important thing is this will return you a query if you don't put up in a weight so this is a common mistake that a lot of people are doing these days posting them on every single platform so put up in a weight because it's a database call and we'll just say simply user now if this returns me something that means user already exists so all I have to do is if user is there then simply go ahead and suggestions please no suggestions we're going to go ahead and simply say return next response come on now suggestion there we go Json that user already exists so this is nice and easy so there we go again you can make more checks onto this one I'll not do more I'll just go ahead and hash the password now hash password again this is what the basics will be doing so we'll be first creating a salt which is the basic and after the salt we need to create a hashed password just like this uh feel free to use any number of rounds that you want to have so the B crypt.js library is responsible for creating the salt and if you'll read the documentation you'll find it exactly same the Gen salt will generate a salt with the 10 rounds and again different Frameworks and libraries use different rounds for example Ruby on Rails use 12 rounds nexius and react not react Express and Mongoose mostly use 10 so again it's totally up to you a hashed password we are hashing password we have to provide two parameter to baycrypt.j Hash the first is the password which we are grabbing from the request body and then the salt value so absolutely simple there is nothing too much Panic about it now we want to save a user in the database so we have to create a user accordingly so all we're going to do is create a new user just like this this will have a username this will have an email and this will have a password but not the password that we're getting from request body but the password that we have encrypted the hashed password so we'll be going like this so we'll be saying hey let's just go ahead and go like that all right now we'll be storing this into a variable first so let's just call this one as const new user because it's actually our user to be saved new user whatever you like now this is nice and easy now all we have to do is save this to the database you can do it in one line as well but I prefer to have more uh explainable approach of this thing so I'll just go ahead and say await new user dot save that's it it's going to save let's store the response into a variable maybe you want to save it have a look on it so I'll just say saved user again this is a little bit of a verbose approach but you can do this All by shortcut as well but it's a tutorial I need to explain the things so I'm just keeping it a little bit more verbose now after this maybe you want to do a console log of the saved user that's totally up to you I just keep it so that I can show you more things and that's it now apart from this all we have to do is simply return a response maybe in the response I'll just go ahead and hit enter here and one more okay okay let's just go ahead command Z because I think that is messing it up a little bit yep it's messing it up I'll just remove it like this and there we go so I'll say message is created user successfully then we'll get no not like that success is true and maybe I want to throw in the saved user uh totally up to you how you want to deal it with this I just want to go like this all right so this is my Approach of saving the user and as you saw that it's not really that difficult now we understand how this is going to be all taking here in the database and absolutely but one thing that is still missing is we are not able to send any data to the page we have to actually work on this page as well because it's right now not going to be doing anything at all so let's go ahead and take care of this so right now this is the basic page that we designed a moment ago now a couple of variables that needs to come once the user will be signed up I need to push it to the login page for this I will be using a router so notice here this use router now it will come in handy so I'll say const router use router I'll use that in a minute I've already created my state so that I can actually go ahead and use it but I'll be creating couple of more states which will be helpful okay but again you can optimize this a lot more and a whole lot of things can go on so I'll just go ahead and create one more which will be button uh disabled so there we go I'll keep it by default as false button will not be disabled I'll not do much here I'll just change the name of the button on our front end so if you remember on the localhost we have the sign up uh my hopefully my server is not running I guess yeah it's not running I just push the code on the get that's it so by default it will be saying just sign up so I'll be changing the text only based on whether the button is disabled or not so I'll not do too much but you can go all fancy with it so that's all the basics we'll be doing all right now coming up on to the part that how the things are going to work now this button state is all just a fun that we are doing to understand a little bit more about the react use States and all of that now this button will be changed on like usually what how you want to utilize this button disabled so this will add some classes on the button so nobody is able to press it but as soon as the button disabled is gone that means somebody can press it one ideal case is when there is some values in our field so one case one a hook that you can use for this is use effect so what is going to happen in the use effect if there is a user uh I'll just first enter end it so there we go it is dependent on this user so this is a dependency array that how should I how how often should I run this use effect and I'm able to do all of this because I have actually enabled use client and I'm doing this just to show you that I can do it so this is all dependent on this user as soon as something change in that that will run this use effect or whatever the code you write inside this use effect callback so I'll just go ahead and write the very basic of it so I'll just go ahead and say if user dot email so there are a lot of fields into it email email and I'll just check the length of it if the length is greater than 0 and wow suggestions I love that then I'll check the user.password length is greater than 0 and the username length is greater than zero then I'll set the button as disabled as false because if the length is greater than 0 the set button should be default to false let me just check that quickly all right and in other cases it should be enabled yeah because it is set button disabled if it is true the button is disabled ah get it sometimes you need to evaluate yourself as well all right so set button disable to true in other cases all right so there we go we can run this and again this use effect is not available so I need to go to react and say hey we will be bringing use effect and there we go now we can do it and based on this we can check out some fun stuff here as well so I'll just go ahead and change up the text here sign up here and I'll just cut this out and inject my variables and based on a button disabled I'll check that if there is a button disabled then I'm gonna go ahead and do something otherwise I'll do something else so if disabled button is true that means button is disabled so I'll just say no sign up and if the button disabled is false that means button is enabled that means this time I can do sign up so there we go just really basic so we can go ahead and save this let's try to run that server it's been a while so npm oops npm run Dev and let's see how many crashes we are going to see always expecting the crashes all right looks good decent all right so yeah take some time okay so we'll do a sign up and there we go so it says no sign up all right that's good because right now there is no value so if I go ahead and say a ah man the reason why you are not able to see it is because there's a text color so in all of this come on I have to do this for all of them yeah okay no no other option we'll just go ahead and say text Dash black there we go we have to do this for everyone text Dash black one more one more not that much of a big problem text Dash black there we go so as soon as I save this there we go now I can see a and no sign up still then I go ahead and a and then I go ahead and a and it changes to sign up now I can sign up uh definitely I'm not checking much of these fields neither on the backhand side or front-end side that what should be the minimum length of password we can do a lot of validation but this video is little bit beyond the validations all right so this is the basic that we have gone through with it now let's learn that how we can actually utilize the sign up method because we haven't talked about it we have this extrus giving us the red squiggly line but we haven't worked on that all right the basic and the most easiest way is first have the try catch handle the catch part and that's the basic sometimes people actually get this uh on loading as well maybe you want to show some loading let's go ahead and do this loading as well let's go ahead and have a loading text as well so const and we'll have a loading set loading by default it's false So based on this we can actually render some variable as well uh maybe in place of sign up we'll just go ahead and cut this out inject a variable again and we'll just check for loading if loading is true we'll if loading is true we'll do something otherwise we'll do something so we can just go ahead and say sign up and in this we can say processing you can have better Spinners and loaders but my goal is not to have you parked down with 1000 different libraries but to show you more about next year's we can see this is processing right now because loading is true somehow uh loading all right why this is loading okay let's check if loading is true oh my bad if loading is true this should be processing processing and if it is not true that means loading is not happening that means user can sign up all right so at least this also gives us a check that you can flip the switch all right good good enough good enough so let's go back here in the try catch and let's also add a finally here you rarely see the implementation of finally but in this case finally makes sense because no matter what happens loading needs to go away this is the common syntax now as soon as you go first let's handle the catch part because it's easy and in case you remember I actually asked you to do something we'll actually handle that part as well so if you remember I asked you to have this react hot toast this is your assignment you have to take care of how this Library actually works so the way how it works is you simply go ahead and say toast and then error and you can just give it error message that's how the basically it works now in here it says hey I know I have no guarantee that error will have a message so I'll just go ahead and write in any here so that it gets away the errors but also I love to get a console log because I know I have I have not perfectly implemented react hot toast it's assignment for you but just for the sake of so in this case we'll just go ahead and say sign up failed and we'll also get the error Dot message in the logs now this log message will be available to you on the user side in the browser because it's a use client all the console log messages in the API will be available in the bottom section the terminal because it's on the server side that's one difference as well now let's come back on to the tripod what do you want to try first and foremost what I want to try is set the loading that's the basic set loading as true all right now I want to make a request so I'll just use xeos and I want to make a post request from the xeos now make sure you provide this URL very carefully you don't need to provide the entire URL the next JS is already configured for hitting your own route so slash API slash users the folder you have defined let's check it one more time API slash users so there's an S and then you can simply go ahead and hit a sign up route so I'll just go ahead and hit the sign up now I'm also taking along with me all the data which is user which is stored in here so I'm just taking all of this and obviously once this is being done this will take some time so I'll just go ahead and wait for this one and I'll hold the response in some variables so I'll just go ahead and say response punch response there we go all right so this looks okay now I also want to see that what kind of response is coming up so it would be properly better for me if I go ahead and say sign up success and I just go ahead and say response.data I should be getting a response.data.message as well but let's just say I want to get a response data only and then the most important thing is I need to push the user onto a new page and that is exactly why I have this router sitting behind sitting idle doing nothing so I'll just go ahead and say hey router just go ahead and push the user to slash login make sense all right so that is it that is it if we haven't mistake done any typo attempted import error xeost did we made any mistake typos and why is it having an issue because it shouldn't be like that there we go now it should be happy why did it added these extra curly braces no idea about that all right so this should be all let's hit a refresh just for the sake of self-satisfaction I'll just go ahead and add a username with the name of one email will be one at the rate gmail.com and the password will be one two three four five six and let's try a sign up processing working nice we have been redirected that is also nice let's go ahead and check out in the database in the database and oops uh so let me go ahead give me a second I'll just go ahead and sign in again probably just redirected me I need to actually use my email so I'll just keep you up here till the meantime you can just hang out with me chit chat with me uh no worries it will just take a seconds I'm just logging it into my detail I don't want to expose that email so that is the only reason I'm just having this ah didn't bother it much so let's go back up here and going back all right so this is where we are and we'll just go into the database and there we go we can browse the collection what did we name this project and there we go this one we named it as test all right we should be naming it better but anyways this is also going to work so we can see we have one one at the rate gmail.com is it visible yep little bit is verified as false is admin is false the rest of the fields since they don't have any value they are not being displayed here let's try with one more user so I want to go with the sign up page let's sign up to as well two this will be two two two at the rate gmail.com at least we need two users one two three four five six nice very secure password sign up this time it's quick because obviously first time it takes time and you get the idea it is always like that let's hit a refresh and it should be getting us two users hopefully there we go so we can see that it is not that much difficult to actually get the data into the database let me go on to code base there we go and we can see that some of the users that we are getting these users are actually on the backend side so we are getting that but not only that we must be getting some of the users in response on the console as well there we go we can see sign up success which gives us an object and this object has a message which is coming up our own message from the backend user created successfully then we said saved user is getting us that's nice and then we have success true they can be in any order so it doesn't really matter so there we go it's working nice and we can also see the difference between the messages that are coming up some are being read on the backend side some are on the front-end side if it is a console log in the use client obviously it will be in the browser otherwise if it is in the API route usually that will be on the back end part of it or the back end side of it so this is how we can actually go ahead and and create a simple sign up you can say uh now the next thing that I want to do is uh similarly take down the route for the login as well the login is almost similar you'll find so much of similarity there but I'll still do it in front of you so that you get more idea uh we'll grab all of this because yeah we'll be a little bit uh lazy you can say there's no good word of putting it all right so I'll just paste it so we have all the things make sure use client is the most important thing again this is all happening in the route not in the front end part we are still in the route of login so the first thing we have to do is connect with the database every single time we have to connect I have spent a little bit good amount of time in debugging when all I was doing is missing disconnect all right so connect who said to bring it to you from HTTP 2. I am bringing this from ah why oh my bad we actually brought this in from the wrong place my bad my bad we should be bringing in from the sign up this is where the real stuff is so copy this and paste it there we go okay so now notice here this is the B Crypt this saying uh cannot find a declaration file for module the whole idea this is saying is I don't know the types about it so all you can do is click on this bulb and say install the types about the big crypt.js once you do this it actually install additional types for you and get rid of the error no need to worry about that part in case this red squiggly line is bothering you too much get with that or fix your linting okay uh this is good all right so now we can go ahead and connect there we go connect in with the database again this is my login route so async export a sync function uh post is good request header looks great suggestions love them it increases my speed of explaining and writing the things so much okay all right the basic starts again so there is a try catch the catch is any and in here we can just go ahead and send any response that you want we want to Simply return a next response so return suggestions no suggestions requestresponse dot Json error message status 500 happy with that done with the catch part now coming up on to the tripart most of this is going to be very similar what we have seen But there are some changes not too much first is how we can get data from the request so it's really same request dot Json this will be giving you all the data so how we can grab this we can grab request body from it and we'll be destructuring some values so let's go ahead and restructure email and password from request.body uh basic so there we go why are you bothered again all these structure elements are unused come on let me type first too much aggressive let's go ahead and do a console log and we'll be saying request.body that's fine okay to give us just the detail at whether it is working or not now obviously when we are logging uh into this one so we have to check whether the user exists or not so check if user exists or not otherwise we'll throw him in some error so we'll be saying that hey how can I do it again the user which has all the superpower I can go ahead and say find one and this is bad find one and I want to find it based on the email that's it that is all I want to do if I found it I'll just go ahead and store that into a user variable but since this is a database call make sure that is awaited all right looks nice and if I don't find any user then I'll just request send a response that user doesn't exist so much time is being saved all right but don't rely totally on suggestion they are horribly wrong sometimes all right so what I want to do next this is a login so I've checked the user now I want to check the password all right so I'll just go up here why are you bothered I have used the email just here email does not exist on Typecast it exists I know the email is coming up and I think we need to handle an await yep my bad almost missed that okay sometimes the linting is good okay now if you want to check if the password is correct that is super easy we can simply go ahead and validate the password based on the bcrypt.js it has a method which says dot compare and we can compare the password which is coming up from the request.body and if you remember this user is coming up from the database this is also bringing the password there is a field in the model user dot password so I don't have to do any magical thing bcrip.js can compare it it knows the stuff how much the default values and everything so it will handle the stuff I don't have to worry about that now if the password is not valid I have to send a response that hey you have an invalid password I won't be doing that now in case that is all done now let's prepare the data because the way how it works is it's actually really really simple if you have never done this kind of a thing it's actually super easy to work on with now once everything is verified that your user exists your password is correct then we actually create a token this token is created by uh simply Json web token we encrypt that obviously it's not just a plain token and we send this token into users cookies not in the user local storage because you can manipulate the token there but we can send the secure cookie to the user and then later on whenever we wish we can access those cookies as well so it helps as a Bridger to verify whenever the user we want to verify it just has the ID of the user but it can have a lot of payload into that you can send a user ID email admin type whatever you wish you can send all this data as a payload to that that's exactly what we'll be doing next all right so moving up here first of all what we're going to do is create this token data so I'll just go ahead and say create token data now how we are going to do this is we'll be first having this ID and one more important thing whenever you look into this notice this uh every single time a user is created it's with underscore ID that's what the ID is there so this is what exactly I'm bringing in although every single detail you can bring in from with this ID again you just have to type in this find one that's it based on ID you can find anything but it is no harm that if you want to send extra things like user dot a username or maybe you want to send his email I'll just send this much but you can definitely send a lot more than this now once you have done this then obviously it's time to Simply go ahead and create the token and send this token as well so first and foremost let's this is token data only we haven't created the token now we are going to go ahead and create the token the token this is how it is created uh all we have to do again notice here there's a problem why because suggestions don't always rely on them you have to actually import this so I have to say import JWT and that's going to come up from Json web token again could not find the Declaration so I'll just click here where's the bulb here it is and install all the types don't want to see the Reds quickly lines okay so all it does is obviously uh the process.env JWT secret key that's not my key my data is actually stored I have actually created a sample file for you so that I don't have to Peak it again and again where it is somewhere here uh sample.env uh so hitesh subscribe yep you should do that my token secret is here so I'll just copy this go back here this is not my this is how it works but still it will give you some of the issues that hey what is this and all of that I'm 100 sure that this is coming in so I'll just put an exclamation That hey I know this is coming in so all you have to do is this takes some time to create the token so make sure there is an await here JWT has a method of DOT sign to create signed token it takes the token data this is all the data that we have you can directly inject a object here there is no problem and then process.env.token dot secret how long you want it to stay there expire in one hour or I'll not do one hour I'll stay for one day at least totally up to you how you want to do that now all we have to do is token is created but this token is not yet set into the user's cookie the way how we do it first there are a couple of steps involved is we have to create a next response so we'll be just going ahead and say hey we want to have a response we are not sending this response yet we are just creating it and the way how we create it is simply uh next response and it will be dot Json there we go I have an object like this there we go and in here we'll say messages login successful that's a nice message and success true I think that is enough but now the great advantage of this is if you have this response this response right now is a type of next response which can actually go ahead and access your cookies not your the user's cookie so I'll just go ahead and say hey response did I mistyped it yeah rapunz response response come on too many suggestions response dot cookies there is a s here don't go with the suggestion bad suggestion here response dot cookies and you can set the cookie similarly you can also get the cookies so I'll just use a set here and for this I'll be using token token HTTP only yeah that's that's fine I would love to have it on to a separate line I think that will make sense for me at least there we go we don't need to set even the path that is obviously cookies yeah Escape that escape that don't need that all right so this is what we have now we have response dot cookies being set now this response is already send the cookies and everything now you can return the response back return response now as you'll be returning the response it will be doing all the things it will be sending the message it will be handling the cookies all the things are being done so that is how it is being done ah quite a lot quite a lot but I think that's good now just like we did here uh we need to now go into the login page .tsx yep we haven't actually worked a little bit onto this page so uh now we need to do exactly all the same kind of thing that we did in the past yeah Basics just like that all right so we'll start this time we'll do it a little faster because I think we have studied a lot all right so first thing uh router because we'll be pushing it to some different page so const router use router there we go first thing done we have got the state we'll be getting the button disabled and the loading as well so we can copy this all suggestions I love that don't need to even copy paste that loading there we go okay all right this is all done very quickly on login okay how do we want to handle the login part first what we want to do is exactly same use effect hook we want to actually use that and since this is a use client or the client side or the client component we can actually do this so use effect and I'll just close it first and then the user it's dependent on the user and it's not available so react please give me use effect there we go and in here we'll be using the exact same logic so let's just go ahead and use it like this if user dot email now it's suggesting me nicely there we go and we can also have an else part and we can have set button disabled to true button disabled is true that means button is disabled okay that's correct and sometimes confused in that so yeah re-evaluating yourself is not a bad idea okay although it is giving me the entire bunch of code but I'll prefer to write it so try catch catch error would be any and all I have to do is simple assignment for you but first I'll do a console log so that I also know that what is happening so console.log login failed error.message that's nice but we'll also do the toast so that you can verify the toast messages and stuff right now the toasting is not working I have not properly Incorporated it but hey and we'll also go with the finally how can we forget that finally set loading uh bad there we go es like this and a suggestion no suggestion there we go okay so we have finally this set loading as false that's nice okay Meat part the how we're going to handle this request super simple first start your loading there we go and keep it as true so that we know something is happening then we have to use a weight because it might take some time and then we have xeos axios will make a post request here so super simple where it is going to make a post request slash API slash users slash login that's the route it will also take the users with them so that is nice and easy and there we go and looks like there's an extra yep there we go we also want to store that response so we'll be saying const response and again you can dump down this response into console log you can post up a toast message whatever you like I'll do a console log because this is important and we should be seeing this data as of now learning phase learning phase and then obviously we can hope first before we do router push this is great suggestion by the way but we'll be doing a toast dot Success login success you can Implement that just a few lines of code and then we're going to go ahead and router.push we don't want to push it we will be pushing it on to slash profile Maybe yeah do we have profile pages did I taught you that uh yep I I taught you that yeah profile page so we'll be redirecting into profile all right so let's see if this actually works in action or how many errors we are going to get okay okay xcos is not exported this is again xcos problem there we go save this hopefully things are okay expect errors that's the only advice I can give okay now we are on to the login page just to refresh can I go into sign up yep visit login yeah working nice so the email is one uh my bad email also needs to go ahead and work with this nobody is able to see this because of my bad CSS text Dash black and the password is also going to have a text Dash black should be okay now also let's since we are here let's also change the thing so login will be based on not like this we'll be having a loading so if loading is true that means processing otherwise we are doing what we are login okay and button disabled I'll not do this you can do this all right so I'll just go ahead and say one at the rate gmail.com and we'll be having one two three four five six the securest password ever let's try login and no I don't want to save it did we call it even uh there we go on click login on click login so all right so this should be working do we have any data okay so we are receiving the data till here that is nice but it's not getting redirected okay we should be getting a redirection login don't want to save this let's check out and let's see what are the mistakes that we're doing console log okay the server is okay so we are getting a lot of Errors probably we should be going back onto the code file there is a lot of okay uh we need to check out what is going on wrong API slash user slash login that seems to be correct and since we are receiving the data on the backend side that means at least this one two three four five six one at the red gmail.com do we have one at the rate gmail.com and the passwords are coming in okay at least we are getting this on the backend side so now the problem is technically on the backend side so two times we have requested the body and we were able to encrypt that and we were able to actually get this saved user as well okay oh I'm checking on to the sign up route I should be checking into the login route I should be in the login route did I made a mistake okay so here is this this is coming up from here so we are getting this request.body and now we are getting this so we should be actually checking this token data we are getting the user no user here we are getting the user again this debugging will take some time so this is the real world development that's how it happens and let's see if the user is actually getting some token so let's see in the application and here in the localhost we don't get any token all right so this is going to take a little while to debug so let me go ahead and quickly debug this and will tell you what is actually happening here Welcome to the Real World development this is how it happens and Yes actually I found the bug it was nothing I just forgot to save the file there was a big white dot I couldn't see it and that actually turned out and notice here I didn't change anything I was just logging out a few things to check out whether user exists or not not even a single line changed but yes I made a couple of requests then I realized I need to actually restart the server that is all that is all I did and nothing changed and it works nicely now I'll I don't have a log out route yet we'll do that soon but this is how we have I can go into my application now just after restarting I can see there is a token being included up here and I'm also getting redirected to profile but there is a problem there's a lot of problem here I can still go back to my login route this shouldn't be happening and I can directly access these profile which shouldn't be happening if I'm not logged out so there is no controlling mechanism right now also there is no log out mechanism right now now I'll obviously push this code so let's do it right now in fact so I'll just go ahead and push all of this yep all of this and we'll say sign up and login complete good I'll just complete this commit this and obviously I'll push it why don't you use command line I don't it's just easier it's fun so I'm just going with that so what we have done right now and what position we are that's the most important to evaluate right now so let's just go ahead and quickly evaluate this so we are at a position now our front end is working our back end is working we are able to register a user in the database we have tried that couple of times it works and we are also able to log in a user there was a small hiccup where I paused for a minute but again it was nothing more I just had to save and restart the server so once I restarted it worked absolutely fine also I'm pushing the code in the GitHub as well so that you can also see and check out what is happening how is it happening and all of that now there are a couple of challenges in front of us first of all there is no logout button so we need to design that we also don't have any kind of a mechanism to stop the user from visiting the profile if they are not authenticated and if they are authenticated they have the token we have no way to stop them and protect the routes that the logged in user should not be seeing the sign up and the login page he should be seeing just the profile and all of these pages so we need to find a way and of course I'm talking about middleware so we'll be talking about Dem so this is all what we will be doing in the upcoming videos I hope you are enjoying them I'll take a small pause it's already like four o'clock in the night or in the morning so I'll record the rest of the videos tomorrow so just stay tuned hit that subscribe I would be super super helpful if you drop me a tank note on Twitter or LinkedIn there's so much effort that is going on in that so in case you wish you can do that otherwise it's totally fine let's catch up in the next video or after a break and finish up our middleware and remaining of the part let's see you in the other side of the video or the next video whatever that is all right hey there everyone hitesh here one more time into the next year's Series so what we were doing in the next year series it's tough to remember just kidding just kidding I exactly know what we were doing in the last video and yes in this video we'll be taking this a step further so we have achieved the goal of signing up the user logging in the user even producing a token and storing that token into the user cookies but right now there are a couple of issues that we want to take down the first one being some of my pages are not protected I want to protect them and obviously the middleware will kick in here the middleware how it works in nexius is little different so you need to understand that part as well other couple of other use cases as well which I'll discuss in this video and on top of that we want to Simply achieve a route where we can have slash me or something where anybody can get their own information from the database right now we don't have ton of information but whatever the information is we would love to extract that and obviously we need to click up with the log out route as well we haven't worked on that so we'll be working on that as well I think that's enough for this video and uh we will see if there is a little bit more to explore or something we'll definitely go ahead and do that as well all right so let's share the screen here so this is what we have been doing now let's run this first and foremost npm run Dev so that we can see what is happening how is it happening and is it all okay so if I just go ahead and refresh this hopefully this is booking Yep this is working let's try to change the number with some name yep it's working but this is nothing is protected I can still go ahead and visit the login page as well so everything is just back and pass and forth let's also see let's also try to log in again let me see the database we have two at the rate gmail.com so let's go ahead and try to log in with that so we'll just go with the two two at the rate gmail.com because I set up the expiry time for one day it's it it's not here 24 hours but still I would love to just set it up password very secure one one two three four five six very very secure one let's login it's processing nice and we are redirected to the profile page let's right click inspect is there a shortcut of going directly into the application just let me know if you know in the comment section so I have the token so that is all clear that is that part is still working nicely so let's go back and let's see how we can do that now first thing that I would like to take down is a log out button that how we can actually have a log out so for this I have to create a log out route should be fairly simple obviously we need to First create a backend portion of it then we need to call that log out button or that method or that API route from the front end part of it so let's start with the backend in the apis we have user slash login sign up we'll create another one which is for logout so let's create another folder and obviously without any thought we'll just call it as log out we know this is a back end so we know this is going to be route dot TS there we go now basics of this logout is going to remain same we don't need to create any post requests for that because the way how this is going to do a log out is simply just clear out the token that you have there are a lot of ways how people do it some people actually create a token and save the token expiration time as well refresh token there are a lot of ways I will be going with the basic I want to just clear out the token now in order to clear out the token there is nothing too much to worry about I'll just first bring the next response because that will be doing this and we will be using next response majorly requests no not request okay let's go ahead and do this export obviously this will be a sync function I'll just use the get request for that get and we don't need any of this here so we anybody can just make a get request just directly that's that's it all right so how we are going to log out first and foremost is go ahead and work on with the try catch the catch part is easy so we'll do that so let's try with the try catch catch and then we'll be saying error that could be any suggestion please no suggestion there we go so and we'll be saying next response we won't be dealing up with the errors suggestions are good but they're not always the best I will be having a Json error response just like that and we are having an extra dot all right so that part is done now only thing that's remaining is create a response which is capable of removing the cookies why this is giving me a problem is it extra yeah this one was extra all right so let's create a response how do we create a response response if I can write that and we simply go ahead and use the next response and with this we want to create a Json remember we are not returning the response yet we are just trying to create a response object so with this I'll hit an enter just like this we'll create a message of logout successful and a success of true also I want to send success of true and that is it now this is my response this response now since it's a response of type next response this can actually interact with my cookies so I can go ahead and say hey response go ahead and interact with cookies there is an S at the end of it and then we can go ahead and use a set and that's it so what we are doing here is a response now this should be a smaller response so token we are setting the cookie token as empty and we are also setting some of the options here which are HTTP true and expire we are just expiring it right now immediately although there is no need of this expiration because just HTTP true will actually do the job but anyways if we are just doing it that's also don't forget to return the response because right now we have done a lot of work but we haven't returned the response and that is it now you are completely capable of logging out the user but the point is how you are going to do this log out because there is right now no place where this logout actually works so you need to find a place where this logout actually works so I'll walk you through that you can just choose any page and can do a log out there the logout that we'll be doing is going to be simply on which page we should be doing it that's a confusing statement I'll be doing it in the profile not into the ID so in case you remember we have this profile and we have this slash ID wherever you wish you can do this I'll actually do this directly into the profile again there is no strong Choice there you can definitely inject a header a navigation bar can put a button there that's not my goal my goal is to get you familiarized and comfortable with next year so a button wherever that is you know now you now know how that is going to work so in this profile page let's go ahead and add a button first we're gonna do is simple in HR so there we go and after this let's go ahead and add a button so we'll just go ahead and say hey Button this button is going to say logout all right and we'll add couple of classes here as well so that button at least looks decent uh so we'll be having uh I'll happy I'll be happy with the suggestion whatever they provide us all right let's see if that actually works I'll say yeah that's a decent button if I can just add a little bit of the margin on the top margin top four yep I'm happy with this button now this button alone is not going to work definitely we need to set up an on click on that so on click we'll be calling this one as log out this reverse approach is always good because first when you actually click this or declare this method on click automatically the suggestions are improved so that's why I love this all right so let's create a method of this so const logout and will be showing like this all right now before we do this obviously we need to make this because right now this is a client not a client component this is a server component so let's go ahead and create this as a client how do we do this a simple uh decorator decorator-ish will be saying use client there we go now this is a client component what do we need in this we need xeos for that so we'll be saying axios from axios that's the first part we'll be also redirecting the user or probably providing some linking as well so we'll be using this next link there we go and what else I think that is it I think that is it all that we need all right so how do we log out a user really simple just go ahead and simply have a try catch we have done this many times so that should be all easy for you now and for the error part we'll be doing a console log of the error Dot message but I'll also give you an assignment as well we also need to provide an any here and after this we'll be having a message which will be a toast Dot error suggestions please no suggestions and here we can say error.message obviously we haven't brought in the toast so I'll just bring in the toast you decide how the properly how is the proper way to bring it up so toast and that is from react toastify not react justify react hot toast there we go this is obviously not a proper implementation but I'll just leave this as a simple exercise for you now how do we do this make a simple uh get request that's it so we'll be saying axios uh dot get request because that's what we are handling where does this get request go it into slash API slash users slash log out this is where it goes and again this is asynchronous Operation so we need to provide an await as well this logout is also not a synchronous so let's go ahead and add this a sync so that it's happy you can actually trap the response as well in case you wish but I don't think that is required so if you wish you can actually provide better messages with that but I'll go ahead and say toast or successful obviously this is not going to print it anywhere but I also want to push the router somewhere so we haven't used the router because once user is logged out he should be pushed back to login page so we'll be saying import use router from next router okay I'm happy with this and let's go ahead and say I want to create router from use router nice and this router will be capable of pushing to slash login all right so looks okay to me let's try let's test this out and see how many bugs and errors we have got all right so okay next router not mounted all right why the next router is not mounted that's ah my bad because this used router is not from router this is from navigation I told you we actually got this bug many many times let's go all right looks happy now let's go ahead and try ah is there some video recording issue let's see if we have this token uh do we have the token token token token and I don't have a token that's good that's good that means I'm properly logged out so our logout functionality is working that's that's good to know all right so now that our logout functionality is working let's go ahead and work on that how the middleware actually works for this we have to actually study a little bit we have to close all of this and this let's study the middleware and here it is this is file not found so I'm going to go ahead and say I want to study middleware thanks for understanding my typos so now it says that middleware allows you to run code before a request is completed so obviously this is exactly what I want to do is before when my request is completed I want to run something the advantage of this my request doesn't reach to the completion phase it actually is being checked intermediately in between so if somebody is not authorized to visit the profile page it will stop it before doing that if somebody is not authorized to visit the login page the user who is already logged in so I can just stop him before visiting that page and I can redirect him to some other page so that's the goal of it so that's a nice one before completing a request and let me Zoom this again then based on incoming request you can modify the response by rewriting redirecting modify the request or response headers sometimes we inject some things in the headers as well for example maybe user ID so some things you want to inject in the response headers or the request header you can do that or you can redirect this modify this however you'll go with that a middleware run before the cached content and routes are matched so this is what they say I use the file middleware.ts now this is a really important word here you have to have to use this as middleware.ts there is no exception in that there is no other file name that you can use it needs to go into I'll show you where it needs to exactly go and how it runs so don't worry on that part although it is mentioned that it goes the same level as Pages app or source so we obviously need to put it inside the source we are talking everything about the source if applicable yes source is applicable for us so we need to put it into the root of source not the root of project remember this okay and now how does the middleware looks this is how it looks in fact instead of talking about it here we can just copy it that would be great and we can simply go up and talk about it so let me go back my code editor here it is again as I told you it is inside the app directory just to show you again Yep this is inside the source so not in the app inside the source all right so we'll just right click on the source create a new file this will be middle middleware dot TS or JS whatever you're using I'm using TS obviously I'll be using the TS you can copy and paste the code which we just copied here just a moments ago and this is exactly how your middleware looks like now there are two parts of the middleware the first portion of it is the logic part and the second part is the matching part that on what route you want to match and you want to run your middleware so you can define a lot of things here so what I'll do is instead of giving it as a string like this you can actually give it an array and it will match all of this that is what I found in the documentation and I found it much more useful so the route that I want to match is Slash and by the way there is also something more interesting in the darks so there is a pattern matching as well so you can match the file patterns as well for example here you can say slash about Slash colon path and whatever the path comes so best trick means anything you can also match the paths like this like this so this there is a regex that you can involve there's a lot of this so you can see somewhere here let me zoom out so somewhere here they actually mentioned that hey you can match a lot of paths a lot of these details so all of them are mentioned up here I'll just go with the basics that I want to match so I want to match uh this one I also want to match slash profile you can match slash profile slash anything as well that comes up I also want to match if somebody is visiting slash login login and I also want to match slash sign up okay these are the path that I am worried as of now if I have more I can come back in the middleware and can just simply write the code for that super easy so this part is a matcher I hope that is clear now now let's go back on to this part I'll just remove this command somehow they're bothering me a little okay so we have this function middleware and right now it's redirecting just the response and we'll just remove everything what is it is returning because we want to write our own logic now what do we want to do now we have couple of paths which are public paths for example login and your sign up these are public paths if somebody has the token he should not be able to access those public paths all right and there are some parts which are protected path so somebody who is not allowed or who is not logged in he should not be seeing profile so something like that so first we need to find out that how we can find out what are the paths because right now we have no access to the paths and luckily for us this next request actually gives us a lot of thing next request by the term next request I mean to say this request so this will be helping us in finding on what path you are so you can go ahead and declare a simple path variable just like this and this request has access to this next URL dot path name yep that is that is so simple and no it is not a client side or a client component this is how it always needs to be so once you have this now you can match that what is your path name so we'll be declaring that some of the paths are public and some of the paths are not public so we just need to find out which one are public so const is public but and for the public path what we're going to do is we'll just check if the path is equals to login or the path equals to sign up I think these are the two public paths we are worried about login and sign up so this should not be visible to somebody who has token all right so it's public path again if it is login then it will be true if it is sign up then also it will be true now next thing is we need to extract the token now this is very common we have already seen that while injecting the token that this request is completely capable of going into the user's cookie and we can extract the token from it super simple we can go ahead and say hey request just access the cookies and from that just like we were using set we can actually use the get method of this and we can grab the token now this token might be there might not be there but if it is there so optionally it might be there that's why the optional we can extract the value or we can just provide the empty one so in any case there is a variable known as token which has some value either the actual token value or completely empty that's that's fine okay now I have two variables here and I can decide based on them that whether should somebody should be able to access a path or not so if the path is public and you are having the token that means you should not visit the login you should not be able to visit sign up so let's go ahead and code out that so we're going to go ahead and say if the path is public is public path and you have token then I would love to redirect you now the redirect response is is like that but there are a couple of other ways as well how you can actually provide that this is also good there is no problem in it and you'll also see some of the documentation code that is written somewhat a little bit different in this there you can directly use the redirect there is no problem I haven't found any if you find any let me know in the comment section but you can actually create a new URL that is what I found and new URL no suggestions are not good so I'll just go ahead and say hey this guy needs to redirect somewhere we need to redirect him somewhere because he's trying to access a sign up and login so I don't want that so let's redirect him on to slash that's it and then the second is you have to request use request and then we can say dot next URL so I found this is a little bit tiny better this one needs to be request request come on can't I write request all right so again you can directly use a redirect and can work with that there is no problem with that I found this one a little bit more reliable but again I'll check out documentation as in the next year as things are evolving so I'm just also learning as as we go so this is first path we have handled we have redirected the authenticated users to the slash of the application or in case you want to redirect him to slash profile uh that's your choice totally your choice maybe dashboard whatever it is that's up to you now what if the URL is not public and token is not there so in that case obviously you should log in first so we'll just go with that if there is no public path and there is no token so in that case we'll be just redirecting him to login and then again we'll be using the same format request dot next URL so that it automatically moves to the next URL and it looks like we are having some issues with the curly braces should be happy now yeah the indentation is messed up it shouldn't be like that I think this one can go here and that will do a little bit cleanup yeah I think better all right so now we can see that this is all there and let's see if we can still visit the profile let's save this and let's see how many errors we got uh looks like a good day no errors and let's go back to our application okay let's try to visit profile okay I'm not able to visit profile uh what if I visit profile and Slash hitesh I can still visit it because I haven't mentioned that after the profile am I looking for all the path remember we saw in the documentation we can use Asterix and all those regex to do so but I'm happy with this this is a simple assignment for you but I cannot visit the profile because that is now protected now let's see the login version of it so I'll just go ahead and say two at the rate gmail.com password secure one you know it one two three four five six uh login processing and now we are on the login page can I still visit the login uh no I am redirected to the slash which is home uh but I can actually go ahead and visit the profile as well we should get a profile link here on the home page as well but anyways ah it's fine it's fine we Now understand that how we can extract and write a middleware as well so that's that's a good start now one more thing is notice here that we are able to grab the token as well can we extract some data from the token as well because yes it was us who actually designed this token so we can definitely uh 100 get some uh data from the token as well let's go ahead and try this out let's go ahead and create an API route for it so inside the API users and let's create a new folder what should I call it a user a me user and me yeah whatever the naming convention you want to follow you can go with that I'll probably go with me I think that's okay and then here we'll have a new file so we'll be having route dot TS there we go now how we can grab this information all right now this grabbing the information is going to be done probably multiple times because we will have the token now we know how we can extract the cookies and token and token if you remember if you forgot that let me remind you again at the time of login we actually injected a lot of information in this token I'll just close this one this is the token data so I can technically extract all this information if I know this token secret which I know because I created it so I can actually do this now I can do it directly here as well or I can create a helper method which can help me to extract this token so maybe later on at some point if I want to use it I can call this method so time to go into helpers let's go up here and in the helpers we have this we have no helpers as of now that's so sad we should be having some more helpers so let's create a new file and let's call this one as why it's not writing ah there we go now it's writing so we can say get data from token very liberative dot TS of course okay how we can grab the token data now get token data is super super simple just a few lines of codes I'll do that quickly again this requires the next request otherwise how we will be doing it all right and also we'll be needing JWT JWT suggestions from Json web token now let's go ahead and simply export a function which we'll be calling it as get data from token very elaborative I like that and we can have requests just like this and we'll close this all right how we can get that obviously we'll do a try catch the catch part is super easy super simple we can go ahead and get any and we can say throw not like that throw come on I can write that and throw a new error and we'll be throwing an error message all right that's all we'll be doing now how we can grab this we can simply go ahead and say hey request you can access the cookie you can get the token value just like this or there might be a case where it is empty so we'll just go ahead and use this and we'll store this uh token into a variable or you can call this as encoded token because right now the value is encoded now we need to get a decoded token as well so for that I can use this JWT and this JWT has the option of dot verify not only it verifies the token but it also actually extracted the information as a response of this function so I can just go ahead and say process token and then process.env this is not my variable I have created a sample EnV for you so that we can actually grab this variable from here I'll not open mine one because there's a password in that so I'll just go ahead and paste this make sure you follow this exclamation as well if you are in the typescript now as I told you this actually contains a lot of information so you can call this one as d coded token because it is now having this information and you can extract this information now it's up to you what do you want to return you can return the entire decoded token or you can just extract the ID from it now we have to check that what we actually injected into this one in order to extract this so I need to go into my app API and login route Let's see we injected this ID which is actually user.underscore ID okay so we are happy with this all the keys that you are setting that needs to remain same ID username email so this key is really important so we'll be simply going ahead and getting it like that now this is going to give you a problem because there is no surety that the ID will be here because it doesn't know the data type of it I'll not declare any types here that's not my goal so I'll just inject an any here not a good idea I explicitly say do this in my typescript series but we'll do it here all right so now that this method is available for me which is uh get get data from token now we can actually go back into the me route again I'll just close this login one so that we don't get confused let's import this method and simply work with that so we'll just say get data from tokens so there we go we got this method here and we'll be needing the request and response because this method is dependent on this request somebody needs to send it there so we'll be saying hey import give me uh not like that yeah give me next request and response from the next server uh we'll also be needing the user user and that user will come up from Models user model I think that's correct let me check that so we are having this models and inside the models user models okay that's correct that's correct and we'll be needing the database connectivity as well so let's go ahead and simply say connect there we go obviously the connection needs to establish so first and foremost let's do this now let's create a simple a method don't go with the suggestion in this case you will explicitly make it go wrong so let's go ahead and say export async I'll accept that and then let's call it as a function this will be a get method a get yeah we are not getting any data so get method is fine and we'll be saying request that request will be type of next request and we can have it like this all right next up obviously our try catch so we'll go ahead with the try catch the catch part is easy so we'll just go ahead and say any here and then we'll be returning a next response no not like that next response dot Json I want to return it Json yeah that's what I like now what do we want to do in the try catch part simple just call this get data from token and pass on a request to it that is it it will give you a return response we coded it like that return the decoded it gives me a ID so I can just store that into a variable now and obviously this will take some time so let's just go ahead and await that and that is why we created a sync and this will give me a user ID that's my variable so I can call it as user ID underscore ID whatever you like that's totally up to you and then it's time to find a user based on this user ID so user has the superpower to query with the database and I can go ahead and say find by ID or find one whichever you like both of them are gonna serve same in this situation so I'll just use the find one and I'll just give you that hey find based on underscore ID and I'll give you the ID user ID so a space would be nice okay I made it all caps now I just want I caps not the T I'm happy with this okay so now when this is done uh what more we need to do await because that's a database operation database is another continent and we'll store this as a user so you have given me back a user now this will give you everything I don't want everything because if you check out the database it has ID username email password verified is admin so you can select your fields which one you want and you can deselect the fields which you don't want so I'll just say hey I will go ahead and set select and the password that is what I don't want so you can put a negative sign there by putting a space sadly there is no comma I think the comma would make more sense but sadly there's no comma if you want that I don't want maybe is admin so you can go ahead and put that as well but I'm happy with this one only all right so now I have a user now what can I do with this user I can return a response that hey here's your user now do whatever you like it's an object so I'll just go ahead and say return next response the next response response come on and we'll have a Json just like this and in here we'll be saying a message first and foremost come on message user found and then the data will be sending the data like this so we'll be sending user all right looks good you can send the data directly as well in case you wish that's okay and now we can simply have a save on this one all right so now we have designed a route which can actually help us to Simply go ahead and work with this so it's totally up to you that how you want to utilize it maybe you want to make another request let's do it let's have fun so in this slash profile let's actually grab the user's ID now we know how to do this so as soon as somebody lands here I want to fire an xeos request to me and I want to grab that user let's try that let's try if we can do this and inside the profile will go into page now obviously I want to have this get details method and this get details method will run let's just run it on a button click you can run it with the use effect as well as soon as the page loads but I want this one to run it on a method call so we'll go up here we'll design the method so I'll just minimize this log out not interested in that let's call this as get user details like this and obviously this will be a sync just like this now how do we do this pretty simple we need xtos it will fire a get request to slash user slash me ah nice I like that this will await because it's a request and we'll grab a user out of it or a response out of it first not the user now with this we can go ahead and say a console log first and we'll say res dot data all right and since this is a res dot data we actually need a state as well where we can pass on this information without this it's it's not going to be very helpful but again it's up to you I need a I need a state so I'll call this one as data you can call it as user as well I'll call this one as data no I don't need this I don't need this either I'll have a string which says nothing just for fun U state is not available why is it not available it should be here react and we'll be having use state from react okay now once we have this now I can use this set data method to actually use this so set data what is happening no I don't want Mongoose set why unobvious suggestions so we'll be having set data and that data will get res dot data but the problem is the data is not inside the res dot data it's actually inside since we have passed our information like this so let me show you this if we are passing the data so res dot data has all of this data so desktop data dot data dot user will have the information Yeah we actually accidentally made it more messy so further down the data and then further I can extract this underscore ID yeah that's that's messy and what we're going to do is just below this profile page we will get an H2 and this H2 will get some data so if the data is there do something do get available just like this uh probably not we'll just first get the strings otherwise do something else so what is happening so if there is nothing inside the data so what we can do is we can write some of the things let's actually evaluate this that would be better if data equals nothing because that's the default State remember nothing so if data is nothing then we'll be saying hey this is nothing so let's just go ahead and inject nothing here just like this and if there is some data then we can actually go ahead and inject instead of this string let's go ahead and give it a link as well so I'll just go ahead and say link just like this okay and why is it giving me this problem here that oh href is missing okay I can I can add that no problem and I'll move it to the next line now I'll do it here okay href okay where do I want this one to go so I'll use the backtech I'll say slash profile okay but since I have extraction of the ID now I can go ahead and Slash and put this data although we should be calling it as ID but I think that is good all right now uh one more thing who will be calling this uh there is no button to call it all right so let's create another button who can actually call this so I'll just duplicate this one and I'll say that hey you will be responsible for get user details so yep get user details ah I don't think you will be happy as a blue so we'll just go ahead and say you will be what a violet purple you you get purple a little darker shade of purple 900 no I'm not happy with this okay uh what else colors uh green yeah will will go green 800 cream okay I know okay so this still says logout this shouldn't be saying log out this will be get user details all right ah right now it says nothing which is good I also want to actually highlight this nothing as a little bit so we'll say class and we'll be having a little bit of padding rounded and we'll be having a BG Dash I'll use green this time not the orange you made a lot of fun of that and we'll be saying 500. and padding not padding like this what am I doing padding Dash three let's go yeah better okay so let's see get user details and there we go right now we are having an empty that means we are not getting any user details let's see what we are going doing wrong it says a message user found and then we have this data and username and email okay so this is coming up into the rest dot data so what we have to do is res dot data and then inside that we need to go inside the data and then we need to grab the underscore ID and then we actually can grab the ID so I think this is correct why it is not mentioning the details here so let's check what we are doing wrong in this case okay okay my bad my bad I actually didn't set up anything inside this link my bad we never injected the variables so my bad so we need to inject this data here so the URL was there but the value was never there ah there we go totally a small bug so now we can actually click on this and there we go not looking good this profile should be a little bit above but anyways you get the idea that how we are able to grab the user so now any user we are able to track him down so that's nice and the log out middleware that's working nice get user details we get this and now we can actually click this we can actually grab all of this so instead of running this method on a button click just like we're doing here we can actually use and use effect hook and just whenever somebody visits this page we can load his information there and can directly just display there so I think that's a that's a great start that we have done so that's really nice and I think this is wrapping up our application quite a lot that we are able to do so much in this one I'm super happy that we are actually on this phase that it's working nicely now a couple of more things what we can do is we haven't talked about how we can utilize the mail trap which I actually discussed it's probably logged out so we haven't discussed that I'll close this one I'll close this one I need to push this on to GitHub as well so let's go ahead and do this and I'll go ahead and say hey let's add every things like this and we'll be saying added middleware come on added middleware and what else we have done we have added middleware we have also worked on me route okay Commit This and of course we want to push it all right so that you can see the repository is available on my GitHub account it's pretty easy to find you can definitely easily find that all right so I think that is uh what we'll be doing in this video but there is little bit more that we need to have an action plan so we have gone through with quite a lot of details in this one we have gone through with the middlewares I showed you how the how to protect some pages routes and all of that from the server side grabbing the cookies and all of that couple of more things which are easier things now is how we can first and foremost shoot an email so obviously we'll be creating a helper file for that and once the email is being shot how now the values are there in the database so I want to update the values in the database that's my concern now get this token into the database as well and send this token to the user email as well that's what my action plan is right now and obviously we'll figure out the plan as we go we make a lot of mistakes and all of that so that's that's a part of the things I hope you are enjoying this series if you want more details or more projects or something let me know in the comment section I'll definitely love to do that for you guys and consider hitting subscribe there's a lot of effort going on I would appreciate that let's go ahead and catch up in the next video or if you're watching all in continuation just a small break and catch up on the other side hey there everyone this here and welcome to almost the finalish video of the series I'm saying almost because I'm not sure I will be able to do all of this or we'll be extending this series depends on you just let me know the comments so the one of the last thing that's remaining almost last is how we can actually retrieve the user update some data in the database as well as send an email now sending the email has a lot of issues and a lot of good ways okay shways and the bad ways of doing it I found that luckily we are in this typescript JavaScript environment where things are super easy for us to work on with that we have this package known as node mailer which helps us to do almost everything that we want to do but there are new players which are coming around in the market which are handling these mailing into a new and creative way I'll talk more about them in probably some another video this time we'll be going with the core node mailer way also there is an exception that I have taken in this particular video that is usually I keep my mailing helper as just to send email nothing else it doesn't do anything it doesn't generate any token or anything like that it's a special helping file which helps me to send an email that's it but in this case I'm actually generating my tokens within the mailer as well because in this use case it actually makes sense to generate these tokens within the mail itself and I'll show you the walkthrough as well and again I always say there is no good practice bad practice it depends on what the project is what scale is and is it the maintainable code is it not so that's all it is in this project since it's not very scale we are not talking about like making thousands and thousands of files into it so we'll keep our mail and we'll keep it in such a way that we are able to generate the token within the mail itself the mail helper file and based on whether the user is requesting to verify an email or forgot the password I'll walk you through with a couple of scenarios of how you can do it that's the one part the second part is how do you want to verify the user that's up to you there are a couple of ways you can do it all in the back end you can do a mix of backend and front-end that is also totally doable it's totally your approach again there is no good right and wrong here it's totally approachable whichever you feel you can do that in case I talk about just the back end approach then the URL formatting needs to be in that way and if you are looking for the front-end part of it then obviously you need to have a front-end page of it both have their advantage if you do it totally on the back end then there is nothing much you can just redirect the user onto a home page or something but if you bring the user on some page and then the verification happens then we can provide a message to the user that hey verification was successful that's totally up to you how you want to do it it's totally up to you I'll show you and walk you through with the boasted approach that it makes you comfortable with both the approaches all right so first this is the service that I'll be using known as mail trap the one good thing I like about the mail trap is again go ahead do a sign up they have a free tier I'm on the free tier I'm not buying it because it's a good service but I'm happy with without buying it for testing we'll be using this email and as soon as you go ahead and create ad inbox it was empty so I added in box box and simply go ahead and click on this inbox after this and what you'll notice that on the left hand side you get all the Inbox and you get all your Integrations here so you can go ahead and integrate it directly with the curb I really like that how thoroughly and deeply they are working on almost every single thing is available for E for us we are using the node Mailer in case you are using play mailer or something for Java or something you can still use it so I'll go with the node mailer and all you have to do is copy this and the good thing is while copying it also copies your password so obviously I'll resetting this one so again this will obviously expose my password as well but again this is just a test account I can reset this reset the credential just one click not going to be bothering it much now one more thing that you should really know about it is let me show you this by opening up the Google and try to search for JS and this will be useful information notice here the URL let's say search question mark Q equals and something now this is a classic JavaScript there is nothing in like too much important in this case case what I'm asking you is how you can actually grab this information how you can grab the URL information now grabbing the URL information requires a couple of things you can grab it from the back end we have already seen that by creating a square bracket ID we can directly prick the params.id that's one way but if you're having this question mark or something like this you can still go ahead and click on inspect and in the console clean this up and we can just go ahead and say window dot location if I can write that and then you can go ahead and look for a search and this gives you the search parameter everything after question mark Q equals and I can go ahead and later on split this up and divide it based on the question marks everything before the question mark after the question mark I can grab all of this data so this is basic that we have now coming back why I'm showing you all of this yes that's a good question that's a very good question let me go back into my helpers where are my helpers and here are my helpers I'll create an new file and feel free to call it Ellen thing I'll just call this one as mailer dot TS of course now the reason why I'm showing you this is there are a couple of ways how you can do this for example if you have a domain.com ah come on don't do this domain.com there we go you can go ahead and write something like a verify token and then slash and the token name so whatever you want to write so that's the one way of doing the thing another way of doing the exact same thing is how you craft your emails it will be whole dependent on that and which approach to take another approach is having this again domain.com why are you doing this to me domain.com and then you can write something like this slash verify token and then you can have simply a token question mark token equals whatever the token is now again there are some easier way of doing the things if you do it with the first way this is almost looking like domain.com profile and then send this so we can extract it directly with the params params ID so we have the square bracket syntax we studied about it and this is also the syntax which we just studied that we can actually grab it anything that's a question mark and then token equals all of that we can extract that by using window.location.search this second approach is better for me if I am actually using a client component this approach is better for me if you're if I'm doing everything from the server component there is no right and wrong in this one so again make sure you choose whatever you are choosing a little bit wisely will make your life easier and again it's it's not like that hey this approach is not possible in the front end it is possible but easier way and making yourself an extra travel that's up to you all right so we have already installed the package of node mailer we actually talked about that in the earlier so we'll be just grabbing the node mailer we also need to grab the user I usually don't do this because I like to send the token and everything and update the information directly from the controller where I'm writing but in this case we'll be actually doing a little bit different so just bear with me for a minute all right so we'll be getting the user come on from and we'll be using command at the rate slash come on no suggestions models and then this is slash user model there we go this is the file name and also we'll be encrypting this so we'll be needing B correct Js that's coming up from decrypt.js so these are the libraries that we'll be needing now first of all let's learn how we can send an email now sending the email is actually super easy if you'll go on to the node mailer website you'll see that hey is it that simple yeah it's actually that simple so if I go ahead into npm install node mailer we already did that and all it takes here is example so in this example you can see we create a transporter which actually is nodemiller.create transport in this you provide your host Port secure authentication which will grab all the details uh from our SMTP host which is mail trap and then you simply go ahead and provide some options in the send mail so these are all options we'll actually create these options outside so it's much more easier from to subject text HTML so you can just provide everything and that's it that's await dot send mail that is all provide the option so two lines of code first is provide the create transport and then this transport can just send the email with the options yeah literally that simple so this is all what we have as of now let's go back and see that how we can try this let's create a simple function and call this one as send email which is perfect in this case and obviously this is going to be a sync music and what information you will be taking from the user that is a big big question now what information do I expect from the user first and foremost I expect that he'll be sending me the email where do I want to send this email obviously I need to know that then optionally you might use the same file for sending the email for verify token for forgot password as well so both the tokens can be sent and right now we'll talk only about the verify but I'll still walk you through with the code that can be there for detecting the email type and all of that in this case we have just two but otherwise I prefer to have an enum for that and based on that I like to check that so I'm telling you what approach I usually use and what I'm using in this case so I'll just have this email type and then also send me the user ID as well without this I won't be able to do much and I'll just go ahead and type any here so that it doesn't bother me much and there we go so this is my basic it's all right email to send where should I send this email email type that is it a verify email forgot password token email or something else like that and the user ID because obviously I need to grab some information from that user so I'll actually use this one as well again it's not super required but I'll actually use it to get some encrypted token all right first and foremost let's go ahead and have the simple try catch the catch part is always the easy so I always take down this one super easy just cast this as any I don't know what the error type is and then simply go ahead and say Throw new and we'll be saying error.air message not much worried not much bothered about it the first step is now if you remember from our excalib draw if we have this yeah here we have if you remember I told you that we need this hashed value now this hashed value can be generated by a variety of means and variety of encryption rounds as well decrypt.js helps us to do all of this but right now we don't have this so how we can actually go ahead and get the value so it's super simple we are using the user ID So based on the user ID we have to provide some string that can be encrypted around so obviously there is a requirement for this you can go ahead and give him any gibberish which doesn't really make sense but you can you can there's nothing which is stopping you so all you have to do is simply ask becrypt JS that hey becrypt.js I need a hash value yep that's it and in the hash file you have to provide that hey what should I use to do the hash value like what am I encrypting what is the string that I'm encrypting you can give any string because it doesn't have a meaning it just in the database we want to match it but in this case I want to actually provide the user ID and then you have to provide what number of rounds that you want to go so I will just go ahead and go with the 10 rounds and that's it that is all I'm doing now I don't have a guarantee that this user ID is going to be string or not because there is a chance that user might throw up directly me uh mongodb bson ID almost like Json but bson so I'll just go ahead and just use a simple two string method on top of it so that I'm 100 sure of it now let's go ahead obviously this will take some time because we're using 10 rounds of encryption so let's await this and call this one as const hashed token all right so the token generation part was super easy there is nothing I'll just write the comment here as well that will be create a hashed token all right so this part was super easy now the next part is actually tricky now I want to update the user I want to find a user and in case you forgot that let me go ahead and open the model for you we have this uh thing forgot password token verify token and all these so I want to add these things into the token all right so how am I going to do this again this is super super simple there is nothing to be worried but there is something known as email type and based on this I want to update so first let's update with regardless of what the email type is so I'm going to go ahead and await this obviously a database operation database is another card to then so I'll go ahead and say user and then user can actually run a find by ID and update for this I have to provide the ID so I do have the user IDs so super helpful here as well and then I can put up a comma and then I can just use the verify token so what I'll do is the next thing is actually suggestion is really nice here okay so what I can do is let me just go ahead and hit and enter here this is fine so I am first of all having this reset password token no I'm not as I don't want this I want the verify token to be updated first so I'll just go ahead and update the values so this is my verify token and obviously if the time is for that expiry time should be for the verify token time as well so I have this so the verified token that we have is getting this hash token that's exactly what I want first make sure you understand this part find by ID looks for an ID and update the values and user ID is the ID which it will be looking for hunting the record in the database and then only these fields will be updated not all the fields so verify token will get this new hash token verify token expiry will get the date dot now and then these values if you don't understand this that's okay it's nothing much more we are giving it 36 so it's in milliseconds or you know 36 hours and all of that so in case you want that you can just do it like how many hours 24 hours into converted into minutes and hours and all of that I'll not go into that much of detail in depth that's very basic now you can actually go ahead and say new equals to true and all of this we don't need this third parameter although that's nice but I'll talk more about that in some other day right now that's not important for us this will do the job for us and we are happy with this okay now this is all happening when I'm assuming that my tokens are getting updated for verify token but what if the email type is for another one which is forgot password token obviously this is the token part of it you need to grab the password from the request body and have to submit that as well that's that's a different case but actually I can just entirely cut this out and just write a simple if Case to understand that what type of email you are sending me up so if the email type and again I usually do that with the enum but in this case I'll just go ahead and do capitalize of that if the email type is verify then I'm going to do all of this now in case else if the email type is actually other one which is the reset password or I'll just use the reset reset then in this case I'm going to paste this again but I have to change the values in that case I'll just go ahead and use forgot password token forgot password token and of course the expiry will also be the forgot password token expiry again really simple code but again we have just modified this now this email is usable for both the context and we can just we are just generating the token based on that so that's super simple now next part is this is all the settings that we are doing already in the database so the value by the time this method is called the value should be there in the database now again there are lots of good approaches of handling this scenario maybe you don't want to send an email until unless all the values are set in the database there are a lot of use cases of that I'll not go into that one then the next step that we saw is use this node mailer and create a transport so node mailer dot create transport create transport there we go and we'll store that into a variable as well we'll call this one as transporter just like this and there we go we'll just end it like this there we go now what are all the options that are required here notice here it says Service Gmail we won't be using Gmail instead what we are going to do is go on to mail trap and we'll just copy all of this so all this transport in fact we could have copied this earlier and grab all of this so I'll just go ahead and paste it like this notice here all of the password and everything are there these are random password doesn't really bother much but similarly you can have these host and everything for other domains as well like for Gmail there's different port number obviously the author and password I don't want to display my password here again you can put this into your process.env file as well that's totally you usually we go ahead and put this so I'm going to go ahead and put up a to-do here and add these credentials to EnV files so that's a to-do for you you can actually go ahead and do this now this is ready now the next option that we saw in studies was creating a mail options you can create it on the go as well but I'll just go ahead and create these mail options just like this now in the mail options we have couple of things that we can get first is from email so whatever which are from email you can go ahead and do that I'll just go ahead and say hitesh at the rate gmail.com which is not my email come on there we go and I'll just put up a comma Now the next is two emails so two is email whom to send email we are already taking that as an input in the parameter so I'll just go with that and then after this we also need to have a subject now the subject can be just directly verify your email or you can actually go ahead and use that what kind of email is actually coming in so I'll just cut this out and I'll test it based on the email type so email type if email type is verify we'll say verify your email otherwise we'll say reset your password so again we can just use these smaller variables now how the email is being crafted actually I have written it already so that we can discuss this so there we go so as we saw uh directly we don't have hash token hush oh hashed token hashed we missed an edge almost all replace I'll update this hashed token small typo there we go and we need to use hash token of we have hash token here and I think here also and now it should be happy here as well okay so what we are doing is we are simply providing an email which is saying click on this domain to verify your email or to reset your password and notice here this is going to process.env.domain the domain name we have already set in environment variable so it will be directly like uh HTTP colon slash localhost colon 3000 in case you deploy it on the domain just environment variable needs to be updated and then verify email question mark token equals to Hash token so this will be our email that we'll be having all right that is all what we need the last thing is to Simply send email with these mail options so that's all again this takes some time so transporter will send an email with all the mail options and you can go ahead and store this mail response just like this and after this you can simply go ahead and return this if you wish totally up to you so we got this one let's see what all so this one is also saying hey cannot find a declaration file of this one we'll just probably install this types as well so that we get rid of these errors all right so quite a lot of detail talked about the mailer and how the mailer is going to work now once the mailer is done all we have to do is first create a page or we can first ah now that's a confusion should we take down first the apis or should we first take down the front-end page let's take the apis first I think that makes sense so in this inside the user we will be simply now again based on where you are landing the user your route should be according that but in this case now my bad I'll take that back so in this case the route doesn't really matter it can be any route we need to just create a front-end for verify email for that in the back end my API request could be anywhere because once I land there then I'll use a use effect hook to fire a request okay I'll do it that way so I'll just right click and create a new folder and this folder will be simply verify email verify email verify token yeah totally up to you I'll just right click create a new file and we'll just go ahead and say route dot TS now inside the route.ts we'll have just the request response we have to connect with database as well because we will be updating some fields in the database as well and uh already things are there in my database so I need to extract the values by searching through the token all right so I'll first and foremost will be connecting to connect connect no option for Connect nope don't want that add the rate slash and this one is config dbconfig slash DB config all right so no matter what happens this needs to connect so I'll say that hey you connect so database is connected now we don't need any async or anything like that we'll be needing the next response and request all of that so we'll be saying next request and next response and we'll be needing user as well because I want to perform a search so I'll just go ahead and say hey give me the user from model user model all right that's great now once the database is connected then I can go ahead and Export My Method so I'll say export async uh no not like that a sync function come on if I can write that that would be great function and this will be a post method obviously because we are retrieving some data or not request that will be of type of next request and there we go all right first try catch we should have created a wrapper around it because this is too many try cash in the entire but again what can we do now after this I'll just scroll this a little there we go let's return uh next response with again dot dot Json come on response.json there we go error messages and there should be a status code as well yeah that is the one that I'm looking up for and now next up is first and foremost let's grab some of the tokens so we'll be grabbing the token from request.body so const and request body and await request.body.json app that's request.json directly there we go okay now once this is there I know that there will be a token coming up for me so I'll just go ahead and extract this token now this is an approach where I'm using that there will be a front-end call who will be making a call to the API and will be able to handle this again this could have taken a different route if in the verify email I directly create a ID the square brackets an ID or maybe a token with the name of token so I can directly extract a colon token there so again both approaches are correct there is nothing wrong or right like that I would also like to see if this token is actually coming into this it helps me to debug that later on so there we go now I can see whether the token is coming it or not I have to find a user based on the token just like I can find a user based on email I can find it user based on the token as well so I'll say find one yeah find one that is fine and this one this time will be finding based on the token and whose time is greater than now so obviously if the token time has expired in the past whatever the time I have set there I don't want that so two condition needs to be true now I have to find the token as well and verify token expiry should be like that so verify token expiry comes from the model itself so if I go ahead verify token expiry this should be greater than what's the current time is so obviously in the future I can verify if it is already in the past I cannot sorry uh little cold here but again don't mind that sorry I cannot edit them out all right so now if it is there obviously that needs to be a weight and what else we will be storing that into a user all right all right good and nice now what else I can do if I don't find any user in that case I need to take care of that scenario so if there is no user then in that case return a next response Json error invalid token yeah that that's a good response or we can say invalid token or we can say user not found yeah that's the debate but we will not go in that debate and now here I would like to do a console log that whether I'm getting this user or not because it will help me to debug later on I can remove them but I'll just keep it here for you to Simply have this now there are a lot of ways how you can actually now update this since you have this user actually you can utilize this user but in case you want to make another database call you have verified it now now you can make another database call to update this you can use this Capital user but I will not do it because I already have a reference of this user which is a return from this user object so it also has some of the superpower so I can go ahead and simply say user dot is verified so I found the token I found the user everything is okay so I need to update it not only that I have to flush out my verify token as well as the time as well otherwise the time will always be there there's no point of keeping the unnecessary data and after that I'll just say a weight and then user.save this await is super important because it will take some time to update this and now we can actually be all happy now once this is done we can simply go ahead and say return next response and we can probably redirect no I don't want to redirect the redirection should be a job of front-end guys so I'll not do this next response we'll just send a Json response he can actually do things based on the response so message email verified status is success I'll actually use different messages and I'll say message email verified and success suggestions success true there we go forgot the comma there we go all right so in theory now it actually works everything works in theory all right so this should be all okay now we should be able to send and fire an email okay so how you are going to send an email now that's that's a big question so I think the email should be a part when somebody is actually signing up when somebody sign up we can actually give him a message or we can give him a button as well that hey get your email write your email and we can provide another page for it but I think in this case I'll just send him an email whenever he signs up so that makes sense otherwise we have to write another page button don't want to do that okay where it should be it should be a last job so user is saved in the database before sending a response we have saved the user here before sending the response let's send him an email send verification email so how do we do that now we can bring this send emails so I'll just wait for it and we'll say send email so we can bring this up hopefully the import is done send email helper Sim mailers okay that's good and there we go we can send an email so already this is the email we have extracted from the user body so this will be used as to whom I want to send email the email type is verify so it's it's really bad to see this string in the all caps here there should be an environment variable or an enumeration or a constant file for that but anyways I'll be just happy with this and what would be the user ID so now we have saved the user so this is now useful for us and we can extract and underscore ID from it and I think that is it now in theory at least it should be saving uh sending me an email all right how many errors ah nothing so far surprising let's see how we can actually register another user so I think this is it yeah let's go ahead and go and visit the profile if we still have a user yep nothing okay oh we have to get the user details and we'll log out so now there is nobody let's try to sign up another user how many users we have we have one we have two time for three so this will be three this will be 3 at gmail.com and this will be one two three four five six we can put some a validation for password as well but we will not do it right now let's try to sign up processing command do it the first time it's little bit slower ah there we go now in theory we should have something in the mail trap there we go three gmail.com all right so these are testing email now notice here when I click on this uh verify email I can actually right click and ah there should be a link oh there is a link but this link is blocked probably that's really bad we need to gra get this email directly so that somebody can copy paste in the browser as well uh we need to try it again in the mailer as well let's go in the mailer this might happen to you as well so nothing wrong okay so this is email this is somebody writing up here so we'll just enter here and we'll say r copy paste the link below in your browser I think that's good and we'll add a br and there we go so now I think it should be much better so that somebody at least can copy and paste the link uh this way okay uh I need to sign it up again I saw this this doesn't expose any email or something like that so we'll just do this now in the meantime where we are here we are we can actually delete this uh how do we delete it we can delete this confirm I want to delete it let's go back here and we have three time for four time for registration of the four okay we don't need this we can come back here sign up sign up the four and we'll get 4 at the rate gmail.com and one two three four five six sign up and taking some time that's ok we got the processing here all right now let's see where we have this mail trap okay four got here and this time hopefully we'll get better and Yep this is much better oh we got some issues here which was saying your browser dot undefined then verify so probably because it was a local host that's why it's creating some issues because I think process.env oh my bad my bad my bad actually I know I know why it is giving us an issue because if I go ahead and check out my sample EnV the domain is all caps so it's not an issue it's actually an issue but anyways it's good to have the text link as well so it should be domain my bad I'm referencing the wrong variable there uh that's good all right save this and this should be all good this is how real world development works it breaks it fails uh let's let's go ahead and register another user now sign up it's time for five five and then we will have five at the rate gmail.com and one two three four five six sign up processing at least our emails are shooting that's we're happy but we have limited emails as well we cannot just go all crazy so five and five Where You Are okay there we go all right good and now we can click even on that I'll not click on this but I can actually copy paste this entire thing we have the token and everything nice but if I'll do this we don't have a page which goes on to slash verify email and again now you can see I can just provide a link of Slash verify email slash and whatever the long string and I can extract that that's easy but we don't have we don't have the front end part of it so it's time and by the way everything is also dumping down here as well so that's also nice that we have got all the five for all the emails email is going there username everything let's also verify in the database as well refresh where are you where is the refresh option there is somewhere refresh here it is refresh option so I want to check whether this tokens and everything are getting to my database also here we can see verify token and expire is also getting up here all happy all good that's good that's good okay now what we can do is next up is okay we need to create a front end for it so apis you can go minimize and I now need to create a simple route on the front end or the pages which can actually do this so I'll just close everything that's already too confusing all right sign up verify this is inside the API I need to create a route for the pages which will be verify email and again it needs to be exactly same as what you are crafting your url so I am crafting this verify email so somebody will land up here I'll copy this go back and inside the app I'll create a new folder the name of the folder will be verify email that's exactly and of course I know what will I be creating the file name with this which will be page dot TSX and there we go okay now this is a little bit tricky that how we are going to create this verify page there is a little bit involvement here first and foremost this will be use client that I know for sure use client there we go we need couple of imports so axios obviously will be there axios from xcos and we'll be needing the link to redirect the user as well probably not I will still get this so we'll have this link from next link and we'll be needing some use effect Hooks and stuff like that so let's import them so this will be coming up from react and we'll be needing use effect is the one that I am looking up for first use effect I'll anyway I'll be using reuse State as well so let's bring that and I think that's that's all majorly I'll be needing router will be needing it probably not anyways so let's go ahead and Define export default function verify email page we don't need any props in here we can just go ahead and just close it like that verify email page we don't have props otherwise it would have any props we can just extract it like this params IDs just like that basics okay we don't have it right now so we'll just go ahead and escape this and now first of all I will grab some tokens so I need to store that token somewhere so we need a state for that so we'll just say token set token and this will not be a string will not use the typescript functionality here we'll just keep it empty you state that's like and then based on user is verified or not I'll show him some messages as well so either I can just create a message like this or I can create a variables like booleans I can use them to verify not verified or I can use a message for the same so it's totally your choice I think I'm going to choose with the verify email so I'll just say verified set verified and by default it will be false also we can grab some errors as well maybe there are some errors on the page so we'll just grab them as well error set error I'll just use the booleans for that as well right now there is no error all right so these are my data now how can I verify this obviously in order to verify I'll need a method and I'll call this one as verify user verify user email that's fine it will obviously be a sync so there is no doubt about that we need to set up an request to an API so let's go ahead and do a try catch for that and in the catch part we'll just set the error with the error or true yeah true because we are using Boolean and then we can just do a console log as well so that we can at least see what's going on wrong so error we can actually go ahead and get error Dot response because it will be because this is going to get an axios so axios might throw up some depth so response.data all right for this we need to cast this error as any otherwise it will not work ok now next up is sending a request from xcos okay all right axios will send a post request did we made it post did we made it post let me verify that again yeah we made it post we made it post so axios dot post and where do we want to send this request slash API slash users slash notice here the suggestions are absolutely horribly wrong we need to get the verify token or verify email what is happening to my memory and this is what we have what we are expecting we are expecting a token there and the request is obviously verify email should have seen that already verify email what we are bringing along with us a token so let's go ahead and grab this token this token is given to us directly by this estate so that's nice let's go ahead and wait for this a wait for this one and that's it once everything is all done then we can go ahead and simply say set verified to be true otherwise it is already false so that is all my method is going to be doing all right so now the problem is when you will be running this thing and I'll write some of the controversial code here okay so how you'll be or when you'll be running this obviously we'll be using use effect for this and for this we are dependent on nothing so we want to as soon as somebody lands on this we will be running this but I'll just do a small check whether there is a token or not and all of that so if I'll just check if the token dot length because it's a string so I can access its length is greater than 0 then go ahead and run this verify user I actually don't like this way because it's less readable I prefer this whenever students actually watch this they find it more easy readable so I'll go with that okay there is another use effect that I am going to run again you can write this yeah that's Advantage you can go a little bit sloppy with the next JS it actually do all the optimization due duping a lot of things of the request I don't have to worry too much uh okay so this is what we'll be doing another thing which I want to do is going to be dependent on the token so any change in the token will actually no I'm actually bad any change in the token should actually run this one okay this one I will talk about that in a second I'll just go ahead and remove this so let me tell you what is happening here this is the dependency array of use effect so use effect is a hook which automatically runs it runs first time when the page loads there are a couple of other ways but will not go into that much it actually automatically runs as soon as somebody comes on the page but if somebody comes on the page and there is any manipulation in the token then also it will run now right now nobody is filling up my token notice here there is no code here which is actually filling up my token the token is empty will always remain empty so I need to grab the information from the URL and update my token as soon as my token is Disturbed that's when this dependency array is going to say hey something is Disturbed which is mentioned in the dependency array and I'll run this piece of code that's the whole flow now I'll come back here I need to actually grab as soon as somebody lands on my page I want to extract the URL so I'm going to go ahead and say I'll just grab URL token and this URL token we saw this already window dot location and then again window dot location dot this will be on based on search once somebody is searching on that I'll just go ahead and split it nice and easy based on equals to and then the left portion will be all zeroth value of the array right portion is my token so I'll be able to extract that not only that I have to set this into the token so set token will get this URL token now as soon as somebody lands on this he will be giving me the token I'll set this token into this this will create a chain of events the token will be updated here this will notify that hey one of your dependencies got updated so run this method so this is obviously going to run this method and that's it so I will just shrink this I'll shrink this and I'll shrink this the only problem is right now we are not returning anything so there is no page so return and there we go now what do we want to return okay we'll actually return and I have this already with me in my notes yeah I have actually saved this div class it brings everything to the center easy for me okay what do I want to have first of all most I want to have an H1 which will have a class class name and we'll be going with the text dash for suggestions please yeah for excel for Excel this will say just the verify email verify email or verify your email now in the H2 I also want to display the token so that I can see whether the token is actually coming in or not so I'll just go ahead and grab an H2 now inside the H2 we'll start our JavaScript and based on whether we have token or not we'll do something if we have token we'll write something otherwise we'll write something not something we'll write no token okay what do we want to do when oh my bad what do we want to do when the token is there we want to Simply display the token so what we're going to do is instead of this let's use pack text and let's go ahead and dump the token directly and token all right now also let's stylize it a little bit it's class name this one is going to be a little bit of padding padding two BG Dash values orange I like that color orange 500 and the text is going to be black okay that's good now based on whether the user is verified or not we want to show him some text as well so what we're going to do is let's inject the JavaScript directly and we can just go ahead and say verified if he is verified then obviously I want to display this so what do we want to display in that case we'll just go ahead and have a div and in the div we'll just say nice and easy email verified and you can log in I like that I like that and all we need to do is close this div all right that is already good I love these suggestions so in this case if the user is verified then we'll optionally display him that email verified now you can go ahead and proceed to the login page so slash login is there text blue I think that's that's good enough I think what can give us an issue is this a tag because I think this is a wrong usage of a tag this will definitely crash our application so we'll just remove this a tag usage of a tag and the link tag is actually very very dangerous so I'll just go ahead and just clean it up like this that is all good now we can similarly make a copy of this and now we can actually go ahead and paste on the error we can display this so we'll just display that there was an error and then we can just ask him to do nothing we don't want to show him anything the text is to Excel and the color will be BG Dash red 500 and yeah the text is default going to be white but that is ok I'll I'll convert that to Black okay so I think that is it now we can actually verify and go on to this page if it works in theory at least so now can I go to the verify page oh by the way by the way one thing I forgot almost I I think we need to actually do something more verify email and if I go ahead and look onto this notice here I go and go back so notice it says I cannot read the property of undefined so if token length is 0 we shouldn't be running this so obviously we need to verify there are some of the steps undefined reading lengths so let's go back so what we're doing is the token is right now empty string so that is creating some of the problems and issues on this page all right so let us take care of this you state is empty and at the token length here we have the token length is less greater than zero then only run this okay this should be okay verify user email and what in the case we are not able to grab this uh token all right so in that case right now this is setting it to undefined that is the problem so let's use an or statement to set it as back to the empty string come on all right so this should be much better approach okay there we go now we have fixed this small bug happens so right now there is no token but there is a problem we should actually fix that up into the middleware also because remember you always and always will forget about the middleware that hey where the things are actually matching so go back onto the code part open up your middleware and also add this URL here although we are not matching it up with anything but I think I'll add this one verify email now as of now this is okay I'll just save this but later on maybe I want to add this to public page so that everybody can actually access this otherwise if I add this here it will not be verifiable I'm not tracking this if you don't add it here that's not being tracked so I want to call this as public page so even if you don't have token you can actually go ahead and access this so I'll just add that hey path dot verify email that is also allowed to be visited without the token so so if the path is there so this is the public path let me just check this again public path and tokens so redirect here if there is not public path and the token is not there if the public path is not there in the token so I think this is good all right I am re-evaluating the things so let's go back can I still access this yes I can still access this okay now it's time that we verify the email our verification should happen now I can just go ahead and click on this in theory and it should verify this and we are not actually bringing the tokens so sometimes what happens is when you click on this in the URL and stuff your question mark token all these things are not being traversed via the browser that is why this issue actually happens that's why a lot of companies give you this or you can actually provide a better URL notice here there is a dollar and all of that so that sometimes gets into spam so you can go ahead and use this as link I can go ahead and use this so I'm not able to grab the token so why is it happening okay so I'm going on to the verify verify email oh my bad so I'm just saying verify email question mark token uh now we got the token uh this is a common issue that you are going to see that when you are actually doing the development in the next JS this is a common issue the development is so slow that sometimes it takes time so yeah this happens now let's see if we are able to verify the user let's refresh this and whether everything got clean got a cleanup or not let's see let's see come on give me that okay I can see that the 5 is verified is false is verified is still false for the five and we're actually verifying which email let's just check okay so probably there is some issue in the mail trap we are verifying the five so five I think the rest of the things are going great let's see is verified false okay so we got the password is verified false the token verify token everything got here nicely let's see that if we grab the token what we are doing in our apis so this is the job of our API uh to actually say user dot is verified and let's grab it from the model and is verified I'll just copy it probably I'm making a mistake here I'll just open this up verify routes and this should be oh my bad there is a typo here it's is verified so bad anyways anyways no problem no problem we can just create a fresh user and try this again one more time this is how the debugging works so it's everywhere is verified uh goodness and the token names are token names are good should have paid more attention but anyways these are small bugs this is how you fix them let's try with a new user this time I'll open this up here and let's try we're here and we'll try with the sign up let's try it's time for six and this one will be 6 at the rate gmail.com password will be one two three four five six sign up the user processing slow but only in the dev in the production it goes like ridiculously fast The Edge functions are always up almost always up and there we go we got the six and again this is also painfully slow I'll just copy this this time whether this extra dot is there horrible the dots should not be there but this actually creates a problem so we should actually use better approach of generating the tokens uh I'll just have this one this dot definitely is going to create issues and again this again why is it having the issues probably with the dot now we have this this dot is definitely creating the issues so we can notice there is little bit wrong in our approach that we are generating The Tokens The Token should be just a mix and match of letters and numbers uppercase lower case that's fine but these special characters and these dots especially that is creating so much of the issue also in the development environment serving the page actually takes some time so you will notice that when it actually serves the page compiled successfully and all of that so this actually creates a problem uh so possible emitter memory Leak Detection will actually take care of that but anyways now we have this is verified false here so that is we are getting all of this now let's check whether we are actually having this properly there all right let's see so we have the user six there we go we can see that the is verified is true verified that is true in this case so we are actually able to grab it now this is really a very thorough example of understanding a whole lot of things that's happening it's really a decently complex project we have worked on a lot of things now I'll not actually do the spoon feeding to you yes that is one of the bad thing that a lot of people do on the online codings and tutorials and all of that now we have seen thoroughly that how you can actually shoot an email the verification of the email we have also seen how we can extract the data from the body as well there was a reason why I did it this way the reason is because I want to have you an assignment the assignment is really simple we have worked on our verify emails verify accounts as well now we also want to work with the forgot password the mechanism is simple that again we'll be using our mailer and mailer can shoot an email so you have to first create a page where you can simply say hey send me a a male for forgetting the password so you have to create an API for that as well as soon as somebody sends their email and a submit button is being clicked now it makes an xcos request use your node mailer to send a token to him and also send this token into a database as well now when somebody visits this page as well now you can take that token in another API call and based on this you can actually give him a simple thing on the token on the URL you'll be grabbing the token and in the body just get here the password and the confirm password and submit Button as soon as you click on submit button he'll be sending you the token he'll be sending you the password and the confirm password based on that first verify whether the token is actually valid or not if the token is valid now grab the user again based on the token and update the password field for the password field you have to actually encrypt the things again so there's a lot of things you can learn and do the things and again I would highly highly recommend that once you do this do let me know on LinkedIn on Twitter or anywhere that I have completed the project this will be your Learning Journey just watching the tutorial is not going to be cut through it now you know everything the only thing that's lagging and missing in you is the confidence so if you face any trouble just reach me out on Discord Twitter I'll help you in understanding the code or seeing a code or something like that as I get time but again the goal is improve or implement the functionality of the forgot password it's super simple if you are not able to do it if enough of requests are coming in I'll do that no problem at all but again I take this as take this as a simple assignment I highly highly recommend that you should be actually doing this so this was all about an introduction of nexjs I think this was quite an in-depth introduction of next shares definitely in the future I'll be rolling out more of full-fledged more complex projects in next year's if you want that do let me know in the comment section I would really really love to have this one so that's it for this video let's go ahead and catch up in another such video it was great and fantastic for teaching all of you I enjoyed it thoroughly do let me know in the comment section if you are enjoying such videos I'll make them more interactive more like just like you're sitting next to me and learning everything I'll make them more engaging so that's it let's catch up in the next one hit that subscribe hey there everyone hitesh here back again with another video and welcome to this another video on xjs I thought we have done so much why not to show you the deployment part and some assignment part as well so I've added some of the assignments for you we'll first talk about that and then we are going to talk about how we can take this and Deploy on the virtual Warsaw is one of the great platform where you can host your Nexus application our database is already online in manga DB so we'll utilize that let's go ahead and try this out let me share my screen uh with you so this is what I've added in the next JS readme file you might have already seen that in the repo it's nothing it says a detailed course on xjs we can just actually move this here a little and I have added what are the tech Stacks that we have uses mail trap Nexus typescript Basics nothing much big deal and here is my YouTube channel link as well so I've added a YouTube I'm pretty sure you're watching this on YouTube if you're watching it somewhere else hey I have a YouTube channel apart from this there is assignment the first assignment is improve the UI of the application right now we were focused too much on implementing uh the functionality part and the bare minimum basics of UI so that you can understand the flow of the application now definitely integrating too much of the Tailwind we could have done that we could have just copied and pasted that that I'll surely do that in the upcoming videos but it doesn't really add any much value if you request me enough in the comment section I would definitely add some of the videos which are focused purely and purely on Tailwind skills so I can do that if you wish want to have it let me know in the comment section but anyways in this one I have skipped that so that's your assignment to add more beautiful UI maybe make button mode beautiful maybe use a theme for it or maybe have better inputs so something like that you can have it and also add a feature of forgot password we have done exactly same thing in the verify email and again just watching the video is no benefit for you and in case somebody's saying hey why didn't you do it you should have done that this is an incomplete tutorial I would say probably you will never learn programming if you'll just watch the videos and expect me to do 100 of it uh you won't be learning programming so I'm not bothered about you those who are bothered about learning the programming now is the time that you achieve it now if anybody is actually a completing the entire thing just let me know your GitHub repository or you can send me a kind of a request here pull request but make sure your pull request is not merging your code in my code I don't want that I want user to see only the code which I have written I don't want other people otherwise people will be confused that hey from where this code came in so only after the hint just try to add or I can just add it just in front of you that we can go ahead instead of the hints up here so we'll just add your completed repositories so we'll just go ahead and say something like this uh your completed assignments assignments and you can just add your links up here so we can add here something like this uh add your repo so if you have completed everything so you can add up your repo link here I'll just push it again so you can just go ahead and add a repo link here that hey here is my completed version of it or probably a deployed version of it so go ahead and add it that kind of a pull request only I'll be accepting if your pull request is going to make any kind of a mess then I'll not accept it if there is a conflict I'll not accept it make sure you actually update the conflict take the proper poll and everything so go ahead and do that that's your contribution in here all right so that's the basic of how you can do that I have even written your forgot password hints as well that what user needs to do it's a five-step process I have given it here so that it will help you to learn all of that all right now this whole thing is being pushed so let's go ahead and actually push this final readme as well I'll just add this changes add your contribution here gear here and I'll just Commit This and we're going to push this so that this also this is also available there so all right so now everything is being pushed onto the GitHub it's time that we actually go ahead and take it on to the next JS uh versal actually deployment part but before that we need to actually create another user I have actually removed all the previous users so I'll just create another one just for the testing this user will be I'll just call this one hitesh hitesh123 really bad uh show the password at this one two three add a built-in role of write and write any database not a good idea but we'll still do it I'm just uh making this up all here so that you understand that what are the security issues and concern which you should be having uh so we'll just go into database and we will be connecting with the strings so I'll just copy this so that I can actually inject this in here so I'll just copy this go back up here and let's go ahead and deploy this so virtual and we need to bring up on our all of our environment variables here so I'll just click on project and this one is react not react it's actually in xjs next JS full stack auth yeah we want to import this this whole thing is good here is our environment variable this is where we actually inject all of this so let's go ahead and open up our environment variables since I have deleted everything so I'll just go ahead and open up the sample.env hey I can just close all of this we don't need this sample.env I'll just paste this into sample link so the username that we are using is hitesh and the password is hitesh123 and what you need to do further is add up your database name so we'll just call this as next YouTube auth yeah that's good so the first variable that we have is URI copy that enter into your domain variable just like this you had your environment variables and you don't have to do even a single thing paste copy its value paste the value here add this up we have one more how can I get here here it has one more we'll have the token secret make sure your token secret is oops make sure your token secret is way better than mine I'll just add some complex token yeah that that's good enough I'll add this and we can also go ahead and add a domain uh domain yeah that's that's a crucial one because right now the domain is we have no idea what domain we have so we need to come back here and add this after the deployment because we'll get a URL if we would be having our own domain then there would be no problem I can just go ahead and do this but we need to add the environment variable little bit later this domain part I will just click on deploy and that is it that is it all it takes to deploy your application it will start building and if we don't have any bugs or issues we will be able to deploy it if we have some issues or something like that obviously we have to debug that part but again there is nothing much it will just give me a URL and all I'm looking for is a warsell app URL so that I can add it into my domain as we can see this is the domain that we have we don't have to have ports and stuff like that so this is taking us some time in building the build phase actually takes some time yeah okay maybe we should pause the video here there is no point of unnecessarily steering the screen here okay so let me pause the video all right so you just missed the confetti there is a confetti that actually comes up here so right now notice here it says add your domain I don't have my domain that's why I missed out that environment variable so again so let's continue the dashboard of it where this is so I can see my application is up and running and this is the deployment URL so that is what I'm looking up for so I need to actually copy all of this uh next year's full stack auth then some random variable Dash My username.warsal.app I think that is a better way of actually domains let's just click on it and we can edit this to have a better URL so let's just have this next year's full stack auth versal app yeah we'll just copy all of this and now we need to actually add this into environment variables so there is environment variable without this the thing is not going to work so we have our token secret we need to actually provide domain and then the value of it so whatever the domain wherever you are deploying it needs that this is what we are using in our mailing services so make sure you actually get that and also there is a issue here that in the if you go into the source and inside the helpers and in the mailer I have actually deployed my own user ID and password here but I have actually deleted that account so it doesn't really work anymore but still make sure you actually use this to do add these into the credential and EnV that's a security concern here but anyways so I'll just go ahead and say that hey this is add another one now Adam save this one so please define the name for an environment variable ah accidentally added that one so we have all these domains and tokens and everything now our app should be there so now in theory at least we should be having this being deployed and it takes some time so there we go we can sign up and we can log in that's good and we'll just grab hitesh and we'll be saying hitesh at the rate google.com which is not true and we'll be saying one two three four five six very secure password uh we'll do the sign up obviously our mail will fail because that doesn't exist so that part of the code is not going to work it's saying processing taking some time and we got the sign up because our mailing is actually failing otherwise we would have got redirected there but in theory at least we should be getting some of the users in the documentation here or the document so there we go so there we go obviously we didn't got properly redirected everything but we are getting this the reason for that is because in this portion we are having a bug which is intentional I didn't want to expose my credentials otherwise we would have seen that everything is going nice and easy so now one more assignment for you is extract these user ID and password put that into environment variable so that we can actually inject them there that would be really really nice but now you know that how you can actually have your application and stuff like that we can log in and we can go ahead and say hitesh at the rate google.com and we should be able to get this so one two three four five six we should be able to log in processing login and the login now we are getting this so get user details I'm able to get my user details hopefully there we go and I can visit the profile as well this is working fine I can go back and hit the log out button let me see that if we are getting this token as well inside this and application and cookie and there we go we got the token this is how the real world application works and we can hit the log out and this should be taking us back only thing that's not working is our mail and we know why it is not working in the code part as I always say it's important to know how your code is working but it's also important to know that why your code is not working which is the part of the flow that might be broken this actually helps you to understand and debugging debug a lot faster because you understand your code in and out and that's what I always Focus that please go ahead and understand the part that it's not always about working code it's also about the ability to understand that which portion of my code is causing the bugger issue as the application will grow larger which shortly we'll see later on you'll understand that hey there's so much more to learn and so much more to understand but this was a fun deployment part told you deployment is super easy it's actually fun so in this video you have learned how you can deploy use your net environment variables some of the issues that we have that you can fix up there and can actually make a pull request that hey my repository is now all good and perfect at the age can you add this into the readme again I repeat this all those people who will be sending an unmindfully these pull request which actually merge your code I will not accept that I'll write a comment below that that hey you didn't understood the video but those will be just sending me the pull request where there is a link of your repo in the readme file only I'll happily accept that and maybe thousands and thousands of people will be able to check out your repository that what's your version and your implementation of the assignments that we have done so be cautious don't just mindlessly send the pull request be cautious about that and in case I miss you uh miss your pull request or something let me know in the LinkedIn or Instagram or Twitter wherever you like that's it for this one let's call this one as end for the series officially I'll definitely make more videos so do check out and subscribe to the channel I'll catch you up in another such video

Channel: Hitesh Choudhary

Views: 62,850

Keywords: Programming, javascript, devops, cloud, nextjs, mongodb, reactjs, authentication

Id: eaQc7vbV4po

Length: 236min 54sec (14214 seconds)

Published: Sun Jul 02 2023