Flutter

Firebase, twitter sign-in and Flutter

aseemwangoo No Comments

Do one thing everyday that scares you…

Going through Authentication section of Firebase, there is

  1. Authentication with Google.
  2. Authentication with Facebook.
  3. Authentication with Twitter.

First two points are already covered, so that left me with Authentication with Twitter to program.

Firebase Authentication Modes…

Firebase Authentication Modes…

 

Firebase, Twitter Sign-In…

Firebase, Twitter Sign-In…

 

Let’s begin…

Getting started (with firebase) is simple,

NOTE : Please note that the name of your app should be same in the Firebase, your project’s manifest.xml and in the app-level build.gradle.

Go through this article, if not understood.

A small advice, always fill the SHA certficate fingerprint, even though it says optional.

Scratched for brevity…

Scratched for brevity…

Go to

Firebase Authentication

Firebase Authentication

Authentication and enable the Twitter sign in. It will ask you for the API key and API Secret..

For these things, you need to go to twitter dev console.

Things to note :

  1. You need to have the phone number connected to the Twitter profile, else following error comes..
Error message for phone number…

Error message for phone number…

       2. Fill the app details :

Twitter application details…

Twitter application details…

This callback url is the same as given by firebase (during twitter authentication).

Website placeholder…

Website placeholder…

In the website section of twitter, you can enter any url e.g your twitter profile-url or any website e.g : https://placeholder.com/

Final step : You will get your API-Key and API-Secret which is to be specified in the firebase console.

Coming to Flutter side…

Import the following packages, flutter_twitter_login and firebase_auth…

Import the following in main.dart,

import 'package:flutter_twitter_login/flutter_twitter_login.dart';

On click of Sign in with Twitter, the following function is called :

Sign In part

Sign In part

On click of Sign out,

Sign out part…

Sign out part…

Something useful…

On click of the Sign in with Twitter, everything retrieved from Firebase is displayed onto the next screen (Detailed Screen.dart), along with my profile picture. 😛

Important thing to note: You need to have the Twitter app installed in your device, otherwise it results in below error :

Error in Twitter Login…

Error in Twitter Login…

You also need to mention the keys (consumer key and consumer secret) in the TwitterLogin instance as :

TwitterLogin twitterInstance = new TwitterLogin(

 consumerKey : “Your twitter consumer key”, consumerSecret : “Your twitter consumer secret”

);

Video demonstration :

For complete source code, visit

https://github.com/AseemWangoo/flutter_programs/blob/master/TwitterSignInWebsite.zip

P.S………………