In this tutorial, I’ll show you how to integrate Facebook authentication 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.2HTTP 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
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;
});
});
});
},
),
),
),
);
}
}
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 authentication 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…!!!
Leave a Reply