Facebook Login

To enable your users to login with Facebook, you must enable Facebook login in the builder and then create an application with Facebook 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 Facebook.

28802880

👍

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: Register Your App

To create your OAuth application, go to Facebook for Developers.

Next, select My Apps .

19191919

Then, click on Create App.

19191919

Select an app type. Learn more about Facebook's app types, set your app name, and set your app contact email.

19191919

Step 2: Add Facebook Login

On your Facebook application's dashboard, click the Facebook Login Set Up button.

19191919

Then, enable Client OAuth Login, enable Web OAuth Login, and set your Redirect URI (for example, http://localhost:3000/account/social/success).

19191919

Step 3: Enable public_profile advanced permission

Depending upon which Facebook application type you registered, you may need to enable public_profile advanced permission.

In App Review, select Permissions and Features, look for public_profile and click Get Advanced Access.

19191919

📘

Advanced Permission

If you do not see the option to Get Advanced Access, either the app type you selected already has it by default or else it is not available with the app type you selected.


Step 4: Enter Credentials In Frontegg


👍

Test Environment

If you are still developing your app, create a Facebook test app and enter those credentials into the Frontegg Portal. See the guide. When ready for production, switch your credentials to your Facebook production app.


Copy the App ID and App Secret from Facebook Login.

19191919

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

Click on the Facebook manage button.

28802880

Enter your Facebook information. Then save and publish.


28802880

Step 5: Test Facebook Button

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

14401440

📘

Set Who Can Login With Facebook

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


Create Test Environment

To test your app in a development environment, create a Facebook test app.

Step 1: Create Test App

To create a test app, click on your app name on the top left corner. Select Create Test App .

28802880

Give it a name and select Create Test App.

28802880

Step 2: Add Facebook Login

To add Facebook login, it is the same process as for the setup you did for the production app:

  • On your app's dashboard, click Set Up for Facebook Login.

28802880

Step 3: Enter Credential In Frontegg

From your Facebook test app, copy your App ID and App Secret and enter them into the Facebook Login configuration section of your Frontegg Portal.

28802880

Go to Environments ➜ [NAME OF ENVIRONMENT] ➜ Authentication ➜ Social Logins, click on the Facebook Login manage button and enter your Facebook information.


Did this page help you?