# Configuring the Mailing Service

### Introduction

In SMU Portal, there are many features that use the mailing service. For instance, when you create an account you will receive an email containing a link that to confirm your email address, or when making a box reservation you will receive an email containing the reservation's details.

The mailing service is implemented with `nodemailer` coupled with Gmail. In fact, Google offers a free [SMTP](https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol) service to send emails through Gmail.

### Generating OAuth 2.0 Tokens

OAuth 2.0 is a standard that allows your application to use a set of tokens (strings) instead of using actual login credentials (i.e. email and password). This represents an import security advantage since each set of tokens is only bound or valid for a specific action (or set of actions). In this case, our set will only allow sending emails, so once compromised, the tokens cannot do as much harm as actual account credentials.

Before starting, you will need a Gmail account, we recommend that you create a new one instead of using your personal email for extra security measure, you can signup [here](https://accounts.google.com/signup/v2).

First, we need to create a new project in the [Google Cloud Platform](https://console.cloud.google.com/). Make sure that you are connected using your newly created account.

![Google cloud platform dashboard](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHFxc1AGqHxqxLixWy%2F1.png?alt=media\&token=eddb35cc-3f0f-4238-9957-18b4682918ce)

Click on **Select Project.**&#x20;

![Selecting a project](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHGL_YEM4zmYli9bbw%2F2.PNG?alt=media\&token=30444815-0668-4477-95ce-8cecd264ce8a)

This window will pop out. Select **New Project** and you will be redirected project creation page.

![Creating a new project](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHGzjTVlv0Bzk9MHm4%2F3.png?alt=media\&token=b0e06802-671e-4c33-a375-f30943954c49)

Specify a **name** and then click **Create.**

![Choosing a name for the project](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHHSQise5lWhkndxkP%2F4.PNG?alt=media\&token=596b9b08-9245-4d95-a3c9-2c48af6fafda)

If everything went well, you will be redirected to the dashboard and receive a notification once your project has been created.

![Project successfully created](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHHu_kdaWJZkjJ64sX%2F5.PNG?alt=media\&token=394edc45-8ec5-4625-a758-e5cef33d59f0)

**Select your project** on the top left, click on the **burger menu icon**, and choose **Home >** **Dashboard**.

![Accessing the project's dashboard](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHIp1bDKZu_iMmoWhL%2F6.png?alt=media\&token=65e3b282-07d0-426e-beb8-26ab0a0c24d0)

Click on **Go to Project Settings** at the bottom of the **Project Info** card.

![Modifying the project's settings](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHJxtBufdiUElBZfHy%2F7.PNG?alt=media\&token=7adbfac3-f7fd-4a88-91b9-13b7cf1b08b9)

Click on the **sidebar menu**, and choose **API & Service > Credentials** and you will be redirected to the **Credentials** page.

![Creating credentials for the project](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHKcAhaSJ0nWZ_Xn4S%2F8.png?alt=media\&token=aebe4d15-f9c3-4894-9e41-c4a24769107d)

&#x20;Press **Create Credentials** and select **OAuth client ID.**

![Creating an OAuth Client ID](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHNFq4enKAotH9Y9Gi%2F9.PNG?alt=media\&token=860b5567-251c-467f-a4c8-3dd1b9c9ba36)

You will be confronted with this page, click on **Configure Consent Screen.**

![Configuring Consent Screen](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHNbwrVRGop_FodTDr%2F10.PNG?alt=media\&token=81037a91-7326-442e-a508-5b3de6d0e5dd)

Choose **External** as a **User Type** and click on **Create.**

![Selectin User Type](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHNu9fXRBPsmhq-GVb%2F11.PNG?alt=media\&token=d6d7bfcb-fb5f-450d-bfa6-38611955deef)

Choose a **name** for your application and press **save.**

![Choosing a name for the application](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHOlEuL739d_i43gGQ%2F12.PNG?alt=media\&token=74aa7b2e-d5d7-4704-98d3-68b219e32e40)

Once that is finished, click on **Credentials** from the sidebar, then on **Create Credentials** and select **OAuth client ID** as we have done earlier.

Choose **Web Application** as an **Application Type**, specify a **Name** and add **<https://developers.google.com/oauthplayground>** to the **Authorised redirect URIs** list.

&#x20;

![Creating a OAuth client ID](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHPuzMHsKGtyBzq1hE%2F13.PNG?alt=media\&token=5eb85c63-efdc-414c-b297-64e2e7bc847d)

Now, your OAuth client has been successfully created, save **Client ID** and **Client Secret**, we will need them later on.

Visit [OAuth 2.0 Playground](https://developers.google.com/oauthplayground), click on the **gear icon**, and paste your **Client ID** and **Client Secret**, also make sure that you have identical options as shown in the image, then press **close**.

![OAuth 2.0 configuration](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHRU28sEque8NZj8Bl%2F14.PNG?alt=media\&token=bc6f595c-8067-4996-8163-ec8c2f99418f)

Paste **<https://mail.google.com/>** in the scope text box of **Step 1 Select & authorize APIs** and click on **Authorize APIs**

![](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHRrs_ydzp4G_faXgE%2Fimage.png?alt=media\&token=454847fa-b112-4afd-acda-1f06b5762777)

You will be redirected to this page, click on **Advance** and **Go to \<PROJECT-NAME>** (in this case \<PROJECT-NAME> is CS321).

![Signing in to the application](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHSfuUzYpj35ggtKGo%2F16.PNG?alt=media\&token=b3072212-5b4d-45a2-b68e-efddf94b4d15)

Click on **Allow**

![Allowing the application to use Gmail API](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHSvPaMY2fZmO6GNx2%2F17.PNG?alt=media\&token=487619f3-c228-462e-bedd-e6431ce54157)

Press **Exchange authorization code for tokens**, and it will generate a **Refresh token** and an **Access Token**.

![Generating Refresh and Access Tokens](https://3562566727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJ2dzCH38HoVBUGfU0z%2F-MJHEsQkIFnqvGVmL0Fb%2F-MJHTiVhOjrlzh7aenb6%2F19.png?alt=media\&token=da1ef410-8943-4888-a5ae-4244054c45f4)

Finally, go to your `.env` file and add your **Client ID, Client Secret, Refresh,** and **Access Tokens**. `SMTP_USER` should be your Gmail's email.

```bash
# NodeMailer #
# SMTP_USER should contain an email not a username
SMTP_SERVICE = gmail
SMTP_USER = email
SMTP_TYPE = OAuth2

# Google OAuth
G_CLIENT_ID = <CLIENT-ID>
G_CLIENT_SECRET = <CLIENT-SECRET>
G_ACCESS_TOKEN = <ACCESS-TOEKN>
G_REFRESH_TOKEN = <REFRESH-TOEKN>
G_REDIRECT_URI = https://developers.google.com/oauthplayground
```
