This document explains how to implement Facebook single sign-on (SSO) login for a Mendix application. It involves creating a Facebook developer app to enable the OAuth login functionality. Several Mendix marketplace modules need to be installed to support OpenID Connect for SSO. The Facebook developer app needs to be configured and reviewed before integrating the login button in Mendix. Pages and roles must be set up to allow anonymous users to access the login page and authenticated users to access protected pages. Testing confirms that users can successfully login with their Facebook account and access authorized content.

1. Facebook SSO Integration with Mendix
This blog will explain about social login benefits and how we can implement Sign In using Facebook on our Mendix app.
There are more than 1 million websites or apps are using "SignIn with Facebook" or "Login with Facebook". Do you know why they are
using Facebook login and how it is beneficial in conversion?
According to multiple surveys, there are more than 3 billion users worldwide are using social media and it is around 50% of the world's
population.

2. The biggest challenge and most important things are to make user registration and login quick and easy while developing our application. The
registration forms required a lot of data that need to be filled by users manually and it causes lost, potential users.
Additionally, users need to enter their usernames/emails and passwords in the login forms to authenticate themselves and also need to remember
more individual IDs and passwords.
Social Login allows customers to bring their existing social identities and use them to register and log in without creating a new profile
explicitly.
Facebook is the most favourite social media provider in comparison to other social media providers and the number of active Facebook users
growing day by day.

3. In this blog, I will explain how you can implement “Log in with Facebook” on your Mendix Application or mobile app in a very easy manner.
Facebook work on the OAuth 2.0 protocol and most of the social providers like Facebook, Google, Microsoft, LinkedIn are supporting OAuth
2.0.
What do we need?
Check that you have everything you need before we begin. Make sure your Facebook cloud platform account has been created.
Additionally, your Mendix App has to include a few marketplace modules:
 Community Commons
 Encryption
 Nanoflow Commons
 OIDC Module
Getting started
Create Your Facebook Login App
Here you can find the complete step by step guide to create your Facebook Login App.
Step 1
Go to Facebook Developer and log in using your Facebook credentials.

4. NOTE: Please do not log in using a business account as Facebook will not allow you to create an app if you do so.
Step 2
Select the My Apps as displayed on the below screen.

5. Step 3
Click on Add a New App as displayed in the below screen.

6. Step 4
Input display name and contact email. Once you have done so, click on Create App ID

7. Step 5
In the security check, Complete the security steps and click on the submit button.

8. Step 6
Once you land on the App dashboard, Select Facebook Login, and click Set Up.

9. Step 7
Click on Settings in the sidebar under Facebook Login. Turn on Client OAuth Login. Turn on Web OAuth Login. Put the valid redirect URL
on "Valid OAuth redirect URIs". Click on the Save button.

11. Step 8
Click on Basic under settings in the sidebar. Under App, Domains include your website Url. Enter all the required details. Change the status of
the app from Development to Live from the top-right corner. Click on the Save Changes button.
Note down the App-id and App secret.
Now your Facebook app is ready. You can start implementing Facebook login

12. Data Selection
When a user logs into your website or app via Facebook Login, you can access the user's data stored on Facebook. Facebook only allows the
basic profile data permissions for a new Facebook app. To get more data according to your business requirement, you need to enable additional
permissions on your Facebook app. Facebook is supporting around 42 permissions. You need to choose user data that you want to collect from
Facebook.
Submit Your Facebook Login App for Review
To grab more than basic profile data points or asking for additional permissions from your users, your Facebook apps go through the review
process. Sometimes businesses require some additional permissions on the Facebook app and for that, you need to submit your Facebook app for
approval before starting to ask for additional information.
The Facebook app review process is pretty much simple, Please refer to this document here for the Facebook App Review Process.
Let’s come back to the Mendix
In Studio Pro
Now for the Mendix section of this build! In order to ensure anonymous user’s can access the required pages, we need to ensure our app is configured to
have security on and also to allow anonymous user’s access. For this we will need a Guest user role which we can select as the anonymous user.

14. Also make sure your Guest user role is assigned to the OIDC module as the Anonymous module role, as well as the Admin needs to be assigned the
Administrator user role for the same OIDC module.
We must also enable the user to access the sign-in page now that security and user roles have been configured. Add a role-based home page for guests in
your projects' Navigation.
You may do this by choosing the OIDC module's "OIDC.Login Web Button" page. Additionally, provide a role based home page for the User.

15. Add a page OIDC_Client_Overview and make sure Admin have access to it.

16. Run your app locally, and login as a admin. Navigate to the OIDC Client Overview page. Click on new to create a new config.
Fill in the Alias as Facebook (You can use any name for your reference).
Enter your client ID and set the status too Active. Most importantly, you need to add the automatic config URL for google
(https://www.facebook.com/.well-known/openid-configuration) and click “Import configuration”. This will automatically populate the few fields.

17. If it’s hard to zoom into the input fields. Find it here.
Alias Name: Facebook
Client ID: {Your client id}
Client Assertion: Client I D and Secret
Active: Yes
Use PKCE: Yes

18. Endpoint URLs
Automatic configuration URL: https://www.facebook.com/.well-known/openid-configuration
Authorization endpoint: https://www.facebook.com/dialog/oauth
Token endpoint: https://graph.facebook.com/v2.8/oauth/access_token
User info endpoint: https://graph.facebook.com/v14.0/oauth/access_token?me?fields=id,name,birthday,email
JWKS uri: https://www.facebook.com/.well-known/oauth/openid/jwks/
Issuer: https://www.facebook.com
Custom call-back URL: https://contentmanagement103-sandbox.mxapps.io/oauth/v2/callback

19. Testing the login
When a guest user lands on your site, they will now see the following page, the user should click “Log in via SSO”
Next, they will see this screen which prompts the user to select the google account they would like to login with.

21. If you configuration is successful, the user should land on the home page as an authenticated user. In order to be sure this setup was working I added a data
view to the home page which returns the logged in user’s account, and I displayed the $Account/Full Name attribute using a label.