Sending Emails From React With SMTP Express
Published: 2024-04-27 06:33:11

by [Makanju Oluwafemi Emmanuel](https://blog.openreplay.com/authors/makanju-oluwafemi-emmanuel)





<blockquote><em>
Having a personal portfolio or corporate website makes presenting who you are and what your company stands for easier. Still, it also means that you must deal with communication with your website users. A contact section is necessary to gather inquiries and forward them to your email address from your website. Additionally, you could wish to deliver specific data to a user upon completing a particular action, such as forgetting a password, or maybe a guest wants to book a session with you. This article will show you how to do this very simply.
</em></blockquote>





<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>






## Introduction


[SMTP Express](https://smtpexpress.com/) is a product that seamlessly aims to improve your emailing experience. It's a developer-first product that allows you to send [transactional email](https://postmarkapp.com/blog/what-is-transactional-email-and-how-is-it-used) from any platform without needing a backend. Additional features include the ability to [attach files](https://smtpexpress.com/docs/send-api/sending-attachments/) and send [calendar invites](https://smtpexpress.com/docs/send-api/calendar-invites/). Also, you can completely customize your email to match your vision. I assume you are eager to give it a try already, hehe!

## Setting up SMTP Express
Let's set up SMTP Express in your [React](https://react.dev/) app. Please go to the [documentation](https://react.dev/learn/start-a-new-react-project) to get started if you'd like to know how to install a brand-new [React](https://react.dev/) app. 

We need to install [axios](https://www.npmjs.com/package/axios). We'll need it for sending a post request in the form to the base [URL (Uniform Resource Locators)](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), `https://api.smtpexpress.com/send.`

Copy this code to install Axios.
```bash
npm install axios
```
We need to get two things from the product dashboard to configure the app to use this service.
- Project Id
- Project Secret

See [How to Create a Project](https://smtpexpress.com/docs/introduction/#creating-a-project) to get this data. The documentation also provides a detailed explanation of how to get your [project secret](https://smtpexpress.com/docs/introduction/#obtaining-a-project-secret). Your project ID will be given when you create a new project; you don't have to worry about that.

## Creating the React Form
We need a form with four fields: the sender's email address and name, the message's subject, and the message's body, in a standard email message format. The form then needs to be validated and styled.

Copy this code to create a form with validation logic.
```javascript
import axios from "axios";

const ContactPage = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  //use Axios to make a POST request;
  const api = axios.create({
    baseURL: "https://api.smtpexpress.com/",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <PROJECT-SECRET>",
    },
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const body = {
        subject: formData.subject,
        message: `<h1> ${formData.message} </h1>`,
        sender: {
          name: formData.name,
          email: "sm0pid-jqbeReRhLhpJDRhLjkFxMXGZt@projects.smtpexpress.com",
        },
        recipients: {
          name: "Oluwafemi Makanju",
          email: "makurseme@gmail.com",
        },
      };
      const response = await api.post("send", body);
      console.log(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return <div>{/* This part contains the form component code  */}</div>;
};

export default ContactPage;
```
This code has several attributes and functions employed to create a controlled form component. The `useState` hook is utilized to manage the form's state variables, enabling the component to track changes in input fields and update their values accordingly. The `handleChange` function handles input changes, ensuring that the `formData` state is updated with the new input values as users interact with the form. Meanwhile, the `handleSubmit` function is responsible for managing form submission, although it's currently left empty in this example. 

The `isFormValid` boolean variable evaluates whether all input fields have non-empty values, determining the form's overall validity. The `disabled` attribute is applied to the submit button, preventing users from submitting the form if it contains empty fields. Finally, the `required` attribute ensures that input fields and textarea elements are mandatory. In contrast, the `className` attribute dynamically adds the "invalid" class to visually indicate to users which fields are required but empty. These attributes and functions facilitate form validation and enhance user interaction within the React component.
```css
input {
 border: 0.78px solid #eee;
 padding: 7px;
 border-radius: 20px;
 margin-top: 4px;
 font-size: 14px;
}

.form {
 padding: 2rem 1rem;
}

.form h2 {
 padding: 1rem 0px;
}

textarea {
 padding: 7px;
 border: 0.78px solid #eee;
 border-radius: 20px;
}

.btn-contact {
 background: orange;
 padding: 7px;
 font-size: 14px;
 font-weight: bold;
 border-radius: 20px;
 cursor: pointer;
}

.invalid {
 border: 1px solid red;
}
```
This CSS code snippet defines styles for form elements to create a visually cohesive and user-friendly design. Input elements have a consistent appearance with borders, padding, and rounded corners, while headings and text areas are appropriately spaced for readability. The submit button stands out with bold text, an orange background, and rounded edges, encouraging user interaction. Additionally, an `invalid` class is defined to highlight empty input fields and text areas with a red border, providing visual cues for required input. Overall, these styles enhance the form's usability and aesthetic appeal, contributing to a positive user experience.

Here is the overall implementation output.
![newcontact](https://hackmd.io/_uploads/r1CPVm7b0.png)


<CTA_Middle_Frameworks />



## Integrating SMTP Express
In this section, we will integrate the form with SMTP Express so that when a user clicks on the submit button, it sends the appropriate messages to the recipient address. Before we proceed, here are a few things to take note of from the previous section.
- We have created a function `handleSubmit`; this function is where the [`sendApi`](https://smtpexpress.com/docs/send-api/) is called when all validation has passed. 
- We have disabled the form button to be clickable only when all the required information has been passed.
- We have [created a project](https://smtpexpress.com/docs/introduction/#creating-a-project), obtained the [project secret](https://smtpexpress.com/docs/introduction/#obtaining-a-project-secret) and identified the project ID.

Next, let's integrate the service by making an [API (Application Programming Interface)](https://aws.amazon.com/what-is/api/#:~:text=API%20stands%20for%20Application%20Programming,other%20using%20requests%20and%20responses.) call to the `baseURL`. Before doing this, there's an important thing to know when passing your sender's email in the request body.
Your sender email will be determined based on the option you opt for when creating a project.
```javascript
sender: {
 name: 'Makanju',
 email: "senderemail@gmail.com",
}
```
This code example shows a sender object with two properties: name and email. This object is extracted from the request body.
![project](https://hackmd.io/_uploads/S1r9BXmZC.png)
You can fill in your SMTP server configuration details if you have one or select the option "I do not have an SMTP server." This second option gets you set up quickly. When you choose this second option, you are provided with an email, which you will pass as your sender email in the request body. However, you can also use any email if you provide your own custom server.
![senderemail](https://hackmd.io/_uploads/BJAXXXQ-R.png)
This image shows the email generated for me when I create a project with this option. You can access this data by going to your dashboard, clicking on the project, and selecting settings from the sidebar navigation. Now, let's implement the send API.
  
To do this, copy this code and update your `ContactPage.jsx`.
```javascript
import axios from "axios";

const ContactPage = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  //use Axios to make a POST request;
  const api = axios.create({
    baseURL: "https://api.smtpexpress.com/",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer <PROJECT-SECRET>",
    },
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const body = {
        subject: formData.subject,
        message: `<h1> ${formData.message} </h1>`,
        sender: {
          name: formData.name,
          email: "sm0pid-jqbeReRhLhpJDRhLjkFxMXGZt@projects.smtpexpress.com",
        },
        recipients: {
          name: "Oluwafemi Makanju",
          email: "makurseme@gmail.com",
        },
      };
      const response = await api.post("send", body);
      console.log(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return <div>{/* This part contains the form component code  */}</div>;
};

export default ContactPage;
```
In the `ContactPage` component, `axios` is utilized to facilitate communication between the frontend and backend servers through a `POST` request. Upon form submission, the `handleSubmit` function is invoked, which prevents the default form submission behavior using `e.preventDefault()`. Inside the `handleSubmit` function, a try-catch block is implemented to handle potential errors during the API request process. Within the try block, a body object is constructed containing the subject, message, sender, and recipient details obtained from the `formData` state. The `axios.create()` method is used to create an Axios instance with specified `baseURL` and headers, including the authorization token required for authentication. Subsequently, the `api.post()` method is invoked with the "send" endpoint and the body object as parameters to send the form data to the backend server. Upon successful completion of the request, the response data is logged to the console for debugging purposes.

Any errors encountered during the API request process are caught and handled within the catch block. If an error occurs, it is logged to the console using `console.error()`, providing insight into the cause of the issue. Error handling ensures that the application gracefully handles unexpected scenarios, such as network errors or server-side failures, by providing feedback to the user and allowing for appropriate correction. Additionally, error handling enhances the robustness and reliability of the application, ensuring smooth user experiences even in adverse conditions.
![expressmail](https://hackmd.io/_uploads/Hy5GEXmbA.png)
This is the result of my implementation; I got the mail directly in my inbox. Additionally, SMTP Express provides information on all email histories in your dashboard.
![dashboard](https://hackmd.io/_uploads/By2c7XmZ0.png)
This is an example from my dashboard.

## Advanced Features and Security
Apart from sending a direct email to a recipient address, SMTP Express also provides options to add an [attachment](https://smtpexpress.com/docs/send-api/sending-attachments/), or even send a calendar invite to an address when they complete an action. With attachments, users can include files, such as documents, directly within their email messages, enhancing communication and collaboration. Additionally, SMTP Express enables the creation and sending of [calendar invites](https://smtpexpress.com/docs/send-api/calendar-invites/), allowing users to schedule events, meetings, or appointments conveniently through email. These advanced features empower users to communicate more effectively and efficiently, streamlining workflows and enhancing productivity in both personal and professional contexts.

### How to send a file attachment
To create an email that includes an attachment, add the `attachments` array to your request body in `ContactPage.jsx`.
```javascript
import React, { useState } from "react";

const ContactPage = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const body = {
        attachments: ["link-to-actual-file"],
      };
      const response = await api.post("send", body);
      console.log(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };
};
export default ContactPage;
```
This code example shows how to pass an attachment in your request body. It's quite simple, hehe! All you have to do is update the request body in `ContactPage` with the `attachments` array. Since it's an array, you can add more file links if need be. 
![attachement](https://hackmd.io/_uploads/B1MpfX7W0.png)
This image shows an example output where I sent an attachment directly to my inbox.

### How to send a calendar invite
To send a calendar invite, update the body of your request object with the `calendarEvent` object in `ContactPage.jsx`.
```javascript
import React, { useState } from "react";

const ContactPage = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const body = {
        calendarEvent: {
          title: "Engineering Sync",
          startDate: "2024-01-18T23:00:00.000Z",
          endDate: "2024-01-19T23:00:00.000Z",
          organizer: "makanju@text.co",
          location: "Remote",
        },
      };
      const response = await api.post("send", body);
      console.log(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };
};

export default ContactPage;
```
This code example shows the `calendarEvent` object being passed in the request body; it contains properties such as `title`,`startDate`, `endDate`, `organizer`, and `location`. You can also add the description of the event as a property.
![calendar](https://hackmd.io/_uploads/rkNJ1PNyC.png)
This image shows the calendar output sent directly to my email. 

### Security
In terms of security, if you provide custom SMTP server credentials instead of choosing the option that says "I do not have an SMTP server," when creating a project, this data is encrypted before it is stored in the database, making sure that your data is safe and secure. Also, when creating a project secret, you will be asked to provide a domain name. This domain is used to provide security for your emails. If the mail is sent from a domain different from the one you provided, it will be rejected. You can also refresh your project secret if you think it has been exposed. This will nullify any security threat that could arise when your project secret is exposed. 

## Conclusion
In conclusion, for developers looking for dependable and feature-rich email communication solutions, SMTP Express is a valuable tool. With its advanced capabilities, which include calendar invites and attachments, it makes application integration easier and guarantees smooth communication. SMTP Express's platform, which is both secure and efficient, enables the timely delivery of crucial communications, hence improving user engagement and collaboration.