Google

Overview

Adding a Login with Google button to FusionAuth is straightforward, and this guide will walk you through the steps necessary to collect the credentials from Google in order to enable this Social login.

Once you have completed this configuration you will be able to enable the Google login button for one or more FusionAuth Applications. Below is an example login page with the Google Identity Provider enabled.

Here's a diagram of the login flow between:

• the user
• your application
• FusionAuth and
• a remote identity provider such as Google

Logging In Using Google

Although this looks complex, the user only sees a few screens, such as the FusionAuth login screen, the Google login screen, and your application.

Create a Google Cloud Account

Ensure you have a Google login, and then navigate to the Google Cloud console.

Create Google OAuth client credentials

In the Google Cloud console, find the APIs & Services Credentials by navigating to APIs and Services -> Credentials.

If you are prompted to select or create a project, do that now. In the following example I will need to create my first project before I can create credentials. I will call the project Pied Piper.

Now that you have selected or created your first project, navigate to APIs & Services -> Credentials and then click on Create credentials and select OAuth client ID .

If you see an alert indicating you first need to configure the content screen, do that now by clicking on Configure consent screen.

You will be prompted to define a consent type, typically External . Click Create.

On this panel, you will need to fill out the required fields and then click Save.

In this example I have set the following fields.

• Application name
• User support email (not shown)
• App logo (not shown)
• Authorized domains
• Application Homepage link
• Application Privacy Policy link
• Application Terms of Service link
• Authorized domains
• Developer contact information (not shown)

Once this is complete, you can add or update scopes by clicking on the Add or remove scopes button. It is typical to select userinfo.email and userinfo.profile as well as openid, but feel free to enable any you would like. View the full list of Google scopes.

These same scopes should be referenced in the IdP configuration in FusionAuth, which is configured later in this process.

Then, click Save and continue after optionally adding any test users.

Navigate to APIs & Services -> Credentials and then click on Create credentials and select OAuth client ID .

How you configure this panel depends on the type of login method interaction used. In this example I have specified https://login.piedpiper.com because this is the URL of FusionAuth for Pied Piper.

If using a redirect method, add an Authorized redirect URI. This should be an absolute URL. For example, if FusionAuth is installed at login.piedpiper.com, the value would be https://login.piedpiper.com/oauth2/callback.

If using a popup, select Web application, specify the name of the credential and fill out the Authorized JavaScript origins field. This value should be the origin of your application login page.

In the image below, we are showcasing details needed for both the popup login method (added an origin) and the redirect URL. In the real world you will fill in either option, but not both (depending on your business needs).

Now you have completed creating a Google OAuth client credential. If you select the newly created credential, you will be provided with the Client ID and Client secret necessary for the next step.

Create a Google Identity Provider

The last step will be to create a Google Identity Provider in FusionAuth. To create an Identity Provider navigate to Settings -> Identity Providers and click the menu in the upper right corner and select Add Google.

This will take you to the Add Google panel, and you’ll fill out the Client Id and Client secret required fields using the values found in the Google Cloud console. Provide the scopes needed for your application which you configured in the Google Console above. The button text is also required but it will be defaulted to Login with Google, you may optionally modify this default value.

To enable this identity provider for an application, find your application name in the Applications configuration section at the bottom of this panel. You will always see the FusionAuth application, this application represents the FusionAuth administrative user interface. If you wish to be able to log into FusionAuth with this provider, you may enable this application.

In the following screenshot you will see that we have enabled this login provider for the Pied Piper application and enabled Create registration. Enabling create registration means that a user does not need to be manually registered for the application prior to using this login provider.

For example, when a new user attempts to log into Pied Piper using Google, if their user does not exist in FusionAuth it will be created dynamically, and if the Create registration toggle has been enabled, the user will also be registered for Pied Piper and assigned any default roles assigned by the application.

If you do not wish to automatically provision a user for this application when logging in with Google, leave Create registration off. You will need to manually register a user for this application before they may Sign in with Google.

That's it, now the Sign in with Google button will show up on the login page for the Pied Piper application.

Form Fields

Options

The Options tab can be used to configure the Google identity provider by providing properties for the Google Identity Services API.

Form Fields

auto_prompt=true
auto_select=false
cancel_on_tap_outside=false
context=signin
itp_support=true

logo_alignment=left
shape=rectangular
size=large
text=signin_with
theme=outline
type=standard

Google One Tap

Google One Tap provides registration and authentication with a single user action on supporting applications.

Google One Tap can be enabled in FusionAuth 1.44.0 and later by including auto_prompt=true in the API properties configuration.

Building Your Own Integration

If you are building your own login experience, you'll want to start the identity provider flow yourself and then complete the login.

You might do this if you are using the Login API rather than using the hosted FusionAuth login pages. Here's a diagram illustrating this login flow.

An Integration With An Identity Provider Using The API

Completing the login is documented further in the API.

If you require a refresh token after completing the login, ensure Enable JWT Refresh is true in the application configuration. This is found in the administrative user interface by navigating to Applications -> Your Application -> Security -> Login API settings.

Custom Parameters

Google sometimes requires custom URL parameters when starting a login to access certain functionality. Examples include:

• access_type=offline if you want a refresh token from Google.
• prompt=select_account if you want to force an account selection screen.

There are more options covered here.

When you need such custom parameters, the Google Identity Provider won’t work. Instead, do the following:

• Create an OpenId Connect Identity Provider.
• Set Discover endpoints to be false.
• Enter the endpoints manually from the Discovery document.
• Append whatever additional parameters are needed to the Authorization endpoint value. For example, you might end up with something like https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&prompt=select_account .