User verification email in nextjs

hey there everyone at this here and welcome to almost the finalish video of this series I'm saying almost because I'm not sure I will be able to do all of this or we'll be extending this series depends on you just let me know in the comments so the one of the last thing that's remaining almost last is how we can actually retrieve the user update some data in the database as well as send an email now sending the email has a lot of issues and a lot of good ways okay shways and the bad ways of doing it I found that luckily we are in this typescript JavaScript environment where things are super easy for us to work on with that we have this package known as node mailer which helps us to do almost everything that we want to do but there are new players which are coming around in the market which are handling these mailing into a new and creative way I'll talk more about them in probably some another video this time we'll be going with the core node mailer way also there is an exception that I have taken in this particular video that is usually I keep my mailing helper as just to send email nothing else it doesn't do anything it doesn't generate any token or anything like that it's a special helping file which helps me to send an email that's it but in this case I'm actually generating my tokens within the mailer as well because in this use case it actually makes sense to generate these tokens within the mail itself and I'll show you the walkthrough as well and again I always say there is no good practice bad practice it depends on what the project is what scale is and is it the maintainable code is it not so that's all it is in this project since it's not very scale we are not talking about like making thousands and thousands of files into it so we'll keep our mail and we'll keep it in such a way that we are able to generate the token within the mail itself the mail helper file and based on whether the user is requesting to verify an email or forgot the password I'll walk you through with a couple of scenarios how you can do it that's the one part the second part is how do you want to verify the user that's up to you there are a couple of ways you can do it all in the back end you can do a mix of backend and front end that is also totally doable it's totally your approach again there is no good right and wrong here it's totally approachable whichever you feel you can do that in case I talk about just the back end approach then the URL formatting needs to be in that way and if you are looking for the front-end part of it then obviously you need to have a front-end page of it both have their advantage if you do it totally on the back end then there is nothing much you can just redirect the user onto a home page or something but if you bring the user on some page and then the verification happens then we can provide a message to the user that hey verification was successful that's totally up to you how you want to do it it's totally up to you I'll show you and walk you through with the boasted approach that it makes you comfortable with both the approaches all right so first this is the service that I'll be using known as mail trap the one good thing I like about the mail trap is again go ahead do a sign up they have a free tier I'm on the free tier I'm not buying it because it's a good service but I'm happy with without buying it for testing we'll be using this email and as soon as you go ahead and create ad inbox it was empty so I added in box box and simply go ahead and click on this inbox after this and what you'll notice that on the left hand side you get all the Inbox and you get all your Integrations here so you can go ahead and integrate it directly with the curb I'll really like that how thoroughly and deeply they are working on almost every single thing is available for you for us we are using the node Mailer in case you are using play mailer or something for Java or something you can still use it so I'll go with the node mailer and all you have to do is copy this and the good thing is while copying it also copies your password so obviously I'll resetting this one so again this will obviously expose my password as well but again this is just a test account I can reset this reset the credential just one click not going to be bothering it much now one more thing that you should really know about it is let me show you this by opening up the Google and try to search for JS and this will be useful information notice here the URL let's say search question mark Q equals and something now this is a classic JavaScript there is nothing in like too much important in this case case what I'm asking you is how you can actually grab this information how you can grab the URL information now grabbing the URL information requires a couple of things you can grab it from the back end we have already seen that by creating a square bracket ID we can directly prick the params.id that's one way but if you're having this question mark or something like this you can still go ahead and click on inspect and in the console clean this up and we can just go ahead and say window dot location if I can write that and then you can go ahead and look for a search and this gives you the search parameter everything after question mark Q equals and I can go ahead and later on split this up and divide it based on the question marks everything before the question mark after the question mark I can grab all of this data so this is basic that we have now coming back why I'm showing you all of this yes that's a good question that's a very good question let me go back into my helpers where are my helpers and here are my helpers I'll create an new file and feel free to call it Alan thing I'll just call this one as mailer dot TS of course now the reason why I'm showing you this is there are a couple of ways how you can do this for example if you have a domain.com ah come on don't do this domain.com there we go you can go ahead and write something like a verify token and then slash and the token name so whatever you want to write so that's the one way of doing the thing another way of doing the exact same thing is how you craft your emails it will be whole dependent on that and which approach to take another approach is having this again domain.com why are you doing this to me domain.com and then you can write something like this slash verify token and then you can have simply a token question mark token equals whatever the token is now again there are some easier way of doing the things if you do it with the first way this is almost looking like domain.com profile and then send this so we can extract it directly with the params params ID so we have the square bracket syntax we studied about it and this is also the syntax which we just studied that we can actually grab it anything that's a question mark and then token equals all of that we can extract that by using window.location.search this second approach is better for me if I am actually using a client component this approach is better for me if you're if I'm doing everything from the server component there is no right and wrong in this one so again make sure you choose whatever you are choosing a little bit wisely will make your life easier and again it's it's not like that hey this approach is not possible in the printed it is possible but easier way and making yourself an extra travel that's up to you all right so we have already installed the package of node mailer we actually talked about that in the earlier so we'll be just grabbing the node mailer we also need to grab the user I usually don't do this because I like to send the token and everything and update the information directly from the controller where I'm writing but in this case we'll be actually doing a little bit different so just bear with me for a minute all right so we'll be getting the user command from and we'll be using command at the rate slash come on no suggestions models and then this is slash user model there we go this is the file name and also we'll be encrypting this so we'll be needing be correct Js that's coming up from beakerj so these are the libraries that we'll be needing now first of all let's learn how we can send an email now sending the email is actually super easy if you'll go on to the node mailer website you'll see that hey is it that simple yeah it's actually that simple so if I go ahead into npm install node mailer we already did that and all it takes here is example so in this example you can see we create a transporter which actually is nodemiller.create transport in this you provide your host Port secure authentication which will grab all the details uh from our SMTP host which is mail trap and then you simply go ahead and provide some options in the send mail so these are all options we'll actually create these options outside so it's much more easier from to subject text HTML so you can just provide everything and that's it that's await dot send mail that is all provide the option so two lines of code first is provide the create transport and then this transport can just send the email with the options yeah literally that simple so this is all what we have as of now let's go back and see that how we can try this let's create a simple function and call this one as send email which is perfect in this case and obviously this is going to be a sync and what information you will be taking from the user that is a big big question now what information do I expect from the user first and foremost I expect that he'll be sending me the email where do I want to send this email obviously I need to know that then optionally you might use the same file for sending the email for verify token for forgot password as well so both the tokens can be sent and right now we'll talk only about the verify but I'll still walk you through with the code that can be there for detecting the email type and all of that in this case we have just two but otherwise I prefer to have an enum for that and based on that I like to check that so I'm telling you what approach I usually use and what I'm using in this case so I'll just have this email type and then also send me the user ID as well without this I won't be able to do much and I'll just go ahead and type any here so that it doesn't bother me much and there we go so this is my basic it's all right email to send where should I send this email email type that is it a verify email forgot password token email or something else like that and the user ID because obviously I need to grab some information from that user so I'll actually use this one as well again it's not super required but I'll actually use it to get some encrypted token all right first and foremost let's go ahead and have the simple try catch the catch part is always the easy so I always take down this one super easy just cast this as any I don't know what the error type is and then simply go ahead and say Throw new and we'll be saying error dot error message not much worried not much bothered about it the first step is now if you remember from our excali draw if we have this yeah here we have if you remember I told you that we need this uh hashed value now this hashed value can be generated by a variety of means and variety of encryption rounds as well decrypt.js helps us to do all of this but right now we don't have this so how we can actually go ahead and get the value so it's super simple we are using the user ID So based on the user ID we have to provide some string that can be encrypted around so obviously there is a requirement for this you can go ahead and give him any gibberish which doesn't really make sense but you can you can there is nothing which is stopping you so all you have to do is simply ask vcrypt.js that hey bcrypt JS I need a hash value yep that's it and in the hash file you have to provide that hey what should I use to do the hash value like what am I encrypting what is the string that I'm encrypting you can give any string because it doesn't have a meaning it's just in the database we want to match it but in this case I want to actually provide the user ID and then you have to provide what number of rounds that you want to go so I will just go ahead and go with the 10 rounds and that's it that is all I'm doing now I don't have a guarantee that this user ID is going to be string or not because there is a chance that user might throw up directly me mongodb bson id almost like Json but bson so I'll just go ahead and just use a simple two string method on top of it so that I'm 100 sure of it now let's go ahead obviously this will take some time because we are using 10 rounds of encryption so let's await this and call this one as const hashed token all right so the token generation part was super easy there is nothing I'll just write the comment here as well that will be create a hashed token all right so this part was super easy now the next part is actually tricky now I want to update the user I want to find a user and in case you forgot that let me go ahead and open the model for you we have this uh thing forgot password token verify token and all these so I want to add these things into the token all right so how am I going to do this again this is super super simple there is nothing to be worried but there is something known as email type and based on this I want to update so first let's update with regardless of what the email type is so I'm going to go ahead and await this obviously a database operation database is another card then so I'll go ahead and say user and then user can actually run a find by ID and update for this I have to provide the ID so I do have the user IDs so super helpful here as well and then I can put up a comma and then I can just use the verify token so what I'll do is the next thing is actually suggestion is really nice here okay uh so what I can do is let me just go ahead and hit and enter here this is fine so I am first of all having this reset password token no I'm not as I don't want this I want the verify token to be updated first so I'll just go ahead and update the values so this is my verify token and obviously if the time is for that expiry time should be for the verify token time as well so I have this so the verified token that we have is getting this hash token that's exactly what I want first make sure you understand this part find by ID looks for an ID and update the values and user ID is the ID which you will be looking for hunting the record in the database and then only these fields will be updated not all the fields so verify token will get this new hash token verify token expiry will get the date dot now and then these values if you don't understand this that's okay it's nothing much more we are giving it 36 so it's in milliseconds or you know 36 hours and all of that so in case you want that you can just do it uh like how many hours 24 hours into converted into minutes and hours and all of that I'll not go into that much of detail in depth that's very basic now you can actually go ahead and say new equals to true and all of this we don't need this third parameter although that's nice but I'll talk more about that in some another day right now that's not important for us this will do the job for us and we are happy with this okay now this is all happening when I'm assuming that my tokens are getting updated for verify token but what if the email type is for another one which is forgot password token obviously this is the token part of it you need to grab the password from the request body and have to submit that as well that's that's a different case but actually I can just entirely cut this out and just write a simple if Case to understand that what type of email you are sending me up so if the email type and again I usually do that with the enum but in this case I'll just go ahead and do capitalize of that if the email type is verify then I'm going to do all of this now in case else if the email type is actually other one which is the reset password or I'll just use the reset reset then in this case I'm going to paste this again but I have to change the values in that case I'll just go ahead and use forgot password token forgot password token and of course the expiry will also be the forgot password token expiry again really simple code but again we have just modified this now this email is usable for both the context and we can just we are just generating the token based on that so that's super simple now next part is this is all the settings that we are doing already in the database so the value by the time this method is called the value should be there in the database now again there are lots of good approaches of handling this scenario maybe you don't want to send an email until unless all the values are set in the database there are a lot of use cases of that I'll not go into that one then the next step that we saw is use this node mailer and create a transport so node mailer dot create transport create transport there we go and we'll store that into a variable as well we'll call this one as transporter just like this and there we go we'll just end it like this there we go now what are all the options that are required here notice here it says Service Gmail we won't be using Gmail instead what we're going to do is go on to mail trap and we'll just copy all of this so all this transport in fact we could have copied this earlier and grab all of this so I'll just go ahead and paste it like this notice here all of the password and everything are there these are random password doesn't really bother much but similarly you can have these host and everything for other domains as well like for Gmail there's different port number obviously the author and password I don't want to display my password here again you can put this into your process.env file as well that's totally you usually we go ahead and put this so I'm going to go ahead and put up a to-do here and add these uh credentials to EnV files so that's a to-do for you you can actually go ahead and do this now this is ready now the next option that we saw in studies was creating a mail options you can create it on the go as well but I'll just go ahead and create these mail options just like this now in the mail options we have couple of things that we can get first is from email so whatever Reserve from email you can go ahead and do that I'll just go ahead and say hitesh at the rate gmail.com which is not my email come on there we go and I'll just put up a comma Now the next is two emails so two is email whom to send email we are already taking that as an input in the parameter so I'll just go with that and then after this we also need to have a subject now the subject can be just directly verify your email or you can actually go ahead and use that what kind of email is actually coming in so I'll just cut this out and I'll test it based on the email type so email type if email type is verify we'll say verify your email otherwise we'll say reset your password so again we can just use these smaller variables now how the email is being crafted actually I have written it already so that we can discuss this so there we go so as we saw uh directly we don't have hash token hush oh hashed token hashed we missed an edge almost all replace I'll update this hashed token small typo there we go and we need to use hashtoken of we have hash token here and I think here also and now it should be happy here as well okay so what we are doing is we are simply providing an email which is saying click on this domain to verify your email or to reset your password and notice here this is going to process.env.domain the domain name we have already set in environment variable so it will be directly like uh HTTP colon slash localhost colon 3000 in case you deploy it on the domain just environment variable needs to be updated and then verify email question mark token equals to Hash token so this will be our email that we'll be having all right that is all what we need the last thing is to Simply send email with these mail options so that's all again this takes some time so transporter will send an email with all the mail options and you can go ahead and store this mail response just like this and after this you can simply go ahead and return this if you wish totally up to you so we got this one let's see what all so this one is also saying hey cannot find a declaration file of this one we'll just probably install this types as well so that we get rid of these errors all right so quite a lot of detail talked about the mailer and how the mailer is going to work now once the mailer is done all we have to do is first create a page or we can first ah now that's a confusion should we take down first the apis or should we first take down the front-end page let's take the apis first I think that makes sense so in this inside the user we will be simply now again based on where you are landing the user your route should be according that but in this case now my bad I'll take that back so in this case the route doesn't really matter it can be any route we need to just create a front-end for verify email for that in the back end my API request could be anywhere because once I land there then I'll use a use effect hook to fire a request okay I'll do it that way so I'll just right click and create a new folder and this folder will be simply verify email verify email verify token yeah totally up to you I'll just right click create a new file and we'll just go ahead and say route dot TS now inside the route.ts we'll have just the request response we have to connect with database as well because we'll be updating some fields in the database as well and already things are there in my database so I need to extract the values by searching through the token all right so I'll first and foremost will be connecting to connect connect no option for Connect nope don't want that add the rate slash and this one is config dbconfig slash dbconfig all right so no matter what happens this needs to connect so I'll say that hey you connect so database is connected now we don't need any async or anything like that we'll be needing the next response and request all of that so we'll be saying next request and next response and we'll be needing user as well because I want to perform a search so I'll just go ahead and say hey give me the user from model user model all right that's great now once the database is connected then I can go ahead and Export My Method so I'll say export async uh no not like that a sync function come on if I can write that that would be great function and this will be a post method obviously because we are retrieving some data or not request that will be of type of next request and there we go all right first try catch we should have created a wrapper around it because this is too many try cash in the entire but again what can we do now after this I'll just scroll this a little there we go let's return uh next response with again dot dot Json come on response.json there we go error messages and there should be a status code as well yeah that is the one that I'm looking for and now next up is first and foremost let's grab some of the tokens so we'll be grabbing the token from request.body so const and request body and await request.body.json app that's request.json directly there we go okay now once this is there I know that there will be a token coming up for me so I'll just go ahead and extract this token now this is an approach where I'm using that there will be a front-end call who will be making a call to the API and will be able to handle this again this could have taken a different route if in the verify email I directly create a ID the square brackets an ID or maybe a token with the name of token so I can directly extract a colon token there so again both approaches are correct there is nothing wrong or right like that I would also like to see if this token is actually coming into this it helps me to debug that later on so there we go now I can see whether the token is coming it or not I have to find a user based on the token just like I can find a user based on email I can find it user based on the token as well so I'll say find one yeah find one that is fine and this one this time will be finding based on the token and whose time is greater than now so obviously if the token time has expired in the past whatever the time I have set there I don't want that so two condition needs to be true now I have to find the token as well and verify token expiry should be like that so verify token expiry comes from the model itself so if I go ahead verify token expiry this should be greater than what's the current time is so obviously in the future I can verify if it is already in the past I cannot sorry uh little cold here but again don't mind that sorry I cannot edit them out all right so now if it is there obviously that needs to be a weight and what else we will be storing that into a user all right all right good and nice now what else I can do if I don't find any user in that case I need to take care of that scenario so if there is no user then in that case return a next response Json error invalid token yeah that that's a good response or we can say invalid token or we can say user not found yeah that's the debate but we will not go in that debate and now here I would like to do a console log that whether I'm getting this user or not because it will help me to debug later on I can remove them but I'll just keep it here for you to Simply have this now there are a lot of ways how you can actually now update this since you have this user actually you can utilize this user but in case you want to make another database call you have verified it now now you can make another database call to update this you can use this Capital user but I will not do it because I already have a reference of this user which is a return from this user object so it also has some of the superpower so I can go ahead and simply say user dot is verified so I found the token I found the user everything is okay so I need to update it not only that I have to flush out my verify token as well as the time as well otherwise the time will always be there there's no point of keeping the unnecessary data and after that I'll just say a weight and then user.save this await is super important because it will take some time to update this and now we can actually be all happy now once this is done we can simply go ahead and say return next response and we can probably redirect no I don't want to redirect the redirection should be a job of front-end guys so I'll not do this next response will just send a Json response he can actually do things based on the response so message email verified status is success I'll actually use different messages and I'll say message email verified and success suggestions success true there we go forgot the comma there we go all right so in theory now it actually works everything works in theory all right so this should be all okay now we should be able to send and fire an email okay so how you are going to send an email now that's that's a big question so I think the email should be a part when somebody is actually signing up when somebody sign up we can actually give him a message or we can give him a button as well that hey get your email write your email and we can provide another page for it but I think in this case I'll just send him an email whenever he signs up so that makes sense otherwise we have to write another page button don't want to do that okay where it should be it should be a last job so user is saved in the database before sending a response we have saved the user here before sending the response let's send him an email send verification email so how do we do that now we can bring this send emails so I'll just wait for it and we'll say send email so we can bring this up hopefully the import is done send email helper Sim mailers okay that's good and there we go we can send an email so already this is the email we have extracted from the user body so this will be used as to whom I want to send email the email type is verify so it's it's really bad to see this string in the all caps here there should be an environment variable or an enumeration or a constant file for that but anyways I'll be just happy with this and what would be the user ID so now we have saved the user so this is now useful for us and we can extract and underscore ID from it and I think that is it now in theory at least it should be saving uh sending me an email all right how many errors ah nothing so far surprising let's see how we can actually register another user so I think this is it yeah let's go ahead and go and visit the profile if we still have a user yep nothing okay oh we have to get the user details and we'll log out so now there is nobody let's try to sign up another user how many users we have we have one we have two time for three so this will be three this will be 3 at gmail.com and this will be one two three four five six we can put some a validation for password as well but we will not do it right now let's try to sign up processing command do it the first time it's little bit slower ah there we go now in theory we should have something in the mail trap there we go three gmail.com all right so these are testing email now notice here when I click on this uh verify email I can actually right click and ah there should be a link oh there is a link but this link is blocked probably that's really bad we need to gra get this email directly so that somebody can copy paste in the browser as well uh we need to try it again in the mailer as well let's go in the mailer this might happen to you as well so nothing wrong okay so this is email this is somebody writing up here so we'll just enter here and we'll say r copy paste the link below in your browser I think that's good and we'll add a br and there we go so now I think it should be much better so that somebody at least can copy and paste the link uh this way okay uh I need to sign it up again I saw this this doesn't expose any email or something like that so we'll just do this now in the meantime where we are here we are we can actually delete this ah how do we delete it we can delete this confirm I want to delete it let's go back here and we have three time for four time for registration of the four okay we don't need this we can come back here sign up sign up the four four and we'll get 4 at the rate gmail.com and one two three four five six sign up and taking some time that's ok we got the processing here all right now let's see where we have this mail trap okay forgot here and this time hopefully we'll get better and Yep this is much better oh we got some issues here which was saying your browser dot undefined then verifies so probably because it was a local host that's why it's creating some issues because I think process.env oh my bad my bad my bad actually I know I know why it is giving us an issue because if I go ahead and check out my sample EnV the domain is all caps so it's not an issue it's actually an issue but anyways it's good to have the text link as well so it should be domain my bad I'm referencing the wrong variable there uh that's good all right save this and this should be all good this is how real world development works it breaks it fails uh let's let's go ahead and register another user now sign up it's time for five five and then we will have five at the rate gmail.com and one two three four five six sign up processing at least our emails are shooting that's we're happy but we have limited emails as well we cannot just go all crazy so five and five Where You Are okay there we go all right good and now we can click even on that I'll not click on this but I can actually copy paste this entire thing we have the token and everything nice but if I'll do this we don't have a page which goes on to slash verify email and again now you can see I can just provide a link of Slash verify email slash and whatever the long string and I can extract that that's easy but we don't have we don't have the front end part of it so it's time and by the way everything is also dumping down here as well so that's also nice that we have got all the five four all the emails email is going there username everything let's also verify in the database as well refresh where are you where is the refresh option there is somewhere refresh here it is refresh option so I want to check whether this tokens and everything is getting to my database also here we can see verify token and expire is also getting up here all happy all good that's good that's good okay now what we can do is next up is okay we need to create a front end for it so apis you can go minimize and I now need to create a a simple route on the front end or the pages which can actually do this so I'll just close everything that's already too confusing all right sign up verify this is inside the API I need to create a route for the pages which will be verify email and again it needs to be exactly same as what you are crafting your url so I am crafting this verify email so somebody will land up here I'll copy this go back and inside the app I'll create a new folder the name of the folder will be verify email that's exactly and of course I know what will I be creating the file name with this which will be page dot TSX and there we go okay now this is a little bit tricky that how we are going to create this verify page there is a little bit involvement here first and foremost this will be use client that I know for sure use client there we go we need couple of imports so axios obviously will be there xeos from xcos and we'll be needing the link to redirect the user as well probably not I will still get this so we'll have this link from next link and we'll be needing some use effect Hooks and stuff like that so let's import them so this will be coming up from react and we'll be needing use effect is the one that I am looking up for first use effect I'll anyway I'll be using reuse State as well so let's bring that and I think that's that's all majorly I'll be needing router will be needing it probably not anyways so let's go ahead and Define export default function verify email page we don't need any props in here we can just go ahead and just close it like that verify email page we don't have props otherwise it would have any props we can just extract it like this params IDs just like that basics okay we don't have it right now so we'll just go ahead and skip this and now first of all I will grab some tokens so I need to store that token somewhere so we need a state for that so we'll just say token set token and this will not be a string will not use the typescript functionality here we'll just keep it empty you state that's like and then based on user is verified or not I'll show him some messages as well so either I can just create a message like this or I can create a variables like booleans I can use them to verify not verified or I can use a message for the same so it's totally your choice I think I'm going to choose with the verify email so I'll just say verified set verified and by default it will be false also we can grab some errors as well maybe there are some errors on the page so we'll just grab them as well error set error I'll just use the booleans for that as well right now there is no error all right so these are my data now how can I verify this obviously in order to verify I'll need a method and I'll call this one as verify user verify user email that's fine it will obviously be a sync so there is no doubt about that we need to set up an request to an API so let's go ahead and do a try catch for that and in the catch part we'll just set the error with the error or true yeah true because we are using Boolean and then we can just do a console log as well so that we can at least see what's going on wrong so error we can actually go ahead and get error Dot response because it will be because this is going to get an extra so axios might throw up some depth so response.data all right for this we need to cast this error as any otherwise it will not work okay now next up is sending a request from xcos okay all right axios will send a post request did we made it post did we made it post let me verify that again yeah we made it post we made it post so axios.post and where do we want to send this request slash API slash users slash notice here the suggestions are absolutely horribly wrong we need to get the verify token or verify email what is happening to my memory and this is what we have what we are expecting we are expecting a token there and the request is obviously verify email should have seen that already verify emails what we are bringing along with us a token so let's go ahead and grab this token this token is given to us directly by this estate so that's nice let's go ahead and wait for this a wait for this one and that's it once everything is all done then we can go ahead and simply say set verified to be true otherwise it is already false so that is all my method is going to be doing all right so now the problem is when you will be running this thing and I'll write some of the controversial code here okay so how you'll be or when you'll be running this obviously we'll be using use effect for this and for this we are dependent on nothing so we want to as soon as somebody lands on this we will be running this but I'll just do a small check whether there is a token or not and all of that so if uh I'll just check if the token dot length because it's a string so I can access its length is greater than 0 then go ahead and run this verify user I actually don't like this way because it's less readable I prefer this whenever students actually watch this they find it more easy readable so I'll go with that okay there is another use effect that I am going to run again you can write this yeah that's Advantage you can go a little bit sloppy with the next JS it actually do all the optimization do duping a lot of things of the request I don't have to worry too much okay so this is what we'll be doing another thing which I want to do is going to be dependent on the token so any change in the token will actually no I'm actually bad any change in the token should actually run this one okay this one we'll talk about that in a second I'll just go ahead and remove this so let me tell you what is happening here this is the dependency array of use effect so use effect is a hook which automatically runs it runs first time when the page loads there are a couple of other ways but will not go into that much it actually automatically runs as soon as somebody comes on the page but if somebody comes on the page and there is any manipulation in the token then also it will run now right now nobody is filling up my token notice here there is no code here which is actually filling up my token the token is empty will always remain empty so I need to grab the information from the URL and update my token as soon as my token is Disturbed that's when this dependency array is going to say hey something is Disturbed which is mentioned in the dependency array and I'll run this piece of code that's the whole flow now I'll come back here I need to actually grab as soon as somebody lands on my page I want to extract the URL so I'm going to go ahead and say I'll just grab URL token and this URL token we saw this already window.location and then again window dot location dot this will be on based on search once somebody is searching on that I'll just go ahead and split it nice and easy based on equals to and then the left portion will be all zeroth value of the array right portion is my token so I'll be able to extract that not only that I have to set this into the token so set token will get this URL token now as soon as somebody lands on this he will be giving me the token I'll set this token into this this will create a chain of events the token will be updated here this will notify that hey one of your dependencies got updated so run this method so this is obviously going to run this method and that's it so I'll just shrink this I'll shrink this and I'll shrink this the only problem is right now we are not returning anything so there is no page so return and there we go now what do we want to return okay we'll actually return and I have this already with me in my notes yeah I have actually saved this div class it brings everything to the center easy for me okay what do I want to have first of all most I want to have an H1 which will have a class name and we'll be going with the text dash for suggestions please yeah for excel for Excel this will say just the verify email verify email or verify your email now in the H2 I also want to display the token so that I can see whether the token is actually coming in or not so I'll just go ahead and grab an H2 now inside the H2 we'll start our JavaScript and based on whether we have token or not we'll do something if we have token we'll write something otherwise we'll write something that's something we'll write no token okay what do we want to do when oh my bad what do we want to do when the token is there we want to Simply display the token so what we're going to do is instead of this let's use back text and let's go ahead and dump the token directly and token all right now also let's stylize it a little bit it's class name this one is going to be a little bit of padding padding two uh BG Dash value is orange I like that color orange 500 and the text is going to be black okay that's good now based on whether the user is verified or not we want to show him some text as well so what we're going to do is let's inject the JavaScript directly and we can just go ahead and say verified if he is verified then obviously I want to display this so what do we want to display in that case we'll just go ahead and have a div and in the div we'll just say nice and easy email verified and you can log in I like that I like that and all we need to do is close this div all right that is already good I love these suggestions so in this case if the user is verified then we'll optionally display him that email verified now you can go ahead and proceed to the login page so slash login is there text blue I think that's that's good enough I think what can give us an issue is this a tag because I think this is a wrong usage of a tag this will definitely crash our application so we'll just remove this a tag usage of a tag and the link tag is actually very very dangerous so I'll just go ahead and just clean it up like this that is all good now we can similarly make a copy of this and now we can actually go ahead and paste on the error we can display this so we'll just display that there was an error and then we can just ask him to do nothing we don't want to show him anything the text is to Excel and the color will be BG Dash red 500 and yeah the text is default going to be white but that is ok I'll I'll convert that to Black okay so I think that is it now we can actually verify and go on to this page if it works in theory at least so now can I go to the verify page oh by the way by the way one thing I forgot almost I I think we need to actually do something more verify email and if I go ahead and look onto this notice here I go and go back so notice it says I cannot read the property of undefined so if token length is 0 we shouldn't be running this so obviously we need to verify there are some of the steps undefined reading length so let's go back so what we are doing is the token is right now empty string so that is creating some of the problems and issues on this page all right so let us take care of this you state is empty and at the token length here we have the token length is less greater than 0 then only run this okay this should be okay verify user email and what in the case we are not able to grab this token all right so in that case right now this is setting it to undefined that is the problem so let's use an or statement to set it as back to the empty string come on alright so this should be much better approach okay there we go now we have fixed this small bug happens so right now there is no token ah but there is a problem we should actually fix that up into the middleware also because remember you always and always will forget about the middleware that hey where the things are actually matching so go back onto the code part open up your middleware and also add this URL here although we are not matching it up with anything but I think I'll add this one verify email now as of now this is okay I'll just save this but later on maybe I want to add this to public pay so that everybody can actually access this otherwise if I add this here it will not be verifiable I'm not tracking this if you don't add it here that's not being tracked so I want to call this as public page so even if you don't have token you can actually go ahead and access this so I'll just add that hey path dot verify email that is also allowed to be visited without the token so so if the path is there so this is the public path let me just check this again public path and tokens so redirect here if there is not public path and the token is not there if the public path is not there in the token so I think this is good all right I am re-evaluating the things so let's go back can I still access this yes I can still access this okay now it's time that we verify the email our verification should happen now I can just go ahead and click on this in theory and it should verify this and we are not actually bringing the tokens so sometimes what happens is when you click on this in the URL and stuff your question mark token all these things are not being traversed via the browser that is why this issue actually happens that's why a lot of companies give you this or you can actually provide a better URL notice here there is a dollar and all of that so that sometimes gets into spam so you can go ahead and use this as link I can go ahead and use this so I'm not able to grab the token so why is it happening okay so I'm going on to the verify verify email uh my bad so I'm just saying verify email question mark token uh now we got the token this is a common issue that you are going to see that when you are actually doing the development in the next JS this is a common issue the development is so slow that sometimes it takes time so yeah this happens now let's see if we are able to verify the user ah let us refresh this and whether everything got clean got a cleanup or not let's see let's see come on give me that okay I can see that the 5 is verified is false uh is verified is still false for the five and we are actually verifying which email let's just check okay so probably there is some issue in the mail trap we are verifying the five so five I think the rest of the things are going great let's see is verified false okay so we got the password is verified false the token verify token everything got here nicely let's see that if we grab the token what we are doing in our apis so this is the job of our API to actually say user dot is verified and let's grab it from the model and is verified I'll just copy it probably I'm making a mistake here I'll just open this up verify routes and this should be oh my bad there is a typo here it's is verified ah so bad anyways anyways no problem no problem we can just create a fresh user and try this again one more time this is how the debugging works so it's everywhere is verified oh goodness and the token names are token names are good should have paid more attention but anyways these are small bugs this is how you fix them let's try with a new user this time I'll open this up here and let's try we're here and we'll try with the sign up let's try it's time for six 6 and this one will be 6 at the rate gmail.com password will be one two three four five six sign up the user processing slow but only in the dev in the production it goes like ridiculously fast The Edge functions are always up almost always up and there we go we got the six and again this is also painfully slow I'll just copy this this time whether this extra dot is there horrible the dots should not be there because this actually creates a problem so we should actually use better approach of generating the tokens I'll just have this one this dot definitely is going to create issues and again this again why is it having the issues probably with the dot now we have this this dot is definitely creating the issues so we can notice there is little bit wrong in our approach that we are generating The Tokens The Token should be just a mix and match of letters and numbers uppercase lower case that's fine but these special characters and these dots especially that is creating so much of the issue also in the development environment uh serving the page actually takes some time so you will notice that when it actually serves the page compiled successfully and all of that so this actually creates a problem so possible emitter memory Leak Detection will actually take care of that but anyways now we have this is verified false here so that is we are getting all of this now let's check whether we are actually having this properly there all right let's see so we have the user six there we go we can see that the is verified is true verified that is true in this case so we are actually able to grab it now this is really a very thorough example of understanding a whole lot of things that's happening it's really a decently complex project we have worked on a lot of things now I'll not actually do the spoon feeding to you yes that is one of the bad thing that a lot of people do on the online codings and tutorials and all of that now we have seen thoroughly that how you can actually shoot an email the verification of the email we have also seen how we can extract the data from the body as well there was a reason why I did it this way the reason is because I want to have you an assignment the assignment is really simple we have worked on our verify emails verify accounts as well now we also want to work with the forgot password the mechanism is simple that again we'll be using our mailer and mailer can shoot an email so you have to first create a page where you can simply say hey send me a a male for for getting the password so you have to create an API for that as well as soon as somebody sends their email and a submit button is being clicked now it makes an xcos request use your node mailer to send a token to him and also send this token into a database as well now when somebody visits this page as well now you can take that token in another API call and based on this you can actually give him a simple thing on the token on the URL you'll be grabbing the token and in the body just get here the password and the confirm password and submit Button as soon as you click on submit button he'll be sending you the token he'll be sending you the password and the confirm password based on that first verify whether the token is actually valid or not if the token is valid now grab the user again based on the token and update the password field for the password field you have to actually encrypt the things again so there's a lot of things you can learn and do the things and again I would highly highly recommend that once you do this do let me know on LinkedIn on Twitter or anywhere that I have completed the project this will be your Learning Journey just watching the tutorial is not going to be cut through it now you know everything the only thing that's lagging and missing in you is the confidence so if you face any trouble just reach me out on Discord Twitter I'll help you in understanding the code or seeing a code or something like that as I get time but again the goal is improve or implement the functionality of the forgot password it's super simple if you are not able to do it if enough of requests are coming in I'll do that no problem at all but again I take this as take this as a simple assignment I highly highly recommend that you should be actually doing this so this was all about an introduction of nexjs I think this was quite an in-depth introduction of next shares definitely in the future I'll be rolling out more of full-fledged more complex projects in next year's if you want that do let me know in the comment section I would really really love to have this one so that's it for this video let's go ahead and catch up in another such video it was great and fantastic for teaching all of you I enjoyed it thoroughly do let me know in the comment section if you are enjoying such videos I'll make them more interactive more like just like you're sitting next to me and learning everything I'll make them more engaging so that's it let's catch up in the next one hit that subscribe

Channel: Hitesh Choudhary

Views: 26,000

Keywords: Programming, javascript, reactjs, nextjs, vercel, mongodb, learn nextjs

Id: _BqkCRgCdng

Length: 56min 4sec (3364 seconds)

Published: Sat Jul 01 2023