Flutter – Social authentication with Twitter

Hi Friends,

Hope you are all well. This post is again a sequel to my previous posts on authentication.. (Ah man, too many sequels)

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.

Authentication with Facebook – Click here.

Let’s begin:

A screencast of this post

 

Let’s start from where we left off.

Before bringing in the twitter plugin., we need to do some configurations here as well. Navigate to the twitter developer portal by clicking here.

Create a new app. Here in twitter, you just need to fill out a form. There’s no fancy copying and pasting code like we did for Facebook. Once the app is created, it will give you two keys. These are important.

one

Now open up pubspec.yaml file and add the dependency for twitter login as shown below.

Alright, now get into loginpage.dart and modify it as shown below.

Now we have already talked about most of the code here in our previous posts.  Let’s consider only the snippet involved in twitter login.

Alright, here we are attempting to login using the plugin. If successful we get a session (else we get an error msg).

This session will contain the token and secret which we then use to authenticate the user. Once the user is authenticated, he or she will be redirected to the Home Page.

Enable Twitter under the sign-in providers in Firebase.

two

Now run the app. You will see the below screens.

Screenshot_20180831-143618

I know the Login Screen looks absurd now. I’ll try to fix all the alignments and provide a better (and more visually pleasing) screen as we dive deeper into app building.

Now tap on Login with twitter.

You will see the below screen

Screenshot_20180831-143629

Now tap on Connect to give permission.

Screenshot_20180831-143633

You’ll now be logged in.

Screenshot_20180831-143637

That’s it.

Now open users in your firebase console and you would see that a new user has been added under twitter provider.

three

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!