Email Account Verification In Node JS & React JS | MERN Stack Project

what's up guys welcome to my channel today we're gonna implement how to verify user email after registration in previous video we have created this sign up and login form and handled authentication if you haven't watched that video i highly recommend you to watch so let's take a demo on what we're gonna be building in this video so let's add our first name last name and a valid email and let's add a password here okay then click on sign up button here we get a response of verification link sent to our email so let's check it's coming from a demo email which i have created earlier so let's click on this and this is our url so let's click on this to verify our email okay yes we have successfully verified our email let's check what if user added some random values to the url so let's add some random url and check oops we got 404 response let's go to the previous url here also we get 404 response let's take a look on our database we create new token with user id and send this with url when email verified we delete the token from database let's check user model here verified will be false by default after remain verification it will be true let's change this to false and check what happen if we try to log into our icon let's update it and check let's add email and password and click on sign up button we get another response saying email sent to our account let's check in our email okay we get another email here let's click on this email to verify our email again okay our email is verified let's login adds email and password click on sign in okay we have successfully login before we write code guys please subscribe to my channel and press the bell icon to get notified when new video uploaded so without wasting time let's get started [Music] before we start those who didn't watch the previous video i have included that video in icards go to that video description i have added source code link clone the git repository and install the dependencies for both client and server files after that let's open command from in server directory and install node made by package we use this likes to send email with node.js open vs code and create utils folder in that folder let's create send email.js file in this file let's import nodemiller package nodemailer is equal to required node mailer and we're going to export this function it's going to be async functions we're going to require some patterns here which are email subject and text let's add a try catch block yes let's create transport with note mail note dot crea transpose method it require first process dot env dot post and service will be process dot dmv dot service then port will be process dot env dot email board secure it's going to be a boolean so boolean and process dot env dot secure it is also a number so let's go right number and then we're gonna add what here user will be process dot env dot user first word pass next password our user to the user which we are sending so email then we're gonna add subject subject then text text okay let's console.log email sent successfully if an error record then we gonna console.log email not send okay console.log error [Music] let's add environment variables here here first we're gonna add base url which is our front-end url so the user can open the urls from email to redirected to the front end so it's going to be contract then we're gonna add host smtp.gmail.com here we are i'm using is gmail so gmail then we're going to add email port it's going to be 587 then secure will be true and user it's going to be your email address and pass password of your email address [Music] before we create token model let's open user model here let's add verified to be type boolean and default value will be false okay let's save this file let's create token.js file and here let's import mongoose module require mongoose then let's define schema language.schema then const token schema is equal to new schema user id will be type schema dot type start object id and required to be true ref will be user model and it should be unique okay let's add another here okay will be type string and required will be true okay created at type will be date and default okay it will be expired means the token will be deleted in 3600 i mean one hour okay let's remove this okay let's create export this model and token token schema let's save this file [Music] let's open user.js file [Music] here we're going to import our 2k model const okay equal to require and models token then we're gonna import send email from details and send email then we're gonna import crypto and const crypto is equal to require crypto it's a global module so we don't need to install here let's send an email after registration so the user will be right we're gonna save the user user will be okay let's save this user and then we're gonna send an email const token equal to edit new token require user id so user dot id then we're gonna record okay let's create crypto dot it's gonna create a random hex value okay okay let's save this token and we're gonna create an url accounts url and let's add our base url of front end vnv dot base url and users slash user id verify user token okay okay not token so let's send this email to the user event send email we're gonna send user dot email and subject will be verify email and text will be our url okay then we're gonna change this message and email sent to your account please verify okay let's save this file [Music] let's go to user.js file here we're gonna add gate route where we're gonna verify the token which we send to the user and update the to user to be verified in database so let's add trackage block here and then launched user weight user dot find one we're gonna verify whether user is available with this id is not okay if user has not received does not exist then we gonna return with status of 400 and send message invalid link okay then we're gonna check it's a valid token or not i'll wait to not find one with user id and token request dot parenthood token okay if token does not exist then we gonna return the status of 400 and send message be invalid link okay if both are valid then we're gonna update user dot file update one with the given id and verified will be true okay then we gonna delete this token okay let's send a response status with 200 message will be email verified successfully okay if an error record then we're gonna say internal server user okay let's save this guy [Music] let's go to gs file here we need to import there let's copy it from token users.js file okay and paste it here okay here after login then we're gonna create if user is not verified then we're gonna send an email to them like okay you cannot find one with the user id if bits already exist then we're gonna send them a message if not available then we're gonna create a token if it exists then we're gonna return a status of 400 and message will be this copy it from here proceed here okay let's create it okay it does not exist token will be wait let's copy it from here okay and paste it here okay everything's fine let's save this file [Music] in client application i have just added this images folder and one success image we're gonna show this image to user where image is verified so let's go to sign up page here let's remove this navigate and console.log okay here then we're gonna we don't need navigate and move this input here let's add const it says set message and your state will be empty string okay then we're gonna set image here set message sorry restart message and here let's copy this and paste it here we're gonna show this only message is available and message message success message okay let's add styles to this live let's open up styles module here i'm gonna add same styles so that side comma okay we need different diagram so let's have background color will be green okay three let's save this file [Music] in components folder let's create email verify folder and index.jsx file and style short module dot css in index.jsx let's import style start module dot css and then const email verify and we're gonna return first let's export this export default email verify and then let's import use state and use effect from react instead and use effect okay launched valued url and set valid url equal to use state false okay let's import fragment and from react sorry and react and let's remove this okay if it's a valid url then we're going to show something else if not then we're going to show him tag with 404 not from [Music] okay then let's add a tip with class name strength dot container and then here let's add image let's import image which i had earlier import success from images and success dot png okay let's use here and it is a success image okay class name will be style start success image and h1 type email verified successfully and let's add a link here we want to navigate this user to login so slash login here let's add a button login class name will be style start green vtn okay let's handle api here okay use effect and here then we're gonna add a function here facing function verify email url placing and then we're gonna try catch block if an error occur then we're gonna console.log error and set validate url to be false const url let's add http localhost 888 api users and we go we need parents here so let's import parents use parents from react. and quant parents use parents okay it will be parents dot id and adam start token okay quenched so we're gonna get a response here wait excuse me i have to import okay dot get url and then you're gonna set console.log data and set valid url to be true okay we have to call this function we have to call this function only one so array and parents let's say this file [Music] [Music] do do [Music] [Music] [Music] [Music] [Music] you

Channel: CyberWolves

Views: 51,723

Keywords: email account verification - node and express, user authentication rest api, email verification node js, email verification, mern stack project, mern stack tutorial, email verification react js, email verification nodemailer, email sender node js, send email node js express, gmail node js, account verification node js, verify user node js, mern stack, confirmation email with node js, confirm email with node js, node js, node, user verify node js, verify user email node js

Id: T6rElSLldyc

Length: 21min 42sec (1302 seconds)

Published: Sun Jan 02 2022