"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Build a Professional Email Service: Gmail OAuth Express + Webhooks

Build a Professional Email Service: Gmail OAuth Express + Webhooks

Published on 2024-11-03
Browse:548

Email notifications are crucial for modern web applications. In this guide, we'll build a secure email notification service using Express.js and Gmail's OAuth2 authentication. Our service will accept webhook requests and automatically send emails based on the incoming data.

What We're Building

We'll create an Express server that:

  • Receives webhook data via POST requests
  • Authenticates with Gmail using OAuth2
  • Sends customized emails based on the webhook payload
  • Handles errors gracefully

Prerequisites

  • Node.js installed on your machine
  • A Google Cloud Console project with Gmail API enabled
  • OAuth2 credentials (Client ID, Client Secret, Refresh Token)
  • Basic understanding of Express.js and async/await

Project Setup

First, install the required packages:

npm install express body-parser nodemailer googleapis dotenv

Create a .env file with your credentials:

CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret
REDIRECT_URI=your_redirect_uri
REFRESH_TOKEN=your_refresh_token
[email protected]

If you encounter any difficulties setting up these credentials, like I did, you can follow the steps below...

Step-1: Create a new Google Cloud project:

a. Go to https://console.cloud.google.com/
b. Click on the project dropdown at the top of the page
c. Click "New Project"
d. Enter a project name and click "Create"

Build a Professional Email Service: Gmail OAuth Express   Webhooks

Step-2: Enable the Gmail API:
a. In the left sidebar, go to "APIs & Services" > "Library"
b. Search for "Gmail API"
c. Click on "Gmail API" and then click "Enable"

Build a Professional Email Service: Gmail OAuth Express   Webhooks


Step-3: Configure the OAuth consent screen:
a. Go to "APIs & Services" > "OAuth consent screen"
b. Choose "External" as the user type and click "Create"
c. Fill in the required fields:
- App name: [Your app name]
- User support email: [Your email]
- Developer contact information: [Your email]
d. Click "Save and Continue"
e. On the "Scopes" page, click "Add or Remove Scopes"
f. Find and select "https://mail.google.com/" scope
g. Click "Update" and then "Save and Continue"
h. On the "Test users" page, click "Add Users"
i. Add your Gmail address and click "Save and Continue"
j. Review the summary and click "Back to Dashboard"


Step-4: Create OAuth2 credentials:
a. Go to "APIs & Services" > "Credentials"
b. Click "Create Credentials" > "OAuth client ID"
c. Choose "Web application" as the application type
d. Name: [Your app name]
e. Authorized JavaScript origins: Add your server's domain (e.g., http://localhost:3000 for local development)
Build a Professional Email Service: Gmail OAuth Express   Webhooks
f. Authorized redirect URIs:
- Add: https://developers.google.com/oauthplayground
- Add your server's callback URL if you have one (e.g., http://localhost:3000/auth/google/callback)
g. Click "Create"
h. A popup will show your Client ID and Client Secret. Save these securely.


Step-5: Get a new Refresh Token:
a. Go to https://developers.google.com/oauthplayground/

Build a Professional Email Service: Gmail OAuth Express   Webhooks

b. Click the gear icon(Like Settings) in the top right corner
c. Click on check box "Use your own OAuth credentials"
d. Enter your new Client ID and Client Secret
e. Close the settings
f. In the left sidebar, find "Gmail API v1"
g. Select https://mail.google.com/
h. Click "Authorize APIs"
i. Choose your Google account and grant the requested permissions
j. On the next screen, click "Exchange authorization code for tokens"
k. Copy the "Refresh token" from the response

If you encounter any issues during this process or when testing the email functionality, please provide the specific error messages or behavior you're seeing in comments.


The Code Explained

Let's break down the implementation step by step:

1. Initial Setup and Dependencies

const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const { google } = require("googleapis");
require("dotenv").config();

const app = express();
app.use(bodyParser.json());

This section sets up our Express server and imports necessary dependencies. We use body-parser to parse JSON requests and dotenv to manage environment variables.

2. OAuth2 Configuration

const oAuth2Client = new google.auth.OAuth2(
  CLIENT_ID,
  CLIENT_SECRET,
  REDIRECT_URI
);
oAuth2Client.setCredentials({ refresh_token: REFRESH_TOKEN });

We create an OAuth2 client using Google's authentication library. This handles token refresh and authentication with Gmail's API.

3. Email Sending Function

async function sendEmail(webhookData) {
  const {
    receiver_email, //change data based on your needs
  } = webhookData;

  try {
    const accessToken = await oAuth2Client.getAccessToken();
    const transport = nodemailer.createTransport({
      service: "gmail",
      auth: {
        type: "OAuth2",
        user: process.env.EMAIL_USER,
        clientId: CLIENT_ID,
        clientSecret: CLIENT_SECRET,
        refreshToken: REFRESH_TOKEN,
        accessToken: accessToken,
      },
    });

    const mailOptions = {
      from: `Your Name `,
      to: receiver_email,
      subject: ``, //Add Subject of Email
      html: ``, // Add your HTML template here
    };

    return await transport.sendMail(mailOptions);
  } catch (error) {
    console.error("Error in sendMail function:", error);
    throw error;
  }
}

This function:

  • Extracts data from the webhook payload, you can modify payload based on needs
  • Gets a fresh access token
  • Creates a transport with OAuth2 authentication
  • Sends the email with customized content

4. Webhook Endpoint

app.post("/webhook", async (req, res) => {
  try {
    const webhookData = req.body;
    await sendEmail(webhookData);
    res.status(200).send("Email sent successfully");
  } catch (error) {
    console.error("Error processing webhook:", error);
    res.status(500).send("Error processing webhook");
  }
});

Our webhook endpoint:

  • Receives POST requests
  • Processes the webhook data
  • Sends emails
  • Returns appropriate responses

Testing

Test your webhook using curl or Postman:

curl -X POST http://localhost:4000/webhook \
-H "Content-Type: application/json" \
-d '{
  "receiver_email": "[email protected]",
}'

Troubleshooting

Common issues and solutions:

  1. Authentication Errors: Check your OAuth2 credentials
  2. Token Expiration: Ensure refresh token is valid
  3. Missing Data: Validate webhook payload

Conclusion

You now have a secure, OAuth2-authenticated email notification system! This implementation provides a solid foundation for building more complex notification systems while maintaining security and reliability.

Hope this post is useful for you to setting up email service.

Happy coding! ?

Release Statement This article is reproduced at: https://dev.to/yashrajxdev/build-a-professional-email-service-gmail-oauth2-express-webhooks-2gp8?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3