Sending Verification Email Using Nodemailer in React and Node.js Tutorial 🤯

hey what's up everyone so in this video I'll be showing you how you can send emails using node Mera in node.js and also I'll show you how you can get to send a verification email and get to verify a user email during the registration process so we will do two things first how to send emails second uh how we can get to a verify user emails okay so right here I'll go ahead and show you whatever we will be working on so I'll register for an account let's call this user charts let's enter an email and remember this email must be a valid email an email that I have access to for this to work out so I'll enter the email and a password Here and I'll go ahead and register so once I register we don't have much but whatever we have is the email that we registered with and also whether this email is verified or not so we are supposed to basically verify the email right here you can include a message like uh check the email for you to verify it or something like that so if we go to my email whichever we use to register unfortunately it's sending at the spam folder but it's okay you can tell the user to check the spam folder if they don't see the verification email at inbox so right here you can see we received an email I just uh I guess a few seconds ago like zero minutes ago okay and it says hello Charles uh verify your email by clicking this link so if I happen to click this link it will take me back to the website and you'll see that we have email successfully verified and it's redirecting and once it redirects we get back here but now this is verified okay so we will see how we will do this first we'll be able to send the email and also we will be able to verify the email so let me show you whatever have happened for you to get the general idea of what we will be doing so if I happen to check the database okay um if I happen to check the database Let me refresh here and go to chart up and users so you will see other database we have this property is verified so initially it was false okay but once we verified the email it became true and also here we have an email token initially it had a value but right now it's null after we like reset it so what has happened is that we compare this email token with Z token that is available at the link that we sent to the email so if I check this link right here if I click this link again you'll see that momentarily it has an email token and that email token has a value so before it redirects and I happen to paste this whatever I have copied we have this email token so basically we are comparing this email token ah with whatever we'll be having at the database at the moment and then once it Compares them and they see that the matches we set is valid Pro is verified property to true and also we clear the email token so that is what happens okay and uh now the tricky part is basically sending the email and that is what I will be showing you uh using node mailer cool in case you're new here my name is Charles and I create coding content here on YouTube I have cool projects you can check the e-commerce course using reactor node you can check the real-time chat app using react node and socket i o and actually this verification process is part of the chart application so if you need to learn how to create an auth system uh you can check these costs are chart up because I will not be showing you everything from scratch I'll just jump to where we have the node mirror and verifying the email but don't worry I'll provide the source code for uh all for login and registration but if you need to learn the basics you can check the video and also it is a part of a series and I'll leave the links to it at the description section below so I have a small request uh please help me grow this channel so if you really enjoy my content get to subscribe to my channel and I'm sure you can get to 20K subscribers uh very soon also if you need the source code for this entire video including sending email and verifying email you can check a link at the description section below the source code will be available on my patreon unfortunately it's not free and this is another best way that you can get to support my content So currently I have 17 patrons and you can also become one of them and I'm sure you can get a hundred okay uh it's just three dollars per month and this is where I'll be including all my source code I'll leave a link at the description section below okay so the first thing that you need to do is to clone this repo I have already created all the system where you can register user and you can login user and again if you need to run everything from scratch you can check the chat up application these are part is part of that application or course okay I'll leave a link to it at the description section below so go ahead and uh copy the link here and then you can clone it okay I'm assuming you know all these I'm not expecting you to be a beginner or anything okay for watching this video so once you clone the repo you can open that with vs code and the first thing that you will need to do is to set up your address URI and your JWT secret key for the application to work so here we have an example dot EnV but you need to create a new one right here dot e and V then add address URI and the GWT secret key so once you do that you can open the terminal and go to client so you can see the client and then you will install the dependencies so you learn npm I so this will install the dependencies for client you'll hit enter I have already done so so I don't need to do it again and then after that you learn npm run Dev to start the client okay so npm run Dev okay and then for the server you can add a new terminal here you will need to again install dependencies for the server so you'll need to CD into server and then you will run npm I to install the dependencies I have already done so so I'll not do it and then after you install the dependencies you will run another month to start the server so there the server is going it's being fired up and for client I'm sure it's already there so let's wait for the server it's already there so I'll click on this link Ctrl click open now these on the browser so here we are awesome okay so it has already picked up a user from the local storage and logged Us in uh let's actually get to log out and we register a new user so if I register a new user I'll use Adobe email let's say child to see what we have currently just to see what we have so if I happen to register the user uh you're still registered thing verified but don't worry about this it's hard coded and I'm actually like negating the value so don't worry about that it's not verified and then if we go to the database now we should have two users so if I refresh here I'm using the same rdb URL URI so it's registering at the same price so this is the first user whom we have is verified and we have is verified property and email token so we have these two properties but for this new user you'll see that we don't have those two properties so we should be able to add them okay so that is the first thing that we are going to do so we need to go to the server and we will modify our model user model so right here after the password we can add those to properties the first one is verified property and I'll set this one to be a type of Boolean so type here will be Boolean then we'll also have a default value so default will be false okay and then the other property is the email token I'll set this to be of type string so I can just copy this one yeah there we go and I'll save and now during the registration process we should make sure that we are including an email token since we haven't added a default okay so go to uh we have routes here and also we have controllers so go to controllers and we have user controller and you'll see here we have this function for register user so right here when creating a user a user document we should make sure that we also have an email token okay so right here we will have an email token this should be a random string so to generate this string we can use the crypto module that is available by default in node.js so right here I'll bring in const crypto and I'll set this to be equal to require crypto okay and now we can make use of this crypto to generate a token here so this is how we will do it we will say crypto then we'll say dot we have a method called random bytes So Random bytes here then we want it to have 64 characters and we'll change this into a string so we'll say dot to string by default I think it has it is of type buffer something like that and right here I'll change it to string and write this string be a hexadecimal so let me save that and this is the line that I have added okay so crypto dot random bytes 64 and then dot to string so once we do this whenever we register our user we will have an email token being added to our database so now uh whatever will happen is when we click the link on the email that we sent to email or we will be passing this token and then we'll be comparing this token uh with whatever we have in the database okay but for us to be able to make the request from the client using that link to the database so that we compare them we need to create a new route okay so right here we have this this is the controller page or controller file so we need to add another controller we can do it at the bottom here so let's add it here so I don't want to type everything out it will just take a lot of time so I'll just paste some code here and then I'll explain it to you okay so here I have this code this function we are calling it verify email so this function will receive an email token from the client so whenever we visit the link uh we will be sending an email token from the client to this particular function here through a route which will we are going to create a letter in a while so once we check if we have an email token uh if we have the token we will proceed if we don't have the token we'll say that uh email token not found we return an error so errors we use that token to find a user from the DB so we are using find one method and if we get the user we will go ahead and uh change the token and set it to null and then we'll also change the is verified property which we included at the user model we from first to True okay and then after that we go ahead and save that user and we generate a JWT token right here so this is the this is just for basic of and at the top here we generate it like these using JWT so you can check that out at the very top of the file and once we do that we send the details this details now to the user on the front end so that we change the value of is verified to true and yeah that is basically it for these is verified property and then we'll be able to use it to tell the client whether the email is verified or not and you can restrict other parts of the application depending on whether is verified property is true or false okay and the next thing that we do here is just checking the error and so on so you can copy these function the way it is and try to make sense out of it and then we need to pass it right here to export it so let's export uh the verify email function here and we need to create a route for it on our routes here so at user routes let's go ahead and add a new one so these will be a post request so we'll be performing a post request so that we send that the we send the token through the body of the request so yeah you can say verify email yeah there we go and here we will have stroke verify hyphen email so this is the route that will be accessing from the front end so let's first complete the front end before we get to send emails using node mirror so um I'll go to client and SRC so at the pages we will add a new page that we will visit whenever we click uh the link okay from from the email so right here let's add a new file and I'll call this one verify email verify email r dot jsx so again I don't want to type everything out I'll just copy the component then we'll go through it line by line okay so I have pasted this component and let's see what we have okay so first of all we are creating a component called a verify email and we are exporting it down here and then we are getting a user from odd context and also we are getting these property called update user from all context so this update user is not yet created so we should go ahead and create it okay these update user but arrest first complete the process here and then we will create it okay I'll show you why we need to create that then we have his loading property we have the error property for setting the error during the HTTP request we will use the we will perform the HTTP request using the use effect here okay then right here I'm using the use params uh Hook from react rotor Dome and this will give us the email token parameter from the URL uh from the browser URL right here so this is how we are getting it so we are saying const email token will be equal to such params.get email token and this search params is from the use params a hook right here okay so we get the email token from the URL and we use this email token perform the HTTP request in this use effect so for this use effect I have the email token and the user is the dependencies and let's see the contents of the in of the use effect here okay so here is our use effect so first of all I'm checking the user property that is verified property right here so if these user is already verified will not uh proceed with the request we'll just redirect the user okay so we'll just go ahead and redirect the user to the home page so how are we redirecting the user we are momentarily uh during the process by using set timeout and we are using this navigate from react router Dom again so we have this user navigate Hook from react router Dom we are setting it right here and we are momentarily delaying the process so during that time where we have a delay we show a message of we are redirecting the user and the email is successfully verified okay else if the email is not verified that is when we hit the end point that we just created on our back end okay so right here if we have the email token we make sure that we have the token we go ahead and perform a post request uh we use this set is loading to just set the loading process and we set it to force down here but this is the main part performing the HTTP request so we are making sure that we are hitting the URL we have the base URL here and the base URL and also we have this we are using this post request which is a function a utility function we created during the chat application course you can check it out but basically this post request is a fetch request performing the post request so let's see this post request is at the utils folder then you have this service and for the service you'll see that we have this post request it's receiving the URL and the body of the request and you are basically performing the request and setting the method as post and at the end of the day it will return either data or it will return an error so you can check it out this is how we are checking if we have an error or not and uh yeah completing the process and then we have the base URL here as our backend URL okay which is request for example stroke API press the base URL okay so if you come back here now you know what post request does it's basically a fetch request with the method of post and we need to pass two things the first one is the URL and we have the base URL stroke users stroke verify email it's hitting that end point and then now right here we are passing the body of the request to be an object and basically we have that email token and we make sure that it's in a Json string so use Json dot string file so if the user is not verified we are performing these uh requests and then down here we are calling this update user and basically initially the user will not be verified so we need to update the state and that is why I'm calling these update user and we are adding these response the response will contain the data from our our backend so that response will contain the ID the name the email the token and the is verified property which is updated okay so let me show you how we can create these update function here at our our context so I'll go to or to context here then all context so yeah I know maybe this file is overwhelming but I have the course here on YouTube so check the chat up because the first thing that we do is the registration process so we cover all this so right here this is where we can create that update user function and then we will update the user it is cool to create that function so that we optimize the function using the use callback okay so this is basically it so we have const we create the function update user and then we set it to be equal to use callback hook this is just to optimize everything so use callback and remember here we will have an R function and then we'll also have a dependency array so whatever we do in this function is that we will receive the response and remember this response is actually our user and then in here we do two things we update the local storage and also we update the state so for updating the local storage I can just come down here and copy one of these during the registration process we set the record storage as these so I copy this and I paste it right here so we set local storage to user and we store the string file here as a response so we can change this to response so that they match there we go and then right here we are supposed to also update the state we have the state for the user right here so I'll just call set user so right here we can just say set user I invoke this and I pass the response okay cool so I'll go ahead and save that now uh once we create this function we should make it a accessible to the rest of the application by passing it down here as a value okay so at the off context provider here we should pass that function here update user okay now once we pass it there we are able now to access it right here is through the use context hook then or the context we get our update user function and that is what we call down here once we perform the request get back a user who is verified and we update the state and the local storage that is what is happening so you can copy these use effects so let me show you yeah you can copy it the way it is that is the use effect then this is the card at the top of it now also we have the UI part of it where we have the return statement it doesn't need much explaining we just have uh the UI and we are using material UI so right here we have a lot and we also have an error in case of an error so we are basically checking if the user is verified we return email successfully verified and we redirect else we show the error right here so again you can just copy these the way it is okay and also we have the isroading property here in case it's loading and we show the circular progress okay now what are we missing from these we need to install material UI for these ones to work out okay you can see we are getting it from Material UI so to correctly install this we can go to the browser let us search for material UI material UI then let's click on material UI here and copy this link here okay these will install everything correctly so I'll copy this one and then I'll go to my chord open the terminal then you can create a new terminal since we have the other terminals occupied for running the application and make sure you CD into client CD client hit enter Then install material UI here okay so you can see it's installing material UI image emotions react and so on the style whatever hit enter and that will get material I properly installed okay cool now we need to create a route for these verify email okay so to create this route we can go to I think app.jsx and we need to create a route for it right here so right here before login I actually I can just duplicate the login and whatever we will do here we'll change this to verify email so we'll say verify hyphen email and then for the elements we don't need to check whether we have a user or not so I can just remove everything there and I will return the verify email component so verify email components so it should be imported here I don't know if we can get the suggestion for that uh it's not working out okay there we go I click on it I have used controlled space control space to get this suggestion and I click on it to Auto Import there cool now we have about to to load that particular uh component so whenever we get to this component it will try to get an email token from the uh from the URL so let me show you so right here let's console.log of email token and uh let's actually log the email token email token so I save okay so let's wait for this to complete installing and then we can test everything out okay so again if you need the source code for the complete thing get it on patreon it's the best way that you can also support my content okay also subscribe to the channel if you get to find my content useful so once uh it is the installs material UI and so on uh you can visit the application also make sure that client and server are running so mine took some time to start I don't know why so if you guys also have uh some delay try to stop the client and start it and uh give it some time I'm sure it will so let's see what we have here now so if we happen to visit the route where we are verifying the email we should be able to see whatever we are logging to the console that is the email token so we'll say this is verify email this is the route verify stroke verify hyphen email then we'll have we can now set the parameter or the query parameter for the token by saying question mark email token is equals then let's set a random string okay so right here I can say whatever then when I hit enter you'll see that we will get to verify email um token right here route but also we are able to log these these token here this one this part to the console you can say you can see email token is this part here but now this token is not valid therefore we get back an error email verification field invarid token so whatever is happening is that this token will be submitted to the back end okay so we check if we have a token here and we take that token we send it to the body then at the user controller we will get that token from the body so here we get constructed from the body then ah if we don't have a token we return this errors we try to get a user using that token so if we don't get a user right here we return this error right here okay 404 uh email verification field invalid token and this is what we are seeing on the screen so the point is we are able to pass that email token from the client to the backend and be able to try and verify that email using the token so that is the point of this and we can actually get to test it out by registering a user get a token from the database and we try to pass that token manually to the link and we see if it verifies the user after that we get to see how we can send an email so first of all let's fix our UI so what where we have our Pages you can go to chart yeah then remove this exclamation mark this is whatever that is causing a weird Behavior remove that exclamation mark that is negating user dot is verified so I'll save so I'll go to the DB and delete this user here because I want to use the same same email so I'll delete the this user and uh let's register that user again so I'll log out register so I'll say channels then I'll say email is a valid email so ciao Charles at gmail.com and then we pass the password Here it should be a strong password so if yours is not working make sure it's a strong password it has a capturator it has a small letter it has a special case character and it has I think more than at least eight characters wrong okay else it will draw an error I have like a check here so make sure it has all those properties so I hit enter and then it will login and right now you can see that uh here the email is not verified okay now if I check the database I should have a token at the database okay so if I happen to refresh these so I click refresh it's retrieving the lists uh chart up here users so if you happen to check these you'll see that we have now this email token and is verified is false so I want us to verify it manually so that you see uh we make sure it's working before we get to send an email so right here I'll copy this so I need to copy everything so you'll notice that this is not the entire thing so just click on edit and click now on email token here and then I'll highlight everything and copy okay and then if I come to now my browser here I'll access now the route using a valid token okay so I'll say verify token and uh this is not valid so it will draw an error but let's change now this one to whatever we have copied now this is the valid token so now this token will be passed to the back end if I hit enter let's see and if it works our fingers crossed it will so email successfully verified redirecting or something and there we go now email is verified and you can see we get the email token here and if I come to the DB and we get to refresh now you will see that now we will no longer have an email token but the user will be verified so there we go verified and null so it's working when we do this manually now we want to automate this process by sending an email using node mailer so this is now the second part of this tutorial and let's cover it right now so nerd Mela is what we will be using to send the emails and it is so easy to use that a five-year-old can be able to use it anyway we basically need to create one object and that object we will use it to send the email and that object is called The Transporter I'm not sure if it's listed here but yeah we need to create let's go to usage here this is the node mirror Docs so basically we will need to install node mirrors actually do that we copy this on clipboard and we install that at our server so let's add a new terminal for installing backend or server dependencies right here with CD to server and we just install node mailer okay so whatever we will be doing again is to create these transporter object so once we create it we'll be able to use it to send an email so we'll just say transporter send mail and uh yeah that is basically it so easy now you need to know something uh we need to have an email that we will use to send the emails okay so we need to have our email that will send the verification email to the other person so the first option is using a custom email for example if you have a domain name you can set up an S MTP server or I think the IMAP server at your hosting server or whatever or email server whichever place that you set it and then you can use that to send emails we also have an option of using our Gmail but Gmail usually have a lot of issues so I don't recommend it uh probably it will give you a lot of issues that you will regret using it so just avoid using Gmail if you face issues and the easiest way that I found out to send emails if you don't have a custom domain name that you can use to set up an email using SMTP server and if you don't want to face a lot of issues or going through a long process to set up Gmail it's possible to use Gmail but it's a long process to set it up the right way okay if you set it up the wrong way the easy way it usually blocks emails and so on so the easiest I I found is using a outrook okay outrook emails you can use outrook it works very well and you'll not have a lot of issues with outro okay so what you need to do is to create an email at outrook if you don't have one and I already created mine okay once you create that and remember the password forgot email because you'll need to use it okay so once you create it now you can proceed with the video so the first thing that you need to do now is that we can go to the server here and we can add a new folder called ethereals okay uterus and right here we will create some functions that will help us to send the email the first function we will call it a create the mail transporter so we'll say create the mail you can call it anything it's just the transporter object that you are going to create um I'm so bad at sparing I hope everything is fine there dot Js okay and again I don't want to type it I will just paste it and explain what happens so here we will have this function uh make sure that node mirror is actually installed so that we bring it in right here we bring in node mirror then we create this function here create mail transporter and we export it at the bottom here we will use it on another file so the reason why it's good to do this to create a transporter in one place is because you can have different emails that you want to send in your application you cannot send an email to verify an email maybe once a user purchases something from your website or any other email that you might want to present okay now we use these not Mila dot create transport uh this is now a method that is available or Not Mirror then we are supposed to pass our several options so the first one is the service I'm using Hotmail and this is specific for Outlook okay so if you are using SMTP if you are using Gmail you might have a different setup and that is where now I direct you to the doc so if you go to docs and check anode mailer here and all these others you'll see that we have different ways of setting our uh our transport you can see here another mirror create transport and now here the host is a SMTP uh whatever Port secure and so on you'll need to dig into the docs but right now here uh this is the way that we can do it without Rook we set service to Hotmail then we set off for our Outlook email so you'll need to include your Outlook email here now mine is Charles outrook.com then you need to include the password so you can paste it here directly or you can include it into your environment variable so I'm using mine at environment variable and then now right here we are returning this transporter object from this create email now we will use this transporter function or create mail transporter in another file so let's create that file and we'll call it a send verification um email Dot jsx send verification email or you can say mail doesn't matter okay not j6 I mean react oh forgive me for that dot JS then RS make sure that you have saved this one now we are here so again I have pasted this code the first thing that we get is this create mail transporter from this file which we created here okay and then we now make use of this create mail transporter down here to create our transporter object and are now down here at our transporter object we call the send mail method and we pass our mail options now for the mail options we should say from where this mail is coming from and I say it's coming from chat app you can include your name or the name of the application here and then we include also the email right there and then we say whom are we sending this email to so we are sending this email to to user dot email the person who is trying to register for an account so right here we'll be passing the user and we'll be getting the email right here so we try to send that email to this user so if this user is varied and they have access to the email they will get a verification link and that link is now available in the board here so we have the subject here as verify your email and then we have the HTML here of our email body okay and here is why we will include the ring so if it the email is their email they'll get that link then they'll get to click on the link and once they click the link they will we will verify the token and if it's valid it will go through if not it will not so now here we pass this body I'm passing a P tag hello then I'm using this bucktix these These are bucktix so that I can include JavaScript in here so user.name hello user.name so here it will give the name of the user the one that used to register then verify your email by clicking this link then you can include some bit more details to this then right here I'm including an anchor tag so that it becomes a link and I can be able to click on it and for the arc attack this is what I am using href now this is a normal quote but right here I am including the client URL so you can paste it directly basically the client URL is this so the client URL is this one here so if you come and copy this there and you paste it right here directly it will work okay you press this part mine I have included it at the environment variable so that when you get to deploy the application you can also change it so this is the client URL in case you are wondering okay now we also make sure that we are hitting the end point so we include the verify email here and here we make sure that we are hitting the end point then we include our query param so question mark email token and we set it to be equal to now the token that is available in the DB so we get this from the user uh that we pass here is a DOT email token and so it will be like we will have the link and it will be saying verify your email okay so that is the mail options from to subject and HTML will pass there then we have a callback with error and info so you can if if an error car you can set the error here you can log it to the console or send it to client if it's successful you can uh also do something with it inform the client and so on but now this is what we will do we use this send verification mail while registering the user so you can go to controller then use a controller register user so right here after we save the user to the DB we can call now our function send um verification email so make sure that you are also exporting it okay down here so if I click that and I think it will be Auto imported at the top there we go now we call it just after saving the user here we call it and we are supposed to pass the user it's expecting that correct okay so we pass user and that's it so that should be able to send the email to us so let's test our application remember now this user will be having an email token it will be having the name and the email and those properties are the one that we will use here user dot email user.name and user dot mail token so I'll go to the app and uh I'll clear the DB again just to so that I had to use the same email I don't have so many emails so I'll delete these delete then back here are log out then I will refresh just create everything and register so name charts then email this will be available then password so if I happen to register you should get an email to verify the email so register okay we are logged in but the email is not verified let's check our database so if I refresh yeah so we have this now email and we have a token and is verified is false so let's check if we got the email so I go back here if you don't get at inbox check spam I will refresh here and look we have two here meaning that we received the mail so if I click this and here it is this is the latest you can see it's coming from chart up and I'm including the email here you can see it's coming from the outrook email and this is the content of the body hello Charles this is whatever you passed as user dot as user Dot name and then we have a link so the href is the one that is having the content so if I happen to visit this link you will see this is the complete link it's verified email successfully verified and it's redirecting verified it's working that is it it's easy as start so that is it for this video if you have enjoyed make sure you subscribe turn on post notification and also uh support me on patreon I'll be really happy for that so that is it I'll see you in the next one

Channel: Chaoo Charles

Views: 10,078

Keywords: chaoo charles, chaoocharles, chaoo, charles, nodemailer, nodejs, react

Id: HI_KKUvcwtk

Length: 49min 51sec (2991 seconds)

Published: Sat Feb 25 2023