Google Social Connection to Login

In this lab, you will:

• Set up a Google developer project.
• Test a Google social connection for development.
• Configure and test a Google social connection for production.

Why Use Google For Social Login?

Google is a popular social connection that allows users to log in to your application using their Google profile. Google social login is easy to set up. Google lets you set up a developer account for free with a limited yet generous number of Google Cloud projects. Google does not require you to have a paid developer account to fully enable Google as a social identity provider.

Auth0 makes it even easier to get started with Google. Every new tenant has the Google social connection enabled by default. You don't even have to set up a Google Cloud project to see Google social login in action. Auth0 maintains a set of developer keys you can use to start testing Google social login in your applications in development. You'll learn how to use those Google dev keys and set up ones for production throughout this exercise.

What if your users modify their Google profile information? By default, Auth0 automatically syncs Google user profile data with each user login, which ensures that changes made in the user's Google profile are automatically updated in Auth0. Optionally, you can disable user profile data synchronization to keep the scope of updating user profile information within your application.

Let's get started with using Google to log in!

Lab Setup

Create an Auth0 Account

If you already have an Auth0 account, you can log in to your tenant and continue to the next step.

Otherwise, sign up for a free Auth0 account.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Test the Default Google Social Connection

Use the Auth0 Dashboard to log in

Instructions

• Visit the Auth0 Dashboard home page.
• Locate the "Try your Login box" under the "Next Steps" section.
• Click the "Try it out" link.

Expected results

Notice that there's an alert on the top-right corner of this page. This alert warns you about using Auth0 Dev Keys for one or more of your connections and that you should not use those keys in production.

Auth0 Google dev keys are not intended or safe for production environments or to handle real users' traffic. The goal of dev keys is only to allow developers to see how their applications can work with Auth0 quickly. Let's go over how you can set up Google production keys for your Auth0 social connection.

Set Up Google Production Keys

Auth0 needs credentials to connect with Google authorization servers when processing social logins. You need a Google Developer account to create a Google Cloud project where you can set up those credentials. If you don't have one already, sign up for a Google Developer account.

Create a Google Project

Follow the steps to "Create a project" from the "Create, shut down, and restore projects" document from the Google API Console Help site:

• Visit the Google API Console.
• Click the "Create Project" button.
• Provide a project name such as "Hello Social Login".
• Click on the "Create" button.

Once you complete this process, a new "APIs & Services" page will load. Ensure that your project is selected in the drop-down next to the "Google Cloud" logo on the navigation bar.

You need an OAuth client ID and client secret to identify your application in Google's OAuth servers. To do so, you must configure an OAuth consent screen and create credentials for your Google Cloud project.

Configure consent screen

According to Google, when you use OAuth 2.0 for authorization, your application requests authorizations for one or more scopes of access from a Google Account. Google displays a consent screen to the user, including a summary of your project, its policies, and the requested access scopes.

As such, before creating an OAuth client ID, you must first configure the OAuth consent screen with information about your application.

Click the "Configure Consent Screen" on the page to start the process, filling out the required information for each section.

1. OAuth Consent Screen

Choose how you want to configure and register your app, including your target users. You can only associate one app with your project.

• Select "External" for the "User Type".
  • You can only select "Internal" if your Google account is part of a Google Workspace.
• Click the "Create" button.

Next, a screen loads for you to configure the app registration screen.

Locate the "App Information" section and fill out its form as follows:

• Use "Hello World" as the "App name".
• Select your Google account email for the "User support email".

Locate the "App domain" section and then the "Authorized domains" subsection to perform the following steps:

• Click on the "Add Domain" button.
• Enter auth0.com as the value of the "Authorized domain".
• Click out of the field to confirm your input.

Locate the "Developer contact information" section and enter your Google account email address as the value of "Email addresses".

Finally, click the "Save and Continue" button.

2. Scopes

Scopes allow your project to access specific types of private user data from their Google Account. By default, Auth0 requests Google for the user's basic and extended profile. Google presents this request to the user at the time they log in:

"To continue, Google will share your name, email address, language preference, and profile picture with auth0.com."

You don't need to specify any additional scopes for this lab. As such, click "Save and Continue".

3. Test Users

You don't need to specify test users as you are using Auth0. Click "Save and Continue".

4. Summary

This section shows you a recap of the OAuth consent screen settings and any scopes or test users you could have set up.

Click "Back to Dashboard" to continue.

Create a Google OAuth Client ID

For this section, you will need the value of your Auth0 domain, which you can obtain by following these instructions:

• Open the Applications section of the Auth0 Dashboard.
• Click on any of the applications that show up.
• Click on the "Settings" tab of the application page.
• Locate the "Domain" field under the "Basic Information" section.
• Store the "Domain" value in the following field to set up your Google credentials in the next section:

Proceed to create credentials to access the Google authorization servers as follows:

• Click the "Credentials" tab on the left-hand menu.
• Click the "Create Credentials" button and select "OAuth client ID".
• Select "Web Application" as the "Application type".
• Provide "Hello World" as the "Name".

Locate the "Authorized JavaScript origins" section and follow these steps:

• Click the "Add URI" button.
• Enter your Auth0 Domain as the value of the field that comes up:

https://AUTH0-DOMAIN

Next, locate the "Authorized redirect URIs" section and follow these steps:

• Click the "Add URI" button.
• Enter the following as the value of the field that comes up:

https://AUTH0-DOMAIN/login/callback

Finally, click the "Create" button.

You'll see an "OAuth client created" modal, which displays your OAuth Client ID and a Client Secret. You'll need this information in the next section.

Configure the Google Social Connection

Follow these steps to integrate the Auth0 social connection in your tenant with your Google Cloud project:

• Head to the Auth0 Dashboard.
• Click the "Authentication" tab on the left-hand menu and then click the "Social" option.
• Select the google-oauth2 connection.
• Copy the Client ID from the Google Cloud project into the "Client ID" field of your google-oauth2 "Settings" page.
• Copy the Client Secret from the Google Cloud project into the "Client Secret" field of your google-oauth2 "Settings" page.
• Scroll to the bottom of the page and click "Save Changes".

Test Your Production Google Social Connection

You ensure you have configured your Google social connection correctly using the Auth0 Dashboard and the client demo application.

Use the Auth0 Dashboard to log in

Instructions

• Visit the Auth0 Dashboard home page.
• Locate the "Try your Login box" under the "Next Steps" section.
• Click the "Try it out" link.

Expected results

Notice that the login page no longer has the dev keys alert.

Proceed to log in with Google to fully test the social connection, if you'd like.

Recap and Insights

You learned the value of using Auth0 dev keys to prototype and test Google social login quickly. You also learned how to create a Google consent screen and set of credentials that you can use to help your users log in while your app is in production.

As a final piece of advice, for purposes of data sanitation, management, and regional privacy policies, it is a good idea to separate data in environments. A best practice when working with Auth0 is to have different tenants for your project environments.

For example, it's recommended for developers to specify a production tenant. A production tenant gets higher rate limits than non-production tenants. Check out the "Set Up Multiple Environments" Auth0 document to learn more about how to set up development, staging, and production environments in the Auth0 Identity Platform.

This practice would also cover key management. You can create a Google Cloud project that pairs with each Auth0 tenant. Then, you can configure the Google social connection for each tenant using the keys from its corresponding Google Cloud project.

Under the Hood: Auth0 Universal Login

As you have seen, Auth0 allows you to provide a delightful yet robust authentication experience to your users. With Auth0, you can scale up your application security by enabling social identity providers with just a few clicks. With Auth0, developers don't have to invest any time into building complicated sign-up and login forms that need to support different social connections, such as Google, Facebook, and GitHub.

Auth0 Universal Login lets developers delegate the responsibility of building complex login forms that support social identity providers to Auth0. When you use Auth0 to protect your client applications, you delegate the authentication process to a centralized login page: the Auth0 Universal Login page.

With Universal Login, when your users need to log in, your client redirects them to a central domain, through which Auth0 performs the authentication process. Once your users log in successfully. Auth0 takes them back to your application. With Auth0, you can use your tenant URL or a custom domain as your central domain for authentication. Auth0 Universal Login supports both login and sign-up transactions.

Google services are a solid example of centralized authentication. Whenever you need to access any Google service (such as Gmail, Google Calendar, YouTube, etc.), if you have not logged in yet, Google will redirect you to https://accounts.google.com to log in. Once you successfully log in, Google redirects you to the application that initialized the login process.

With every successful login transaction, Auth0 returns to your client application an ID token and an access token. Your client application can use the ID token to personalize the user interface. It can use the access token to make authenticated requests to access protected resources from an API that you also protect using Auth0.