Flutter – Social Authentication with Facebook

Hi Friends,

Hope you are all well. This post is again a sequel to my previous posts on authentication.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

Before reading this post, I would highly recommend you read my previous posts on authentication below.

Authentication with email/password – Click here.

Authentication with Google – Click here.

Let’s begin.

A screecast of this post

We’ll start from where we left off. Now before bringing in facebook authentication. We need to do some configurations.

Click here to go to facebook developer portal..

Create a new app there and add the facebook login product.

one

Now click on quickstart and follow the steps.

Enter the package name here in the third steps.

two

In the next step we would need to generate a key. Do it using the below command. (Run it on a terminal)

Copy this key and paste it as shown below.

three

Next comes the important part.

Create a file called strings.xml in android -> app -> src -> res

four

Open this file and paste the below lines in it

(Facebook app id & login protocol scheme you can get from the developer portal.)

Now open AndroidManifest.xml and add the below code inside the <application> tag.

 

Alright now open your firebase console and enable facebook sign-in from the list of providers.

five

To get the app secret simply click on settings -> basic (In the facebook developer portal) and get the key from there.

seven

Then from the firebase console copy the callback url and paste it as shown below.

From here

six

To here

eight

Phew, that’s a lot of configurations. Now this might seem like too many steps to take in., but trust me, it’s quite easy.

(Kindly watch the video once since, I have explained all the steps in detail there).

Now open up pubspec.yaml file and add the below dependency.

Now open loginpage.dart and add the code as shown below.

Whoa, that’s too much code., Let’s break this down.

This is the snippet where we attempt to authenticate users with Facebook.

We are using the Facebook login plugin to attempt a login and if successful, we get a token back. We then use this token to authenticate into our Firebase authentication system. Once authentication is successful  we’ll simply redirect the user to our dashboard page.

Run the app and you will see the below screens.

Screenshot_20180830-214902

Tap on Login with Facebook

nine

If you continue, you’ll be logged in.

Screenshot_20180830-215225

That’s it.,

This is how you bring in facebook authentication into your flutter apps.

Now open authentication and check your list of users. You will see the user added with facebook provider.

ten

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Liked it? Take a second to support admin on Patreon!
  • Mayank Arora

    it shows the continue as dialogue but then after pressing continue as user nothing happens