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.
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.
Follow the steps below to configure Google login.
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.
In order to create your OAuth application, go to your [Google Developers Console] (https://console.developers.google.com/). In the dropdown at the top of the page, select your project.
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.
Return to Credentials menu and create an OAuth2 Client ID.
- For Application Type, select "Web Application".
- For Authorized Redirect URIs, set your redirect URI (for example, http://localhost:3000/account/social/success).
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.
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.
Scopes let you specify exactly what type of information your application can fetch from your users after they grant it access— and the generated access token includes these approved scopes. Frontegg currently fetches a user profile and user email as default scopes when users authenticate via their Google account. You can add additional, custom scopes to your social login via your Frontegg portal. To do so, go to [Environment name] > Authentication > Social login > Custom > Scopes. You can check Google's supported scopes here.
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] (https://console.developers.google.com/) is required. On your Google Developers Console, Go to OAuth project and OAuth credentials, your credentials and add the following under
- 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)
Updated 3 days ago