Facebook Sign-In

Facebook Sign-In allows users to authenticate using their Facebook Accounts.
Facebook sign-in demo
Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup section for your project.
Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created user collection while creating your project with Firebase Setup.)
Adding Facebook sign-in
Adding Facebook sign-in comprises of following steps:
1.​Creating/Setting up an app on Facebook​
2.​Enabling Facebook authentication in Firebase​
3.​Enabling Facebook authentication in FlutterFlow​
4.​Creating a page with Facebook sign-In​
1.​Adding action to log in with Facebook​
5.​Create an action to logout​
6.​Preparing to test the app​
7.​Testing Facebook sign-in​
1. Creating/Setting up an app on Facebook
You need to create and set up your app on Facebook in order to enable Facebook login.
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 the type Consumer and click on the Next button.
Enter the Display name for your app.
Now, Click on the Create App button.
Creating/Setting up an app on Facebook
To set up an iOS and Android app:
From the list of choices, find the Facebook Login card and click on the Set Up button.
Click on iOS (with the Apple logo).
Click on the next button under the Set up Your Development Environment section.
Enter the Bundle ID and then click on Save and Continue button. To get the Bundle ID, Open your FlutterFlow project and click on the Settings and Integrations, copy the text under the Package Name.
Skip the rest of the sections by clicking on the next button.
Set up an iOS and Android app
Now, switch to the Android tab and skip the first two sections by clicking on the next.
Paste the Package Name from your FlutterFlow project.
Inside the Default Activity Class Name, paste the package name (obtained from the FlutterFlow project) and then add .MainActivity at the end. For example, com.flutterflow.myapp.MainActivity.
Click on Save and then Continue.
Under the Add Your Development and Release Key Hashes section, select Copy Code based on your operating system.
Launch the terminal, paste the copied code, and press enter.
To launch Terminal on a Mac, click the Launchpad icon 
, type Terminal in the search field, then click Terminal.
To launch Terminal on Windows, press Windows + R keys on your keyboard. Then, type wt and press Enter or click OK.
When it asks to enter keystore password, type android and hit enter.
Copy the Key Hash from the terminal and paste it into the Key Hashes input box. Click on save and continue.
Skip the rest of the sections by clicking on the next button.
Set up an iOS and Android app
2. Enabling Facebook authentication in Firebase
To enable Facebook authentication in the Firebase:
Open the Firebase console, Click on the Authentication (Left side menu).
Click on the Get started button.
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, click on Settings (left menu), and select Basic. Copy the App ID and paste it into the App ID input box in Firebase.
Similarly, copy-paste the App Secret.
Now, copy the URL below and navigate to the Facebook Developer Console, open your app, click on Facebook Login (left menu), and select Settings. Scroll down to find Valid OAuth Redirect URIs and paste the URL and click on save changes.
Come back to Firebase Console and finish the setup by clicking on Save.
Enabling Facebook authentication in Firebase
3. 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).
Click on the Authentication tab.
Find the Authentication Enabled checkbox and click on it to checkmark (if you haven't already).
Click on the Facebook tab below.
Scroll down to find the Facebook App Settings.
Enter the Facebook App Name (name that you entered while creating the app on Facebook) and Facebook App ID.
Enabling Facebook authentication in FlutterFlow
4. Creating a page with Facebook sign-In
To allow users to authenticate using their Facebook account, you need a login page with a button. You can use one of our templates or create a page from scratch.
To create a new page from scratch:
Click on the Select Page or Component from the Navigation Menu (left side of your screen).
Click on + Create New, Give it a name.
Click on the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
Add the Button widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
Move to Property editor (on the right side of your screen) and scroll down to the Alignment section. Bring the button in the center by adjusting the slider or directly entering the value.
Scroll down the Button Text section and change the Text to Facebook.
Scroll down to find the Icon section. Click on the None button and then search and select icon name with FontAwesome.facbeookF.
Creating a page with Facebook sign-In
You can also choose to create a page with a ready-made button (component) for Facebook Sign-in.
To add the Facebook sign-in button component:
Open the UI Builder. (left side navigation menu)
Select the Components panel.
Under the Sign-in Buttons section, find the Facebook Sign In button and drag it into the canvas area.
Adding ready made Facebook sign-in button
4.1 Adding action to log in with Facebook
To add an action to log-in with Facebook:
Select Button (with Facebook logo) from the widget tree or from the canvas area.
Click on the Actions tab (on the right side of your screen).
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Authentication.
Find another Action Type dropdown below, and change it to the Login.
Click on the Auth Provider dropdown and set it to Facebook.
Now, checkmark the Create User Document checkbox.
From the Collection dropdown below, select the users collection.
Adding action to log in with Facebook
If you added the Facebook sign-in component, the login action would have been already added to the button.
5. Create an action to logout
To log out a user, you can place a button on your home page and add the Logout action.
​Here are the instructions on how to add a button with the Logout action.
6. Preparing to test the app
Facebook Sign-In functionality does not work in Run 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.
​Here are the instructions for setting up your machine to test the downloaded code on a real device.
7. Testing Facebook sign-in
Facebook Sign-In can not be tested in Run Mode. Instead, you will need to test Facebook authentication on a real device/emulator.
Open and Run the app from your preferred IDE.
When you see the app running on your device, click on the Facebook button.
Enter the credentials of your Facebook account.
Click on the Logout button.
Testing Facebook sign-in
​Here are the instructions to verify the creation of a new user in Firebase.
Apple Sign-In
Phone Sign-In
Last modified 10mo ago