MMDg Studio


WordPress & Google

Creating a Web App in Your Google Account

You’ll be coming back to WP Mail SMTP’s settings page a little later, so for this step, open a new tab or window in your browser.

In the new tab or window you’ve opened, log in to your Google account and open your Google Cloud Console.

Note: Before continuing, be sure to sign out of all other Google accounts besides the account you’ll be using for the SMTP setup.

Also, if you’re using Google Workspace, make sure that the Google account you use has permission to send emails (in other words, access to its own inbox).

If it’s your first time using Google Cloud Console, you may see a popup asking you to select your country and agree to the Terms of Service. Go ahead and do so, then click on AGREE AND CONTINUE to move on to the next step.

Accepting the Google Cloud terms of service

If you’ve logged in to the Google Cloud Console before, you’ll likely bypass the Terms of Service.



Creating or Choosing a Project

First, you’ll need to choose a project to use for your app. You can select an existing one or create a new one.

To do so, click on the projects dropdown in the toolbar at the top of your dashboard.

Opening the Google Cloud projects dropdown

In the popup that appears, select an existing project from the list or click on New Project in the top right corner.

Choosing to set up a new project for an app in Google Cloud

If you selected an existing project, move on to the next step. For a new project, enter a project name and select an organization and location from the dropdowns.

Creating a new project in Google Cloud

Then click on the CREATE button.



Enabling the Gmail API

Next, you need to enable the Gmail API for your project. In your Google Cloud Console sidebar, go to APIs & Services » Library.

api services library

Note: If you don’t see APIs & Services in the sidebar, it may be found by scrolling down and clicking on MORE PRODUCTS.

Then look under Category and click on Google Workspace, or enter “Gmail API” in the search bar.

Opening the Workspace category in the Google API Library

Click on the Gmail API result.

The Gmail API

On the Gmail API page, click on the blue ENABLE button.

Enabling the Gmail API



Creating Your Application’s Credentials

After you enable the Gmail API, you should be redirected to the Gmail API Overview page. Here, click on the CREATE CREDENTIALS button.

Creating credentials for the Gmail API

On the next page, Google will ask a few questions to determine the Credential Type you need. From the Select an API dropdown, choose Gmail API.

Select Gmail API

Note: If you don’t see an option for the Gmail API in the dropdown, be sure that you have the Gmail API enabled for your account.

Next, under What data will you be accessing?, select the User data option. Then click the NEXT button to proceed.

Click-next-button

Google will then ask for some basic information about your app.

This section is mostly for personal use since no one else will be using your app. However, some fields are still marked as required:

  • App name: Enter an app name of your choice (e.g., Pattie’s App).
  • User support email: Select your email address from the choices provided.
  • App logo: If you’d like, you can upload a logo for your app. This is optional.

Entering app information in Google Cloud

Finally, add your email address in the Email addresses field. Then click on the SAVE AND CONTINUE button to proceed to the next step.

Click save and continue button


Configuring Scopes (Optional)

This is an optional step that we’ll be skipping for this tutorial. Scroll down to the end of the Scopes section and click on the SAVE AND CONTINUE button to proceed.

Continuing past the Google Cloud scopes setup

Note: For more information on Gmail API scopes, please see Google’s developer documentation.


Setting Up Your OAuth Client ID

Next, you’ll need to fill out some information about your OAuth Client ID.

From the Application type dropdown, select the Web application option. Once you do so, more fields will automatically populate.

Select web application

You can leave the Name field as the default value or change it to something more relevant. For this example, we’ll keep the default name, Web client 1.

OAuth name

Next, skip the Authorized JavaScript origins section and scroll to Authorized redirect URIs.

Click on the + ADD URI button and input the following: https://connect.wpmailsmtp.com/google/. You can also copy this value from your WP Mail SMTP settings and paste it here if you prefer.

Input for URI

Then click on the CREATE button to complete this step.

Click create button

Once your app has been created, the Your Credentials section will expand to show you your Client ID. There’s no need to copy it now, as you’ll access it from another area in a later step.

Instead, go ahead and click the DONE button at the bottom of the page.

Click done button



Updating the Publishing Status From Testing to Production

Google will put your app into Internal mode by default. It’s really important that you switch it to External mode and publish it. Otherwise, your app will be super limited and won’t function properly.


Google Workspace Users

In your Google Cloud Console sidebar, go to APIs & Services » OAuth consent screen. Under User type, click on the MAKE EXTERNAL button.

Clicking the MAKE EXTERNAL button to change the publishing status of a Google Cloud app

Note: Only users within your organization can access your app if the User type is set to Internal. For example, if your Workspace domain is example.com, users can only access your app using an @example.com email address.

External email addresses will see an error that reads Error 403: org_internal when granting WP Mail SMTP access to your app.

In the popup window that appears, select the In production option. Then click on CONFIRM.

Setting the Google Cloud app publishing status to In production

Gmail Users

If you’re not using Google Workspace, you won’t see the MAKE EXTERNAL option. Instead, you’ll need to publish your Google app.

To do so, go to APIs & Services » OAuth consent screen. Under Publishing status, you’ll see the app status is set to Testing. Go ahead and click the PUBLISH APP button to update your app status.

Publish app

In the overlay that appears, click CONFIRM to publish your app.

Confirm app publishing

Once confirmation is complete, you’ll see that your app’s Publishing status is now In production.

Checking the publishing status of a Google Cloud app

Granting Your Site Google / Gmail Permissions

Next, click on Credentials in the left side menu.

api credentials page

Once you’re on the Credentials page, in the OAuth 2.0 Client IDs section you can see the details of the web application you just created. To view the Client ID and Client Secret, click the pencil icon.

Click pencil icon

This will open all of the details for your app. On the right side of this page, you’ll see the Client ID and Client secret values.

Client ID and client secret