Configure Facebook provider for sign in with Facebook

Edited

In this article we will cover how to create a developer app with facebook and how to integrate it into your Next Identity application so end users can sign in to your website using their Facebook credentials.

Prerequisites

  • A Facebook account (personal account)

  • Access to your website's domain and hosting

  • Basic understanding of OAuth 2.0 redirect flows

  • Access to Next Identity Console with permission to set up providers



Step 1: Create a Facebook Developer Account

1. Go to developers.facebook.com

2. Click Login in the top right corner

3. Log in with your existing Facebook account (you may have to complete multi factor authentication to confirm your account)

4. Complete the registration process:

  • Accept the Facebook Platform Terms and Policies

  • Verify your account via email or phone if prompted

5. Your developer account is now created

Step 2: Create a Facebook App

1. From the Facebook Developers dashboard, click My Apps

2. Click Create App

3. Fill in the app details:

  • App Name: Choose a name (e.g., "My Website Login")

  • App Contact Email: Provide a valid email address

  • click Next

4. Select your app use cases:

  • Choose Authenticate and Request Data from Users with Facebook Login

  • Click Next

5. Select your business (if applicable):

  • Choose your desired business portfolio to connect to from the list provided if you want to connect to one.

  • Choose I don't want to connect a business portfolio yet if you do not want to connect to a business portfolio

  • Click Next

6. Review the publishing requirements for your app:

  • These will vary depending on what use cases and business use you have selected.

  • The requirements each include links to further information if needed.

  • Click Next

7. Review the overview of your app configurations:

  • Choose Go to dashboard if everything looks correct and you want to complete creation of your app

  • Choose Previous if you need to make adjustments.

Step 3: Customize the Facebook Application

1. From your app dashboard, you will see a list of App Customization and requirements steps that you must complete before publishing your app.

2. Choose Customize the authenticate and request data from users with Facebook Login use case

3. Under Permissions and features select:

  • Email

  • Public profile (should be automatically selected)

Step 4: Configure Facebook Login Settings

1. In the left sidebar, navigate to Settings

2. Configure the following settings:

Valid OAuth Redirect URIs

  • Add your callback URL(s) where Facebook will redirect after authentication - Example: https://yourdomain.com/auth/facebook/callback

  • You can add multiple URLs (e.g., for staging and production)

  • Important: URLs must use HTTPS in production (HTTP only allowed for localhost)

Other Settings

  • Login from Devices: Enable if you need device login flow

  • Force Web OAuth Reauthentication: Enable for additional security if needed

  • Use Strict Mode for Redirect URIs: Recommended for production

3. Click Save Changes

Step 5: Configure App Settings

1. Navigate to Settings > Basic in the left sidebar

2. Note your credentials:

  • App ID: Your application's unique identifier

  • App Secret: Your application's secret key (keep this secure!)

3. Add your App Domain:

  • Enter your website's domain (e.g., yourdomain.com)

  • Do not include http:// or https://

4. Add Privacy Policy URL (required for public apps)

5. Add Terms of Service URL (recommended)

6. Add User Data Deletion URL where users can request their data be deleted (see more details for this requirement on the facebook site itself).

6. Click Save Changes

Step 7: Configure App Mode

Your app starts in Development Mode, which limits access to you and other developers/testers.

Development Mode

  • Only accessible by app developers, testers, and admins

  • Use this for testing your integration

  • To add testers: Roles > Test Users or Roles > Testers

Going Live

When ready for production:

1. Navigate to App Review > Requests

2. Complete any required information

3. Submit for review if using advanced permissions

4. Toggle your app to Live in Settings > Basic

Step 8: Connect to Next Identity

Now that your Facebook app is configured, you'll connect it to Next Identity so your users can sign in with Facebook.

Required Information From your Facebook app (Settings > Basic), you'll need:

  • App ID: Your application's unique identifier

  • App Secret: Your application's secret key (click Show to reveal)

Next Identity Console Configuration for Facebook App

1. Log in to Next Identity as an administrator

2. Navigate to your application's social login settings by going to the side navigation bar and choosing Integrations, then scroll down to the Social Providers section

3. Select Add Social Authentication Provider

4. Select Facebook as a social identity provider

5. Enter a Name and Description for this social connection (for your reference only, this does not have to match any Facebook app names or Identifiers)

6. Enter your Facebook credentials:

  • App ID: Paste from Facebook

  • App Secret: Paste from Facebook

5. Click Save to save and close the configuration modal

6. Once you are back at the landing screen, in order to use this Facebook integration for you environments choose the three dots next to that facebook integration, and choose Set as Default and then select the environments it should be the default Facebook integration for, then select Apply.

7. On that configuration modal to set the Facebook configuration as your default for your environments, you will also see the recommended callback url to configure within the Facebook configuration. You may need to log back into Facebook developer dashboard and add that.

Next Identity Console Add Sign in with Facebook to a Journey

1. Log in to Next Identity as an administrator

2. Navigate to your desired journey by going to the side navigation bar and choosing Journeys.

3. From the Journeys landing page, select the specific journey you want to add social authentication for, and select the three dots to display the menu, and select Edit to take you to the Journeys builder.

3. On the journeys builder screen, select edit icon for the login card.

4. On the configure login modal that pops up, you should be able to scroll and see social authentication options, if Facebook has been correctly configured you should see a toggle to turn it on.

5. Toggle Facebook on

5. Click Save Changes on that modal screen, you will be taken back to the journeys builder screen.

6. Click Save in Development on the Journeys Builder screen.

7. Review the changes in the pop up modal and select Save Journey if everything looks good and you can see that the Apple social sign in has been turned on.

Important Note on Redirect URIs

Next Identity handles the OAuth redirect flow for you. When configuring your Facebook app's Valid OAuth Redirect URIs (Step 4), you must use the callback URL provided by Next Identity, which will look something like:

https://your-tenant.nextidentity.com/auth/facebook/callback

Your Next Identity administrator console will display the exact redirect URI you need to add to Facebook.

Testing Your Integration

1. Ensure your app is in Development Mode

2. Add your Facebook account as an app administrator or developer

3. Test the complete login flow on your website

4. Verify you receive the expected user data (email, name, etc.)

5. Test error scenarios (user denies permission, etc.)

Common Issues and Solutions

"URL Blocked: This redirect failed because..."

  • Verify your redirect URI exactly matches what's configured in Facebook Login Settings

  • Ensure the URL uses HTTPS (or HTTP for localhost only)

  • Check that your App Domain is correctly set

"App Not Set Up: This app is still in development mode"

  • App is not live yet

  • this is expected during development

  • Only users with assigned roles can test

  • Add testers via Roles > Test Users

"Can't Load URL: The domain of this URL isn't included in the app's domains"

  • Add your domain to App Domains in Settings > Basic

  • Domain should not include protocol (no http:// or https://)

Email permission not working

  • Verify email scope is included in your authorization request

  • Some users may not have verified emails on Facebook

  • Check if email permission requires App Review for your use case

Next Steps

  • Consider adding other social login providers for user convenience

Additional Resources

Facebook Login Documentation

Was this article helpful?

Sorry about that! Care to tell us more?

Thanks for the feedback!

There was an issue submitting your feedback
Please check your connection and try again.