Sending Email Verification Using Nodemailer in React and Node.js

One of the common tasks in web development is sending email verification to the users. This tutorial will guide you through the process of sending verification email using Nodemailer in React and Node.js.

Setting up Node.js Backend

First, let’s set up the Node.js backend for our application. We will install Nodemailer, which is a module for Node.js applications to send emails. Run the following command to install Nodemailer:

npm install nodemailer

Once Nodemailer is installed, we can set up our Node.js server to send verification emails. Here is an example of how to use Nodemailer to send an email:

   
const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
   service: 'gmail',
   auth: {
       user: 'your-email@gmail.com',
       pass: 'your-email-password'
   }
});

const mailOptions = {
   from: 'your-email@gmail.com',
   to: 'recipient-email@example.com',
   subject: 'Email Verification',
   text: 'Please click the following link to verify your email: http://example.com/verify'
};

transporter.sendMail(mailOptions, function(error, info){
   if (error) {
       console.log(error);
   } else {
       console.log('Email sent: ' + info.response);
   }
});
   
   

Creating React Frontend

Next, let’s create the React frontend for our application. We will use Axios to make a POST request to our backend server to send the verification email. First, install Axios by running the following command:

npm install axios

Then, we can create a component in our React application to handle the email verification process. Here is an example of how to use Axios to send a POST request to our Node.js server:

   
import axios from 'axios';

const sendVerificationEmail = async () => {
   try {
       const response = await axios.post('http://localhost:3001/send-verification-email', {
           email: 'recipient-email@example.com'
       });
       console.log(response.data);
   } catch (error) {
       console.error(error);
   }
};
   
   

Conclusion

Congratulations! You have successfully set up the process of sending verification email using Nodemailer in React and Node.js. By following this tutorial, you have learned how to use Nodemailer to send emails from a Node.js server and how to make a POST request to send the verification email from a React frontend. Now, you can implement email verification in your web applications to improve security and user experience.