Building a web app (Whinst) Part 13: Setting up user account verification

The final piece of authentication functionality I’ve added to the Whinst web app is user account verification. This is an essential feature as it’ll help identify and give access to only legit users. In this article, I’ll walk you through how I set up user account verification. Let’s dive in🏄🏾.

Setting up user verification 🔐

User accounts in the Whinst web app will be verified after a user clicks on a verification link sent to their email after they create an account. This whole process happens in about 3 parts which are;

1. User account and unique key creation: When are user creates a new account a unique random key (UUID) is created. This key is sent to the backend together with the other user credentials and is used to identify the user. To create this unique key I used a built-in JavaScript library called crypto which has a function called randomUUID which generates unique keys. The code below shows how you can use the library to generate and print a unique random key.

 const unique = crypto.randomUUID()
 console.log(unique)

2. Sending the verification link: When the backend receives the user credentials and a new user account is successfully created it sends a verification link to the email of the account that was just created. This verification link is a link to the page where users verify their accounts. The link consists of the unique code that was created to identify and verify the correct user. To send this link to a user’s email I used a library called Nodemailer. Nodemailer enables the easy sending of emails from Nodejs applications. The code below is taken from the Nodemailer website and shows how you can easily send emails.

 "use strict";
 const nodemailer = require("nodemailer");

 const transporter = nodemailer.createTransport({
   host: "smtp.forwardemail.net",
   port: 465,
   secure: true,
   auth: {
     user: "REPLACE-WITH-YOUR-ALIAS@YOURDOMAIN.COM",
     pass: "REPLACE-WITH-YOUR-GENERATED-PASSWORD",
   },
 });
 async function main() {
   // send mail with defined transport object
   const info = await transporter.sendMail({
     from: '"Fred Foo 👻" <foo@example.com>', // sender address
     to: "bar@example.com, baz@example.com", // list of receivers
     subject: "Hello ✔", // Subject line
     text: "Hello world?", // plain text body
     html: "<b>Hello world?</b>", // html body
   });

   console.log("Message sent: %s", info.messageId);
 }

 main().catch(console.error);

3. Receiving the verification link and verifying an account: After the user receives the email they can then click on the verification link which then takes them to the verification page on the Whinst web app. On this page, there is a verify button which when clicked approves the user account by using the unique key to identify which user account it is and once verified the code is deleted from the database. The screenshot below is of the verification link that is received in the verification email.

With authentication in the Whinst web app now 100% complete I’ve moved on to building the web app’s core functionalities which is something I’m hoping won’t be as challenging as setting up authentication. Thanks for reading and see you in the next one🙏.