Facebook Login (Native Experience) — Flutter and Firebase tutorial

I recently started using flutter in one of my projects and was completely blown away with the simplicity of the framework. I have managed to get my iOS and Android app ready at the same time within much less time than I would have spent building both the apps natively. One of the requirements I stumbled upon was Facebook login. I did not like the approach of opening a web view and making users type their username and password. I wanted an experience just like native. Initially, I used MethodChannel to call the native code that was taking care of the login but I had to import Firebase and Facebook SDK to my native projects which I wasn’t very happy about. Eventually after reading through few plugins, I came up with the following solution that worked like a charm for my project.

Step 1 —

First, you will need to add the following flutter plugins to you pubspec.yaml file :

1. firebase_auth: https://pub.dartlang.org/packages/firebase_auth
2. flutter_facebook_login: https://pub.dartlang.org/packages/flutter_facebook_login

Step 2 —

Make sure you follow the correct installations steps provided by the above plugins. As part of the installation steps, you will require to add your Facebook app id to your Android and iOS projects and will also require some additional steps.

Step 3 —

You can now just simply import these two classes to your .dart file

1. import ‘package:flutter_facebook_login/flutter_facebook_login.dart’
2. import ‘package:firebase_auth/firebase_auth.dart’

Step 4 —

Now you can just use this piece of code to trigger the native Facebook login dialog and create the user on Firebase :

Voila! that’s all you need. You will be able to see the created user on Firebase console as soon as you successfully logged in using Facebook.

Hope you enjoyed the read.