Sending Transactional emails through gmail in React NextJS GraphQL App

Image for post
Image for post
Photo by Hoster on Unsplash

I am building a demo Indian Restaurant Billing App , after completing Advanced React course by Wes Bos.

In my first article i changed the menu to hamburger menu from the normal menu.

In the second article i had given details to upload images through cloudinary.

Now, in the course Wes had taught to send “Password Reset” transactional email through a fake SMTP service Mailtrap and pointed us to use something more robust in production

Mailtrap is ok for development, where mails are not sent to recipient email. But even for a small production app, we need to send real emails to real email id.

I did my research to find a cheap and good email service to send transactional email, but all of them cost around $10 per month for the cheapest plan. Not all of us can start with that, even if our app is small. This is a good link if you want and of the services.

I did a bit more research and found that we can also send email through gmail APIs and found a great updated article on medium by Nick Roach to do so.

If your users have a gmail account(which most of us have) and you are ok with the limit of 500 mails per day, then ride along.

Follow the complete article by Nick Roach and get a Client ID, Client Secret and Refresh Token from Google Developer account.

Now, open your project which was made in after the Advanced React tutorial video 32 or open my github.

First, we make variables for Client ID, Client Secret and Refresh Token in variables.env file.

Image for post
Image for post
New variables.

In the file mail.js only keep the below.

Image for post
Image for post
mail.js reduced

Now, in our Mutation.js import three new statements at the top and only take makeANiceEmail from mail.js

We do all the changes in requestReset function in Mutation.js

Here we are sending email through Oauth2 in gmail.

Image for post
Image for post
Sending mail by Oauth2

We also have to install googleapis in our backend server, before running the code.

Image for post
Image for post

Now, it’s time to test. Sign up with a real gmail id in your web-app.

Then, go to the Reset page(I have a different one, then the tutorial app) and give the real gmail id, which you just used to Sign-up.

Image for post
Image for post
Reset Link

And here your password reset link on your real gmail account.

Image for post
Image for post
Password reset gmail mail

You can find the code till this point here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store