How to add login with Facebook in Flutter

To integrate Facebook login into your Flutter app, you’ll need to use the flutter_facebook_auth package. Here’s a step-by-step guide to help you set it up:

1. Set Up Your Facebook App

1. Create a Facebook Developer Account: Go to Facebook for Developers and log in with your Facebook account. If you don’t have a developer account, you’ll need to create one.
2. Create a New App:
   • Navigate to the Facebook App Dashboard.
   • Click “Create App” and follow the instructions. Choose “For Everything Else” or “Consumer” depending on your needs.
3. Configure Facebook Login:
   • In the App Dashboard, go to “Add a Product” and select “Facebook Login”.
   • Follow the setup instructions to configure your Facebook Login settings.
4. Get Your App ID and Secret:
   • You can find these in the “Settings” > “Basic” section of the App Dashboard.

2. Configure Your Flutter Project

1. Add Dependencies: Add the flutter_facebook_auth package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_facebook_auth: ^5.1.0

Run flutter pub get to install the package.

2. Configure Android:

• Add Facebook SDK: Update android/app/build.gradle to include the Facebook SDK:

dependencies {
    implementation 'com.facebook.android:facebook-android-sdk:[version]'
}

Make sure to replace [version] with the latest version number from Facebook’s SDK documentation.

Add Facebook App ID:

• In android/app/src/main/res/values/strings.xml, add:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>

• In android/app/src/main/AndroidManifest.xml, add the following inside the <application> tag:

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

• Update AndroidManifest.xml: Add the following inside the <application> tag:

<activity
    android:name="com.facebook.FacebookActivity"
    android:configChanges="keyboard|keyboardHidden|screenSize|orientation"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.Translucent.NoTitleBar"
    android:windowSoftInputMode="stateUnchanged"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="@string/fb_login_protocol_scheme"/>
    </intent-filter>
</activity>

And add the fb_login_protocol_scheme in strings.xml:

<string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>

3. Configure iOS:

• Add Facebook SDK: Add FBSDKCoreKit, FBSDKLoginKit, and FBSDKShareKit to your Podfile:

target 'Runner' do
  use_frameworks!
  pod 'FBSDKCoreKit', '~> 13.1'
  pod 'FBSDKLoginKit', '~> 13.1'
  pod 'FBSDKShareKit', '~> 13.1'
end

• Update Info.plist: Add the following keys to your ios/Runner/Info.plist file:

<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbshareextension</string>
</array>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_FACEBOOK_APP_ID</string>
    </array>
  </dict>
</array>

3. Implement Facebook Login in Flutter

1. Import the Package:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

2. Add Login Functionality:

void _loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  
  if (result.status == LoginStatus.success) {
    // Get the user data
    final userData = await FacebookAuth.instance.getUserData();
    print('User data: $userData');
  } else {
    print('Facebook login failed: ${result.message}');
  }
}

3. Add Logout Functionality:

void _logout() async {
  await FacebookAuth.instance.logout();
  print('Logged out');
}

4. Call the Login Function: Add a button or other UI element to trigger the login function:

ElevatedButton(
  onPressed: _loginWithFacebook,
  child: Text('Login with Facebook'),
),

That’s it! You should now have Facebook login integrated into your Flutter app. Be sure to test on both Android and iOS devices to ensure everything works smoothly.