Use Nodemailer and Google OAuth2 to create contact forms for your site!

If you want to use a Gmail account with your Nodemailer module to send mail from a Node server, you’ll find it’s not the most intuitive. Some tutorials will instruct you to disable the security features to get the Gmail account to play nice with Nodemodule. This isn’t ideal since you don’t want to compromise the security of your account. You could just make a dummy email with a password unique from your other accounts, but why do that when you can go about this the secure way with OAuth2?

I’m going to assume you know how to set up your front end — if you don’t there’s plenty of resources out there for you to get started. I made a simple form using React with an onHandleChange function that sets my state to the data coming in from the form. Here’s an example of items you make want to keep track of from your form:

See? Simple enough. Obviously you can make your own form as simple or complex as possible. You may want to consider adding a topic/subject into your state to cover a dropdown menu option for a topic to send with the message. For now, this is the state I’ll be sending to the back end with a fetch with the method set to post.

Setting up Nodemailer for Node.js

I like to keep my code modularized, so my back end is comprised of a server folder with server.js and router.js. Server.js is where my express app.listen lives. Router.js is where the Nodemodule server connection takes place. This deviates a bit from the official Nodemodule code since their set up keeps everything in one file. That’s fine, too, but I feel strongly that your code should be as clean as possible and that includes keeping functions and connections separate.

Assuming you already set up your front-end and have Nodemailer set up for use without Google oAuth you can make sure your form works with mailtrap.io. You can get an account easily and it supports several configurations. Just make sure you select Nodemailer when getting your credentials. I’d suggest testing your nodemailer code with mailtrap.io before moving on to OAuth just to make sure everything is working — that way if Google doesn’t play nicely with your set up, you know the problem is isolated to the OAuth configuration and it’s not lurking somewhere else in your code. You’ll use the transport variable below in place of transport variable I have in my gist further down.

Setting up Google OAuth with Nodemailer

I think Nodemailer is pretty self-explanatory in showing the proper code set up for using OAuth, but I have seen some posts floating around the internet in various places from confused people who resorted to just loosening the security on their Gmail account. So let’s start with configuring your account.

You need to set up an OAuth Client ID on the Google platform!

To do this you need to go to Google developer tools and search for “APIs & Services.” From there, you should follow this order:

Click on “Credentials” > “Create Credentials” > “OAuth Client ID” (or “OAuth 2.0 Client ID”)

From there, you’ll need to enter some basic information:

Type: Web Application

Name: The name of your application

URIs: localhost:#### or your actual URI for a live site.

Authorized Redirect URIs should be: https://developers.google.com/oauthplayground

You need to have the Authorized Redirect URI set to the playground to prevent the refresh token from being revoked after 24 hours.

Now you should have a Client ID and a Client Secret. Copy it into a safe place. We will want it in just a moment…

Now head off to the OAuth playground for more configuring!

Forget the scope for a moment and head to the settings on the right side. When you click, a menu will expand and you will need to check off the option “Use your own OAuth credentials.” Then you’ll see two new forms to fill out — put your OAuth Client ID and Client Secret from earlier here.

Now you can head to Step 1 of this screen shot and look for “Apps Script API v1” then select: https://mail.google.com. Log in with the account you plan to use with Nodemailer.

You’ll head to Step 2 where you’ll see an Authorization Code. Click on the blue box, “Exchange authorization code for tokens.” Copy the refresh token.

Now you should have three things saved for later:

1. Client ID
2. Client Secret
3. OAuth 2.0 Refresh Token

Set up Nodemailer router/controller in router.js

If you have not done so already, run npm i nodemailer googleapis.

Below I am using the ‘3-legged OAuth2 authentication from lines 7 to 14 in my auth object. You could also include an expires key which is an optional expiration for the current accessToken. Also not included here is an optional accessUrl key which is an optional HTTP endpoint for requesting new access tokens — the default is Gmail. It is very important that the key value pairs in the auth object are written as you see here — you cannot name them anything else or your nodemailer module will not automatically refresh the tokens.

There is nothing too fancy about the code snippet above — this is just a tweaked version of the code you can find from the Nodemailer website.

Now you have your Nodemailer module set up to send messages without sacrificing the security of your Google account!

Check out nodemailer.io and use it for your next contact form.