To enable your users to login with Google, you must enable Google login in the builder and then create an application with Google to serve as the OAuth provider.

Read below to learn how.

Enable In Builder

Go to Home and click on the Login Box builder.

In the left panel, toggle the switch to on for Google.

🚧

When making changes to the settings in the builder, be sure to commit your changes and then publish for them to take effect and to configure them in your environments.

Create Google App

Follow the steps to below to configure Google login.

👍

Moving Environments

When moving a project from one environment to another, Frontegg moves the social login environment configurations for you. For instance, if moving from development to production, Frontegg moves the development social login configurations to production.

Step 1: Open Project

In order to create your OAuth application, go to your Google Developers Console. In the dropdown at the top of the page, select your project.

Step 2: Create Credentials

Open the Credentials menu. Click on Create Credentials and select "OAuth Client ID".

Follow the instructions to create and configure the consent screen.

Enter your application name and contact email. Then complete the numbered steps for building the consent screen.

Step 3: Create Client ID

Return to Credentials menu and create an OAuth2 Client ID.

• For Application Type, select "Web Application".
• For Authorized JavaScript Origins, set your application URI (for example, http://localhost:3000).
• For Authorized Redirect URIs, set your redirect URI (for example, http://localhost:3000/account/social/success).
  
  

Step 4: Enter Credentials In Frontegg

Copy the Client ID and Client Secret from Google.

Go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Authentication ➜ Social Logins.

Click on the Google manage button.

Enter your Google Client ID, Client Secret, and Redirect URL. Then save and publish.

Step 5: Test Google Button

On your login screen, you should see a Google button that redirects to the Google OAuth Consent screen for login. Test it to make sure it works.

📘

Set Who Can Login With Google

By default, only invited users can login with Google. If you want to allow new users to signup with Google, go to the Login Box builder and enable Allow Signups in the left panel.

Supporting Google One Tap

The Frontegg login dialog supports Google One Tap out of the box. The Google One Tap will show on supported browsers by default for both hosted login and embedded login.

In order to allow Google One tap, a change in the go to your Google Developers Console is required. On your Google Developers Console, Go to OAuth project and OAuth credentials, your credentials and add the following under Authorized JavaScript origins:

• For hosted login mode, add https://[YOUR-FRONTEGG-DOMAIN]/oauth
• For embedded login mode, add https://[YOUR-APP-URL] (In case of using http://localhost:[PORT] add http://localhost as well for the Google One Tap to load correctly)

And... That's it! You are good to go! Google One Tap should now be available on your application.