Skip to main content

Setup user authentication with Login with Facebook and Meta

This article provides a quick start guide for adding Facebook Login to Authress, so that your users can use their Facebook Account Login to authenticate into your software.

Login with Facebook

info

If you are looking to enable admin login access into the Authress Management Portal using your corporate IdP see the Authress Management Portal SSO Configuration.

In this guide we’ll set up Facebook Accounts login. Setting up authentication requires the following parts:

  1. Authress-Facebook OAuth configuration
  2. Facebook Developer Network Registration
  3. Testing the configuration

Prerequisite: Facebook Account + Facebook Developer Network​

In order to enable your users to log in with their Facebook Account, you will first need a Facebook account. You can do that by Registering for a Facebook account.

You’ll need to create a Facebook account to set up applications on the Facebook Developer Network (YDN).

Authress Connection configuration​

The first step is enabling the Facebook preconfigured Authress connection in the Authress Management Portal.

Authress preconfigured Facebook connection

You will see there are the missing fields Client ID and Client Secret.

Facebook App Registration​

Now we can create a new Facebook Application. This Facebook Application is what your users will see when the choose to sign in with Facebook.

Navigate to Meta for Developers to create an application.

  • Enter a Application Name as Authress, click No I'm not building a game, and set the App contact email to be your application's support email.

App Registration type selection

1. Authentication and account creation​

Then in the Authentication and account creation section click Customize, then click Settings > Go to settings

  • Enable Login with the JavaScript SDK.

  • Set the Valid OAuth Redirect URLs to be your Authress Custom Domain url. This is the domain you set up in your Authress account. We'll assume for this example it is https://auth.yourdomain.com and therefore the redirect URI is https://auth.yourdomain.com/login. This value is available in your new Authress Connection for Facebook in the Complete Setup section of the connection from the previous step.

Complete Authress Setup

  • Then click Save changes.

2. Permissions​

Then under Permissions add email and whatever other scopes and permissions are necessary for your app.

Set the facebook permissions

3. Facebook Service Client Configuration​

Now that the App is created in Facebook we can copy the App ID and the App secret from the console and store it in Authress as the Client ID and Client Secret.

Navigate to the App Settings and click Basic.

Facebook server registration client ID

Validate the configuration​

Now the setup is complete and you are ready to test connection. You can test the connection in the Authress Connection configuration by clicking Test Connection:

Test Connection in Authress

When everything is configured correctly you'll see the test login success screen:

Correct Facebook configuration in Authress

Troubleshooting​

Invalid Scopes​

If you receive the error Invalid scopes: email where email or another scope is specified, this is because your Authress Identity Connection specifies the Scopes value to be different than the ones that have been approved for your Facebook App in the Facebook App configuration.

Invalid facebook oauth scopes

In this case, review your permissions assigned to the app in the Facebook Developer's portal.

info

If you are using the Authress provided credentials in the Facebook preconfigured connection, instead of one managed by your company, then the scopes will always be email and public_profile and this cannot be changed. If you would like to use different scopes, click the Clone button in the connection, and set the Default Scopes that you would like to use. Alterantively, you can pass in the scopes using the ConnectionProperties parameter found in the LoginClient.authenticate() method.