DEV Community: Akshat Mittal

Send Emails from NodeJS, Nodemailer, and GMail API

Akshat Mittal — Sat, 13 Apr 2024 10:31:32 +0000

Introduction

Sending emails from NodeJS with Nodemailer is easy. In this guide, we'll explore how to set up and use Nodemailer with Gmail APIs to send emails effortlessly.

Essentials

A MERN stack or a NextJS app.
A verified Google account that can use Google Developer features.
This guide demonstrates using typescript, but the same thing can be built in JavaScript just by removing type declarations.

Google Application Setup

Go to Google Cloud Console.

Click on create a new project.

Select the organization and click on Create Project.
Select the recently made project from the above corner.
Go to APIs and Services and select Enabled APIs and Services from the left panel.
Search for Gmail API and enable it.

Go to the Credentials Screen from the left bar, and click on the Configure Consent button.

Select the Internal user type
Fill in the required details.
Make sure that you have a png of your 120x120 logo.
Add the scope for sending emails on your behalf: auth/gmail.send
In the next screen, click Create and click on Go to Dashboard

In credentials screening, click on Create credentials.
Select a web application.

Enter the details.
Make sure to add the deployment link and localhost link in URIs.
For redirect URIs, make sure to add Google OAuthPlayground
Click on Create

Make sure to download the JSON for the credentials.
Now go to the Google OAuthPlayground
In the top right, press the gear icon and check the Use your own OAuth credentials button.
Paste the client ID and secret in it.
Now search for https://mail.google.com in the left search and after selecting that, click on Authorize APIs.
Allow the application to access.
After redirecting back to the playground, select the Exchange authorization code for tokens button.
Copy the refresh token for later.

Writing the code

Install nodemailer and googleapis packages.
Note: While working with typescript, don't forget to install @types/nodemailer package too.
Export the credentials stored in .env file.



GOOGLE_CLIENT_ID="your client id"
GOOGLE_CLIENT_SECRET="your client secret"
GOOGLE_REFRESH_TOKEN="your refresh token"
GOOGLE_REDIRECT_URI="https://developers.google.com/oauthplayground"
GOOGLE_EMAIL="your email"



type GOOGLE_MAIL_SERVICE_KEYS = 
    | "clientId"
    | "clientSecret"
    | "refreshToken"
    | "redirectUri"
    | "email";

export const googleEmailConfig: Record<GOOGLE_MAIL_SERVICE_KEYS, string> = {
    clientId: process.env.GOOGLE_CLIENT_ID || "",
    clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    refreshToken: process.env.GOOGLE_REFRESH_TOKEN || "",
    redirectUri: process.env.GOOGLE_REDIRECT_URI || "",
    email: process.env.GOOGLE_EMAIL || "",
};

Configuring OAuth client

Create a file services/gauth.ts and export the OAuthClient from it.



import { google } from "googleapis";

const OAuth2 = google.auth.OAuth2;
const id = googleEmailConfig.clientId;
const secret = googleEmailConfig.clientSecret;

const myOAuth2Client = new OAuth2(id, secret);
export default myOAuth2Client;

Creating email service

Create a service (services/email.ts) for sending email by configuring SMTP transport with Nodemailer, OAuth client, and your application's configurations.

Get the access token from your OAuth client after providing the refresh token.
Use the createTransport service from nodemailer to create your SMTP transport with your Google config.
Create an object with from, to, the subject of the mail, and the body of the mail as HTML.
Use the smtpTransport to send the mail.



import { createTransport } from "nodemailer";

export const sendEmailService = async (
    to: string,
    subject: string,
    html: string
) => {
    try {
        myOAuth2Client.setCredentials({
            refresh_token: googleEmailConfig.refreshToken,
        });
        const accessToken = await myOAuth2Client.getAccessToken();
        const transportOptions: any = {
            service: "gmail",
            auth: {
                type: "OAuth2",
                user: googleEmailConfig.email,
                clientId: googleEmailConfig.clientId,
                refreshToken: googleEmailConfig.refreshToken,
                accessToken: accessToken.token,
            },
        };
        const smtpTransport = createTransport(transportOptions);
        const mailOptions = {
            from: {
                name: "Your application name",
                address: googleEmailConfig.email,
            },
            to,
            subject,
            html,
        };
        await smtpTransport.sendMail(mailOptions);
    } catch (error: any) {
        console.error(error);
    }
};

Create a utility (utils/email.ts) for sending emails with this sendEmailService.



export const getEmailHTML = (title: string, subtitle: string): string => `<html>
<head>
    <title>${title}</title>
</head>
<body>
    <h1>${title}</h1>
    <p>${subtitle}</p>
</body>
</html>`;

export const sendEmail = async (to: string, subject: string) => {
    const html = getEmailHTML(subject, "This is a test email");
    await sendEmailService(to, subject, html);
};

That's it, your email service is configured successfully.

Testing out

Create a temporary API route and call a controller with another email to check this route.

Add the recipient email, in this case, your email (different from the email with which you configured the mailing service).
Use the sendMail utility with this email and a test subject to send the email.



export const sendMailApi = async (req: NextApiRequest, res: NextApiResponse) => {
    try {
        const to = "test@example.com";
        const subject = "Test email";
        await sendEmail(to, subject);
        return res.status(200).json({ message: "Email sent successfully" });
    } catch (error) {
        console.error();
        return res.status(500).json({ error: RESPONSE_MESSAGES.SERVER_ERROR });
    }
};

Call this into your API route and test it by hitting the route.

If you are using ExpressJS:



router.get("/api/v1/email", sendMailApi);

For NextJS API routes:



import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";

const handler: NextApiHandler = async (

    req: NextApiRequest, 

    res: NextApiResponse

) => {

    if (req.method === "GET") {

        return sendMailApi(req, res);

    }

    return res

        .status(405)

        .json({ message: Method </span><span class="p">${</span><span class="nx">method</span><span class="p">}</span><span class="s2"> Not Allowed });

};

export default handler;

Conclusion

This article demonstrates the use of Google Mailing service and Nodemailer.

Questions and feedback are most welcome. 😊

Implementing Sign In with Google in NodeJS (without third-party libraries)

Akshat Mittal — Tue, 20 Feb 2024 15:12:35 +0000

Introduction

Recently I was building a project in NextJS in which I needed to implement 'Sign in with Google' without third-party libraries like next-auth, or passport. In this article, we will cover a step-by-step guide for implementing OAuth on your NodeJS app.

Essentials

A MERN Stack or a NextJS app.
This guide uses typescript, but you can use JavaScript too if comfortable with that.
A verified Google account from where we can use Google Developer features.

Google Application Setup

Go to Google Cloud Console.

Click on create a new project.

Select the organization and click on Create Project.
Select the recently made project from the above corner.
Go to APIs and Services and select OAuth consent screen from the left sidebar.
Give your App a name that will be seen by the end users and the support email users can contact.
Add a logo for your app, prescribed 120x120 dimensions.
Add your product's home page, and other links as asked.
Add the domain of your application in the Authorized Domains section.
Go to the next screen and select the userinfo.email and userinfo.profile scope.
Go on to the next screen and add a couple or more email addresses to test your app with.

After all the steps, go back to the dashboard.
Go on to the credentials screen, from Create credentials, select OAuth Client ID, and select web application.
In the Authorized JavaScript Origins, add the following:
1. The link to localhost -> http://localhost
2. The link to localhost with port your applications usually runs on -> http://localhost:3000
3. The link to Google Developers Playground, https://developers.google.com
4. The link to your website, for example, https://example.com
5. Also add the link to the website if you want the authentication on a subdomain too, like https://app.example.com
In the Authorized redirect URIs, add the following:
1. The redirect link to localhost with the port your applications usually run on -> For example, http://localhost:3000/auth/google/google-callback/oauth/login. Ensure to include google-callback in the redirect URI, as stated in the guidelines.
2. The link to Google Developers Playground, https://developers.google.com/oauthplayground.
3. The redirect link to your website, for example, https://example.com/auth/google/google-callback/oauth/login, should be the same as that of localhost.

Create the credentials, and download the JSON of the credentials, where you will find the client_id and client_secret.

Writing the Code

In your NextJS project, create a file config/index.ts
Export the credentials that you stored in the .env file



NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID="your oauth client id"
NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_SECRET="your oauth client secret"
NEXT_PUBLIC_GOOGLE_OAUTH_REDIRECT_URI="your oauth client redirect uri"



type GOOGLE_AUTH_KEYS = 
    | "client_id" 
    | "client_secret" 
    | "endpoint" 
    | "redirect_uri" 
    | "scopes";

export const oauth_google: Record<GOOGLE_AUTH_KEYS, string> = {
    client_id: process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID || "",
    client_secret: process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_SECRET || "",
    endpoint: "https://accounts.google.com/o/oauth2/v2/auth",
    redirect_uri: process.env.NEXT_PUBLIC_GOOGLE_OAUTH_REDIRECT_URI || "",
    scopes: "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
}

Add a button to your login page, which should be built with guidelines as provided by Google: Branding Guidelines.

Add an onClick event on the button to redirect user to the Google's sign-in page.



const query = {
    client_id: oauth_google.client_id,
    redirect_uri: oauth_google.redirect_uri,
    response_type: "code",
    scope: oauth_google.scopes,
};
const url = new URL(oauth_google.endpoint);
url.search = new URLSearchParams(query).toString();
window.location.href = url.toString()

After the user completes the authentication flow, google will redirect to your provided redirect_uri in the .env file. Keep that page as a frontend page instead of an API route.

Now for the further authentication process, we will need to make API calls to our back-end server whenever the redirect_uri page loads where we will handle the data provided by Google after successful sign-in.

Note: In NextJS, you can leverage the getServerSideProps, to make API requests to the server for the further authentication process. For ReactJS make the API calls by calling in useEffect hook. Or if you are using any other framework, handle the API call as told in that.

In the search parameters of the returned page's URI, there is a parameter code, send that to your server's API route, (POST /oauth/google/verify here). Send this code in the request's body.

Backend

POST `/oauth/google/verify`

Create an API call to https://oauth2.googleapis.com/token, to get the id_token from the code we got from the request body.



const oauthRequest = {
    url: new URL("https://oauth2.googleapis.com/token"),
    params: {
        client_id: oauth_google.client_id,
        client_secret: oauth_google.client_secret,
        code: req.body.code,
        grant_type: "authorization_code",
        redirect_uri: oauth_google.redirect_uri,
    },
};
const oauthResponse = await axios.post(
    oauthRequest.url.toString(),
    null,
    { params: oauthRequest.params }
);
const oauthResponseData = oauthResponse.data;

In the oauthResponseData, there is a parameter, id_token. We will use this id_token to get the user details.
To do this, we will install google-auth-library which is Google's officially supported Node.js client library for using OAuth 2.0 authorization and authentication with Google APIs, and then use the verifyIdToken method from the client to get the user details from the id_token.

Create an OAuth Client to verify the ID token.



import { OAuth2Client } from "google-auth-library";

const client = new OAuth2Client();

export const fetchUserFromIdToken = async (idToken: string) => {
    const ticket = await client.verifyIdToken({
        idToken: idToken,
        audience: oauth_google.client_id,
    });
    const payload = ticket.getPayload();
    return payload;
};

After you have got the user details from the id_token, return those details as the API response.



const user = await fetchUserFromIdToken(oauthResponseData.id_token);
return res
    .status(200)
    .json({ data: user, message: "Success" });

This user detail contains a lot of details, here is an example:



{
    "iss": "Issuer of the token", // https://accounts.google.com here,
    "azp": "The client_id of the authorized presenter",
    "aud": "Identifies the audience that this ID token is intended for. It must be one of the OAuth 2.0 client IDs of your application.",
    "sub": "The subject of the token. An identifier for the user, unique among all Google accounts and never reused.",
    "email": "User's email",
    "email_verified": "Boolean", // true usually
    "at_hash": "Access token hash. Provides validation that the access token is tied to the identity token.",
    "name": "Name from user's Google Account",
    "picture": "The URL of the user's Google account's avatar",
    "given_name": "First name from user's Google account",
    "family_name": "Last name from user's Google account",
    "locale": "The language locale of user's location", // 'en-GB'
    "iat": "The time the ID token was issued, represented in Unix time (integer seconds).", // for example, 1708416251
    "exp": "1. The time the ID token expires, represented in Unix time (integer seconds).", // for example, 1708419851
}

From here, you can use any details that you need to handle authentication in your project further.

Conclusion

This article demonstrates the use of Google OAuth for NodeJS applications.

Questions and feedback are most welcome. 😊

Command Line 101

Akshat Mittal — Mon, 15 Jan 2024 08:46:11 +0000

The Command Line Interface, or CLI, is a text-based interface that allows users to interact with a computer and its operating system through textual commands. It provides a direct line of communication with the system, enabling users to execute commands by typing specific instructions.

In this small series, we will explore the basics of CLI, the essentials, and some techniques.

Installation

All the experiments performed in this blog are executed in the Linux Environment.

Linux

All Linux distros come with an internal terminal which by default uses bash shell. You are free to try more shells like, Hyper Terminal, Fish, OhMyZsh (An Open source alternative for Zsh), etc.

Windows:

Approach 1: Install git, along with that a utility git bash gets installed which creates a bash environment, the environment used by the Linux machines.
Approach 2: Windows Powershell is a rather powerful software and is capable of running all (if not more) commands of the bash environment.

MacOS:

Instead of a bash shell, Mac uses a zsh shell. It runs on a UNIX environment, which is mostly a Linux-like environment that makes sure that all of the commands of the bash environment are executable in Mac too.

Prompts and Symbols

Several prompts and symbols are used in the CLI, to denote separate things, some of them are listed below:

$: denotes shell environment
#: denotes that the current user is the root user
~: denotes the Home Directory
/: denotes the root directory
.: refers to the current directory
..: refers to the previous directory

Structure

Most CLIs are designed with the following structures:

<command> [arguments] [options]
- Example: ls /home/dir --all
<program> <command> [arguments] [options]
- Example: git fetch origin main --depth=10
<program> [arguments] [options]
- Example: docker -v

Arguments

Arguments in a CLI allow users to send data to the application, sometimes in a command context. Arguments need to follow a specific order to be executed correctly.

Options

Options are named parameters that can be passed to a command and are represented by key-value pairs. Unlike arguments, options do not need to be in specific order.

Flags

Options that don't require a value are called Flags. They are boolean, meaning their presence indicates true and their absence is false.

Navigation

Folders (also known as directories), can be navigated from the CLI itself.

pwd

To check which directory you are in, use the pwd command.
pwd stands for 'Print Working Directory'. This returns the absolute path of the current directory, from the root directory.
For example, if your username is paul-norway, initially the output of the pwd command is /home/paul-norway.

ls

ls stands for list. This command is used to list the contents of the current working directories.

This ls command here, lists down the contents of the snap directory.

ls -a

An option -a can be used with ls which shows all the hidden files and folders.

cd

cd stands for Change Directory. This command is used to navigate from one directory to another. cd commands work on both relative and absolute paths.

To enter a directory in the current location, use cd directory-name/ or cd ./Documents/.
To enter a directory relative to the home, use cd ~/Documents/.
To enter a nested directory, use cd Documents/legal/case-2401.
To use the top-level directory, (previous directory), use cd ../Documents. The .. denotes the previous directory

Managing Directories

To create a directory, use the mkdir <dir-name> command. For example, mkdir banners.
To remove an empty directory, use the rmdir <dir-name> command. For example, rmdir banners.
Note: rmdir does not work for non-empty folders.
To remove non-empty folders, use rm -rf <dir-name> instead.
Warning: This is a dangerous command, use it carefully since the deleted content does not go to the trash bin, instead is deleted completely.

Some useful tips and tricks

MAN Pages

Most of the commands and programs come with a manual page entry that you can view using the man command. The manual pages keep the documentation for the command where every option, argument, and usage is written down.

For example, to read more about the ls command

man ls

--help flag

Most commands give a --help flag which can tell the usage of the command easily.

ls --help

DEV Community: Akshat Mittal

Send Emails from NodeJS, Nodemailer, and GMail API

Introduction

Essentials

Google Application Setup

Writing the code

Configuring OAuth client

Creating email service

Testing out

Conclusion

Implementing Sign In with Google in NodeJS (without third-party libraries)

Introduction

Essentials

Google Application Setup

Writing the Code

Backend

POST /oauth/google/verify

Conclusion

Command Line 101

Installation

Linux

Windows:

MacOS:

Prompts and Symbols

Structure

Arguments

Options

Flags

Navigation

pwd

ls

ls -a

cd

Managing Directories

Some useful tips and tricks

MAN Pages

--help flag

POST `/oauth/google/verify`