Login with Google

Use Google as an OAuth provider

  2 minute read  

Learn how to use Google as a third-party OAuth provider, creating a “Login with Google” button after a user enters their email.

Creating the resources in Google

The first part is to create the OAuth client in the Google Cloud Platform console. This can be done by performing the following steps.

If you have already created a project in GCP, and want to use it for Authproject, you can skip this section.

Click the Project button in the top left.

Select project in the top left

Click on “New Project” in the top right.

Click New Project

Enter the details for your new project. If you are not planning on utilizing the Google Cloud Platform, call it something like “Authproject OAuth2.”

Enter the project details

Select the newly created project.

Select the project

Once the project has been created and has been selected, click on the menu button in the top left, then select “APIs & Services.”

Select APIs & Services

Then, select “OAuth Consent Screen” in the left menu.

Select OAuth Consent Screen

Click on “Get Started.”

Click Get Started

Fill out the relevant fields. The information entered should be specific to your authentication domain. Replace “Authproject” with the name of your application or company, and enter your support email in the box.

Enter information

Select “External.”

Select External

Enter the email address to which you would like updates delivered, for when Google sends notifications about this OAuth consent screen.

Enter your email

Agree to the terms and hit “Continue” and “Create.”

Agree and hit Continue

Create the OAuth Client

On the OAuth Overview page, click on “Create OAuth Client.”

Click on Create OAuth Client

Select “Web Application,” enter a name, and hit Create at the bottom.

Select Web Application, enter a name, and click Create

Copy the Client ID and Client Secret, and save them somewhere safe. Optionally, download them as JSON and save it for later.

Copy the Client ID and Client Secret

Create the Provider in Authproject

Navigate to the Authproject dashboard, and select “Providers.”

Select Providers

Click on “Create Provider” in the top right.

Click Create Provider

Enter the details for the provider as you saved from Google before. Name the provider “Google,” and set the Discovery URL to https://accounts.google.com/.well-known/openid-configuration.

Enter Provider details