Facebook Sign-In

Facebook Sign-In allows users to authenticate using their Facebook Accounts.

Prerequisites

Before getting started with this section, ensure you have:

Completed all steps in the Firebase Setup.
Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created a 'users' collection while creating your project with Firebase Setup.)

Adding Facebook sign-in comprises the following steps:

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.

To create an app on Facebook:

Open the Facebook Developer Console and log in using your Facebook account.
Click on the My Apps (Top menu).
Click on the Create App button (Top right side of your screen).
Select 'Allow people to log in with their Facebook account' and click Next.
Add an app name and click Create app.

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:

Open the app created in the previous step and navigate to App settings > Basic.
To support Android app:
1. Click the + Add platform button at the bottom, select Android, and click Next.
2. Select Android Store on which you'll publish your app and click Next.
3. To get Key hashes:
  1. From here, in step number 6, click Copy Code based on your operating system.
  2. Launch the terminal, paste the copied code, and press enter. To open a terminal window:
    Mac: Use the Launchpad () or press (⌘ + Spacebar) for Spotlight search, type 'Terminal', and open it.
    Windows: Click the Windows icon, navigate to the 'Windows System' folder, and open 'Command Prompt' either by clicking or right-clicking it.
  3. When it asks to enter keystore password, type android and hit enter.
  4. Copy and paste the output in the Key hashes input box.
4. For Package Names, return to your Flutter project > Settings and Integrations > App Details and copy-paste Package Name.
5. For Class Name, paste the package name (obtained from the FlutterFlow project) and then add .MainActivity at the end. For example, 'com.flutterflow.yourapp.MainActivity'.
6. Click Save changes.
To support iOS app:
1. Click the + Add platform button at the bottom, select Android, and click Next.
2. Inside the Bundle ID, return to your Flutter project > Settings and Integrations > App Details and copy-paste Package Name.
3. Click Save changes.

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:

Open the Facebook Developer Console, open your app, and select Use cases.
Inside the Authentication and account creation, click Edit.
Select Add for email.

4. Enabling Facebook authentication in Firebase

Open the Firebase console and click on Authentication.
Click on the Get started button (this may not be visible if you have already set up other forms of Authentication).
Select the Sign-in method tab.
Click on Facebook (Under the 'Additional Providers' section). If you have already added any other provider, click on the Add new provider and then click on Facebook.
Find the Facebook switch and enable it.
To get the App ID, head to the Facebook Developer Console, open your app and navigate to App settings > Basic. Copy the App ID and paste it into the App ID input box in Firebase.
Similarly, copy-paste the App Secret.
Now, In Firebase console, copy the URL below and navigate to the Facebook Developer Console, open your app, select Products > Configure > Settings.
Inside the Valid OAuth Redirect URIs, paste the URL and click on save changes.
Return to to Firebase Console and finish the setup by clicking on Save.

5. Enabling Facebook authentication in FlutterFlow

To enable the Facebook authentication in FlutterFlow:

Open your FlutterFlow project.
Click on the Settings and Integration from the Navigation Menu (left side of your screen).
Enter the Facebook App Name (name that you entered while creating the app on Facebook) and Facebook App ID (i.e., you App ID).

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.

Here's how you can add the Facebook sign-in button from our page template:

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

To add login action:

Select the widget (e.g., Button) on which you want to add the action.
Select Actions from the properties panel (the right menu) and select Add Action.
Search and select the Log in (under Backend/Database > Firebase Authentication) action.
Set Auth Provider to Facebook.
Tick 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 this 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. To deploy and test the Facebook authentication, you will need to download the code and run it in your IDE.

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.

Last Updated Date: August 28, 2023

PreviousApple Sign-In NextPhone Sign-In

Last updated 7 months ago