Allowing users to authenticate using an existing social account is commonplace for good reasons. It is very user friendly, eliminates the need for users to remember another password, and can provide greater security than simple password login. Here are guides to help you implement social logins.

Social logins are great for you and your users. They eliminate the need to create and manage a new set of credentials because they use existing credentials from popular OAuth providers. This makes logging in and signing up as easy as clicking a button.

For your users, this results in enhanced security and an easy authentication experience, which in turn results for you in higher conversion rates and more daily active users.

Frontegg makes it simple to add social logins to your application.

Read below to learn how to enable social logins so that users can seamlessly log in and sign up to your application.

Enable Social Logins

Here is how to enable social logins.

Go to Home and click on the Login Box builder.

Toggle the switch to on for each social login you want to enable.

You are done! Go to your log in and sign up pages and try it out.

To get you up and running quickly in development only, Frontegg provides you with preconfigured shared OAuth credentials and redirect URLs. This means the social logins work immediately when toggled on without requiring additional configuration.

❗️

In Development Only

While helpful for development, the preconfigured shared OAuth credentials are not secure. Therefore, please configure your social logins before going to production. See the links to our guides below.

🚧

Editing Builder

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.

Frontegg currently offers social login capabilities for Google, GitHub, Microsoft, and Facebook. We are continuing to add more providers, so please stay tuned to see what else we add!

Configure Social Logins

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

📘

For instance, go to the development environment at Environments ➜ Development ➜ Authentication ➜ Social Logins

For each of the social logins you enable, click the manage button.

On the following page, enter the required information from your social accounts, like clientIds, secrets, and redirect urls.

Here is an example page for Google.

You will get the clientId and secret from the OAuth provider when you configure the social login. The redirect URL is a URL address for your application.

📘

About Redirect URLs

When a user clicks one of the social login buttons in the login box, your application redirects the user to the OAuth provider's authentication page where your user will login or signup. After authenticating your user, the OAuth provider redirects the user from the authentication page to your redirect URL.

Save your changes and publish when done.

Although configuring a social login is straightforward, our guides streamline the process by telling you what information you need and where to find it.

📘

The configuration pages in your Frontegg Settings tell you what information you need from each social login provider. So feel free to skip the guides if you already know where to find the required information.

👍

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.

Guides

This is a list of guides to help you configure social logins.