Search
Close this search box.

Creating a Web App in Your Google Account

About Me

I like being part of a team that never stops learning new things and that also knows how to facilitate them for our clients.

Recent Posts

Follow Us

Weekly Tutorial

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

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.

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.

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

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.

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.

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

Click on the Gmail API result.

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

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.

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.

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.

Configuring Your OAuth Consent Screen

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.

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

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.

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.

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.

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.

Then click on the CREATE button to complete this step.

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.

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.

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

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.

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

Granting Your Site Google / Gmail Permissions

Next, click on Credentials in the left side menu.

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.

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.

Save Client ID and Client secret

Go ahead and copy both of these values and save them in a file under our shared folder.

Leave a Replay