Flutter Facebook login using Firebase Authentication

Flutter Facebook Login :

Flutter facebook login integration in your flutter app i.e., android and iOS apps so that user’s can easily login to your app with facebook account and no need to create new credentials.

Login to you flutter app can be made using various providers like facebook, google and also OTP based authentication we have discussed here.

In this blog we will be discussing the detailed process of integration flutter facebook login right from facebook developer console, Google firebase configurations.

You can access the user login details like email address, name, and other details may refer facebook developers site for more information you can access these details by providing required information.

Can also avail features like posting to your facebook account from app, share information and other services which are available in facebook.

Flutter facebook video tutorial Video Tutorial:

In this video tutorial we will see the implementation of facebook login using firebase.

pubspec.yaml :

Add firebase authentication, firebase core and facebook authentication so as to make facebook login.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  firebase_core:
  flutter_facebook_auth:

AndroidManifest.xml :

Add below information to your manifest file visit video tutorial for more details on facebook login.

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

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
        "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />
<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <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>

strings.xml :

Replace your app id and login protocol scheme.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">"Login"</string>
    <string name="facebook_app_id">1**************</string>
    <string name="fb_login_protocol_scheme">fb1************</string>
</resources>

main.dart :

Initialize void main and specify firebase initialization’s.

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(App());
}

Specify variable userdata and a String value

Map<String, dynamic>? _userData;

String welcome = "Facebook";

Specify LoginResult and seek email request.

final LoginResult result = await FacebookAuth.instance.login(permissions:['email']);

If login is successful then using Login Status check success status and store user details by fetching as shown below

if (result.status == LoginStatus.success) {

  final userData = await FacebookAuth.instance.getUserData();

  _userData = userData;

}

If login failed then handle with else block of code

else {
  print(result.message);
}

Trying to set state and update information i.e., email address of the user to the Text widget with the help of the declared String variable

setState(() {
  welcome = _userData?['email'];
});

Fetch the facebook authentication credential with the help of token

final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(result.accessToken!.token);

Using AuthCredential complete login procedure

FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);

Providing the full code for flutter facebook login integration below

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


Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Login"),),
        body: MyApp(),
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Map<String, dynamic>? _userData;

  String welcome = "Facebook";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(onPressed: (){
            signInWithFacebook();
          }, child: Text(welcome))

        ],
      ),
    );
  }


  Future<UserCredential> signInWithFacebook() async {

    final LoginResult result = await FacebookAuth.instance.login(permissions:['email']);


    if (result.status == LoginStatus.success) {

      final userData = await FacebookAuth.instance.getUserData();

      _userData = userData;
    } else {
      print(result.message);
    }

    setState(() {
      welcome = _userData?['email'];
    });


    final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(result.accessToken!.token);

    return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
  }

}

If you have any query in this tutorial on flutter facebook login do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.