Introduction
Why this blog? A week ago, I was trying to implement a FORGOT PASSWORD feature in my e-commerce project, that will send an email to the user having the link to reset the password in the email body. After tons of google searches and youtube tutorials, I found the mighty EmailJS which makes sending emails in JavaScript a piece of cake.
The Mighty EmailJS
EmailJS helps to send emails using client-side technologies only. There is more than one way to implement it in your project:
- Using the REST API
- Using the SDK tool
In this blog, I'll be using the SDK tool. If you want to use the REST API, you can read about it here.
Below are 5 simple steps required to send a mail using EmailJS.
Step 1 - Creating EmailJS Account
Visit EmailJS SignUp Page and create an account using the email you want to use for sending mails.
Step 2 - Setting up Email Service
After successfully creating your account, Sign in and navigate to the dashboard. Here, you need to click on the Add New Service button and select the service that you'll be using to send emails.
Since I've got a Gmail account for sending emails, I'll be adding the Gmail Service.
After selecting the service, click on the Connect Account button to connect your Gmail account and click on the Create Service button.
Note: Keep a copy of the Service ID as it will be used in your project.
Step 3 - Creating Template for Email
Now, your Service is ready. It's time to create the Template for the email.
Select the Email Templates option from the sidebar and click on the Create New Template button.
Here you can use the Rich Editor to update the Subject, Content, Receiver's mail, Cc, and Bcc as per your need.
Note: Double Curly Braces {{variable_name}} represents any dynamic value you'd want to use in your mail. We can set these values in your project while sending requests from the backend.
Click on the Save button to save the template.
Go to the Settings Tab and keep a copy of the template-id as it will be used in the project.
Step 4 - Getting User ID
Select the Account option from the sidebar and keep a copy of the Public Key as it will be used in the project.
Step 5 - Integrating EmailJS with your Project
Installation
Install EmailJS SDK using npm by running the following command on your terminal
npm install emailjs-com --save
Usage
- Import emailjs from the package you just installed.
- Call the send method of emailjs in your handler function with your own Service, Template, and User Ids that you copied in the above steps.
- The template params here are the dynamic values that we used in our template with double curly braces {{variable_name}}.
- Since the send function returns a Promise, we can attach our success and failure callbacks in .then and .catch methods.
import emailjs from "emailjs-com";
export const resetPasswordHandler = function () {
try {
const templateParams = {
name: "Tony Stark",
email: "iamironman@gmail.com",
link: "https://www.yourproject.com/reset-password",
};
emailjs.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", templateParams, "YOUR_USER_ID")
.then((response) => {
console.log("SUCCESS!", response.status, response.text);
})
.catch((error) => {
console.log("FAILED...", error);
}
);
} catch (error) {
console.error(error)
}
};
Note: If your server blocks sending outside requests, add the following line in the file containing server-side routes of your project.
this.passthrough("https://api.emailjs.com/api/v1.0/email/send");
That's it!
You've just implemented a sending mail feature in your project.
Conclusion
Before I actually attempted to build an email-based password reset for my project, I thought it would be tougher to do. From everything I’d heard before, sending emails in a JavaScript application was painful. But EmailJS helped in making a major factor (the emailing bit) simple.
You can read more about EmailJS here. Do share if you find it useful.