Skip to main content

Facebook Login

Facebook login allows users to authenticate using their Facebook Accounts.

Prerequisites

Before getting started with this section:

Adding Facebook sign-in​

Adding Facebook sign-in comprises the following steps:

  1. Create app on Facebook
  2. Configure app on Facebook
  3. Add email permission
  4. Enabling Facebook authentication in Firebase
  5. Enabling Facebook authentication in FlutterFlow
  6. Add a Facebook sign-in button
  7. Add login action
  8. Add logout action
  9. Prepare to test the app
  10. Verify user creation

1. Create app on Facebook​

When you create an app on the Facebook Developer Console, you are given a unique App ID and App secret, ensuring secure communication between your app and Facebook's servers. Additionally, it lets you define required permissions and user data access and also restricts login origins for enhanced security.

Here's is how you create app on Facebook:

2. Configure app on Facebook​

Now, you must add and configure platforms that will support Facebook authentication - For example, Android and iOS.

To do so follow the steps below:

3. Add email permission​

When users log in using third-party providers (like Google or Facebook), fetching their email addresses reduces the steps they need to take during sign-up. For Facebook sign-in, to access a user's email, you must add email permission in Firebase developer console.

Here's how you do it:

4. Enabling Facebook authentication in Firebase​

Here's how you enable Facebook auth in Firebase:

5. Enabling Facebook authentication in FlutterFlow​

To enable the Facebook authentication in FlutterFlow, follow the steps below:

6. Add a Facebook sign-in button​

To allow users to authenticate, you need a login page with a button. You can create your own or use the one from the widget template or page template.

7. Add login action​

When you click the sign-in button, it will trigger the 'Log In' action, prompting users to provide their Facebook credentials.

info

Switch on the Create User Document and set the Collection to users. After successful login, this will insert the user's email address into the 'users' collection. If a user already exists, it won't add details again.

8. Add logout action​

To let users log out of your app, you can use the Logout action.

9. Prepare to test the app​

Facebook Sign-In functionality does not work in Run or Test Mode and can only be tested on a real device or emulator.

10. Verify user creation​

To confirm the successful integration and the creation of users, navigate to your Firebase project > Authentication > Users and check the user entries.