Add Facebook Login to your Flutter app

In this article, I’ll try to provide full and detailed instructions to add login via Facebook feature in your Flutter app.

To implement login we’ll use flutter_login_facebook plugin, which uses the latest Facebook SDK and didn’t have an issue with UIWebView deprecation warning from Apple.

flutter_login_facebook | Flutter Package

Step 1 of 5. Add plugin dependency

In your pubspec.yaml add the latest version of flutter_login_facebook as a dependency (see installing tab on pub.dev).

dependencies:
   flutter_login_facebook: ^1.4.1

Step 2 of 5. Setup Android

Go to Facebook Login for Android — Quickstart page.

Select an App or Create a New App

You need to complete Step 1: Select an App or Create a New App.

Skip Step 2 (Download the Facebook App) and Step 3 (Integrate the Facebook SDK).

Edit Your Resources and Manifest

Complete Step 4: Edit Your Resources and Manifest.

• Add values from step to /android/app/src/main/res/values/strings.xml (create the file if it doesn’t exist). You don’t need to add fb_login_protocol_scheme, only facebook_app_id and facebook_client_token:

<string name="facebook_app_id">YOUR_APP_ID</string>
<string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>

• Add a meta-data element from step (you can skip activities) to android/app/src/main/AndroidManifest.xml, section application:

<meta-data android:name="com.facebook.sdk.ApplicationId" 
           android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" 
           android:value="@string/facebook_client_token"/>

• Also add in AndroidManifest a permission (if not exist) in root section (before of after application):

<uses-permission android:name="android.permission.INTERNET"/>

How to get your Client Access Token? It’s easy:

• Sign into your developer account.
• On the Apps page, select an app to open the dashboard for that app.
• On the Dashboard, navigate to Settings > Advanced > Security > Client token.

Setup Facebook App

Complete Step 5: Associate Your Package Name and Default Class with Your App.

1. Set Package Name - your package name for Android application (attribute package in AndroidManifest.xml).
2. Set Default Activity Class Name - your main activity class (with package). By default it would be com.yourcompany.yourapp.MainActivity.
3. Click “Save”.

Complete Step 6: Provide the Development and Release Key Hashes for Your App.

1. Generate Development and Release keys as described in the documentation. Note: if your application uses Google Play App Signing than you should get certificate SHA-1 fingerprint from Google Play Console and convert it to base64

echo "{sha1key}" | xxd -r -p | openssl base64

1. Add generated keys in Key Hashes.
2. Click “Save”.

In the next Step 7 Enable Single Sign On for Your App you can enable “Single Sing On” if you want to.

And that’s it for Android.

Step 3 of 5. Setup iOS

Go to Facebook Login for iOS — Quickstart.

Select an App or Create a New App

You need to complete Step 1: Select an App or Create a New App. If you’ve created an app during an Android setup than use it.

Skip Step 2 (Set up Your Development Environment) and Step 3 (Integrate the Facebook SDK).

Register and Configure Your App with Facebook

Complete Step 3: Register and Configure Your App with Facebook.

1. Add your Bundle Identifier — set Bundle ID (you can find it in Xcode: Runner - Target Runner - General, section Identity, field Bundle Identifier) and click "Save".
2. Enable Single Sign-On for Your App if you need it and click “Save”.

Configure Your Project

Complete Step 4: Configure Your Project.

Configure info.plist:

1. In Xcode right-click on Info.plist, and choose Open As Source Code.

2. Copy and paste the following XML snippet into the body of your file (<dict>...</dict>), replacing [APP_ID] with Facebook application id, [CLIENT_TOKEN] with value found under Settings > Advanced > Client Token in your App Dashboard and [APP_NAME] with Facebook application name (you can copy prepared values from Step 4 in Facebook Quickstart):

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb[APP_ID]</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>[APP_ID]</string>
<key>FacebookClientToken</key>
<string>[CLIENT_TOKEN]</string
<key>FacebookDisplayName</key>
<string>[APP_NAME]</string>

3. Also add toInfo.plist body (<dict>...</dict>):

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
</array>

⚠️ NOTE. Check if you already have CFBundleURLTypes or LSApplicationQueriesSchemes keys in your Info.plist. If you have, you should merge their values, instead of adding a duplicate key.

Skip Step 5 (Connect Your App Delegate) and all the rest.

And that’s it for iOS.

Step 4 of 5. Additional Facebook setup

Go to My App on Facebook and select your application.

Icon

You should add the App Icon (in Settings - Basic) to let users see your application icon instead of the default icon when they attempt to log in.

Add store IDs

In Setting - Basic - iOS fill up the field “iPhone Store ID” (“iPad Store ID”).

Category

You should select Category (in Settings - Basic) before your app goes live.

Optional settings

You may want to change some other settings. For example Display Name, Contact Email, etc.

Enable application

By default, your application has the status “In development”.

You should enable application before log in feature goes public.

Facebook will show a warning if your application is not fully set up. For example, you may need to provide a Privacy Policy. You can use your Privacy Policy from Google Play/App Store.

Step 5 of 5. Use Facebook Login in your app

To use it you should:

• create instance of FacebookLogin;
• call logIn() method with permissions required by your application;
• handle the result: it can be Success, Failure or Cancel (if the user cancels log in process).

Don’t forget to check accessToken.permissions (or accessToken.declinedPermissions) if all requested permissions are important for you — a user is allowed to decline some of them.

After login, you should send accessToken.token to the server for validation if you implement a login with your own backend.

After successful login you can get main user profile information with getUserProfile() method. And, if you’ve requested an email permission and the user is allowed it — you can get user email with getUserEmail().

Here is the sample code:

That’s it! Thanks for your attention. If you have any questions — leave your comments, I’ll appreciate any feedback. 👋

flutter_login_facebook | Flutter Package