## Facebook login

To enable your users to log in with Facebook, start by activating Facebook login in the builder and then set up an OAuth application with Facebook.

Follow the steps below for setup.

## Enabling Facebook login in builder

1. Open the **Frontegg portal**.
2. Click on the **Login Box** button.
3. In the left panel, toggle **Facebook** to on.


![Facebook-Login-1](/assets/facebook-login-1.46812a97885843cc3a30418242cb7aed5bc13b5562fc930cf307e2e503c21d14.ad6b1bda.png)

1. Click **Review to Publish**, then **Publish to Dev**.


After modifying any settings, commit your changes and publish them to apply across your environments.

## Creating a Facebook application

Complete the following steps to configure Facebook login.

### Step 1: Register your app

1. Go to [Facebook for Developers](https://developers.facebook.com/), log in, and select **My Apps**.


![Facebook-Login-2](/assets/facebook-login-2.65467978e3506f36c4c9e50808665cfec0d3b65e90198e106429febf10fa87c6.ad6b1bda.png)

1. Click **Create App** and select an app type. For more information, refer to [Facebook’s app type documentation](https://developers.facebook.com/docs/development/create-an-app/app-dashboard/app-types/).


![Facebook-Login-3](/assets/facebook-login-3.d8797fcae62f13cf92e055e0314fb749de664929baf51ffc588bc8348346a816.ad6b1bda.png)

1. Set your **App Name** and **Contact Email** for the app, then click **Create App**.


![Facebook-Login-4](/assets/facebook-login-4.88eec8650cf4128a6166e53229fd901d213b2c08d6b2388a96136cbd4fd417d2.ad6b1bda.png)

### Step 2: Add Facebook login

1. In your application’s dashboard, click **Set Up** for **Facebook Login**.


![Facebook-Login-5](/assets/facebook-login-5.224c8168e65c5a514d661ac00c5bcb8fe957ec7d6ad9ce0b7f56481d65bc09b1.ad6b1bda.png)

1. Enable **Client OAuth Login** and **Web OAuth Login**.
2. Under **Valid OAuth Redirect URIs**, enter the redirect URI where users should be sent after login success:
  - For hosted login, use `https://{{YOUR-FRONTEGG-DOMAIN}}/oauth/account/social/success`.
  - For embedded login, use `https://{{YOUR-APPLICATION-URL}}/account/social/success`.


![Facebook-Login-6](/assets/facebook-login-6.00589165b6d9d7a4cdb0ac00586702811f12b58499dea5d7c7d9572ae9a4d45c.ad6b1bda.png)

### Step 3: Enable `public_profile` permission

1. Go to **App Review** ➜ **Permissions and Features**.
2. Locate `public_profile` and click **Get Advanced Access**.


![Facebook-Login-7](/assets/facebook-login-7.9a590f49417b01856652e1d6f09ad87e7c96526d1f6ebf132d1941e48ee41b8b.ad6b1bda.png)

Advanced Permission
If the **Get Advanced Access** option is unavailable, your app type may already have this permission by default, or it may not be available for that type.

## Entering Facebook credentials in Frontegg

Once your app is registered and configured, you can enter your Facebook credentials in Frontegg.

Test environment
If you’re still developing your app, you can create a **Facebook Test App** and enter those credentials into the Frontegg portal. Once you’re ready for production, replace the test credentials with those for your production app.

1. Copy the **App ID** and **App Secret** from your Facebook app’s settings.


![Facebook-Login-8](/assets/facebook-login-8.3921ab9d9b5e3e4681680a1e73e156e4d614f9e2da0922a83d6cf2bad4744f52.ad6b1bda.png)

1. In Frontegg, go to [ENVIRONMENT] → Authentication → Social Logins.


![Facebook-Login-9](/assets/facebook-login-9.204a2c991a407c81caea4f5bf79cc62578590cea4cd6b3a244a1932f67f0f4ca.ad6b1bda.png)

1. Click **Manage** on the **Facebook** card, then enter your **App ID** and **App Secret**. Save and publish your changes.


![Facebook-Login-10](/assets/facebook-login-10.79cc1ad20b588f7995ad94a839bd896a25ffecf5ab9c2a30b44eb2c511e23ba4.ad6b1bda.png)

## Testing Facebook login

1. Go to your login screen, where you should now see a Facebook button that redirects to the Facebook OAuth Consent screen.
2. Test to ensure that login functionality is working.


Setting Up Facebook Login Permissions
By default, only invited users can log in with Facebook. To allow new users to sign up using Facebook, enable **Allow Signups** in the Login Box builder’s left panel.

## Creating a test environment in Facebook

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

### Step 1: Create test app

1. In the **My Apps** section, select your app’s name from the top left corner and click **Create Test App**.
2. Enter a name for the test app, then click **Create Test App**.


### Step 2: Add Facebook login

Follow the same setup steps as for your production app:

1. From the test app’s dashboard, click **Set Up** for Facebook Login.
2. Copy the test **App ID** and **App Secret** and enter them in Frontegg as described earlier.


## Customizing authentication scopes for Facebook

Scopes let you specify what type of information your application can access after users grant it permission. By default, Frontegg fetches user profile and email scopes for Facebook login. To add more custom scopes:

1. In Frontegg, go to [ENVIRONMENT] → Authentication → Social Login → Custom → Scopes.
2. Check Facebook's supported scopes [here](https://developers.facebook.com/docs/permissions/reference).