How to Set up Email Verification using Node.js and React.js?

Implement email verification for users to limit troll accounts.

If your Node application already implements a user authentication system involving emails and passwords, you might be wondering if there’s an easy way to reduce the number of troll users or fake accounts. One option to do so is to skip the hassle of verifying user signups and to implement social login options using npm packages like passport.js. The following playlist provides steps to implement Google OAuth, but the different passport strategies are easy to swap out!

A playlist by ‘The Net Ninja’ on youtube

However, if you’re looking to verify email addresses during the traditional signup process, implementing an email confirmation system is the way to go. This ensures only legitimate users gain access to your app while maintaining a professional and secure authentication process.

Why Use JSON Web Tokens (JWT) for Email Verification?

To implement an email confirmation system, it’s essential to understand how JSON Web Tokens (JWTs) are used in user authentication. At its core, a JWT is a secure and compact token that can be used to represent user data between two parties.

But why do we need tokens like JWTs in the first place? The answer lies in the nature of HTTP — it’s a stateless protocol. This means that each request sent to a server is treated as independent, with no memory of previous interactions. Tokens solve this problem by allowing servers to identify and authenticate users without maintaining state.

Generalised workflow to understand how email verification works

Here’s a quick primer on how JWTs work:

1. Token Generation: When a user logs in or signs up, the server generates a JWT that includes user-specific data (like their ID or email) and signs it with a secret key.
2. Token Usage: The token is sent to the client, where it’s stored (usually in localStorage or a cookie). For subsequent requests, the client includes the token, allowing the server to verify the user’s identity.
3. Stateless Authentication: The server doesn’t need to remember the user’s session; the token itself contains all necessary information.

The following article dives deeper into implementing JWTs in a node environment

JWT Authentication in Node.js: A Practical Guide

Steps to Implement Email Verification in a MERN Stack Application

Here’s a high-level overview of the process we’ll follow:

1. User Registration: Capture user details and save them in the database with an “unverified” status.
2. Generate a Verification Token: Create a unique token and store it securely.
3. Send a Verification Email: Dispatch the token to the user via email, embedded in a clickable link.
4. Verify the Token: Validate the token when the user clicks the link and update their status to “verified.”

Let’s dive into each step in detail.

Step 1: User Registration

When a new user signs up, we save their details in the database with an isVerified flag set to false. This ensures they cannot fully access the app until their email is confirmed.

P.S: Learn more about HTTP status codes and when to use them.

Step 2: Generate a Verification Token

A verification token is a unique, time-sensitive key associated with the user. To enhance security, we hash the token before storing it.

Step 3: Send the Verification Email

Using a library like NodeMailer simplifies email delivery. Here’s the utility function for sending emails:

Check out NodeMailer’s official documentation for more customization options.

Step 4: Verify the Token

When the user clicks the verification link, the server validates the token and updates their status to isVerified: true.

Frontend: Role in Email Verification

The React frontend guides the user through registration and token validation. Here’s how it helps:

1. Simplifying User Onboarding:

• The Sign-Up Form collects user details and displays feedback after registration.
• A “check your email” message reassures users about the next steps.

2. Handling the Verification Link:

• React captures the verification token from the URL when users click the email link.
• The app sends the token to the backend for validation and provides real-time feedback on success or failure.

Step 1: Create the Sign-Up Form

The form collects user details and communicates with the server. After successful registration, the user is directed to check their email.

Step 2: Handle the Verification Link

When the user clicks the email verification link, the frontend extracts the token from the URL and sends it to the backend for validation.

The next step would be to connect Pages with React Router based on your app’s existing router structure.

Not all apps require email verification to manage user authentication. If you’re curious about alternative methods and how these apps handle malicious actors, check out the articles below for a fresh perspective!

Passwordless email logins | Supabase Docs

Display Google One Tap | Authentication | Google for Developers