Food Delivery Web Application using Microservice Architecture with Nest.js,GraphQL,Next.js || part 1

microservice architecture the most popular software engineering architecture and today we're going to start a microservice architecture web applications project series I'm super excited to start this series as you are so don't waste time let's have a look at why should we use micros service architecture in our project through diagrams all right so for explaining about microservice architecture I'm going to Google Chrome and I'm uh opening on website name is eraser. which I always use for all personal projects for making diagrams so you can make any types of diagram from here there have like lot of features in this website so uh let me open a new project in here or let me open this one yeah here you go so uh create on projects from here okay then come then you'll be automatically redirect here okay document and canvas so I don't need like any document that's why I am just opening canvas canvas is enough for me that's why okay cool now come to main points let me give you a simple short overview about this .io website you can generate your diagram by using AI also okay or you can start with any template this will helps you to like uh easily generate on template or easily make on diagram for your project okay for your uh anything like if I come here then if I click this getting start then notice there are lot of pre-made uh diagrams already in here like product requirement Talk technical design talk then user data model data flow diagram system architect okay you can open it then you can like update it little bit as per your projects as per your requirement okay so yeah now come back to our all files and yeah so first of all there are two type of architectures popular in software engineering on is monolithic another one is microservice so what is monolithic architectures first let me add here on point like monic architecture like this yep and you can change color from here also okay if you want to use it like for your project then okay so uh in monolithic architecture uh like we build M Tech projects or like what we always build with nextjs or anything like that so that is on monolithic architectures in monolithic architectures we have on let me add here let me draw here on uh angle like this then here we have so suppose think about it we have on uh e-commerce in here okay I mean on e-commerce website in here so here I'm giving example with an e-commerce website like we have product page in here suppose then we have so yeah this is our monolithic architectures actually how it work so suppose in here we have an e-commerce website okay just think about it this is uh we have an e-commerce website then we we have product page payment page checkout page etc etc right then we are sending here on request to our njs uh backend like it can be with njs framework or it can be like with python Jango or it also can be with nextjs right so this is our back end what we are doing from our front end we are sending on request to our backend then our back end is sending on request to this database okay and database is just doing some work like inserting data or updating data or just giving some response then that's going to this server and server delivering that to this front end that's why we can see our website interface in this front end this is how typically we work in an applications like in web applications this is called monolithic architecture okay this is called monolithic architecture now let's come to point then what is microservice architecture what's the difference here so microservice architectures and in microservice archit tectures we have this everything again like this wait let me make it little bit small y so suppose we have the same things okay I mean we have this everything also in this microservice architectures like product page so here we are writing just an small extra features like user service okay so in micros service we are breaking our this full projects in multiple multiple part or multiple multiple service okay like user service payment service checkout service order service okay this is completely another new project and then here we have on Gateway or proxy let me make it little bit small so this is on middleman we also have this uh kind of like Gateway in here like in here we are giving on HTTP request so we are sending on request to our this node J or uh you know Express J projects it can be like nestjs or nextjs so we are sending here an HTTP request the same things we are also doing in here okay but there have little bit difference in microservice architectures as this is not similar as like our uh monolithic architecture so that's why it's not totally similar as like this uh structure okay so let me draw it first then you'll understand it more better so here you go my drawing is done so this is actually microservice architecture so I know right now you have lot of questions what is this right so let me explain little bit with you right now you'll understand this everything then okay so in this monolithic architectures we have everything in this single front end applications right like product P payment page checkout page etc etc and in our server also everything in same place so suppose think about it your applications is very big you have lot of features in your applications then you need to do the everything in this same back end and this same front end okay but but in microservice architectures we are actually dividing or breaking our applications into multiple multiple Parts like in here we are thinking user as our authentication as on service so this is user service here in microservice architectures we need on middleman we also need a middleman in here also but micros service middleman is kind of different okay this is on Gateway or proxy why different let me explain this so in here in microservice we have multiple backend okay multiple server like this user server checkout server payment server order server okay then we are sending this all informations so in this user service this is a totally new project okay user server is new backend server and checkout server is another backend server payment server is another backend server ordered server is another server or as per micros service this is called service okay now in here just think about it you have on simple applications like on e-commerce okay so user is doing authentications then what actually happen like when user click the sign up button we take the user informations then send it to our uh server right then server validating it and uh send on request to our database for inserting the data then database give back the data again then we are giving our user to log to our website right we are giving access to our user to log to our website this is how actually work so in micros service we have one small problem in here as this is backend server is multiple in here like multiple multiple servers so when we user when on user doing on registrations that's first coming in this Gateway proxy okay in here in our this series we are going to use graphql for here okay so it meanings we are sending informations in This graphql Server so graphql is sending informations in this user UI then user uh just this user server is doing some work and then sending informations in here after that after registering the user it's again coming back here then when response is coming API response is coming we are sending that to the graphql but why we are sending that to the graphql because this checkout server also need this user informations for creating on checkout right that's why without user informations you cannot create checkout right we cannot create card like who adding product in the card we'll be able to don't understand it like who is adding product in the card so that's why we must need here user informations but as this is separate server we are taking informations from this graphql okay and graphql is sending this informations to this all our micro frontend or our front end projects okay that's it this is how work now in here in this checkout server we need like the uh user information so user informations this checkout server taking from this graphql server okay now in this payment server we also need this card informations otherwise we cannot proceed this payment so payment server is taking informations from this graph K server now graph payment server is doing some work then we are creating order so for this order we need this all informations like user informations checkout informations payment informations for creating order we are taking this all informations from this graphql our proxy or Gateway okay so here this is actually working behind the scene okay this is a middleman actually and this is taking informations and sending everything to client and sending everything to our server this is working parallell right right this is sending informations here also sending informations in our back end services or backend servers now in micros service we can use multiple database as well like for user we can choose on database for checkout we can choose another database for payment we can choose another database and for orders you can choose another database also you can use same database no problem you can also use same database as well now come to point this is microservice architecture okay good we are breaking our project in multiple Parts but what the benefit in here where should we use microservice architectures and where should we use monolithic architectures like why today's company big big companies like Netflix Google Facebook or like other big te companies using this microservice architecture but why what's the benefit in here now let's come to point let me add here some benefits first let me add here some problem of this monolithic architecture applications okay like first problem here is it's hard to maintain M okay it's hard to maintain uh let me add it little bit top so why monolithic architecture hard to maintain so suppose think about it you have lot of features in your application so that everything will be in same front end and same back end the application size will be very big so it's really very hard to maintain next point is hard to scale but why it's hard to scale because think about it in your applic suppose I'm giving example with right now Bodi website okay so in Bodi website this homepage people visit lot this CES details people also visit lot but in here in FAQ people don't visit that much in sponsorships people don't visit that much so if I want to scale particularly this one I mean this codes details I cannot do this this full projects in a single server so we cannot scale it right we cannot scale any particular part so this is a very big problem in monolithic architecture we cannot scale any single part we need to scale the whole applications so this is a very big problem it's hard to scale next problem is multiple developers cannot work in a single time what does this meanings in monolithic architectures suppose you are working in this product page or payment page then another developer cannot work in the same projects because everything's like in this checkout page we need product informations payment information so multiple developer cannot work in a single project yeah if your project is like this for your users you have another project another folder so yeah you can give this project to on Developers for payment you can hire another developer for check out you can hire another developer okay this is a very big benefit of microservice and on very big problem of Monolithic architectures next problem problem is when your application will grow you need to spend a lot of extra money but why you also need to spend money in microservice architecture like extra because you have lot of services lot of server but actually no in monolithic architectures everything is including in the same server so that server will get a lot of pressure that's why you need to spend extra money for this monolithic architecture now the last point this is if on service does not work then other service will also don't work what does this meaning this meaning is suppose think about B in here my payment service or in this codes details we have one simple problem okay this full website will stop this full website will totally don't load because this website built with monolithic architecture so this full application will stop this will totally don't load because we have one problem in the code but in micros service architecture as this is on totally different part so suppose in this user service there have on problem okay it meanss it will just stop the user service it will don't stop this payment service or checkout service or order service okay as like if you think about Facebook then you'll notice this like suppose in Facebook notification system not working but while notification system not working the news feed and the comment options the post reaction option everything is working just not ification system not working because they are using microservice architectures they they have lot of servers they have lot of services so that's why when there any service does not work or it's Crash then other services also working yeah it's true that it can like do some problem suppose your user service not working then in payment service this will show that it's working but actually it doesn't work because for doing the payment you need user informations okay but you can easily scale it or you can easily find out it like where is the problem happening because you have like lot of other other services but if you think about here suppose here it's coming on error it's very hard for me to find out where is the problem happening okay but in microservice as we have multiple service multiple server so it's kind of easy for us to find out the problem okay now uh let me add here some company who actually using this microservice architecture okay like Netflix Google and Facebook okay just for um example yeah now let's talk about microservice benefits okay other benefits I'll don't make this part to more big don't worry okay let me just add little bit few points in here okay like this so microservice architectures benefits you can make multiple server you can scale individually okay multiple Developers can work in a single time it's easy to management so these are the kind of like uh major benefits all there also like lot of other benefits what I cannot add it in here okay but this is the kind of major major benefits y then let's talk about on small things then I'll will finish this theory part because I know lot of people don't like this theory part but it's very important to understand the theory as well because microservice is totally not that much very easy okay so uh before starting anything you must need to know that theory otherwise it will be very hard for you on the future to work with that technology okay so that's why I am just explaining with you little bit it's very important that's why I'm explaining okay so please don't skip or if you're feeling boring then like here some music then again come here and play this video okay because it's very important to understand what I'm telling you right now now let's talk about monor repo so what is monor repo so monor repo meanings it it's just on type of our GitHub repository okay so why I am adding this point like important Point why it's important so let me explain it with you as microservice have lot of server so it's really hard to maintain right there are lot of things in this like user server checkout server payment server ordered server so it's hard to maintain so that's why we need to understand this monoo and poly repo so let me add this point first then I'll explain with you yeah so this is mono and this is poly repo so monor repo basically this will meanings every service will be in same repository okay we will upload this every service in our same repository so it's easy to maintain your team can work in same repo this is the benefits of monor repo and poly repo meanings we are uploading these all services in separate GitHub repository different GitHub repository it's not that much easy to maintain but uh company like Google or Facebook like who are who have very big team like they have really a very big big team so that's why they can work with this PO repo because they have like lot of important things so they create separate separate GitHub repository for their services okay but as we don't have that much people so that's why we are planning to make this everything in a single repository so it will be easy for us to maintain everything okay so today in this projects we're planning to use monor repo in monor repo every service will be in same repository it easy to maintain and it's and your team it meanss we can work in same repository so let me give you just an a practical overview of monor repo how actually it's look so this is our project GitHub repository this is an complete monor repo setup so you might be thinking then what is this mono meaning so think about just watch it this is our servers folder inside this servers folder we have apps folder and here two Services one is user server and another one is Gateway okay this is two services so everything in this servers everything in here now in this clients we have user UI currently we don't have still restaurant UI or like admin UI so that's why only user UI in here but when we will start our seller part here we will create another folder for that okay for our admin we will create another folder so everything we are adding in same repository it's easy for us to maintaining okay so that's why we are using this one okay cool this is a kind of like short introductions about microservice and monolithic architectures I hope you understand what is microservice architectures and what's the benefits and why should we choose microservice architectures for building our big big applications but for small applications if your applications is not that much big obviously you can choice is this monolithic architectures there also have some bad side of this microservice architecture and that is like it's not very easy as like this monolithic architecture okay because you have to maintain a lot of services lot of servers so you need at least programming knowledge otherwise it will be hard for you it will be kind of hard for you but if you know monolithic architectures well then you can come here so this projects prerequisites is you must need to know at least M Stack like how on full stack we we it work or you just need full stack next days knowledge like how an fullstack website work or you need like some previous experience with working full stack projects I'm not saying that you need to be expert no but you need like kind of experience okay I mean some basic knowledge about full stack development if you have then you are good to go with this full series so that's it guys I don't extend this uh introduction part to moric I know it's not feeling that much good to you like I'm talking too much right but it's important that's why I'm talking so that's it uh in the next part I will explain with you our project structure okay in this today's part we are planning to build our user service so uh how we are planning to authenticate our user what will be the strategy we're following I will show you the everything so that's it see you in the next part so right now let me give you a short overview what we're going to build today so today we're going to complete out this full user service or our authentication Service we have lot of authentication providers in here lot meanings in here you can do manual authentications you can do social authentications you can forgot your password you can receip your password in our authentication system we have OTP verifications in our forgot password system we have email verifications and everything we're going to complete in today's part okay the complete user authentication system using micros service architecture and nestjs graphql then uh mongod for database and for orm database RM we're going to use Prisma and for our client site we're going to use nextjs okay so let me show you an overview first so let me create here an account in front of you so here I'm giving my name then here I'm typing on email so suppose I'm adding our bodm is support email okay phone number here I am adding like me and password in here I am adding Bodi one 2 3 okay by the way let me add here you know four digit down hit sign up notice password must be at least eight characters long so here we are using react hook form and zot for validating our form so we have here complete form validations okay so B Cod me and suppose I'm typing 999 like this so this is our password so let's remember this password and let me copy this one now hit sign up so now I cannot click here again notice okay so each already exist with this phone number yeah so same phone number we also cannot add here this phone number already exist user so we need to write here another phone number like let me type here on another phone number yeah so hit sign up right now and here you go please take your email to activate your account and it's coming to our verify OTP options now let me go to my email and here you go this is the OTP 9457 okay so after clicking registration this will send an OTP as like how work bodm website okay fully like that so here right now type on wrong OTP suppose 555 and click verify OTP invalid activation code now type the correct one 9457 so 9457 now hit verify OTP now this will take little bit time and activated account activated successfully so right now if you try to log in in that account like support bod.com and let's paste our password sorry let's write the password bod 9999 this was our password so hit log right now oops 39 not 49 yeah now login successful so this is our email which email we loged in and this is my profile all orders apply for seller account and log out okay so right now let me log out and right now let me show you the social authentication so let's click this Google right now and click here and I'm right now choosing all of my Google account okay like this one now you will see the magic this is the account Avatar this is the email and this is the informations so right now if I show you the database you will notice that the user already in database okay I mean the user created behind the scene so here you go if we give here on reload then notice this is the new user the phone number is null address is null why phone number null because this is social authentications so obviously phone number will be null in here cool so that's it right now let me log out again and let me show you the forgot password options okay so forgot password and suppose here I'm adding this email and I'm clicking submit here you go please check your email to Reet your password so let's come back to our email right now look at here this is our password receipt email hello Bodi we received a request to receipt your password to proceed click the button below so if you right now click here this will open and another link and here we go this is our receipt password URL so right now from here we can add a new password so here suppose I'm adding a new password uh 9999 like this and here I'm typing like wrong password then not password must need to match now I'm typing the correct one I'm hitting this submit then password updated successfully so right now come back here click login and try to log in with the correct on here now hit login and here you go login successful so this is our account informations this is the email profile and all ERS and apply for seller account so our authentication system is perfectly working and today in this video we're going to complete this full authentication system including social Au manual authentications login forgot password receipt password everything okay so this is going to be very interesting so don't interesting time let's start this all right so let's create a new folder in here I'm giving this folder name to food delivery because we're going to build on food delivery mobile uh website not mobile app yep now let's open this folder in our Visual Studio code like this now inside here open our vs code terminal then write this mkdir and our project's folder name so we have here two folders one is for our all client services and another one is for our all servers so oh sorry not CD mkd and servers okay so here's our two folders servers and clients now let's go to our servers folder and now we need to install nestjs for our server so let me go to Google Chrome and let me show you next CH website so this is our next CH website now click documentation and here this is the command for you need to run this command for install Nest CLI in your device so just come here and run this command I already installed it so that's why I'm not going to install it again okay now we need to run this command n new and enter okay then they will ask us for on name for our projects okay for our server so here our first project name will be Gateway okay because in here uh we are planning to connect our all graphql services in here okay so this will be our Gateway project that's why here I'm giving this name to Gateway and choose on package manager so here I am uh clicking this pnpm I like to use it that's why I feel uh it's like faster than npm and yarn so that's why like I'm using it so obviously this will take little bit time to install this and after finishing the installations I'm coming so here you go the installations is perfectly done in the servers folder let's check here this is a new folder name is Gateway okay now in here we need to again write a new command for change our this app to on monor repo structure okay this is right now in very default NS applications right now we're planning it to change it to on mono structure so we need to write we need to write this command n g and enter sorry first we need to CG to our this Gateway folder okay then right now we need to write this command Nest G and app okay then we need to add here on name for our next service so we're planning to make here user service so that's why I'm giving this name to users so right now note this magic the Gateway is right now missing and that is inside here this is the power in this apps folder we have right now two server uh two service on is Gateway another one is users and this is right now totally monor structure if you right now go to this uh t c. Json then look here monor repo is right now true and in here we have two projects like on is for our wait on is our Gateway another one is users okay so this is our two projects in here so right now what we need to do we need to just do on back like this and we can right now select this all apps folder node modules this like a everything from here by singly like selecting like this then we can move it to the servers okay like this now this gateway then empty folder so we can delete this Gateway right now very simple so in this servers we have on apps folder and this mon repo setup now if we run this command npm Run start and da this will start our NJ server so right now if we go to our Google Chrome and if we go to the Local Host 3000 then not Hello World here because this is running our Nest project so in this apps this is running actually our uh this Gateway so let me show it to you so this is our app module which is the entry points are kind of like the main points and this main. is also like that here we are defining the port this is 3,000 so if we change it to four 4,000 then our Port will also change to 4,000 notice right now it's not working if we go to right now 4,000 here you go cool right and in this app module uh sorry in this app service we can change this message right now to like hello simple hello then give on reload yeah done our very simple Nest CH and monor repo setup is done now in this game way we don't need this app controller or anything like that so we can delete it okay we don't need any app controller or yeah we don't need any app controller so let me delete this yep done so uh now we need to remove this controller we don't need this controller right now this this will be simply empty right now uh now we need to install some dependencies okay so let me first uh close this terminal then let me install here so clear it now install the dependencies so PN PM I as you're using here PN PM so we cannot write like now we need to use right now pnpm okay so pnpm I and at theate Apollo gateway then add theate Apollo sub graph okay like this and add the date n Js Apollo then our add the date NJ graph CU then our simple graph Cu uh spelling mistake graph CU then class validator our big gript for hashing our password and we need types version for the bcrypt so types and bcrypt like this now hit enter so this will start to install all dependencies and obviously uh it will take little bit time yeah here you go the installation's perfectly done also I forgot one dependency and that is ppmi Express okay also install this one now in this app module in our Gateway we need to come this app module and and in our Gateway right now first we need to add here graphql module okay so graph ql module okay from our next graphql then dot for root here we need to give here on type and this type is actually our Apollo Gateway d driver config okay this one now add here our driver name which is our Appollo Gateway driver then our Gateway our all Gateway for our uh all services so here add it like super graph qu STL okay here new introspect and compost okay the first one yep then so let me uh close this then uh now in here we need to add our all sub CBS so here right now I'm making it some empty array uh we'll add it later and by the way in our next case pre is default active Okay so first you need to like always format your code okay by right clicking here or like the format or you can do it by doing shortcut for Mac this is option shift and F okay I don't know for Windows please check it like by coming here okay this is the command for Mac for formatting code and uh we make sure that you install this dependency oh sorry not dependency this is on vs code extension PR okay this one so now after subgraphs as it's empty right now so we we have nothing to do right now so save it no problem still it's same nothing uh happening in here now we need to come back to our this user service what we are going to start today so in here in this main.ts I want to change this port to 4,1 okay because 4,000 is already our Gateway Port that's why then in here in this user module we need obviously user controller and user service uh will work right now in here okay so here's first we need to set up our graphql right now okay in our user Services also so graphql module oops spelling mistake so graph module in import it from nj/ graph then for root type will be Apollo Federation driver config then driver will be our Apollo Federation driver and Autos schema file this will be itation to okay we don't need any a schema file in here then do like this cool done so now in this providers uh for now this is yeah for now this is enough but uh we can do one thing we can add here more little bit like config service I don't know why it's not suggesting okay so uh in here import our config service from our ns/ config so we need to install this uh dependency okay so let's install it by typing pnpm I and npm okay pnpm I and this one yep then we also need our JWT service okay which is also a new dependency uh so let me okay yeah we need to install a new dependency for this so come here import our JWT service from our NJ and JWT okay this is the name so pnpm I and this one so it's installing and yep done we can clear it right now so yeah for our providers and controllers it's almost done now we can run our npm Run start and da and we can right now specify our project like gateway then this will right now run our gateway to our 4,01 but this is giving on aor probably yeah try to load services from remote points but non provided okay so H got it we need to add some methods like our uh you know for graph qu need query and mutation so that's why it's giving this error okay no problem we'll run it later first set up it in our this users module sorry not users module uh in here let's create a new file by giving name users do resolver dots okay and inside here we will add our all resolvers okay and in this SRC folder let's create a new folder by giving name GTO then another folder by giving name entities by the way you can also uh do this everything automatically but I'm doing it like manually very simple thing that's why so entities and another one for types yep done in this dto we need to create a new file name will be user. gto. GS now in here import our input type then our field like this then import is email okay so uh we need to install this dependency if I'm not wrong class validator already here okay yeah we don't need to install it we already install this class validator yep now input type and now export our class register D okay for registration what we need for uh now I am doing here very basic things okay it's not real fields we will obviously update now for testing this is like on field which will be not empty and where value will be name is required like this then on easy string name must need to be on string yep then name String cool now on field and is not empty it means it's also required email is required then minimum length oh sorry this is email okay yeah email don't need any minimum length so here we need to use is email like this and email which type will be on screen yep now here we also have on fi for our password okay so is not empty and password is required for password we need on minimum length which is 8 and here we need to add on message like password must be at least eight characters like this and password string so done and now uh let's create two another one for our login dto for very simple now like this you can go to to this file for for copy this one okay it's very simple on input type then our login D here we have just email and password field very simple now in this entities folder create our user. entities. DS uh sorry not entities this is called entity you can give any name but this is not actually entities this is called single entity yeah here we need to import this few things from graph ke then we need on object type and on directive I'll explain this everything later okay again then we need to export on class for now like avatars then here add our field ID string then we have uh more few things in our this model so sorry in this class like this okay then object type and let's create another class export class user and field will be here like ID will be string then our name field like this then our email then password and Avatar like this then for our role created and an updated that okay so just like this very simple entities is also done as well now we have on types folder in here right so let's create user. types. TS and inside here we have lot of types so first let's import your object type and field from n graphql and our user from our entity okay this file now on object type and Export class our error type like this and field message string this is our custom ER type okay so field then nullable will be true and code string yeah done then uh object type export class register response like this now create another field call here our user and it can be null sometime when log out okay so null crew and user which is optional and type will be user or sometime uh it can do problem so that's why I added here user or any okay yep remove it done now we also need another field for our error like this we are calling this aror type in here okay very simple now another object type export class our login response then our field for user and our user yep then last one again the same things for our eror type like this we're calling our top uh this aror type from here okay like this so now save it our user types is done as well so entities done types done now we are almost good to go in this resolver we cannot do anything uh as our servic is missing right now okay because in resolver we will add the everything this is for our graph key will okay uh in this resolver we're going to like add all methods like mutations or it can be uh query okay so uh for now this will be empty we need to start work in this users service.ts which is a very important file and kind of like the main file for uh doing our all works okay this is for our business logic this users. service.ts okay here we will do our all authentications related work for this users service so here first I'm set uping on very simple things okay then I will go to uh advance so first in just remove this get hello okay now in here call on Constructor then private read only our JWT service and call our JWT service for the type yep now private and read only Prisma and uh yep we need to start working for Prisma in here otherwise we cannot create a user okay so private read only this will be config service okay and here will be our config service yep and add here comma here as well and here finish it like this cool so now let's do one thing uh Prisma but we can do it later no problem we need to right now start our business logic so for first time register user and very simple thing okay so uh how we're planning to do registration work so C on class like this as synchronous register where type will be register uh we need regist dto so type is our resistor dto then response which type will be our response which we're importing from Express okay then in here constant exist uh for first time we will take here our all register dto do uh wa from register dto here will be the name email password and Avatar is sometimes undefined okay so name email and password then what we can do for now we can return for now we can create on user object in here okay the name email and password okay like this and return this user Cod so response oh sorry so uh for now guys we can remove this response okay like this okay we don't need response right now and here we can give on comment okay at the first time that's why otherwise like I'm not creating user right now that's why now this is our login service okay here we can say register user service so login Service as sync login we have our login dto which type is our login dto then constant email and password like this we are taking it from this login D and we are sending very simple okay for now this this is very very simple things all then get all users service okay so asnc gate users create on empty array and return our this users okay very simple work we're doing right now y so yeah this is done and now this is our query this is mutation this is mutation H for now it's enough I think now we can come back this resolver okay in our this resolver so first add the DAT resolver import it from n /ql and call here our user now add the date use filters then call here okay so this is for our custom error Handler okay so we'll do it later uh we don't need any custom error Handler right now now export class users resolver like this on Constructor then private readon user service which type will be users service yeah then call like this now in here we can call mutation from graph key and we can call here our register response asnc register then in here like this register input and register dto which type will be our register D then let's add your context like this context where we have on response which type is response now this is on promise so promise and here we can add our register response type like this now inside here like we can write on logic if register d. name or not register d. email or not register D do password then we can throw on new bad exception so we don't need to make right now here custom you know uh err Handler okay we already have lot of things njs and this is the power of njs okay now constant user and add this dot user service do register and this register dto cool now return our user yep so context is defined but never used okay oh sorry uh in here not only register D we also need to send here context do R okay uh for now guys as uh just this is giving on typescript error because you notice uh in here we removed our response okay so that's why this is like doing problem no problem we can for now skip it like this we can remove it for now only okay we can remove this context cool so uh just remove this use filter and context done okay so our on mutation and on query we need right now okay so uh we can do one very simple query for our all gate users I mean for our gate users so after this resistor after this mutation let's add here our query if you watched my previous tutorial about Artic query then probably you are familiar with this mutation and query okay because uh this this is very similar things as like our article query okay so this is given typescript error okay I know why this is giving error because this is empty that's why so here let me create an ID like 1 2 3 4 then on name like test on email like ABC then our password which is like this okay okay it's right now time to install our Prisma okay without Prisma right now it cannot work so uh let's in this servers folder let's run this command pnpm i g Prisma okay so this will install Prisma and here you go done now again install pnpm at the dat Prisma and client okay and there you go it's also done now we can run this command so npx Prisma in it this is the command okay I did a small mistake yeah now notice uh inside the servers folder we have our schema. Prisma and this is our EnV okay so for now let's do one thing in here in our D EnV update dates with our uh local mongod database okay or we can use here on cluster as well so here I am uh using on mongod cluster you can also use Here Local one as well so how to create mongod cluster I hope I don't need to show it to you uh I hope you know this because it's very common and uh I am like using cluster in my all last tutorials so I think you know this like how to create an mongodb cluster by going to mongodb website okay so here I am just adding on of my like testing cluster okay now in this SCH schema. Prisma we have our main work here provider we're going to use mongodb and yep done now here we need to add our all database type so first of all here on enum for our rule where we have admin and user now create our models for our avat ID will be our mongodb ID like how work very similar like this then public underscore ID which type is on string and URL which is also one string then user what we will create right now and user ID which is string and also unique at the same time and this is on object ID so DB doob ID yeah now after this more model and user like this so copy this ID then name which type is string which is required through then email here I'm clicking on simple uh model right now okay uh we will update it later again uh as part our plan so password string Aver string okay and uh this is sorry sorry sorry Avatar not string here we need to call our this Avatar and this is optional now here we can uncommon this user we can call here our user model then we can make it on relation with our user model so fils with our user ID and references will be our ID so yeah done now after avatars we have Ro so where we're going to use our Ro inam and default will be user now create it at which is date time and default now then updated at which is also date time and updated that cool so for our work this is done we can right now push this code to our Prisma okay so for push this npx Prisma DB push run this command Okay so Yep this is done and we can also run our Prisma Studio to see our database so yeah it's running and here you go so this is our users and avver okay which is empty oh by the way here have already already on user so let me delete it I created it last day that's why here on so let me delete and make it empty yep now in here we can come here and we can remove this then here return this dot Prisma okay so Prisma now in here we can uncommon this like Prisma and here Prisma surface okay another important file in this Prisma folder create a new file by giving name Prisma service.ts okay or sorry not like this Prisma do service.ts okay and inside here it's a very simple small file import our inject table then uh and our on module init okay this few things and by the way you can also go to Prisma website for like checking this documentation this is totally I'm copying from documentations of Prisma website okay this few lines for connecting Prisma with our n test project yep done now here call our Prisma service like this now here we can call this. Prisma do user do find many done okay still it's get giving that weird eror I really don't know why this is giving this weird weird eror okay at last I found the issue it's it was very very very funny issue and that is I mistakenly imported this query from our next CH common but no we need to import this query from graphql okay so be make sure that you're importing it from graphql otherwise this will doesn't work properly okay so yeah our query and mutation work is done so right now if we want to to run this so pnpm or npm we can also use no problem npm start sorry npm Run start diff and our users okay this is giving on uh we this is Prisma do Prisma service not found okay where this is is it in user module okay so at last I found the issue guys the problem was in here okay we did like the uh wrong path in here we added here wrong path for importing our Prisma service right now this path is totally correct okay so that's it be make sure that you are adding here this correct path otherwise the error will come okay in our this user. ser. TS file now come back to our this users uh then module. TS okay and let's add here our import our Prisma service okay like this again this is I don't know why Auto auto complete giving a wrong suggestion we need to totally go to the uh go to our like the correct file okay now here add it like this now save it now if we open our terminal then note we don't have any error right now this is completely fine so right now if we go to our local host 4,01 or which one let me check this main.ts this is 401 so come back here and search 401 then slash graphql then it's not oh sorry not 3001 this is 4,000 on/ graphql and here you go this is our graphql playground but notice here in here our all users uh like the all types for our users is missing in here like like registered user and login why missing because we forgot to add it in this users. module. DS okay we must need to add this resolver in here in this providers uh by the way uh in njs if we use graph Q then instead of controller we have resolvers okay it meanings resolvers will work as like an controller uh in our graphql we don't have like get put post or delete anything like that we have mutation and query if you previously worked with rtk query then I hope you are familiar with these two things like query and mutation okay it's totally similar like that now come this user. module and let's add our uh user resolver okay then go on format yeah done now if we come here and if we give on a Reload then you will see the magic right now notice here we have our register d our mutation this is our register response our this query then everything here then this type user okay so it meanss we successfully connected it perfectly so right now we can create user from here okay so mutation register then here register input and now we need to add here our ID uh sorry not ID name so suppose I'm adding here like Shahar sh my name then email here I am adding my email like this then I'm adding here password which is like 1 2 3 4 5 6 7 8 and that's it now inside here we can add our this user okay now if we click here this is giving on error okay because uh we didn't create actually in user okay okay okay I got it so uh now let's come back in our user resolver and check here in this registration what we are doing we're sending name email password then we are like just creating uh on register very simple so here uh come back right now or this service and note we're doing nothing in here so we need to Simply create okay how constant user equal to AIT this. Prisma do user dot create okay and data will be name email password everything will be similar in here now we can return our user and our response so now uh let's right now add here response which type will be response like this now we can uncomment this cool now in this resolve words this is giving on error it's very common because we need to right now add here our that that response what we removed uh sometime go so context and context like this which here we have on response and type is response now in here after register dto send context. response totally like this now what is this is giving earning uh following argument type of response is not assignable to type response any okay what is this response type okay yeah so we need to uncommented yep done now if we try then our user will create but before this let me come here and let me show this to you so this is our user database which is totally empty right now and now let's click again so they are giving here error because we need to add here like the other fields okay for now like email password avat if we want like you know ID then public ID and URL okay then our role create at updated at and yeah that's it done now if we click here cannot return null for nonrefundable field. user. ID okay it's really creating user okay so it's created user notice it's created user but our graph Quil is giving here last one warning like cannot return null for non nonble Fields like user. ID okay so this is giving for this reason okay if we remove it then this will don't give any error but right now uh we cannot create multiple user right obviously not so here we need to check it so first constant each email exist like this so a Prisma this. Prisma do user. find unique where our email is email okay now if have our e email exist it meanss we need to right now return on sorry not return we need to throw on new back request exceptions okay like uh user already exist with this email okay fully like this okay guys so this error is coming right now for only one reason and that is in our database we didn't add email to Unique okay that's why we must need to add this email cannot be similar email must need to be unique now if we rep push our code again then this error will be G like npx Prisma DB push then just wait for finishing yep done now notice this while error will be gone now notice error gun okay because email is right now unique okay so if email um email already have then this will throw on new error like user already exist with this email so right now if we try to create again account with the same informations then this will doesn't work and here you go look at the message us are already EX with this email so it's perfectly working so right now obviously we don't create user like this totally like this we will validate our user then uh user need to verify the user email or otherwise like the phone number right us just must need to validate uh account informations right otherwise we don't create any account so now let's start our that work so uh first let's close this module and uh resolvers as well or no just close the side but yeah now start working from here let's go to Prisma file Prisma folder and this schema. Prisma and now let's start our original user model so for creating user which Fields we're planning to add here first add here on comment and then we'll think about it okay so name usern name email password Avatar this is common thing right and role this is also common thing now which extra fields we are planning to add in our applications as this is on restaurant service so we cannot uh add like these few things we need to must add some other extra things one of them is phone number why phone number because delivery man must need to contact with this user by using this phone number so when user will give give any order by going to our website then Delivery Man need to talk with this phone number okay for like confirming the water or for uh getting the correct exact locations like how our food delivery mobile app actually work okay like that then next we need address user address must then anything else uh we need our users orders list okay we will add it but not right now this will be our next task uh when we'll make our orders model then so and yeah I think this is enough right now then after email here add phone number which type is float and mass need to be unique okay and uh this is also required through then uh our address which is is on string like this yeah okay that's it I think it's enough for right now if need anything else we'll do it later okay done so now we can push our discode why I am adding like this as our avatars will be uh we're planning to add upload our avatars in this cloudinary so cloudinary will send us public IDE URL that's why we're adding these two things okay and this user for relation and this user ID for making the relation yep done so uh we need to push this code so stop our server and run this command npx Prisma DB push so this will push our this model yep done so unique index user phone number key on phone number yep yep your database index is just right now sync with your new Prisma schema done so we can clear it we can again restart our server yep oops on error here okay yeah because it's updated so that right now obviously this will give error very simple now what we need to do in this register dto we need to come back here so right now we have name password email and we also have phone number okay so is not empty phone number is required so here we can give this name to phone number which type will be number done yep and for login email or phone number either can add or email is also enough no problem so uh now in here not password only let's add here phone number as well and now first uh yeah first obviously we'll check is there have this email also we need to check is this iser registered or not okay so if sorry constant is phone number exist like this okay so here this is is phone number exist a Prisma find unique phone number now if our each phone number exist then we need to throw this error okay user already exist with this phone number yeah so this is very weird that it's still giving this error phone number object literal maybe the phone number does not exist or look at here this is our phone number I don't know why then this is giving this we here okay now notice error gun so it's really funny that sometimes it's doing this type of funny error okay no problem now this will come perfectly so what is this is saying data name email phone number password phone number number is not accable without creating user okay yeah address yep new one so add here address and like this okay now I think every will become address because this register dto address is missing okay so uh while registering the user user don't need to add any address so it meanings uh we cannot make it then required to R okay yeah obviously when user is regist registering we don't need user address not that time when user is watering food then we need this address so we can make it optional and after making optional let's push this code again okay okay by pressing by writing this command npx Prisma DB push yep now come here and I think this error will come so it's still giving this weird error just come this uh Prisma file okay I mean just over it then click this index.ts notice error gun this is the power okay it's funny so yeah done and right now we are creating user but no we need to right now do the all validations so let's start it so first we are checking the email uh exist or not so if exist then on error and then if the in the phone number is exist then also same on error after it right now we need to make our hash password so hash password and we can do it by using our bcrypt so bcrypt let's uncomment the Big Crypt from the top so uh I mean sorry import it like import everything as bcrypt from bcrypt so add bcrypt do then we need to add here our register dto do password or we can directly add password then here I'm giving a number like length is 10 okay and instead of password I mean in here password we need to send this hash password so it means this will send the hash password done now we cannot send email like this now we cannot actually create account account like this right user cannot create their account by um directly like this they need to verify their email so right now we'll start to do that so uh in nextjs the process of email validation it's not totally similar as like our njs there are like little bit few things we need to do in here okay I I'm going to show you right now everything so let's start it so first of all we need to make here another function okay which name will be create active a and token yep create asynchronous create activation token where we need to send user and user data type so let's create this interface at the top so interface user data like this and in here we will send name which type string email which type will be string password which type will be string as well and last one is phone number which type will be number fully like this yeah now after here inside this let's create a variable activation code so math. floor use this method and multiply it with sorry uh plus here 1,000 plus math. random so this will generate on random number then multiply this with 9,000 so what is uh happening here this is generating on four digigit Dynamic number okay what we will use for our OTP now constant token this. JWT service do sign user and our the top activation code okay like this and here we need to add on secret so this dot config service. gate and here Define on type so here here will be our uh not JWT secret here will be our activation secret so let's come to our EnV and let's create a new config variable so activation and secret okay like this value will be any Dynamic number okay like this so save it any Dynamic number then after here oops not like this copy this variable name now add here oh then we need to add here on expires in which will be 5 minute okay this OTP uh validity will be 5 minute yep then now return token and activation code so we can save it right now done our activation create our create activation token function here done yeah now we cannot right now create user like this in here uh we obviously will create here on object of user okay like this okay create here an object now create here on activation token variable like this then call our this create activation token this to create activation token and send our the user okay like this now constant activation token which uh sorry not token this will be activation code which will be our this activation token dot activation code okay like this so in this activation code right now we have our activation code value and we need to send this in our email okay so let's start to setting up the email so first in this users folder this s the folder we can uh open our terminal and we can add here on command so like npx sorry not npx Nest so Nest service and email okay just give like this name oops command will be Nest G module email okay like this then click uh yeah click your uh bottom arrow button and select this users yeah so in this users right now we have a new folder which name is email now let's create another service in here okay inside here so service which name will be also email and in this users done so we can close it right now so inside this email we have our email module and email service right now great now in this email module now we need to install on new dependency so pnpm I this dependency next js- module SL mailer okay so install this dependency also install our node mailer then our EGS and types for our EGS and that's it for now it's enough if need anything else we'll do install again okay yeah so uh while it's installing let me go to right now this main.ts okay we need to update here few codes and first of all uh before this let me do one thing let me just copy on folder and let me add in this servers folder okay so you will find out this folder in our uh project GitHub repository okay so just download this email templates okay or you can create email templates folder then this file activation -. EGS and copy this full code okay this is our email template by using this email template we will send on email to our user that's it now inside this main.ts here here uh okay I don't know I I did it in offline or not so uh let's check it in your in in your code okay this will be Nest factory. create and type will be Nest Express applications and you need to import it from this uh dependency okay next is/ platform Express then after it right now we need to use here app. use static assets okay then add here join from our import it then di name then like this and call here public okay yeah done then we need to also call here app. set base view views di okay then add here join di name and servers and our email templates why I am writing this wait first let me finish then I'm explaining this this to you okay so why servers and email templates servers slail templates this folder name is servers okay and our email templates folder name is email template so that's why I'm adding like this it's mandatory in sjs okay now app do set view engine and this value will be not HBS this will be EGS because we are using EGS uh for for our template engine okay not using HBS or handle birs this is EGS okay done so yeah our main.ts work is completely done now uh let's come back this email modu and here at the top add here Imports okay like this and we need to import here a few things and by the way at the top add here on decorator like Global yeah and in here now add our mailer module okay dot for root as sync like this and let's import it so import our mailer module from atate njs module SL mailer okay like this yeah then in here use Factory I Sy oh Aon playing so I'm stopping it and I'll come I'll come after finishing the Aon now add here on parameter which type will be config service like this now we can return here on call back function so transport here we need host so we can add here config dog our SMTP poost okay like this we need to add here secure which will be true all we need to add here user so config dog SMTP mail not SMTP user yeah and password so config dog SMTP password done then here at defaults from here we can say bod okay for now simply yeah then we need to add here our template so D import join from po then your name and URL will be like this dot dot slash dot dot slash like this and our email templates yeah then here we need our adapter which will be new EGS adapter like this okay now add here options and strict false like this let's import this EGS F adapter so import EGS adapter from addit next CH modules mailers disc and adapters okay like this oh sorry not only adapters after adapters ejs do adapter okay we need to specify the file yeah now after here we need to inject here our config service okay yeah like this done now we need to create this all environment variables value so let's come this start and create one by one so SMTP Host this is the value then we need our SMTP P service which will be like this SMTP mail which I am adding my email and SMTP password so how can you get these few Fields just last these two last Fields okay this is dynamic fields and SMTP host and service will be similar for you as well now come back this uh Google Chrome and go to your Gmail settings okay Gmail settings which Gmail account you want to use for sending verification code just go to that email set okay like this then click the security and be make sure that you turned on twistep verification in your Gmail okay if you didn't turn on this twistep verification then uh your app password options will not come in here so after uh activate your twist verifications then search here app passwords okay then click then right now you need to enter your email password then I already have your on app password so here I am just uh then you need to just add this name okay like this or I am just deleting this one and I'm creating one in here okay by giving name node mailer then you need to copy this app password and in here you need to add it okay be make sure that you're doing the same things otherwise don't try to copy this one after uh recording video I will delete this app password so this will doesn't work okay so be make sure that you're doing the same things and you're adding this everything in your code perfectly okay done we can close this email as well right now now come back here and everything is done in this file right now right now we need to come back to our email service file okay and at first create here and type for our mail options okay where subject will be string email will be string name will be string activation code which will be number and template URL which will be string as well yep done now in this email service let's add here on Constructor private mail server this type will be our mail server sorry mail service not mail server and here we can also give this name to mail service yeah then return it like this yeah now create an asynchronous function send mail then subsect email name activation code and our template yep done so this type is our mail options type okay now inside here arate this. mail service. send two will be email subject will be our subject template will be same so you can add here like single time as this is same thing so yeah like this then context here name and activation code yeah done that's it it so it's done now we can come back to our user service again because our everything is done here now in here we will call our AIT this. email service so uh let's create a new service in our this Constructor okay so private read only email service okay like this and import this email service from our email service path okay now email service. sendmail email will be our email our email subject will be activate your account okay like this template path will be do slash activation mail okay and send your name and activation code done okay so this is on string that's why okay got it so let's do one thing come back our send mail and change this type to string okay yeah that's it done so why I'm writing this do/ activation uh and then Dash mail because in here our file name is activation dmail ajs okay that's why I'm writing this name similar with this yep now if we try it should work so restart our server so npm Run start and da users like this so it's giving on error okay I got it why this error actually coming okay this is just giving us an warning on error and that is like next like Nest cannot resolve dependencies of the mailer option please make sure that argument config service at index uh zero it mean that first index is available in the mailer code module context so this is meaning is in this uh our this user users module. TS we need to add here our config module do for root and we need to make it is global to okay like this now the error will gone just note this okay so yeah our error is gun we can close these two files and you can come back this user. service right now from here what we are doing we're making hash or password then we are adding that in this user we're sending that in this create activation token function then we are sending on email so let's try it right now come back here and let's try this so click here and let me open my mail so here you go this is mail here welcome to Bodi hello Shah shaj thank you for registering with bod to activate your account please use the following activation code this is totally Dynamic code generated by this from here okay now what we need to do we need to make another mutation in here for activate our account okay now we need to activate this account we need to save this account in our database right us our account so activation user like this now in here create our s sync activate user and like this here we need our activation GTO okay so we need to create it activation dto come back to our dto and in here after uh before this login dto add the DAT input type export class our activation dto then addad dat failed and is not empty yeah also is not empty activation token is required and activation token which which will be on string okay then after it we need our activation code as well so fil and from here is not empty this also cannot be empty so not password this will be activation code is required okay like this then after it activation code code which will be string okay and don't need any comma yeah done now in here let's import our this activation dto inside here constant few things from this activation D now we can get like suggestions yeah activation token activation code yep now now constant our new user where we have user which type will be our uh this user type okay user data yeah and activation code which will be string so JWT do verify our activation token and our process okay so this dot config service dot get here we need to add our activation secet okay so this one yeah then now if we have new user okay s will be not Capital like this yeah if new user dot activation code is not similar with our activation code then return our sorry not return through on new bad exception error like inv valid access uh invalid activation code okay like this now if everything is okay then okay so jw. verify uh okay so here will be this dot JWT service okay do verify like this and here this is giving on type script error so here add on type like as user will be our user data and activation code which will be on string like this still it's giving error string has no properties in common with type JW verify options okay got it what you need to do in here just cut it okay and add secret then we can add our activation secret or we can like paste it fully like this then as our JWT verify options okay just import it this is the types yeah done so this JWT service. verify we're verifying our active token activation token and this secret and JWT verify options and this is the as types okay yep now here extract our name email password and phone number from this new user do user yep then now we need to check it is this user already exist in our database or not so exist user aate this. Prisma do user do find unique where email okay yeah like this now if we have this user then we need to again throw on errors like this user already exist with this email okay otherwise if us not exist then right now we need to create our user so aate Prisma do user do create and data this name email password and phone number like this then now we can send here our this user and response okay so response we need to add it in here Ed types so response which is coming from our Express yep so yeah done our activation user is done activate user done now come back this resolver in our graphql resolver uh after this resistor add here a new mutation like this so here it will be similar resist response we can say okay now as sync or activate user now add theate ARS activation what is the dto name I forgot the name this is activation dto okay so activation input okay and here we need to add our this activation dto like this then you need to add this type yep now add theate context add theate means decorator okay and then context and response will be our response from next uh Express yeah then now here add our promise then add here type so we can add register response similar things that's why uh okay but no not similar uh we need to up little bit things I'll do it right now so now we can add here constant user this. user service. activate user then here call our activate user dto and context. response then return this user done okay now come back this register resp response so this will don't send user okay this will send on token okay so token which type will be on string so here we can say uh you know wait we can say here activation token by the way this is uh please don't think that if you uh if if you have this activation token then you can like verify your account no this AC token is just working behind the scenes the validation work is working with activation code not token okay this is just just on uh JWT token this activation token okay and here we cannot then return like this okay so yeah right now we need to change few things first of all come back this register then from here we cannot send right now this we need to right now send our token or activation token we can say yeah and then come here all right I stopped recording the video because there's like some issue in our code okay I updated the code right now I'm going to show this to you it's very simple I just updated few lines of code but right now everything is working perfectly so in here uh in our this registration okay registration uh dto here also at register dto okay we don't need register input okay we can add like register D but by the way if you add register input also then similar things no problem same things but uh in here the main update okay here we are receiving activation token okay like this on object then you are directly sending here okay and in this activation response from here uh by the way in this resister response I removed the activation token like type user okay you don't need anything then just remove make it totally like empty field and activation token string and in here field value will be this user user type will be user or any and then like this okay and in here I just uh removed the return one okay and uh without making any variable I'm directly returning from here that's it okay nothing else so very simple and nothing Chang everything is still similar right now okay so let's try it right now okay come back in this register and in here you need to add mutation like this mutation here register dto here name and like email password on dumi phone number and activation token this is for response okay now if we click here then notice it's loading loading it means it's sending email okay yeah here you go this is our activation token right now if you go to our email then not on email and here you go this is the value now come back here and click this plus icon and then write this mutation okay activate user activation dto and now we need to update our this activation token okay how we need to update it and first update this activation code and activation token copy this one this activation token by the way user don't need to add this activation token we will automatically add it from our frent but user need to enter this activation code now if we click here first try with wrong code like this then click here then notice invalid activation code now enter the correct one now hit send okay still invalid now correct one now notice yeah so this is our name email password this is our user informations okay why only three Fields because I added here three Fields if we add here like you know other fields like roll then that will also come in here this is how graphql work if you're very beginning in graphql then this is like actually how work okay you can also teste this by using Postman but I prefer to like this one so so that's why I'm testing it like from our browser directly okay now come back here and check we have our user informations in this database okay our username email phone number password this is Hash password and created at updated it and role is user so yep our registrations activation user perfectly perfectly working now we need to start our login features then our almost uh lot of features will be done right I I mean kind of like the critical features will be done yeah then we can start our front end features also yep so now we will receive here email and password okay from our login DT or from our from our body okay then we need to check it so constant user will be right now at this do Prisma Dot user do find unique okay we need to First this email is this email exist or not okay so like this now if we have user and our a we need to make on compare password right now okay on function we will make it so compare password where we need to send this password and our user. password okay so now add here an eils logic like this now let's create here a new function like this so compare with hashed password okay yeah so as sync function or we can simply create here like without function here no problem so compare password where we will receive two things one is our password which is also on string and another one will be our hash password okay which will be also screen then add here on promise type will be Boolean like this so return be wait bcrypt compare okay this password and our hash password then this will return on true or false like that okay okay so this. compare password as we are using here like on class that's why okay so inside here now if the password is true then we can return the user otherwise we can throw on new error invalid credentials okay very simple and we don't need this this return user right now yep cool but not only this we also need to send on refresh tokens right refresh token and access token so let's make it right now not then return user from here call our on function so we can do one thing in this SRC folders let's create a new folders by giving name utils and inside this utils folder create a new file by giving name send token dots like this okay now in here import our config service then import our JWT service then import our user yeah now export class token sender on private read only JWT which type iswt service now cre Constructor and here also this is private read only config service okay like this yeah now create here on public sent toen method yeah here add our user which type is user now create here on variable access token which value will be this dot JWT do sign where ID will be our user. ID yeah then after it here we have secret which will be this. config doget type will be on string and value will be xess tokens expired okay like this aouc okay done then after it after this access token let's create refresh token so these do JWT doign ID will be user. ID and secret will be this do config doget string type and refresh token secret yep like this and also we need on expires in which will be 3day yep that's it now here we need to return this user access token and refresh token so very simple our work is done here so what is this let me show this full code to you again like this so yeah this is our s file okay very simple things what we always do here c will be Capital so now this is not actually expired this will be our access token secret and refresh token secret yeah now come to our EnV file and add this access token secret which will be on we can go to any website like password generator then from here go to this first one lastpass.com then then length will be 50 and click this copy so it's copied on password for us like this now paste it in here then after it we need our refresh token secret so come back here let's regenerate yep and paste it but something wrong okay so this is not valid okay let's try another one yep now I think we can use it yeah cool done so yeah you can use anything in here or you can like generate something by going to website like me okay then our s token function done okay right our s token class is done now in here un commmand is a and constant token sender equal to new token sender import it from our send token then inside here this dot config service okay like this now token sender. send token and send our user cool done yep now we can come back our resolver and yeah resolver is also fully perfect now we can try to login so come here click here okay let me try it from first so mutation login now login uh email which will be Yep this one and password which will be 1 2 3 4 5 6 7 8 I'm not sure this is uh eight yep yeah done now name email password yeah that's it it's enough for us right now okay now let's click here so cannot read properties of sign something is wrong let me check so this is JW error okay come here okay I did an small mistake uh add it in inside here okay I added it outside yeah like this okay then in here okay now we need to send here then our this dot JWT service y now I believe it should work let's try again okay this is giving on small error uh because probably I think uh in here we did some mistake okay I mean in our this user resolver where's the response yep uh in here we forgot to add our response yeah so in this promise we need to add the type for our response okay so this will be login response okay like this now come back here and log in response field uh not only user field we need here user then our access token and refresh token this two thing which is on string and fil our refresh token yep and here type will be like this user now actually this will be not user we need to add here our login response okay and here will be promise and this login response call it okay login response imported from our types here okay this is our login response yep now we can come here and we can give on format yeah then Yep this is fully perfect right now okay now here it's giving an error type why it is not assignable to type uh login response come back to our user start service add here return okay before this yeah and we cannot then send any error response like this we must need to send on response then okay otherwise this is our response so uh we cannot like totally throw error in here this will doesn't work so we need to return here our user which will be null access token which will be null as well our refresh token which will be null and at last on error object where we will add on message which will be invalid email or password okay like this or inv valid credentials you can write anything in here so that's it our logic our login logic is perfectly done and if you are uh suffering any problem then be make sure that you are have the same entities like me okay and the same uh types okay user types so we make sure that this is totally similar as like the source code if you have any error then okay in this G also so checks these few things like you can do like spelling mistake or anything kind of like that okay so we make sure that everything is perfect now let's go test this login mutation right now so here click here now add on mutation on login here we need to send email so I am adding our email as part this database okay this one then password this is 1 2 3 4 5 6 7 8 correct one and here call user then call ID name email anything like password or we can say address okay then after here we can add our error then message okay also must need access token refresh token now click here and check it it's perfectly login and it's giving our user informations if we add here right now our phone number then this will also give the phone number in here okay this is our access token refresh token what we will add in our front content uh client side cookies okay then we'll send through our uh headers or API headers okay so this is access token refresh token right now let's try with wrong password like this now hit send notice us null access token null refresh token null and invalid email password in this error message so it's perfectly working a login features is perfectly working as well okay now let's start our G profile route right we need to send on request to slashme or like uh it's not like slash me as you're using graphql so we will hit our graph Quil fetch graph Quil query and our graph Quil will send us loged in user informations so before making the login user features first we need to make our authenticated route right how we made with our like uh expressjs project so uh so this each authenticated or protected route this was on middleware right in our EXP Express CH projects yeah in njs it's also on middleware but if we use the same things with graphql then it's not any middleware instead of middleware we call it guard okay instead of middleware we call it guard it's kind of similar things but there have like little bit difference between card and middle words so let me show this to you so first let's create a folder in our this SRC folder by giving name guards okay like this and inside this cards let's create a new file which will be Au dot guard. DS okay like this now import here inject table then make here on class export class o guard this will Implement scan active okay which is coming from next j/ common then here we need on Constructor where we need few things like first private read only our JWT service yeah then secondly we need our Prisma so Prisma service and I don't know still why this is suggesting wrong uh informations this will be like this no yeah like this yep so after Prisma service we have our config service or we can give this name to config also so config service type yep then yeah that's it now after here on asynchronus can active like this here we need to uh receive context which type will be execution context okay which is coming from next Chase common yeah then our promise and type will be Boolean now constant gql context here import GQ L execution context okay like this then. create send here context yeah now receive here from gql context. getet Context okay so this is the rules of graphql like how we can make a card yep then now we need our access token variable which is coming from our request header so haers dot access token this type will be string then our refresh token like this now after it if the xess token or refresh token missing then we need to throw on error so new unauthorized exceptions okay error type will be so please log to access this resource yep now if we have our access token then we need to check it the access token is valid or not so deodate this dot JWT service dot verify access token the uh headers one and we need to right now verify it with our this. config doget our xess token secret we need to verify it with our access token secret this access token secret is coming from our this EnV okay this one yeah then if not decoded it meanings the activation token I I mean the headers token is not valid okay so then we need to also show on author unauthorized error like invalid access token like this okay now we need to generate our sorry we need to update our access token right if it's okay then we will update the token again okay then after it return to private as sync and our update access token like this yep but type request type will be any and here we need to return on promise which type will be void now on trat block and inside here first we need our refresh token data like this which will be our request. headers do refresh token as on string now we need to verify this this refresh token data is correct or not or is it expired or not okay by like this so then if it's not uh correct or if it's expired then we need to throw on error okay like this uh yep like invalidate refresh token okay then next if the token is correct if the token is correct then we need to search our user like this so then we will get our Reser informations now we need to generate our new access token okay so new access token uh we need to sign out to our new access token to to JWT by using this access token secret and new expires now we also need our new refresh token like this then we can set our headers this three things okay yeah now in catch yep done so uh one thing guys we right now cannot send directly request. headers okay because uh we will send it and then we'll set it from our front end so request. access token request. refresh token and request. user okay like this then what we need to do then it's enough for right now okay we are just setting this everything here okay cool now our this activate uh our this our this a guard or our is authentic middle is done and within this we also updating the user access token and refresh token in the same time okay so come back this user service now in here make a new service like this get user org logged in user yep so I think get user or we can give this name get logged in user like this so here we have our user equal to here will be request which type will be any so request. user and console log this user also we have our refresh token access token like this just copy this two few things from here okay this refresh token and at last our this access token yep done now send this all every things okay like the refresh token and access token yeah so return cool now come back to our this user resolver and after this login add here another query and where type will be similar as like a login response okay because everything we also need here uh the login type of response similar response okay so aate sorry as sync get logged in user like this and here we can return return like this cool now come back here now obviously if we try it this will doesn't work because we need to add here right now our Ed cards so use cards and we need to call our o card kind of like middleware yeah so cool now come back here and and in here oops we don't need anything like that yeah and here we don't have any avors yeah we have avors but we don't need yeah cool now if we click here this will give us error please log to access this resource it meanings we need to login First so from here we are clicking this login and we need to copy this access token and this refresh token now come back here and move it like this drag it then paste here our access token and our refresh token but at last we don't need any comma yeah now H send yeah now it's working check here but access token refresh token is null okay so something is obviously wrong it meanings so let me check here request oh sorry here's now again recheck okay guys just click here and here you go but xess token and refresh token it's showing null okay no problem let me check what's wrong in here so first let's console log our this access token and refresh token okay like this now again click here then check okay it's generating perfectly so now come back to our service yeah here's our access token and here's our refresh token yep so let me me check one thing in this login response this is access token and refresh token okay so the spelling mistake notice guys this spelling is not totally similar okay we need to come back here and we need to change this to capital T okay then everything will perfectly work so uh check this everything carefully okay if you do like any mistake as like me it really doesn't work now I believe every Everything Will perfectly work and uh right now we can and you know we can remove this console log it's perfectly working so yeah now click and let's see the magic 1 2 3 here we go so access token and refresh token it's also perfectly coming then what we will do we will set this into our uh front end client side headers okay then when we will send in request we'll also add this in the headers so I will send it every time this access token and refresh token if it's available then okay now let me show you some uh like hacking okay I mean some wrong things like this or this now he sent notice invalid signature this will doesn't work because the J is not correct now it's working okay so it's highly protected cool our G logged in user is also perfectly working so guys for now our uh front end wall task is almost done and just one thing is need that is our log out user so log out user Asing log out where we don't need anything okay yeah we need request uh we will remove these informations yep so when someone will click here then what we will do we'll make our request. user to null request do refresh token to null and access token to null also we can do the same things from our front end very simple things we need to Simply remove the uh token then that will perfectly work so here we can also do this like return right now on message log out successfully cool come here add this query and this is also on card so here make this name to log out user and log out right if I'm not wrong no this is log out user I don't know why then this is showing oh sorry sorry yeah this is log out y sorry pardon okay so uh then this will not give us any login response here instead of login response we need a log out response where we have only on message so copy this and log out response where we don't need anything yeah error there can be error or error is also don't need because log out is very simple things we are here adding on field like this and on message which is on string cool so this is our logout response now come here and add here our log out response done now log out is also done come here click here then our query log out user and message now hit send okay log out successfully right now if you try obviously this will work because we are giving like this informations but if we don't give informations like this please log to access this resource okay so we will control this everything from our client site don't worry and for right now our uh server site is protected fully okay that's it so we are just giving on token obviously if you give you a wrong token then that will don't give you account access like this invalid signature this is the security okay now what we what we'll do right now we will simply move to our front end our client site and then we'll start to doing our client site and we'll start to connect this everything then we'll do our sign up login then everything's okay so let's start it so I'm simply opening my another terminal and I'm going back to our main rout directory so yeah right now I'm in root directory so right now go to our clients inside here let's create our next CH project so in PX create next app and we can give this name to user UI or what we can give this name like for restaurant we're planning to make another uh you know sub doain or kind of like that so we can add here user ey or clients but user UI is better okay yep I think it's good so uh yeah then press y typescript yep East link yes telling CSS yes SRC I don't need app rder R and LS okay then keep it default and press enter okay then it will start to installing the all dependencies in this clients and this user ey okay here will be our others uh folder as well I mean like the admin dashboard or the seller options okay uh we will totally make make it separately for the admin dashboard we can use next or we can also use react I really don't know like we'll take it later we'll check it later what we can use in here okay so uh while it's installing let me create here some components so some folders like you know in this users. UI we can create a new folder by giving name SRC then we can add this app we can drag this app into this SRC folder like this this then inside this SRC folder we can create like our other folders like components oops components not components yep now clear it and now we can CG to our user UI and we can install sorry we can start our next CH server so npm run Dave and this is running in local 3,000 so let's go to our Local Host 3,000 from here like this so yeah so The Styling is not working you might be thinking why not working so come here and check this Global CSS and The Styling is not working because of let me check here okay so this is all TA in class yeah come back to our Tailwind doc config.js inside here first add on SRC then everything will fix here you go our styling is also perfect here cool now we can start this users UI so in this app here we can create a new folder an organizations folder by giving them root and we can move this page into this root folder like this so come here and save it then here as well yep still it's similar now we can remove this everything we can add on simple page and we can save it then it's right now very simple cool now inside here we have some colors we can remove it or we can keep it as well no problem so now what we need to do in here in this SRC we can create like another folder by giving them screens or you can also give this name to views okay and uh then we can create another one for our utilities or utils then yeah it's enough uh for right now okay so inside this screen create our you know our root screen or our home screen so we can create home screen do DSX okay like this then add here our home screen so home screen or we need to add here our component like this now uh import this home screen done so in this home screen right now we will start our this root base work so uh first we need on header component right so header is on component so copy this come back to our components and uh here we can create this headers so first let me create a new folder by giving them layout okay inside this layout create our hater dot TSX okay and here create our haer like this we can give this name to haer instead of di yep and right now first import it right now I'm planning to uh install a new library in here which name is next UI I like this website I said you in my last video and you can also use this one if you if you want to use that is shad cnii it's a very popular and next UI is also like very popular but I like more next UI than Shad cnii so that's why I'm going to use this one so get started the next J is then copy this command okay come here open our terminal we can stop our next projects and we can install this dependency yeah then we need to come back to our tailin CSS setup it meanss tailin config dots and here we need to add this one cool then uh we need to add this dark mode uh we don't need any dark mode in our this website so we can like yeah we can ED it no problem them and this main important is our plugins so next UI and react add it here and in this plugins call our next UI like this so it's installing actually then after this uh we need to set up our provider okay so while it's installing we can like starting to set up our provider it's very simple in this SRC folder we we can create a new folder by giving name providers okay we need lot of providers in here so first of all we need our next UI provider. GS we can say TSX yeah then copy this add it in here like this so we can also keep this uh then providers TSX okay so uh we can do one thing we can move this into this app folder okay as per the suggestions like this yeah no problem if we move it in here then also okay so here save it and our installations is also done so we can again start our server or uh before start finish this next UI set up yeah and in here so uh in next UI the default theme is a light theme okay but in projects we are planning to make it default is Dark theme so we need to update it at first here create an interface by giving them providers props okay or already it's in here so you can skip it you don't need to do this okay because it's already here yeah so uh first we need to import here our next themes provider okay first add here tee provider theme provider as our next team Provider from our next teams okay like this then inside here let's add our next tees provider and inside this add this children yeah and here add our attribute which will be class and default theme this will be dark okay like this yeah so now we can start our project so npm run Dave like this now uh close this K CSS also and in our root not route in our layout we need to WR now connect our project I mean we need to connector providers so here after body before calling this children cut this and inside here add our like this then inside here we can add our children yeah now come here and check it it's empty and good okay update this name right now as per our website informations like you know here I'm giving Bodi food delivery food delivery website or like add your brand informations in here so Bodi foot delivery done yeah now try some next like button yeah Avatar you can choose anything in here for testing so this is an avatar just copy this here now inside our header add it and we don't need this react like that so import it and we can make it server component so next UI then slash Avatar this will work as a server component okay so now try yep it's working perfectly cool so right now you can start our headers our project header this will be very simple and I need your help guys for the next part okay as uh designing this full website is very hard for me because like it will take a lot of times to design this full website so if you anyone to help me to like uh do the design part then I can like look at the back end and Logics part which is like not that much easy but doing a web design it's really very easy you can use this next they have lot of uh Premier component like everything almost they have so you can uh use this and you can uh easily finish the designing part as per your uh Choice okay I'll obviously I will obviously mention you in the video that you did the designing part so it's obviously a good benefit for you and another benefit is that you're working in a production level project so it's really good for you so uh if you're interested then uh message me in my Instagram okay uh you can easily do the front input okay and also not on person if you like for or 5 person on then no problem like you can work for multiple Parts as this website will be very big like seller part admin dashboard and this user part so if you can help me then I can complete this within the next one month otherwise like it will take at least three months to complete it's is very common because there have three parts and also I think they also need another parts for delivery man which is also very important Delivery Man need to accept the order and then Delivery Man uh sorry then user need to like wait for the order and when uh deliver man will deliver the order then delivery man can change the order status so obviously we'll um again plan this everything in diagram then we'll start it as this is just today's as this is just a first uh first day of this series uh we will take it later no problem okay but please help me to finish this front end as soon as possible then I can finish it easily okay so you need to help me you need to support me for this okay so uh here here I just notice that this is spelling is mistake yeah now in this header first add an class name W full height we can say 80 pixel then BG black okay then we can say Flex item Center and justify begin H done save it now check here okay we cannot see anything because the color is black that's why let's try it with white for just checking the color in here wow it's not coming why it's not coming now let's add that uh let's add on button oops spelling wrong button yeah and next e or slash button yep but this height is not working it's very weird Okay so components in SRC hm got it why not working come here and check here we need to add dot slash ISR C okay then it should work yeah it's working now cool so yep and the color will be which color we can add in here think about it not proper block little bit glass more you can add so let me check the bod oops not this [Music] one Bodi this color is really good so let me choose this one Yep this is the color actually okay I can save it right now now come here yeah it's really looking good okay so uh here you will be on uh logo so add here on logo on span not span this is actually H1 then here I'm adding Bodi you can add your brand logo whatever you want to add yeah then inside here we can create on container so container meanings with 100% no no no not like that so container okay let's do one thing W uh 90% And merg in Auto yep it's looking good and uh let's do one in these utilities or ues let's create a style. TS file okay and let's go to our previous projects uh you can find out in the GitHub repo okay this is Styles files and copy all CSS uh I mean some customs uh variables like container logo title container you don't need right now so logo is here so yep let me add here styles do logo y save it now come here okay we need to connect this Styles file so come here then we can do one thing we can say in this SRC the all GSX and everything will be like include in this so then we don't need these two things okay it's it's already done now check everything is same because we say in ISC folder everything just include in this ta Styles okay so now here add on navigation menu so here we can create on another component for this nav items like this so copy this and import here our nav items from dot do slash and as this is on components pure component so you can say nav items and then do TSX okay why I'm adding like this then we can create it by clicking here yeah and this will be also on server site component okay I want to check one thing just a second uh is it server site already or not I you don't know let me import your use State then you'll understand it yep check it yeah it's server s side okay great then it's great we need server s side here okay so inside here what we need we need our navigation items first right so we can do one thing at first we can add here on AR like constant nav items okay like this then here object title will be like home URL or R you can say h r so slash or now title will be you know about us then URL will be our about like this then right now title will be uh restaurants you model will be restaurants then title will be popular foots yep then URL will be you know foots we can say and yep that's it and uh last one is last one is what we can add here title contact us yep and URL will be be contact done I think it's enough then inside this GI now we can Loop this nav items so nav items do map itm index then on link from our next link then here key will be item dot URL h r will be Sim item. URL and class name will be it's a big class name so px5 text will be 18 pixel font family will be Popin so uh we need to add this popins font then font uh weight will be 500 now we need an logical class in here okay if our active item equal to our index then here color will be HH 37 b668 like this okay then finish it yeah now it's done so uh this is giving on error right this active item because it's missing so receive it in here active item which type is on number yeah done so in this link right now add our item. title so very simple and this active item which can can be sometimes optional so right now if we save it then look at here this is empty okay so sometimes I mean here we can make it this initial value will be like this so it meanss always this will be active defaultly and in here make it FX I don't know why okay so uh cut this fi things from here and add it in here cool item sent are not working okay because of this height add it in here done cool so after it after this nav items we can uh add right now our you know this right side items where where will be our profile icons then you know yeah here will be just our profile icons nothing else yep so for this we can create another components why another components because this will be uh why another component because this will be on drop down component that's why so drop down or we can give this profile drop down okay we can give this name to profile dropdown so profile dropdown from not do slash profile dropd down. GSX yep and we can remove this one cool all right here will be class Flex then item Center and GAP will be four yep now let's import here our drop down down okay like this so uh this component must need to be client side components but why and this is the another reason why I changed this into here okay because in here we have some events like when we will click the profile uh picture icon it will open on drop down so this is on click event in server site component we cannot add any event it's not possible so that's why we need to must make this component as one client side component so make it client so this is another good things that we are not making this whole component SC site instead of doing that just this profile drop down is client side component okay this is the like perfect way of working with nextjs yep then uh drop down here will be placement which will be bottom end like this now we need to import our drop drop down trigger okay this one then inside here we can import aat this is on self closing yeah then as on button yeah class name will be transition and trans form okay this is an animation see up and SRC this will be anything let me add my pictures from GitHub yeah then after this drop down trigger we must need on drop- down menu so drop down menu and here we need our area level which will be profile actions like this and variant will be flat then inside here we need our drop- down item so drop down item like this then here key will be profile then here we need class name h14 and GAP will be two then P class name will be font semi Bol oops not semi blot semi Bol yep then in here we need to add like this signed signed okay not sync signed in as we can add here right now you know uh the account user email okay so by the way guys you can also copy it by going to next your website as well because this is just an component what I'm uh like I copyed from next to website okay then I customized it as per uh my as per my website okay that's it this is the new Bodi uh website drop down icon okay what I'm right now copying from my source code let me show this to you right now like this and if you want you can change this color to white okay if you want then so we will check it later no problem now uh let's copy our all items one by one like here will be next one will be our uh not leaderboard this is not in LMS so my profile and after it uh here will be what we can add all orders right it's important then we can add here and here we can also change it like all orders then we can add here apply for or apply for seller account it's a big line uh apply for seller account let me try check it how it's looking actually so apply for seller account apply for on seller account right the correct sentence but it's still uh it's kind of looking good you can up you can update it as per your wish okay and that's it and just uh last one will be our log out okay so here we can add like this drop down item and color will be danger why color will be danger then uh this will looks R let me show this to you notice it's really looking cool and still uh I am feeling like The Styling is not pure perfect okay so why I don't know I mean the font size is kind of like not perfect let me check few things okay so our profile dropped down for now it's done now we need to add here on must on logic in this profile drop down what will be that logic so as this is an client side component we can use here US state so here let's make on you State and name this to give this name to signed in okay signed in set signed initial value will be false or logged in is logged in you can also give this name so here will be the logic right now if our this sign in is active I mean true not active if the sign in is true it meanss locked in so then we can can show this one otherwise just show on you know an icon okay so here uh we can use a react icon let me install react icon so npmi react icons or icon I don't know spelling react icons okay this is icons so yeah it's installing so while installing choose an icon so profile CG profile probably icon name yeah I am right this is CG profile so add here and add here our import CG profile from react icon slash CG now come here and yep it's looking good not good we need to update it we need to add some stylings so stylings will be like class name here will be text to Xcel okay 24 yeah perfect and cars or pointer I think it's enough yeah it's really enough hm it's good enough or you can update it as per your wish to Exel it's I'm feeling it's big what do you say okay I think it's big we can make it to excel yeah now let's add on font in our layout okay uh the popins is still not set up okay so that's why Popin font is not working perfectly so uh we can do one thing we can just add it in here and enter uh first import popins from next font yeah and enter I think we don't need inter font yeah we can remove it and here not class name add here popins do variable okay like this now we can add it in our tailin doc config do GS okay not JS this is so here we'll be extend and in here we can add font family like pop pins and here there font popins like this yeah I think it's enough now yeah here you go now it's your Poppins font family cool so so we can close this everything now and now we need to start our main task and that is we need to we need to right now open on model in here when we will click this will open on model in this middle then our log out and sign up form will come in that model so here add on on click like this so set open which will be opposite open okay so set open and open create it open and set open initially false yeah done so if open true then what will happen if open is true okay yeah we can add it no problem as this will be like on model so we can add it in here if open is true then here we will add our uh OD screen we can say so OD screen import our OD screen screen from our screens folder and out screen do TSX come here create this file here remove this TSX and here remove this react yep so when you're clicking this is coming the out screen great so this is will be not like this here we need to add on class name W full and fixed top zero left zero height screen and Z index or Z index uh this will be 50 yep enough and uh then Flex item Center justify Center so this is opening but it's nothing showing because we need to add here on background color not pure black this will be kind of black color like this I don't know it's opening or not oh by the way screens yeah I don't know it's still working The Styling are not so high screen H we can do one thing make it white yeah it's working it's really working and change this white color to little bit like down color as this is dark so we cannot see then yeah no it's bad black one is good this is the default when clicking yeah cool so yeah this is perfect as for me uh when we'll add the bottom options like the Hero part and the other things then this will looks good okay don't worry now inside here we need to open our uh you know we need to make right now our login model so here uh we can do one thing we can add here W 50% height uh for now make it 500 pixel then here add our login model okay this is not model actually login we can say it's component name so this is UN form and now let's make it import login from do slash then our components login and uh by the way I just want to share all of my thoughts with you I think it's I'm I'm correct right now okay that is components we think that this log uh this login model or this is on component but actually this is not component what is called component what we can use everywhere what is reusable that's only called component it meaning suppose this button we can use everywhere so button is on component not this full header full header is not any component this is just my thought I think it's the correct things and most of the people like doing mistake in here they're thinking this full header it's some component no it's on section or it's on view or it's on screen you can say okay but it's not any component component is like this navigation C on component so we can use it we can reuse this okay yep so components uh we can think we can do one things dot dot slash then shared we can say Okay shared and login then uh then not login add here o this folder name then login do TSX cool create it now TS or RFC same things that's why I'm using RFC so yeah done now inside here give this background color to white and make it little bit round it and give on small box Shadow so sh Shadow SM yeah the WID is very big we don't need 50% 40 is enough or 30 yeah looking good or this is not black color is good let me check the B code1 so log out this is the color yeah this color is looking good in this color with this color Okay so this color is actually BG slate 900 okay this is the original color in here what I'm using yep it's looking good here we can add some padding yep done and like log in and still it's looking big kind of so we can give this an width like you know 4550 pixel or 500 pixel we can also say in here yeah it's similar as like Bodi okay now uh here we can add on message at the top first in line break then on H1 log with your brand name okay so bod I am adding here and I am adding here uh Styles Dot tyt yep it's looking good now here we need our form so for uh uh form validations and for making form today we're going to use this react hook form right now and click this get started and first copy this now open this and uh open a new tab like this install this and also we need to install uh this Zod okay for validating our form so here you go this is z so copy this now come back here and install zot yep done now we can make our form all right so we also need to install another dependency I forgot it uh so we need to install first time npmi and then this name is hook form resolver and S okay this is the name so we must need to install this oops sorry not zort just hook form SL resolvers okay like this yep now let me delete this and just a second let me check one thing from this package.json [Music] and yep hm perfect so so uh now first uh in here we need to make on we can remove this react okay then here let's import our sorry let's make on form schema our Zord schema so Z so import Z from zort then in here Z do object and for our login form we have email which will be on string and we have on password which will be also string and minimum will be eight and if not minimum L eight then password must be at least eight characters long like this so uh it meanss if we uh if user don't add eight characters then this will give error okay like this like password must be at least eight characters yeah now after it we can Define on type for our login schema so here do infer and type off our form schema so then we don't don't need to make it manually we already have like the all types in this login schema just over it and check like this okay email and password yeah both is here now we can come back here and constant few things we distract it from our use form and here first import our use form form import use form from our react hook form yep and here type will be our this login schema yep and here we need to add on resolver which will be our this form schema oh sorry not like that here first add our Zod resolver and then call this form schema yep so copy this zort resolvers and here you'll be on comma yeah and import it from our hook form resolvers and zot like this now extract here our register then our handle submit then uh we also need here our form state where we have our our errors then we have our AG submitting it means a loading State then we also need receip and that's it it's enough for now yep now create here on function like on submit here we will receive data which type will be as like our login schema yeah now we can console log this data for now then after submitting we can call this receipt then this will receit our form done now after this H1 let's create here our form we don't need any action in here but we need on onsubmit where we will call this handle submit and we'll send our this onsubmit function okay we'll call this onsubmit function in this handle submit yep now inside here import our level where class name will be styles. level yep and here value will be enter your email like this okay now after it we need our input which type will be mail placeholder will be login [e-mail] like this class name will be styles. input yep done and at first we need to call here our register just spread the register and inside here call this email like this so yeah our this one is done now we have our error in here so errors do email IFH then here add on span and inside this span errors. email do message like this and here class name will be text rate 500 display block and empty one yeah it's enough now in here let's create another DV with W full mt5 position uh relative MB one like this now another level HTML for password class name will be as like the similar one I mean this one yep then uh our value will be entered your password or element yep then here let's call our input which is very similar as like the previous one yeah so register password and type will be F password and this is like just on default uh placeholder and class name will be fully similar now here we can uh add our password message like this yep now after it after this GI we just need our submit button like this and inside here we have our submit button fully like this yeah and here we can give online Break by the way let me save it and let me show this to you so click here and here you go login with Bodi but I'm feeling like this line break is looking not good so you can remove this line break from here yeah now it's looking perfect enter your email enter your password and here login here we need our forgot password options so let's add it in here before this submit button okay so how we can do this just create here uh not any link uh y already it's suggesting but the suggestion is wrong this will be not any link this will be on span yep and styles. label let me check okay then here py will be two text will be uh you know first edit black then update it to blue color kind of like this color save it and uh add here margin not padding I don't know why margin bottom not working okay let's do one thing in here at mt2 yep now we can send it to this right side so it's very easy make it block and text right yep and also make it cursor pointer cool but the color will be not like this so color will be this color uh yeah this one one now check it y forgot your password so yeah and I am feeling like we need like little bit more space mt3 we can add here cool so if you forgot your password then you can uh send an request from here now after it we also need few options like after this button so here give on line break okay already here the line breaks so on H5 which will be like this join with then we have another DV where we have two icons for our social authentications so let's import this icon at the top like this yep now we can save it and you can come later uh bottom yep or join with Google or GitHub now last line in here and that is not have any account then you can sign up with in here okay like this sign up now let's do one thing come back this OD screen and remove this height 500 pixel right now okay we don't need this yep and then after here add here some uh you know some packging okay so here we can say or let's do one thing here add a line break yep fully perfect okay and or customize this UI As You Wish okay if you want to like update anything yeah done so font popins Y and text Center 14 pixel I'm feeling like very small so make it 16 the top on this join width Okay cool so GitHub or Google authentications yeah then if we click sign up then this will go to our sign up form okay so what we need to make right now and uh one things I'm feeling like it's missing that is here this like uh show password are missing right like click okay so we can do it by easily so uh let me do it right now it's very easy so we need just two icons and we need on state in here so make on use State constant use State initial value will be false here will be um show set show okay so this is our relative class so here you go this is the logic if not if show is false then this icon and import it these two icons from react icons and uh in here in this type our this password type here really we need another logic like this we have now come here and check pick here you go so suppose this and click here okay cool it's really looking good right now cool so our login form perfectly done and right now we need our authentication sorry sign up form so how can we make it very simple in this OD screen here this is on client side component if I'm not wrong because this profile drop down is this main component and this is a child component in here so this is marked as use client so you can use your use State no problem okay so yeah I need you state in here so why need let me explain so here will be active State and set active State okay so what is this meaning initially this will be our sign up okay so if sign up active state dat then show this login form okay oh sorry not uh sign up then this will be sign in not sign up or we can make it login no problem or make this L2 Capital yep and here send our this set active State yep so copy this come back here receive it this type will be like this here we need an type so like uh make it string yeah done so we can save it right now and come back here then when we are clicking this sign up that time we will update it to sign up okay sign up like this so now if we click here boom it's gone Okay cool so uh now because this estate updated to sign up now let's come back here a login work is done I mean for uh UI part it's done now if active State equal to sign up then add here another component I mean make here another component import sign up from our DOT do/ shared all sign up TSX create it yep and remove it then this state come here uh this props like this now inside here we can first copy out this full login code okay because this will be kind of similar so first copy this everything from here and add it in here now import the top few options like this unsubmit and this few things come here like this and at first import this everything like this so this is a kind of like copy okay so Z oh yep we need to import this few things yep done now update it to sign up schema okay and here type will be sign up schema sign up schema then we need email password but first we need name which will be uh Z do string minimum will be three name must be at least three characters long yep after it we have our uh phone number so phone number which will be Z do uh number minimum will be nine characters probably like I I really don't know so just Ed it as for your country so phone number must be at least or not nine in my country this is 11 characters so I'm making it like 11 characters characters yep yeah this is enough for now so this is our form schema sorry sign up schema name email password and phone number this is enough for now okay cool now come here and uh here make it sign up with Bodi and at first we need enter your name so enter your name which will be name and type will be text here will be name placeholder like John on yep then after it we need some space so here we can do one thing we can add on line break no no line break doesn't work okay let's cut it and let's add in an D and uh make this DV to like this and remove this mt5 yep now it's looking kind of good not perfect I don't know why email uh here we need a little bit space so MB will be not two this will be three yeah cool enter your name enter your email and enter your password and uh before password we also need our phone number which is very important in our food delivery applications yeah so we can do one thing we can copy this name one and after email we can and paste it so here you'll be entered your phone number and here type will be right now number Place Holder will be like plus 88 it's my country code then 01 something something like this okay so here will be phone number cool come here and check it yeah and uh in here let's add mt3 cool so sign up with Bodi like enter your name enter your email phone number password and this is and uh we don't need them or join with anything kind of like that we don't need this forgot password we can remove this oops sorry not the full things just this line forgot password Here will be sign up yep or join with this okay sorry I'm in here already have an account then sign in or login we can say here will be login so here you go if you click here this will come to login and sign up yep so that's it I think it's perfect and if we try to type any text this will doesn't work we need to must add here phone phone number even it's giving me like some suggestions and this is email suggestions and name suggestions notice perfectly working yep so if you want to remove anything or if you want to do anything then please do it as per your wish so for me right now it's fully perfect and forgot your password I'll do it later not right now it's very easy that's why and first we'll make our sign up login then we will finish this forgot password okay so let's go let's start it now what we need to do we need to right now make it Dynamic so uh for making it Dynamic uh by the way I just need to show you one thing like here I'm typing email okay I'm not typing anything I'm clicking this login notice invalid email and password must need to be at least eight characters here it's missing some padding so uh let me come back this login again let me add some padding little bit so here's this errors Okay so empty one yeah similar now look at here before uh checking obviously given reload okay otherwise it doesn't work so now click okay still it's very weird that it's not updating this mt1 so because of here input okay because of this is on relative probably that's why I'm not sure so here add on important it doesn't work okay let's do one thing guys just cut it and add outside of this DV okay like this they don't need any space as well y now notice it's perfect so yes so suppose here I'm typing like on correct email and here is like this then yeah our perfect form validation is done in here okay so yeah we perfectly completed it right now we need to uh connect our back end with this projects right right now we need to connect our nextjs back end our graphql with this nextjs front end so let's start this so for connecting graph Quil in our this next CH project we need to install two dependency so npmi and type this graph ql and add cq/ client so you must need to install this two dependency okay so let's install this yep so installation done now we can again start our server yep now let's come back to our this providers so providers in this app and here's our providers First of all let's create a new folder by giving name graphql then inside this graphql folder let's create a new file file name will be gql or graphql short form yep do setup. GS so here we will add our graphql setup code like import our Apollo client and then we also need to import our inmemory cache yeah y now export constant graphql client we new appolo client and URI this will be our graph server link so here I'm adding HTTP or we can do one thing we can do uh we can come back in our here and we can create a new file in this users UI room root file name will be EnV in this EnV we can add our server URI or we can say this is on graphql URI okay so HTTP Local Host 4,01 for now our server URI and then slash graph Q if you right now copy this or if you click here or or wait come here and go to this URL yep cool so you can save it now here URI will be process dot EnV then our This Server URI yep then after it we need to add here cash which will be new in memory cache like this but be make sure that we are getting this server U value so go here on Console log yep so our graph setup code is done in here yep now we can come back to our this provider next UI providers. TSX okay because uh we can create an separate file also for connecting our disc graphql another provider but we can also call it in here okay similar thing so how can we do this at the top we need to import here Apollo provider and then cut this one and add it in here and inside this appol provider we need to send our client which we will be our graphql client so import graphql client yep now we can save it now if we close this file and if we come back here everything still okay perfect it minutes yeah we successfully set up graph qu it's very easy to set up and it's done now come back to our this sign up. TSX because we need right now work in here and also in this graphql folder let's create a new folder by giving them actions inside here we will create our all action so register doaction dots inside this actions first mark it as on client side component now import here our graphql or gql from Appo client and our document node this is on type yeah now export constant our register user action which type will be our document note and gql and use this uh back ctit and inside here we need to write our graphql code so we need to do here on mutations to our register user you can do this by coming here we already did here on register so we need to do the similar type of things in here as well okay so register user here we need to send name which type will be string we have email which will be string then we have password which will be string we have phone number which will be flot okay not string yep now inside here call the register then our register dtoo as per our code yep and here we need to write now send name which value will be this Dynamic name email will be similar password will be similar and phone number will be like this yep now this will return us on activation token so this will become in our response yep cool so this is our register user actions now come back in this sign up. TSX and here let's import our first give here a name register user mutation this is kind of like similar with our Artic query okay then loading we have loading error and data these three things okay this is providing our app client yeah now use mutation import it from uh Apple client okay then inside here we need to use this register user action so call it and import it I mean import it in here like this now we can save it and before saving okay we can save it right now and inside here now in this function on submit let's add here on Tri catch flock eror type will be any and we need to right now install another new dependency which name will be react H toast like this so so I forgot the setup let me check the documentations like in how to setting provider so react H toast yep click here now we need to set up it first I don't know why it's not showing here yep here you go so come to our layout TSX and inside here after this provider let's add our toaster like this and let's import it from react hot toast cool we can save it right now now come here and add this toast dot error error Dot message yep now in this try constant response Now call here AIT and register user mutation and in this variables we need to send right now our data Y and now if you console log our response. data or we can do one thing toast do success then our um we can do one thing and that is race dot data do message if I'm not I'm not sure okay not R response and yeah let's try Okay so this is perfect in here and uh by the way in here in this phone number be make sure that you're writing this one value as number okay because phone number must need to be number now come back here our browser first open our email now click here now click sign up and type on name email and here I'm typing on email and password yep now click sign up and is there have any error okay let's inspect it so copy is loading and uh we need to do must one thing and that is in here disable it when it's loading okay like this all right so I found the issue why it's not working and the problem is in this gql do setup. TS file this URI is not coming this is on client side component okay it's not client side component but we're calling it inside on client side component that's why this server eyi will doesn't work what we need to do we need to come back this St EnV and we need to make it next public server URI okay to make this environment variable as a public accessible environment variable okay no problem obviously uh anyone can like access this API URL and like if you anyone go Network tab then this will like accessible so this is not any like secret variable okay so yeah now uh come here and update it with next public server U okay now in here come and now obviously press control shift and R okay uh in Mac this is cont command shift and R okay it means hard refresh or hard reload now come here and click this sign up and now type like the previous email which is already registered this one support and here I'm typing on email and hting sent then notice user already exist with this email it means it's working so now I'm typing another email which is not exist now I'm clicking this sign up and now I cannot click here again okay so notice this is showing on uh Mark sign but obviously this is not correct we need to see here our message okay so it's not actually we are not sending any response from our back endend like like uh mail center kind of like that okay so here we can add it manually please check your email to activate your account like this okay so yeah and after it we need to reset our form it means we need to clear our form yep and we don't need any response in here okay oh yeah we need a response sorry and uh we need to must add our this local storage do set item our uh this is called activation token so local storage set item will be response. data do activation token okay so set this to local storage after activating account we will delete it okay no problem this just for on security for our API if you have the same things in the local storage but you are entering wrong OTP this will doesn't work okay so it meanings it's secure don't worry about it like we are storing this in local storage we'll delete it also when the account is validate okay when the account will verify then so we can right now save it then uh now come here and let me show you the mail oops I typed here wrong email so let me right now type the correct one and hit sign up so please check your email to activate your account and here you go this is the new mail so this is the like name thanks thank you for registering with bod this is totally like bod website email template to activate your account please use the following code so please enter this code with activation code if you didn't register bod me account pleas ignore this email okay if you have any questions don't hesitate to contact us go mail okay correct so yeah it's fully perfect so after uh notice after like clearing this form here something wrong okay let me fix this it's very easy so the problem is happening because this error inside here so we need to make it outside this this error okay yep and here will be empty1 like this now notice yep it's perfect so after actually sending the OTP this will not show this form this will totally redirect to our activation form like how bodm authentication work so y so we need to make it because it's not done yet we need to in this uh shared out folder we need to create a new file for our validating our OTP okay and here error data we don't need these two things for now yeah because we validating this everything from here also like toast. error area cool so now let's start our next task in this o folder create our activation file file name will be verification. TSX yep like this and uh for this file I simply copying The Styling part okay for just saving the time you can also going to the source code and you can also copy this just a designing part okay the web design part yeah here you go and this is totally similar as like our previous uh LMS tutorial verifications file okay this is totally similars I didn't updated any single lines this is the same things what I did in my last tutorial yep so right now still nothing will happen we need to add this in this OD screen so come back here OD screen copy this if the active St active status verification then call here our verifications component like this yep now in here the default value we we can update it to verification for testing only so here you go now we need to give on reload now click here and yep here you go so now notice we have this uh this is on input type number that's why we have this like increase decrease button but we don't need this so how can you remove it very simple come back this SRC and our F folder and this global. CSS and inside here we need to add few things so for the input we can add this CSS so then this will remove the increase decrease options okay and also we need to add another few lines this is here just this few CSS okay this four line just go the source code and copy this yep now notice the plus icon is the increase decrease option is missing right now okay also we need to add on animation the animation will be like this so just go to the source code and copy this this is for un shaking effect okay so save it right now come here and click this verify OTP then notice it's moving okay yep perfect so now we can come back to our this verification component now we can start to working in here we can make it Dynamic right now so in here when we are clicking this verify OT P then this is coming here so here write another logic else if the verification length is not for then on error yeah then return otherwise we can here send on request for activations okay here now before this click this sign in and after sign up here we need to redirect it to our this verifications model right so for that's why we need to come back this sign up. TSX again and after this uh successful here after sending the email after sending the email here we can call our this set active State and we can add here the verifications okay so then this will automat go to the verification screen yeah now in this verification screen first in here in our this graphql actions folder we need to create a new file activation dot user sorry activation. action. TSX or we can give this name to TS also no problem but first copy this register user and come back here then here this will be another mutations we need to check our server for this one how we are activating our user so in here in this resolver check this activation user okay so check this activation D here we are sending activation token and activation code okay so mutation name will be here first change to activate user yep your name will be activate user and we need here just two thing one is our activation token which is string and activation code which is also on string yeah then in here we can call this activation dto oops sorry not activation dto we can call here activation and here will be activation dto and sorry here will be not activation this will be our activate user okay this name yep cool and here copy this two thing add it in here and activation token and activation code here will be activation token and activation code yep done and in this response this will give response this activation response and this will give here an user response okay like this or for response we don't need like anything so we can skip it okay or no problem this will give us just on the registered user informations Okay cool so yeah we can right now copy this we can come back here and we can instead of this comment we can call this activate user oops sorry not like this come here and constant something from use mutation import this use mutation from our Appo client and then in here call this activate user and here call our activate user yep and loading error and data we need these three things so here we need to call this activate user like this and here we need to send variables and data so how can we send this data let's make it here so in this data we need to send this activation token which will be our activation token okay we need to First make it EMP string then after it activation code which will be our this verify number oop sorry not this one this will be this verification number Y and here do on Console log before sending this all informations for checking it like everything is correct or not okay now we need our activation token so constant activation token what we will get get from our local storage y now we can add it in here cool so card this console log and add it in here and after here given comma activation token done so here copy this loading and and in this button add disabled add this loading if loading through then it will disable yep cool and for data and error just wait and come here now try again register uh try to register on account let me go to my Gmail so right now in our mail notice it 4593 this is the code if you type right now long a wrong code like this verify OTP this is giving on error response not successful okay yeah yep so in here this activation token is undefined uh why okay let let me check this why this is undefined so this is our local storage Oops why it's undefined it's very weird that uh in here in our this odd screen sorry in this sign up response. data. activation token is undefined so response. data console log this okay otherwise it doesn't work so let's click here again sign in and sign up let's try again now hit sign up open it yep so this is a our information so inside register we have our activation token so register. activation token yep I believe now it should work now again click sign in we have nothing to do because we're testing it so here now hit sign up yep now I think activation token here yeah cool right now we have activation token in here great so let's check the email verification code here you go 5935 sorry 5395 so try correct one 5 3 95 now hit verify OTP this is giving on error let's check this okay let's do one thing this is right now giving the everything perfect but uh the problem is let's do one thing in here add on TR catch in this sketch console log this error and here create on variable like this and then then we don't need these two things okay your data then inside here we can add on toast. error error do response Dot message like this cool come here and let's click oops type the correct OTP like 5395 verify OTP so check this error first okay this is graphical validation error did you mean user H okay got it come back to our this activate user from here this is actually doing problem so uh let me check here oh yeah this is on object got it so name email phone [Music] number password okay like this password you don't need this is enough okay for now this is enough y save it now I think it should work click here no error it meanings I think account created perfectly so come here I mean in our database uh let me run the database again so servers and npx Prisma Studio yeah here you go this is the account cool so this is the programmer Shahar which mail I added this is address this is the password Avatar rooll everything is here cool now after creating actually this account here we don't need any response actually in here we can give on success message account activated successfully and we can change this uh not active State we can change this yeah yeah active state to our login after giving on toast success then we can uh change it to login but uh one thing we must need to do and that is we need to check here the error okay so click here and now check this is graph errors okay yeah so we don't need response. message just error. message okay now if we click here J expired Okay cool so then it means this will doesn't work because it it's already registered the account okay that's why so now we can remove this console log and now if we try with like any another OTP like this JT expired okay because it's already registered so that's why this will doesn't work right now so let's try to register another account okay like uh wait let me check database okay let me register another bod account oops sorry register not sign in yeah so like this now hit sign up so please check your email to activate your account here you go this is 7711 let me try wrong 5432 like this invalid activation code perfect right so right now type correct 1 77 and what is that one one now hit verify OTP and yep account activated successfully now it's coming login it's fully perfect right now we need an options for close this model because our sign up is perfectly done so we need to right now close this model or we need to do on login right so let's close our model first so for doing this we have two options we can add here on cross icon and another option is like how Bodi uh model is closing like if you click outside this model outside this box then this will automatically close Okay so uh I'm choosing the second options this will looks more good like if you click any these dark options then this will close the model okay but not this will not close if you click here okay so let's implement it so here first give on ID like this screen okay and now after here add on on click which will call on function name will be handle close inside this function create this function first handle close if our e dot okay receive here e so e do Target do ID if it's equal to our screen then here our just a second in here we we need to send this set open okay so set open yep come this out screen receive this set open which type will be like this okay so here if type as ID is screen then set open will be false cool and E type will be so e type will be like this react. mouse event HTML div element okay so still this is giving on earning proper does not exist on event Target okay got it so in here we need to little bit update okay like e do Target instance of HTML development and E target. ID then this will doesn't give any error yep now come here and click here it's closing now click here it's opening okay so from here update it to login right now yep now click it's closing so click in Med not notice it's not closing but when I'm clicking outside of this model it's closing the model so it's perfectly working yep and if we want to like after uh login we can uh close our model also so what we what we'll do right now so come in this login and let's Implement login features which is very easy come back to our Discraft actions and let's make our login action. TS and we can copy this activation user like this and in this login actions update it to login user come back to our server to check what we actually need to send so in this resolver we need to send notice email and password these two things okay so then we don't need to like any AC acate user sorry sorry we need one which is login which name yep then we need to just add here or we can do one thing we can come back in this playground we can copy this mutation okay for just our shortcut purpose yeah now we can add it one by one so mutation here name will be login user and we need here just few things like email which will be string and required password which will be string and required now inside here we'll receive email like this and password like this cool so then in response we will receive this few things okay so now we can remove this and in this response let's add this few things like user and we will receive ID name email password address phone number everything and here we will also receive error I don't know why here our make it TSX okay then we can use here like you know the format prettier one but don't know why prier format not working okay it's similar no problem we can use it or skip it yeah it's still looking good cool so uh now we can copy this login user we can come back in this login from here we can send it so make sure on try catch post. error error Dot message and here arate make it as sync function so first import here our use mutation inside here call this login user and here add login and loading this two thing is enough here in this disabled in this button or loading cool now aate login we need to send here variables data make this email which will be data dot email and password will be like this okay so we can do one thing we can update this name to login data or D okay and send it in here cool then console log this r response and toast dot Success login successful cool so yeah done now we can try this login come back here something wrong in graft keable okay the problem is here we need to add here sign like this and here will be on comma Now come back here and check okay CH give reload yep done now click here now try to log in hit login login successful wow check our data response this is our access token error null and this is the user cool perfect now type wrong email password like 1 2 3 4 5 6 7 8 hit login still very weird oh yeah because this is right now user is null H sorry got it what we need to do come here and inside here we need to write some logic if response. data. user have then only run this else toast dot error will be our response do errors dot sorry response. data dot error do message okay like this copy this I mean uh save this now come here type email and wrong password cannot read properties of reading message okay very weird uh let me console log this response. data so this is our response error. message okay got it this will be response do data. login do. message okay okay like this I know it's looking very big but this is actually our response now if you try with wrong password inv valid email or password fully perfect security right so then after actually receiving our response we cannot like totally uh close our model we need to store the activation code I mean sorry refresh token access token into our this cookies right if I'm not wrong and uh by the way after actually activating the account uh we can come back again this verification. TSX after activating the account from here first we we will remove our local storage items from here okay local storage dot remove item cool done now in here we need to set few things in our cookies so what we can do for that for that we need to install a new dependency that name is first let me open a new terminal and in here let me type npmi react cookies if I'm not wrong let me search that oh sorry JS cookies yeah this one so we need to install this now in here after login successful we need to set cookies okay so cookies. set first let me import cookies import cookies from JS cookie we need to install the type version this is uh don't Avail this is not available the type version so let's install it now done I think error will be done yeah so cook is okay this is not any object so we don't need add in second bracket cool so cookies is here now cookies. set here we will give name to refresh token okay here value will be response data and I think refresh token if I'm not wrong yep and then access token cool done after it after adding this we can close our model so for that's why we need to send here this set open to close this model copy this come back here receive this set open which type will be like this then in here set open which will be false done so now if we come back here then if we right now type here email and correct password then hit login okay it's very weird that still but uh look at in our cookies still missing I did little bit mistake in here so now it's working be make sure that you're changing this like this response. dat. login. user okay and cookies. set will be also similar here just add on login here will be similar okay then everything is perfect now so right now if we try to log in it should work before checking let's press commment shift and R for mac and for Windows control shift and R okay given hard refresh or hard reload now click here now let me type the correct password or before correct one let me type again the wrong password like this so invalid email password now let me type the correct one and login so here you go login successful now if you check our this applications here just click and check this refresh token here you go this is our access token perfect so now our login is perfectly working now what we need to make we need to make few things first of all every time when we are sending any request before sending request we need to do here one thing and that is before actually sending any request or while we are sending request every time we need to add few things in our request headers so for this we can add here on on o middle wire so constant o Middle where here we can add our new Apollo link then inside here we can send two uh parameter or two argument like operation and forward like this now in inside here operation do set context now inside here headers headers will be like this so authorization sorry headers will be access token this will be our local storage. gate item not local storage this will be cookies dot get first import here cookies so import cookies from JS cookie yeah dog here will be our access underscore token like this then we need to send here refresh token which will be also similar like this yep now in here we need to return our this forward and this operation yep so now in this URI we can remove this instead of doing that we can add here on Al middleware Dot concat and on variable HTTP link so let's create here on variable HTTP link which value will be created create HTTP link and inside here URI will be our process. env. react app uh sorry not react app next public server URI okay like this now in here we can call this HTTP link cool then here given comma and finish it now save it yep cool so everything is still similar now let me check one thing from our servers because it's very important so come back this uh Cs and out card. TS so this is access token so check it correct spelling or not and refresh token okay so be make sure that you are adding the same things okay if you mistake any single later this will doesn't work cool and also this access token and refresh token so let me check our this cookies from here so applications and cookies yeah refresh token access token great now if we try to log in you will see the magic so every time when I am sending any request like this one check here this is sending access token and refresh token okay so every time it's sending access token and refresh token for any uh API request okay which we need perfect which we need actually yep done so our work is done now actually in this user UI in this SRC we need to create a new folder which name will be hooks inside this we need to create our use user. TSX so here we can use like use user then inside here we can take data from our use mutation and inside here by the way just go to this graph action folder create a new file by giving name g user. action. TSX and add this few lines of query code okay we need to write now F our user informations as per our cookies as per our cookies data okay so copy this get user now and come back here and add it cool so here this is saying data is declared but it's never value used okay yeah we didn't use it it's true so here first console log this data loading we need to send this loading and our data so this will be data like this now check your user inside get logged in user we have about user okay so data do get loged in user. user this is actually the information here now notice in here we have our exer informations cool so here while loading okay then that time we need to so sign in yeah here let's run on U effect inside here write on logic like if loading is false okay that time call this set sign in and make it like this okay so loading and user we need to add here yep now come here and notice here you go so right now we need to add here our correct informations so here will be then okay so user SRC is missing so in that case we can add here user dot Aver do URL if available or if have then only cool notice now it's not showing anything because it's missing yep now here this will show the user login user email so user dot image notice this is showing the email correct now my profile all orders apply for a seller log out everything is perfect now in here add our logout Handler so here on click we need to call our handle log out like this now come here and make this function so constant uh log out Handler and uh sorry here make it log out Handler not handle log out and cookies. remove we need to remove our access token and refresh token then we need to give on uh tost message like log out successful then we need to give on reload yep import cookies from JS cookies now come here and click here and click log out so here you go log out done now again try to log in so uh before showing you the login let me show you some things I updated few things in this login uh in here add this window. location. reload okay after login this will give on reload okay yep and also in our backend server in in this users SRC and in this guards odg guard. TS be make sure that you uh your OD guard code is totally similar like this okay totally similar as like the source code in here just look at here instead of verifying i instead of verifying the JWT token in here I'm taking the expir okay if the expir is less than de. now then we're updating our access token and refresh token then we are sending it to our front end okay this is how it's working yep now if we try to log in it should perfectly work so let me show this to you 1 2 3 4 5 6 7 8 this is the password and hit login so here you go notice this is the sign in as this is the mail my profile all ERS and apply for the seller account so everything is working perfectly yep now what we need our login log out is working now we need to make our this forgot password right you don't need to forgot password and after that after making forgot password will implement this social lot okay so uh for forgot password let's come back here and and uh in this shared in this Au folder create a new file by giving them forgot password. GSX okay and in this screens come this out screen copy this one add it in here by the way come here in this forgot password file and add like this now in here if active state is forgot password then call here our forgot password component yeah and then inside here we need to receive set active state which type will be like this now inside here we can give on H1 for now save it give on format come back here and something wrong okay sorry this is string not Boolean yep so save it now come back here and in here for now make it forgot password okay no no we don't need to make it forgot password yeah so uh in this login if anyone click this forgot your password after clicking this will set forgot password okay like this now come here and click this forgot your password and here you go now in this forgot password how we are planning to make it first copy our login one okay then in this forgot password paste it we need to uh update it like forgot password then in here we have just our uh email okay this forgot password we don't need anything else so this will be forgot password schema yep here give type like this we don't have any email and in this form submit we can delete it for now make it simple on Console log data yeah and receip okay we we need this receip now in here we don't need this password so remove it then we don't need this anything remove this as well remove this one yeah here will be or go back to login okay so here type login like this now still something wrong what's Happening Here set open is missing okay so we don't need set open in here we can remove it like this we don't need this cookies login user use mutation we don't need anything in here even any icon like this yeah we can remove this everything so now we can save it come back here and check it not login with Bodi right now this will be forgot your password yep then enter your email or go back to login here make this G2 Capital yep so after this uh button we need an input for submitting it so input and uh let's do one thing come here here you go copy this so for now we don't have any loading yep so yeah here give another line break and here not will be login this will be submit cool okay so forgot your password enter your email and submit and or go back to login okay like this so if you click login then this will come back here if you click this forgot your password then this will come here after entering email after hitting this submit button this will submit uh this will send an email to this email uh for forgetting the password then we can click the link then uh with the receipt password option will come okay so uh for now we can remove it like this and here notice this is our data yep okay cool so now we don't need any new state as well yep now we need to make our forgot password in our back end so come back in this users SRC then our this user service here after log out or after this compare with hash passw we can make our forgot password so asnc forgot password where we will receive forgot password dto okay okay what we need to make in this dto so come in this dto and make on forgot password dto which will be very easy so update it come here and change copy this name and make this F to Capital yeah so forgot password dto we just need on email yep that's it so forgot password dto cool now inside here my C pilot already suggesting this code let me check what is this is here so email we are getting it from our P post D okay then we are finding the email okay then new token Center what is this no this is wrong thing okay okay so uh in here this is perfect first we are getting our email from this forgot password dto then we're searching that email if the uh email already have then good otherwise like us are not found with this email okay now if uh if we find here user then what we need to do we need to make another function in here for Generate forgot password link so I sync forgot password link and here we don't need anything like this here we will receive user which type will be user from our Prisma yep now we need to make here on forgot password token so this. JT service. sign here we need to make our forgot password token like this so here we need to add the user yep now here secret this will be our this dot config service do get forgot password secret okay what we need to make then after it uh we need to must add here on expires in which will be 5 minute okay the forgot password token will be validate for 5 minute now in here we need to return this forgot password token yep so now uh let's call this generate uh password Link in here okay if user not have then like this otherwise forgot password token and in here forgot password token make on variable and in here just call this generate forgot password link and send this user then inside here we will get our this forgot password token okay so uh first do here on console lock like this and uh in here forgot password secret we need to make it so in this EnV forgot password secret which value will be let's go to on password generator select 50 length and copy this now paste it in here oops something wrong let me try another one yep done so now we can close this file and yeah cool now we need to come back to our this resolver and after this uh before this login log out response let's add here another query oop sorry it's not any query or yeah this is also we can make it query no problem because we don't need to like update anything in in here this will just send on email so here give this name to forgot password yep and this will give us on response like and for this response let's make a new response so uh we can copy this register response and the last we can make it so this will be forgot password response like this and here we will send forgot password token okay like this and uh error type okay we can keep it no problem this is optional so yeah we can copy this and come back here and update it in our resolver this is not login response this will be our forgot password response yep and here will will be dot our forgot password and in here send a or GS or argument like this then inside here we need to send our forgot password dto we can give this name anything you can give this name now in here we need to call our forgot password dto which type will be like this forgot password dto and here given comma oops sorry I did a small mistake cut it and add it outside of here yep now give on comma and in this context add here response okay not request yep like this then after here we can add on promise which will give us our forgot password response cool now inside here we need to send our forgot password dto and our context. response okay sorry we don't need any response yep we can remove it for now then y we can save it okay cool so yeah now let's come back here in our graphql here in our graphql server now click here and type query forgot password Here forgot password GTO email which will be suppose this one forgot password token yeah now hit send so please login to access this resource very simple because okay this is already here access token I don't know then why still okay oh sorry sorry sorry sorry if you log in then why you will search for you know for you will give a request for forgot password obviously it's not protected anyone can give request for forgot password right so we cannot make it like protected yeah yeah so now try yeah this is our forgot password token cool so now what we need to do we are getting our forgot password tokens perfect so we don't need to get our forgot password token we need to send here on email right right so let's make here on variable like constant reset password URL okay where value will be this. config service. get this variable name will be client site URI okay this environment variable here we will add our client side URI then plus this is our forgot password URL okay this will be like this then receip password then verify our forgot password token what we are doing in here we are making here on resit password URL okay this is on URL right now perfect now we need to call our email service so this. email service do sendmail then email subject will be receip your password and template will be forgot password like this and uh by the way be make sure that you are wait first let me finish this receipt password you yeah B sure that you're going to the source code right now and in this email template you're adding this forgot password. ejs file okay this is our email template for our forgot password so be make sure that you are going to the source code and you are downloading it or you copying it and adding it in like this okay yeah and the path name will be totally like similar our this uh email template path name okay like this now we are saving it but uh right now if we try then this will send an email okay but uh without with sending email this will also send this forgot password token in our API response which we totally don't need we don't need to send forgot password token in here okay so uh we did here like little bit mistake actually it not any mistake I tried I checked like uh the token value okay that's why like I implemented like this so uh come back this entities oops sorry not entities in this types okay and in this forgot password response this will send on message just on message yep so here will be message right now message will be like this your forgot password request successfully or successful okay like this so you can just uh customize this message as your favorite okay this will be the API response message yeah so right now if we come back here if we try to send it again okay I got it in here I am receiving forgot password links which is not possible add your message yeah now hit send and and here you go your forgot password request successful now come to our Gmail and here you go this is our forgot password link so password receipt hello Shah sh we have received a request to receipt your password to proceed click the button below this is our receipt password link if you click here this will go to our this Local Host 3,000 receipt password verify and this is the our JWT token okay which is very big and uh by the way be make sure that in this.v you're adding this client side U okay as like this HTTP local 3000 for now okay because uh in here in our this service we're adding here first client side URI this URL then receip password then verify and then like this okay so our backend task is for now uh not done because right now we need to make another one for activate the account okay so this will be reset password sorry not activate reset password so reset password dto and add here our reset password Dio not any so input type export class our reset password dto we need here just password okay this will be our new password yep and that's it it's enough okay oh yeah we also need our token so add theate field this will be also not empty activation token is required right this will be uh activation token okay no problem we can give name activation token yeah so this is these two things mandatory in here this reset password D so import it now inside here constant password and not verify this will be activation token now first constant verify or not verify as decode we can decode our this activation token right now so decoded ER this Dot our J service. decode this activation token yep done now after it if not decoded it meanings invalid token okay otherwise right now we can search our user so first we need to hash our uh user password like this oh sorry we need more few things in here okay yeah right now we have our user informations in this Deco date so let's do one thing what is this is giving okay so just one prettier issue yeah now constant user will be our this. Prisma do user do find unique where ID will be our decoded. user. ID like this okay now inside this user we have our user information so now what we need to do if have user then we need to write now update our user informations so updated user here also do an AIT aate this dot Prisma do user do update where ID is deced user ID and dat data will be our password okay like this then I think guys we don't need this one then okay we can directly add here like this make this name to user very simple Okay cool so what we are doing we are first searching where decoded the ID is like this yeah then we are just searching uh updating the password as per this new password which is coming from our body or request. body okay now in here we can return our this user cool so our uh receipt password options is also done receipt password service now come back to resolver and add it so after forgot password copy this in here give this name to receip password so receip password GTO this R will be capital I don't know why I add it like this because this is the best practice yeah we can save it we can come here and update it like this and in the service also update yeah now inside here here will be receipt password in this receipt password dto okay so this response you need to update this response right now so come here and update our receipt password response where we have user which type will be user or any okay like this yep cool so now we can copy this receipt password response we can add it in here and here as well done so where's the error okay so dto yeah we updated that's why cool so now if we try this receipt password response by coming here like this one this is on query give on reload first oh sorry this is giving an error in our server let me on restart okay this is giving on error let me check okay I forgot to add here user I mean I've user in here that's why yep I forgot it now it should work this will don't give any error right now to us yep cool now come here and give on reload now in here type or query for receipt password like this receipt password dto new password so suppose in here I'm typing a new password like 99999 like this and in this activation token we need to send our activation token so uh uh right now right now in here first let me try one thing so is it password yep so uh from here login with on email like this here I am giving the password this is right now correct password okay 1 2 3 4 5 6 7 8 this is the correct password now I am uh logging out from here now I'm clicking and I'm clicking just forgot your password I'm adding the same email now I'm hitting submit oh sorry this will don't send any uh forgot password link for now yeah come back here and try it so in this forgot password yeah here already so hit send so come back in our mail now here you go this is a receipt password link so copy this token okay like this now come back here and in this receipt password in this activation token we need to add it now password will be new password will be like this yeah now if we hit this one you will see the magic so this updated the password right now I am trying with the old password then you will be notice that password will doesn't work like 1 2 3 4 5 6 7 8 okay now hit login password incorrect because it's updated the password and right now password is this one so try this and okay this is on small giving on small error because this is not eight characters I am really sorry for this okay so here make make like little bit more I know this will doesn't work because we need to again uh update this password okay no problem so uh click here again very sorry for this now here you go now click here now from here cut it cool so now come here and update this forgot password update this activation token like this now hit here cool so right now our password is fully correct now let's try this and hit login and here you go login perfectly done so it meanings our forgot password and receipt password is perfectly working now we need to make it in our front end application so let's start it our back end work is stand for now so from here what you need to do when we are clicking this uh forgot password this will send on email so in this graphql actions let create a new actions forgot password. action. TS so in this forgot password first let me copy few things from our previous one like get user and in here update it to forgot password okay like this now inside here this you query and like this name will be forgot password then inside here we have un forgot password dto where we will send our email which will be string now inside here or we can do one thing guys in here we can directly call email like this yep then now in here we have our message okay we don't have any status or anything like that yeah so we can give on format and you can copy this forgot password now come here add here on try catch in this catch block toast do error error. message okay and console log this error for now first time otherwise response aate at first in here constant something from use Query and call this forgot password inside here call loading and data uh no we don't need any data yep so just loading is enough for us right now while loading that time this will disable okay so yeah like this so here a wait call here so copy this forgot password and uh add here like this then add here third bracket not second bracket and loading yeah here we forgot password then variables here we need to send our email which will be data. email cool now response first receip and console log our response still on error and I did here an small mistake actually this is not query this will be our use mutation okay like this now come back in this forgot password and update it to mutation okay not query and make it like this otherwise everything is same and here add email which type will be string and then forgot password D and like this okay now obviously this will still doesn't work because we need to right now come back to our this users SRC then in this resolver make it mutation not query give the M2 capital Y mutation forgot password and receipt password both because we need to send few things in here from client side that's why okay now if we try I believe it should work right now so come here click this forgot your password and type on email like this and hit this submit and check pending and done so come to our mail this is sending on mail in here perfect so it means me it's perfectly working notice in here this is our message so here this will add on toast. success okay like response. dat. forgot password uh no toast. success please check your email to receip your password word yep like this so yeah done now we need to make our receipt password okay so let's start to make this for our receipt password what we can do first collapse this everything in this app folder let's create a new folder first add here our on organization folder name will be routes or Roots now inside here create our activate user right if I'm not wrong or sorry let me check it the user again I mean the URL this is receipt password like this okay now inside here we can create our page. GSX oops sorry create a file not any folder page. GSX yep and RFC so right now if anyone go this URL this will don't show any empty this will show right now page okay in this here cool now what we need we need our this token this token token first right so here we have one very smart way for getting this token and that is just add here search parms like this and inside here add on type for our search parms like key which will be string or string or array of string or it can be undefined also like this now inside here let's add our activation token I mean add create own variable activation token search spms add here verify or it can be empty string yep so now if you console log this activation token you will see the magic in here we are getting our this activation token right after this verify yeah we need this for activate this uh for validating this uh for validating this request okay for validating this receipt password request okay cool now inside here uh we are planning to add here another component which will be our receipt password component so let's copy this come back in this share and let's make this and uh we can copy our this login code or login component code and and this receipt password add everything and change this function name to our receipt password like this then in here we need to import it yep import done and here we don't need any state like this obviously we will send here this activation token which will be on string or it can be undefined okay string array is not assignable to type of string so this is an array of string okay got it so in here add like this string or array up stren yep done so save it right now and come back here then inside here we don't need this set open we don't need totally anything like this remove this unsubmit function all code just console log our data in here we need password this will be password and second one will be our confirm password so Z do screen and password must need to be at least eight character Longs yeah perfect uh we don't need any minimum in here okay because this will be like similar okay yeah so then for now make it and now make here receip password schema okay and here type receipt password schema cool and here will be we don't need any email field we can remove it we have on password field like this and we also don't need anything like this so remove it we need on submit button otherwise we can remove everything from here almost save it and come back here okay so uh this is must on client site component so add here use client it's looking very big I know this so first let's remove few things yep and uh in here add on class name W full Flex justify center items Center Height SC yep so and card this everything inside this GI add here another div where width will be 500 pixel yep from 800 pixel I mean from our MD screen yep otherwise we will be full cool now notice here this is sh login with bodm but no this will be receip your password okay like this so enter your password and uh here let's add on line break and this will be submit cool so now let's add here our confirm password copy this add it in here like this so this will be not enter your password enter your confirm password okay here this will be confirm password what was that yep cool and here errors do confirm password do m s say yep great but this still this two state is similar so we cannot make this two State totally similar so show set show we can uh remove it for now okay I mean for this or we can keep it so here will be uh like let's add another state for confirm password show and set confirm password show okay like this so come back this button update it here as well and this will be not then show this will be confirm password show yep here also done now here I'm typing I'm adding yep cool and here also typing and yep done now we need the main important thing in here that is if this two password is not correct then this will give us an error right so let's add it in here add here on refine method then values Ed your and call back and return here values. password this must need to be match with our confirm password okay if it's not matching then add here on message like password must need to match with each other right then here we need to add on path which will be our confirm password cool so now if we come here if you type right now on pass part like this one two then notice this is giving on error so add here eight yeah now type something which is not matching notice password must need to match so let me copy this one and let me add this one now the error gun now if I hit submit then look at here we have our password and confirm password great so now in this graphql actions we need our this activate user okay sorry sorry not activate user we need our receip password action so let's create it receip password doaction do GSX yeah so this will be similar as like our forgot password so mutations this name will be wait let me check our servers few things like in this users then this is our resolver so this is the receipt password okay first update it I mean the name that is it password then in here we need only password okay password and uh we also need this activation token yep which will be also on string yep now in this dto call our this receipt password dto and here will be password and our this activation token like this now here this will be not forgot password this will be our receipt password and after this this will give us response on user right so here this will be user like name first uh email and first we can add here ID okay it's enough for now and roll password yep so we can save it right now now we can uh update this name to Reet password copy this and in here we can write now come back in this receipt password add here on try catch and catch any then console log error yep now constant response equal to 8 first receive here award use mutation and call this receip uh receipt password and inside here receipt password and our loading yeah so this loading will become in this submitting or loading then here AIT call over this receipt password variables where we need to send password which will be our data do password then last we need to send our activation token which is coming from Top yep now console log this response so type a new password like 99999 hit submit and check what's okay this is giving on response cool it meanss it's really updated the password but we need to check one thing guys okay must we need to check one thing in our back end I forgot it probably that is we need to check the validity for our this token right so uh us a service here decoded so here will be another logic if not decoded or the decoded. EXP is T do now okay sorry here will be decoded. exp yeah if it's uh greater than the state. now then only uh do this okay like if it's not greater than like if the expir is less than this state DOT now then show this error okay sorry this will be or okay not and sorry this was an small mistake so if not decoded or this decoded. expire. like de. now I mean uh if it's less than this get. now then give an error like invalid token so right now if you try to forgot update our password this will give on error check you know receipt password this is giving on error so let's add it as a toast so toast do error error Dot message now if we try suppose type here password now hit submit notice invalid token because it's expired that's why or if it's response coming then it meanings toast do success password updated success fully okay like this cool now let's try to uh originally reset our password okay so suppose I forgot I really forgot this email password okay I mean our this account password so I am hitting right now submit so this will send an email please check your email to receive your password here you go this is our password receip link now click here now type a new password like I'm typing here a new password 5555 like this copy this and add it in here now hit submit so still invalid token now notice password updated successfully so what did I change from here I just added here multiply with 1,000 why this multiply with 1,000 what does this meaning so this meaning is this meaning is actually in JavaScript and typescript date. now Returns the current time Stam in millisecond okay while the EXP file in JWT payloads is typically in seconds so seconds and milliseconds this was the problem so that's why we need to transform this exp or this JWT expire with a millisecond so that's why we are multiplying it with 1,000 then this recorded. exp will be also go to one millisecond as like this dat. now okay then everything should perfectly work so yeah it's updated our this password right now so right now if you try to login with this password it should work now click login and this password so let's copy this and hit login so notice loging successful and here you go this is our account informations so our update information perfectly working right now okay so right now if you give on reload this is valid just for 5 minute after 5 minute if you try this will doesn't work okay this will give error y cool so our receipt password is also working our forgot password reset password both is perfectly working it means our backend task everything is done for now yep so what then next we're almost in the end right now we need to make on small things and that is this social OD Okay so in uh restaurant service I think we don't need any GitHub authentication system in here so we can remove it and we can keep just Google or if you want to add anything else then you can do it but it's very simple I'm showing you how to add Google you can do the same things by using like some other social medias okay so let's Implement right now Google authentications in here so first of all from our server copy this Prisma model okay because for doing social o we don't use right now server because in next days we already have this everything so in this user UI create a new folder by giving them Prisma and inside this Prisma folder add uh sorry create our schema dot Prisma like this now we can come back to our this client site here you go now first import here our Prisma I mean install here Prisma so first make this terminal little bit small so npm I D Prisma and then we also need to install our Prisma client okay so in this do EnV guys obviously we need to add our database URL so come back here and copy our database URL and add it you know this EnV cool so yeah Prisma installation done now npmi Prisma adate client so let's install these two things oops sorry sorry sorry typing mistake uh let me do it a little bit Zoom then this will be easy for you and I am clearing this one yeah so npm Prisma add. Prisma SL client okay this is the name yep so installation done now in this user UI we have our Prisma in here so let's write run another command for push this Prisma model so npx Prisma DB push okay this will push this uh database model yep done so we can close this now we need next all so next o here you go this is next out website click get start and we need to install this next OD right now so open a new terminal and install it obviously in this user UI directory okay we make sure that you're installing this everything in user UI yep now we need to create our okay so this is if you're using next 13 or then so let's create a new folder in this users UI SRC create a new folder give this name sorry in this app folder create a new folder by giving name API okay inside this API create our next Au dot TS okay like this now inside here copy this everything I mean click here and come here and paste it so yep client ID so here r empt r Mt string okay so we don't need more providers these two providers enough client ID GitHub uh we don't need G client ID we just need our Google so so in here instead of GitHub provider add here Google provider okay so Google provider like this let's import this Google Provider from next all providers and Google like this then in here client ID will be like this but not GitHub ID this will be Google client ID okay and Google secret ID or client secret we can see cool then at last we can add here on secret next OD secret yep done now guys we need to go to our Google Cloud console okay so click sorry sorry not Cloud console this will be developer console Google developer console so this one console. cloud.google.com create here a new project so like here I'm creating a new project giving this name to bodem me food delivery okay so organizations I'm not adding anything in here so first at food delivery okay it's creating so now select project here you go this is our projects now click this API and services click this enabled API and from this left side click this credentials now click here create credential and here will be o client ID now click configure constants screen click your external and click create app name will be for now bod I'm giving you can give your company name support email here I'm adding my email and here developer contract email add domain we don't need any domain for now now click save and continue and be make sure that you're deleting from here okay like this now click save and continue and here you go it's done so now if we come back this credentials now we can create credentials and this o client ID application type will be web applications authorize uh JavaScript Origins here at HTTP localhost 3000 for now and that's it and uh redirect URL which is very important come here and check so configurations providers just click this o okay I forgot it because we need to add here obviously on you know in here cannot directly call like this okay this will be on redirect URL so let me check my previous project first click here create then let me check my another projects like okay so first copy this client ID now and in this EnV add this uh Google client ID I mean inv variable and value will be this one like this okay okay now come back here and copy our this client secret but before copying copy this Google client secret and here value will be this one yep now we can close it and we can click this okay but be make sure that uh you don't need to do anything let me check one thing I forgot one thing the redirect URL okay notice this is the call back uh this is the redirect URL see so now guys click here again and update our redirect URL like this so SL API SL callback and SLG Google okay this is as per our next uh next out CH okay you need to add like this and for production this will be like this your domain and like this okay yep so cool right now if you try to implement our Google this will this will work perfectly so we our work is done now come back here actually guys we cannot make like this in next 13 app directory okay we cannot use our next o like this in app directory this was like the page directory style so we cannot do similar things in app directory in app directory this rules is not same okay what we need to do in this API folder we created a folder name was a then inside that we created our next o file but no in actually in this o folder we need to create this next o folder like this okay triple dot dot triple dot then next o like this inside this we need to create our root. TS okay and we can create another one which will be options. TS now inside this option. TS we can add out this full code so we can delete it right now now inside this options. TS we can paste it we don't need this next o we can remove this line simply make it like this save it now come back this root. TS and now inside here first import our next o like this now import our Au options from our do/ options now constant and handeler equal to next o and this Au options okay now export handeler as G or handeler as post okay like this so now we can save it now if we come back in our this uh next oh by the way in this next UI provider come back this providers folder and in this next UI provider ERS be make sure that you are adding this session provider the top okay why we cannot add this session provider in this layout. TSX because layout. TSX is server side component and providers react context cannot support in uh client s side uh server s side component you must need to add this session provider in client s side component okay so that's it now we can close these files if your code does not working then please check my source code obviously you are doing something wrong okay everything will work perfectly now if if you on reload check our Network tab everything's working it's not giving any error like this session is perfectly coming right now so right now if we click here and if you click this Google this will come here now sign in with Google Now click here now here you go so it's perfectly authentic right now if you check this sessions notice we have informations in this sessions okay so let's uh take our informations in here obviously after clicking this login button we need to add this user informations in our uh in our database right we need to save save this so constant something from use session call this we have here user or data sorry not user we have here data now if we console log this data then we will get our all data in here our logged in user data okay so here we can write on logic oh sorry we don't need this use session actually in here we need our use sessions in another component so let me add it in that component we need our use sessions in this profile drop down right yeah so import your session now here console log this data here you go this is our user informations so data do user so we need to write on logic in here if data. user have then set sign in will be true okay and data is possibly null so here at data like this so now this is giving an error because user. email is find yeah I know this like here we need to write another logic if data available data. user have then this will be data do user. email okay otherwise this one now notice error will be gone here you go error gun so now we also have our profile p picture so let me add it in here data. user if have then data. user. image otherwise user. IM right now see the magic this is our profile pictures because we did Google that's why so yeah it's working so there have two things we can do in here we can skip this I mean we can like uh don't take our information it will also work but it's obviously not a best practice for our this type of big applications okay we obviously need to store this user informations in order if we don't store this will do problem sometime so now here if data. user have then what we need to do we need to call here one thing so let me do one thing we need to call here on function okay constant add user like this call here yeah this this will be an async function like this now we need to do one thing in this SRC folder we can create a new folder by giving name actions inside this actions we can create a new file uh register user dots okay like this now uh we need to make we need to connect Prisma first okay so let's create a new folder in this SRC by giving name leap or elb in this lip create our Prisma DB dots file like this okay now add this view code import Prisma client like this and here giving on typescript error we can easily fix this typescript error by creating a file in here in our root directory not here the file name will be Global d. TS like this okay and inside this file we need to declare our this Prisma DB okay so now notice this is not giving any error right now okay so uh add here use server export con Conant register user where this will take user informations for now I am I'm giving this type to any okay so first console log this user only for now yep so call here now await our register user send our user so how to send user in this add user send our data do user okay and here receive it our user which type will be any now send it now check I think we have data in here give on reload here you go we have a informations okay name email and an image cool so what we can do we can create here an variable constant user AIT make it a sync so AIT prma DB do user do create and data will be our name which will be user.name email will be user. email password this is important so how can we generate an password right R user. roll and that's it not iser do ro this will be for now we can give this user okay for testing first time yep and that's it oh phone number number another one important one so phone number which will be uh obviously when user is registering with Google then user don't have any phone number so for that time we can make it you know wait so let me check one thing here phone number is not optional okay so it's very important how can we then we get phone number we need to make it optional okay every times we don't have phone number make it optional and push it again so npx Prisma GB push yep so phone number which we will don't add right now oops duplicate identifier y so here we can give this name to user data so here user data yeah so error gun now we can return our this user okay we don't need to do anything in here uh sorry oh yeah we are doing in same function that's why okay I mean do it outside here return this user yeah we don't need to do anything okay so uh why we don't need to do anything first obviously this will don't create the user if the user is already existing okay so here we can do one thing if first constant is user exist so aate Prisma DB do user dot find unique where ID will be our user do user data. ID okay so if user exist then we need to throw on error or sorry we need to return this us user exist yep not error otherwise paste our previous code okay like this then otherwise create account H cool so right now if you give on reload check here what's happening this is giving on error Prisma D is not defined sorry here import Prisma okay not Prisma DB and uh sorry path is wrong Prisma and here not Prisma DB this will be Prisma done we can save it so error gun now give reload and check here you go okay still on error oh sorry so this ID is not matching yeah I know because social authentication ID and our database ID will be not similar at email not ID yeah sorry sorry pardon now I think error will be gone I believe yeah now no error you can check no error but it's also not creating any account and it's also not giving any error also and for the password what we can do in here we don't have any password so let me check one thing let me run the studio Prisma Studio npx Prisma Studio yep here you go this is our three user with this three email so suppose right now I'm trying to create account with another email okay so here if I click log out this will doesn't log out actually because right now log out logic will be also not same so uh come back here and in this logout Handler we need to check one thing or we don't need to check one thing we need to do one thing in here log out hand or call our sign out okay yep so I think this will doesn't work because that's a call back so let me try again yeah because it's a call back function so we cannot make it like this we need to call it so let's add like this or log out Handler cool so you can save it now now if we click here this will originally log out let's check here notice it's originally log out okay so uh let me create account with another email which is not exist so check here we have here three email support and sponsorship okay I have another email let me create account with that y so now come here and give on reload so this is giving on error password is missing yeah got it a good error okay so password is missing it's true so uh let's do one thing guys so we can do one thing we can create a new function or generating a new password okay which will be very simple so uh constant generate new random password because this password need to be random this password cannot be like similar for everyone that's why okay so constant characters here I am adding something like uh password okay this is on just random text you can add anything in here now characters length this must need to be eight not like that okay now we need to ensure that this is unique so uh for that so we need to add like this unique characters okay now we need to create here another variable why this is giving error set string can only be integrated through when using Target okay so uh I got it so we need to update it little bit uh as per our code version yep like this now this will work this will don't give any error to us yeah cool now after this password now we need to do here on for Loop okay for generating on eight characters of password like this so this is password lens not password lens character lens yeah now at last you need to return our this password this will return the password a very simple thing you can do it uh you can copy it by going to our source code also no problem now in here when we need password we can call here constant password equal to to this Generate random password like this yeah and this password will be our previous one I mean this variable yeah cool now come here and give on reload then notice this will don't give any error and this will save our user informations to database automatically give reload here you go notice here's the user information we cannot add phone number guys I'm totally sorry for this because when we are doing Google authentications Google is not sharing the user phone number with us okay so how can I add here phone numbers it's not possible even we cannot like adding a dummy phone number here also because this is important we can do one thing uh we'll do it for future okay like when user don't have any phone numbers we'll uh before giving any order when user is trying to give any order we can show on message say like hey please add your phone number to give order okay we'll do it on the Futures okay cool otherwise everything is here is perfect our social authentications also done perfectly and our account creation is also working everything working login log out let me show this everything to you again so log out and you can add other providers also right now okay if you want to add like other social media authentications just in this options in this provider add another providers okay like GitHub providers or like any other providers but as for resturent website so that's why I'm planning like Google is enough in here okay if you want to add anything more then you can do that that's it sign up login this forgot password receipt password social authentications or full authentications perfectly working right now if you don't understand anything you can ask me question in the comment box or you can message me on Instagram and right now what should we do we will simply add here on Banner otherwise it's looking very awkward it's not looking good so I will add here on Banner so here you go hero component perfectly done so uh just go to the source code and copy this CSS let me show this to you this is just on web designing kind of like just few kin CSS classes and uh also don't forget to do one thing that is come back to our this app folder and global. CSS and be make sure that you are adding this few CSS on this backdrop shaders another one is our this Banner okay so we make sure that you are adding this everything in here then now let me check one thing yep otherwise everything is similar okay you can try it and when you are uh importing here just copy this full code okay you don't need to do anything in the zero component this is fully static component that's why okay cool so right now let me show this to you yeah this is how it's looking I think it's looking good yeah also updated little bit the header color background color okay this is the background color right now which is matching with our this Banner yeah I think it's kind of good it's not like very good uh obviously our UI design is not the main focus in this tutorial we're uh building on very big application so uh UI is not the main focus in here okay and I think it's also not that much bad it's kind of good so yeah now while I making this Hero part I just remember one thing and that is we did an small mistake in here okay in here note this password is not hashed password this is a simple password but we need to Hash our password while we are creating an account right so we can do it easily this is very easy just install here bcrypt and types for bcrypt yep now come back our actions folder and this register user actions import bcrypt from bpjs oops this is bpjs uh wait let me check BJs or BP what was that name so apps users SRC and we added B Crypt Yeah in our service okay this was Big Crypt I think both is kind of similar I really don't know about it okay so yeah and we can copy this code we don't need to write it no problems from where from here when we are activating account yeah oop sorry not activation account this one register user Yep this is the code so you can copy this now come back here and in this password add this hash password okay and password value will be this hash password what we are doing we are calling our bcrypt we writing this hash and we sending this password and you're making on hash password cool now delete this user and let SC create this user again Prisma error okay I stopped the Prisma studio so npx Prisma studio so delete it now deletion done cool now we can give on reload and from here cck Google let me choose the account and here you go cool now if come here just give on reload here you go notice the password is right now hashed okay it's not a simple password so you might be thinking yeah the user don't know his password then how can he like login he don't need to log in he can log in with his Google account okay and if if he want to uh remove the password I mean receive the password then he can like log out or try to forgot password okay because we have forgot password so user can easily update user password as per his wish so we have this all features completely right so yeah that's it our this user authentications perfectly done or user authentication Service done and uh that's for today's video I don't want to extend this video to more big because every week I'm planning to upload videos okay so this is on service what's the benefit of microservice architecture and that is today we are making user Services okay so it's not like that you cannot use this Pro project for your and any other projects you can use this user service for your any project okay this is an complete different project and in the next tutorial and the next day we will build uh uh our seller part okay I mean here because without making the seller part we cannot make this restaurants popular foods everything is connected with this seller account so we will make this features apply for a seller account and when seller will apply for an account seller need to add lot of information about his like restaurant like restaurant name restaurant location then restaurant Foods etc etc okay then obviously admin need to approve it seller coming to our website and registering account obviously it's not like that seller need admin need to validate the seller informations okay then admin can approve the seller so we need to make two things on this admin dashboard another one is this seller account for this seller account we will create totally separate front end okay I mean totally separate another next St project this is for our user UI this will be and for our seller we will create another nextjs project and for our admin obviously we'll create another projects but next CH or react I really don't know still I'll think about it later so uh it will be with next CH or it can be like with react also for the admin dashboard okay so yeah that's it that was this video I hope uh you learned a lot of new things from this tutorial so smash the like button hit the Subscribe button and uh also don't forget to give me some tips it will really appreciate me for making more more free content like this so that's it guys and uh see you on the next week till then take care bye-bye

Channel: Becodemy

Views: 70,780

Keywords: microservices, rabbitmq, event driven design, typescript, event driven architecture, javascript, nest.js, nestjs, express, node, node.js, react, react js, framer motions, spline 3d, reactjs portfolio, reactjs for begginers, reacts projects, full stack projects, food delivery app, react projects, modern projects, framer motion with react, framer motion, google authentication, react tutorial for beginners, graphql, next js, prisma, mongodb, tailwind css, next13, next14, microservice

Id: UxirFATvWTo

Length: 356min 51sec (21411 seconds)

Published: Wed Nov 22 2023