Confirmation Email with Node.js

[@rsac43]

Fantastic tutorial. Didn't mention things like User signup/login which is great considering most people who are looking for user email auth have that already completed. Concise, clear and very useful. Thanks Ben!

[@rosalyna_24]

i really wish if the whole app had videos , thank you so much for your effort

[@dzengiztafa7964]

Was just going to implement this into my own project & i was looking for ways how to do it. Nice share! Cloning it now to see how it all fits together. Cheerz!

[@ozzyfromspace]

Awesome video! I would like to throw out an opinion if that's alright. If you're still a small platform, it's probably better to allow your user some time on the platform without confirming their account + maybe 1 sign in without confirming. This is because going to one's email account is an additional step, which creates friction, and if they don't necessarily know what you're about (you're a small platform, after all) then that might be enough to make them forget about. So for most of us, after they attempt to register an email, I would create an account for them in the db with a confirmation field showing the number of successful sign-in's prior to confirmation, as well as how much time has passed since they created their account. If this time passes, use client side JS to log them out, and server side to keep them logged out until they confirm. The nice thing about this approach is that the user can start using your product quicker, and hopefully *want* to keep using it. At that point, verifying their account doesn't seem as arduous. Also, I recommend setting permissions on the various (paid) services on your platform to push them in that direction. For example, you can't complete any purchases until your account is verified, or something like that. If you really wanna push people a little more vigorously, I'd suggest having a fixed bar at the top that "moderately" breaks the theme of your site (indirectly make them wanna get rid of the eye sore) and use that as a reminder to get confirm their account. You may choose to display this indefinitely, or perhaps only until some eventual timeout. If I join a platform and spend 30 minutes doing stuff on it, I'm more likely to confirm my account. Obviously, platforms like Instagram have the luxury of forcing you to confirm or else lose your account. That might be the way to go if you're a bigger platform. Oh, and I guess one bonus tip is that if the user doesn't confirm their email within some time of signing out or failing to sign back in (they've used up their unconfirmed sign-in's), then consider them disinterested, and send them an email notifying them that they have x time to confirm their account, or it will be deleted. Don't be pushy about it. Your platform isn't for everyone, and that's okay. Those that wanna vibe in your corner of the internet will stick with you. Hope my suggestions help someone. I'm a founder working on JobParty, which is essentially "Twitch for jobs". With JobParty, you can livestream your skills, get rated, and get matched with amazing, highly relevant, opportunities". I hope to share my experience building a shiny, useful thing for cool people that are tired of throwing resumes into the digital void. I've applied to 100's of companies online and can confirm that looking for a job is, in fact, a job. Now you can stream your skills and demonstrate your ability, and go straight to the interview stage. No more applications! You can check out my project at jobParty.co, or not. No pressure. That said, feedback would be awesome! The MVP launches in the about 50 days!

[@darkmift]

I'd love to see an updated version

[@kebman]

Awesome, yeah I was wondering a little about JWT, but was thinking UUID was simpler. But I've now changed my mind. Thank you!

[@stazrad]

Awesome vid! My only question is why put the confirmation endpoint outside of the graphql layer? Is there a benefit/is it hard to hit a graphql endpoint from an tag?

[@Rajkumar-op7fd]

I see you are storing data in database until user confirms the email address. Let's say I'm a malicious user and I just register thousands of emails without confirmation. In that case you are storing unnecessary data in your db. Is there any other best place to store data until email confirmation?

[@X-AAnishaDixit]

libraries like node-persist can be used.

[@peterlittle4937]

Hey Ben, wouldn't this cause an issue if you allow users to change their email? For example, if a user set their email and the confirmation is sent, but they then changed their email and then clicked the confirmation link from when they first set their email. This would set the confirmed property to true for whatever email address they changed it to without needing a confirmation. You could put the email in the jwt, and then check that it matches the users email on confimation, but this would expose the user's email in the url since jwts are readable. The only solution I can think of is to set a property on the user of when they last changed their email. So, if the time of email change is after the token iat (the time the token was issued at) then you would decline the confirmation.

[@inedumozey]

You may decide not to allow users change their email until they are verified. And if there's a situation where they must have to change email prior verification, then they have to register again. The draw back of this is your database will be having several unnecessary unverified users. You could again dynamically remove any unverified users after few weeks to months from the database

[@degraphe8824]

Thanks Mr. B.. this really helped. keep up the good work

[@dennistennis5622]

Nice feature Ben!

[@paulsotelo4010]

Thank you so much, that worked very well for me

[@juanchox0929]

Thanks for your help! Works excellent :D

[@mr.random8447]

So if we tie this to frontend, we would have to just send a GET request to that route? Bad idea to send client directly to backend endpoint?

[@JassarDev]

If you're not awaiting, then it's happening synchronously not ASYNCHronously... right?

[@sofienabidi6112]

Thank you for this tutorial, your both methods work perfectly. However only the asynchronous method (with try catch) work in production (tested in Vercel)

[@lokeshbajracharya5190]

Hello Ben, I just wanted to know what would happen if the token expires and there is no confirmation. By the time they register their account again, the account would already be registered from previous try. thanks

[@pedrovictor9088]

Yes, I was thinking the same...

[@Mark-nm9sm]

pretty good but i dont understand why it doesnt work for me. JWT signed tokens have dots seperating 3 sections of the token, when i click the link that i send with email , it tells me page doesnt exist, but when i remove the dots , it gets me to my localhost page

[@williamlawrence1044]

I have that same problem.

[@zeusbloo21]

thank you, the example is really good !

[@soussivic7437]

Hello, thanks for the effort man ,but im just begining and developping an app and i have a question. What is the resolver.js i dd understood. I have like my modals, my routes, my controllers and my reducers! tell where should i put the nodemailer setup to send the email ?

[@robinkartik6356]

Thank you so much for this tutorial

[@billpliske]

Yo, Ben! Attempting to add Nodemailer to my app for validating a registration. I wanted to make use of this app.get("/confirmation/:token ... code in my index,js. I'm close. The email gets sent out fine, but when I click on the URL link, I'm getting an error on the server. Never gets the chance to redirect to the login page. "Unhandled promise rejection (rejection id: 1): Error: Can't set headers after they are sent." I've Googled this, and it seems I've sent the headers twice. The beginnings of my app are somewhat based off your Slack Clone, so the client and server are very similar when it come to the register and login pieces. Any thoughts on where I should be looking?

[@bawad]

That means before res.redirect was called the response was sent back, this could be caused by middleware running before

[@billpliske]

Seems to be getting stuck on the db update. When I click on the confirm email, I successfully console log to "here1" ... but it never gets to "here2." app.get('/confirmation/:token', async (req, res) => { try { const { user: { id }, } = jwt.verify(req.params.token, EMAIL_SECRET); console.log('here1'); await models.User.update({ confirmed: true }, { where: { id } }); console.log('here2'); } catch (e) { res.send('error!'); } return res.redirect('localhost:3000/login'); }); Could the error be coming from my client?

[@bawad]

I would console.log the id maybe that's funky and messing up the db update. You could try running db update in isolation and see if that works

[@ComisarioLobo]

Hi Ben, what process do you recommend for recovering password? I'm thinking of sending a token that's saved in the database, send email with a link having the token in it. Validate it in the graphql backend boilerplate and check the token with the one in the database, if they match then I'll redirect the user to the front-end plus a variable in the URL. If this variable corresponds with a frontend variable then we can redirect it to a page that asks for a new password and a confirm password. If they match then update password in the database and redirect to the members area. What do you think of this approach?

[@bawad]

+Santiago Galindo that sounds good. My only question is why do you need to store it in he database? Can't you just verify the jwt token is valid?

[@ComisarioLobo]

I was planning on doing that as a way to validate the token the first time is used and once the password changes then I would delete the token from the database so if the user wants to use the same link again I can show a message saying that the token is not valid anymore. Or is there a way I can do that just with JWT?

[@bawad]

ok that makes sense. To prevent the user from clicking on the link multiple times you will want to store the token in the database. I don't think you can do that with just JWT.

[@ComisarioLobo]

I was wondering if is it possible to play with the expiration date of the token. For instance the link can be valid for 24 hours and when the user changes the password then update the expiration date to now so when the user tries to use the same token again it's gonna be expired and then I don't need to store it in the database. Do you know if this is possible?

[@bawad]

+Santiago Galindo you can't change the expiration date of a token once it's issued. You can only create a new token

[@stevereid636]

Thank you so much for this!

[@nicolocarloparazo6577]

Hi I am trying to learn this, so far I can create, modify users and delete them. I need to verify them. I have a client and a server side set up, all these has to be done on the server side correct? Do you also have a tutorial that will catch the error on the server side and send it to the client side? Thanks.

[@Romanticoneable]

Hi Ben, thank you for the video. I am testing it in my website. Everything works, I am sending the token on the email, I receive the email in the gmail account, when I click on the token link, it redirects me to the confirmation page, but user.confirmed is not being changed. I noticed you put the GET request for the '/confirmation/:emailtoken' in the index file. In my case I have all my routers in a separate folder. I am wondering how the web page(http:localhost:3000/confirmation/:emailtoken) calls/connects to the get request when I click on it. Because the connection is not happening in the backend, therefore, user.confirmed is not being updated

[@bawad]

app.get('/confirmation/:token', async (req, res) => { try { const { user: { id } } = jwt.verify(req.params.token, EMAIL_SECRET); await models.User.update({ confirmed: true }, { where: { id } }); } catch (e) { res.send('error'); } return res.redirect('localhost:3001/login'); });

[@mirzamohdjunaid7383]

Bro Best Best Best Video , for email verification

[@yashone7]

Can we use a similar strategy for Forgot password link?

[@seeking9145]

2:29 I got an error: Cannot fimd name 'DataTypes'. ts(2304)

[@bartekfigatowski7980]

I was looking for that👍👍👍

[@saadsohail5834]

you should implement for the new participants Thanks

[@Anonymous-zu7vv]

Thanks man!.. A big help

[@TelosMediaOrgOfficial]

Hi Ben. Thank you so much for your tutorials. Can you please show what can we do for auth and authorization in react native apps that also use graphql and express on the backend? Should we use firebase or better to stay away from it?

[@bawad]

+TelosMedia.Org sure. I think firebase is a good choice. You can do auth just like how you do it with react except you would store the tokens in asyncstorage instead of localstorage. I'll make a video on that

[@TelosMediaOrgOfficial]

Ben, I heavily used your tutorials :-) to set auth for my web app, thank you for that. So I used JWT + cookies. Now, I want to build react native version of the same web app, so I want to use the same backend as much as possible. Going with firebase means that I will need to change my web app. Is there any better solution in my case? Can I still use JWT + cookies in the mobile app?

[@bawad]

+TelosMedia.Org I'll make a video showing how you can get it to work with react native. I like doing it this way better over firebase too because you get to use GraphQL. Apps don't have cookies, but there may be some libraries that replicate the functionality of cookies. React Native has asyncstorage where you can store jwt tokens

[@jos3008]

is there no easy way for this? im beginner and this is very frustating to understand. Too many unfamiliar code :((

[@johnbench752]

Do you have an updated project? Packages are out of date and it won't npm install properly. Thank you for the video!

[@bawad]

The latest I have is kzbin.info/www/bejne/hYGWaoifpMajgpo but it's using Typescript and TypeGraphQL

[@johnbench752]

@@bawad Thanks!

[@AkashYadav-rj6fn]

How did you created email secret?

[@Highdad-yt]

Nice video. I ran it and there was a period in my hash. Is this ok for URLs or how do we prevent that?

[@bawad]

yeah that's fine for urls

[@madgepereira2891]

How to debug this code?

[@onesun3023]

I appreciate the work, but would be more clear if the Github code provided was self contained and not part of the big app that it is. Hard to know what to extract from these giant blocks.

[@bawad]

will do in the future

[@onesun3023]

It's probably okay for most people but it's pretty disorienting for someone like me starting out. I haven't seen a good series of bit sized chunks. I'm learning backend from many videos like yours and it's a lot of projects all woven in a different tangled web in mongodb and nodejs. I can't extrapolate what you do here to what I took from Traversy Media because the code doesn't match. Glad you guys are making them. Don't mean to do the gifthourse thing. Maybe I WILL make the bitesized chunk series when I get initiated.

[@hollywoodmedia2023]

thank you

[@seeking9145]

What is "jwt"?

[@miguelcarmona5273]

Nice video. So useful :)

[@guillermoprados7631]

man, thanks for sharing this :)

[@matarloum2894]

where did you generate EMAIL_SECRET ?

[@bawad]

I just typed random characters

[@matarloum2894]

Ben Awad like copying yours?

[@bawad]

Yeah you could copy mine

[@matarloum2894]

Thank you ;)

[@General_Aladeen]

Hi Ben, what will be the server path if im on Heroku my front end is react example this is the url/path that I've set in my server.js example.herokuapp.com/confirmation/${emailToken} and this url that I have redirect it with example.herokuapp.com but it doesnt redirect to the said path it just stays in the server path that I've set. This is working on my local machine the path is localhost:5000 on my server and localhost 3000 in my react app

[@bawad]

It will be the same thing you use on localhost, but you replace it with whatever url you want it to redirect to

[@General_Aladeen]

sadly it doesnt redirect even when I changed the url when I deployed in Heroku, it only works on my local machine

[@bawad]

So you don't get redirected at all or you are redirected to the wrong place?

[@General_Aladeen]

Hi Ben, yes, thanks for the reply. It does not get redirected however on my local machine it is working, while in Heroku does not, is there any route changes that I need to modify both in reactJS and nodejs that is deployed in heroku? it stays in this kind of path only example.herokuapp.com/confirmation/324234234234234234234234

[@bawad]

I'm guessing redirect is never called then. Try adding some console.logs and see if it does get called

[@khetsound]

why i can't run your project :(

[@bawad]

do you get an error?

[@khetsound]

@@bawad it's ok now, thank you for your video

[@TerenceLong-rt6wx]

I do neen some help with money ,to able to live life so peacefully and harmony in place

[@akashshrestha01]

great

[@1266Kyle]

Mega nocie

[@milanthakur4975]

❤

[@vaalarivan_p]

6:00

[@rohandevaki4349]

and please code if from beginning, it is very hard to understand likethis

[@rohandevaki4349]

are you even sending a mail ?, i am very confused because of this 10 minute mail..., can you please show us with real email id

[@dadaxonabdullaev7188]

Sur bedan

[@kiomy_music]

I love u