Implement Facebook Authentication In Flutter

In this tutorial, I’ll show you how to integrate Facebook login within your Flutter applcation. A multi-step authentication sequence that allows you to sign a user into an account or link them to an existing one is known as social authentication. So let’s get going and see how to implement facebook social login into our Flutter project.

Integrate Facebook Social Login In Flutter

We will use the Flutter_Facebook_Login package to implement login into our website using Flutter.

Facebook Login Implementation In Flutter

• Creating a Facebook application and obtaining the APP name and App ID
• In your android folder, create a strings.xml file.
• Set up the AndroidManifest.xml file.
• Integrating Facebook login features into your flutter app

Create a Facebook App ID and a Facebook App Name.

Important things to note:

• you must update your Android package name in **android/app/build.gradle** file (defaultConfig)

Importing Facebook Package Into Flutter App

Declare the flutter_facebook_auth package in your pubspec.yaml file.

<span class="hljs-symbol">dependencies:</span>
<span class="hljs-symbol">  flutter:</span>
<span class="hljs-symbol">    sdk:</span> flutter
<span class="token key atrule">  flutter_facebook_auth</span><span class="token punctuation">:</span> ^3.3.2Code language: HTML, XML (xml)

HTTP was formerly utilized with Facebook Graph API requests. In order to operate with AndroidX Support, you include the newest version of flutter facebook login.

Configuring your Android App

We must configure our Android app to operate with Facebook login. To do so, go to android/app/src/main/res/values/strings.xml and create a file named strings.xml.

<span class="php"><span class="hljs-meta"><?</span>xml version=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"utf-8"</span><span class="hljs-meta">?></span></span>
<span class="hljs-tag"><<span class="hljs-name">resources</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"app_name"</span>>c</span>odeSundar<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"facebook_app_id"</span>></span>000000000000<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fb_login_protocol_scheme"</span>></span>fb000000000000<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
<span class="hljs-tag"></<span class="hljs-name">resources</span>></span>

Note: Please update app id, app name, protocol_scheme with your own credentials

After you’ve produced the strings.xml file, copy and paste it into AndroidManifest.xml

<span class="hljs-tag"><<span class="hljs-name">meta-data</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.facebook.sdk.ApplicationId"</span> <span class="hljs-attr">android:value</span>=<span class="hljs-string">"@string/facebook_app_id"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">activity</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.facebook.FacebookActivity"</span> <span class="hljs-attr">android:configChanges</span>=
    <span class="hljs-string">"keyboard|keyboardHidden|screenLayout|screenSize|orientation"</span> <span class="hljs-attr">android:label</span>=<span class="hljs-string">"@string/app_name"</span> /></span>

<span class="hljs-tag"><<span class="hljs-name">activity</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.facebook.CustomTabActivity"</span> <span class="hljs-attr">android:exported</span>=<span class="hljs-string">"true"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">action</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.action.VIEW"</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.DEFAULT"</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.BROWSABLE"</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">data</span> <span class="hljs-attr">android:scheme</span>=<span class="hljs-string">"@string/fb_login_protocol_scheme"</span> /></span>
    <span class="hljs-tag"></<span class="hljs-name">intent-filter</span>></span>
<span class="hljs-tag"></<span class="hljs-name">activity</span>></span>

So final code looks like

<span class="hljs-tag"><<span class="hljs-name">manifest</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attr">package</span>=<span class="hljs-string">"com.example.auth"</span>></span>

    <span class="hljs-comment"><!-- io.flutter.app.FlutterApplication is an android.app.Application that
          calls FlutterMain.startInitialization(this); in its onCreate method.
          In most cases you can leave this as-is, but you if you want to provide
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. --></span>
    <span class="hljs-tag"><<span class="hljs-name">application</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"io.flutter.app.FlutterApplication"</span> <span class="hljs-attr">android:label</span>=<span class="hljs-string">"auth"</span> <span class="hljs-attr">android:icon</span>=<span class="hljs-string">"@mipmap/ic_launcher"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">activity</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">".MainActivity"</span> <span class="hljs-attr">android:launchMode</span>=<span class="hljs-string">"singleTop"</span> <span class="hljs-attr">android:theme</span>=<span class="hljs-string">"@style/LaunchTheme"</span> <span class="hljs-attr">android:configChanges</span>=<span class="hljs-string">"orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"</span> <span class="hljs-attr">android:hardwareAccelerated</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">android:windowSoftInputMode</span>=<span class="hljs-string">"adjustResize"</span>></span>
            <span class="hljs-comment"><!-- This keeps the window background of the activity showing
                  until Flutter renders its first frame. It can be removed if
                  there is no splash screen (such as the default splash screen
                  defined in @style/LaunchTheme). --></span>
            <span class="hljs-tag"><<span class="hljs-name">meta-data</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"io.flutter.app.android.SplashScreenUntilFirstFrame"</span> <span class="hljs-attr">android:value</span>=<span class="hljs-string">"true"</span> /></span>
            <span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">action</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.action.MAIN"</span>/></span>
                <span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.LAUNCHER"</span>/></span>
            <span class="hljs-tag"></<span class="hljs-name">intent-filter</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">activity</span>></span>

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

        <span class="hljs-tag"><<span class="hljs-name">activity</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.facebook.FacebookActivity"</span> <span class="hljs-attr">android:configChanges</span>=
            <span class="hljs-string">"keyboard|keyboardHidden|screenLayout|screenSize|orientation"</span> <span class="hljs-attr">android:label</span>=<span class="hljs-string">"@string/app_name"</span> /></span>

        <span class="hljs-tag"><<span class="hljs-name">activity</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"com.facebook.CustomTabActivity"</span> <span class="hljs-attr">android:exported</span>=<span class="hljs-string">"true"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">intent-filter</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">action</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.action.VIEW"</span> /></span>
                <span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.DEFAULT"</span> /></span>
                <span class="hljs-tag"><<span class="hljs-name">category</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.intent.category.BROWSABLE"</span> /></span>
                <span class="hljs-tag"><<span class="hljs-name">data</span> <span class="hljs-attr">android:scheme</span>=<span class="hljs-string">"@string/fb_login_protocol_scheme"</span> /></span>
            <span class="hljs-tag"></<span class="hljs-name">intent-filter</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">activity</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">application</span>></span>
<span class="hljs-tag"></<span class="hljs-name">manifest</span>></span>

Implementing Facebook login

import 'package:flutter/material.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLoggedIn = false;
  Map _userObj = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Codesundar"),
      ),
      body: Container(
        child: _isLoggedIn
            ? Column(
                children: [
                  Image.network(_userObj["picture"]["data"]["url"]),
                  Text(_userObj["name"]),
                  Text(_userObj["email"]),
                  TextButton(
                      onPressed: () {
                        FacebookAuth.instance.logOut().then((value) {
                          setState(() {
                            _isLoggedIn = false;
                            _userObj = {};
                          });
                        });
                      },
                      child: Text("Logout"))
                ],
              )
            : Center(
                child: ElevatedButton(
                  child: Text("Login with Facebook"),
                  onPressed: () async {
                    FacebookAuth.instance.login(
                        permissions: ["public_profile", "email"]).then((value) {
                      FacebookAuth.instance.getUserData().then((userData) {
                        setState(() {
                          _isLoggedIn = true;
                          _userObj = userData;
                        });
                      });
                    });
                  },
                ),
              ),
      ),
    );
  }
}
Code language: JavaScript (javascript)

Explanation

• We started by importing the necessary packages. We need to import flutter_facebook_auth in our scenario so that we can utilize facebook login inside our app.
• Because we need to handle with states like isLoggedIn and userProfile, we utilized StateFulWidget.
• We added a ternary operator for isLoggedIn inside the Scaffold body and inside the Center widget.
• We need to display profile information such as the user’s profile image and complete name, along with a logout button, if the user is authorised.
• Otherwise, we’ll have to show the login button.
• We must authenticate the user when he or she touches the login button. If the user cancels (or the user fails with an error), we set isLoggedIn to false.

Conclusion

In this article, we took a look at how to implement facebook login inside our flutter application. As always, If you have found this article useful do not forget to share it and leave a comment if you have any questions. Happy Coding 🙂