Social Authentication in Customized Flutter Applications

Let's get authenticate users through social platforms…

Photo by freestocks on Unsplash

Mobile apps have got more prominence than ever during pandemic. When it comes to Flutter app development, we can come up with innovative features and functionality to make people’s lives more comfortable and easy.

Recently, while discussing different technical topics with my colleagues, I thought I should make one blog on social authentication with multiple platforms like Google, Facebook & Twitter.

Let's note down steps for the task:

1. Developer Portal configuration for Google, Facebook & Twitter Authentication
2. Native Side Configuration For All platforms.
3. Dart side implementation.

Photo by Dayne Topkin on Unsplash

Google Sign In Implementation :

Create one project in the Firebase console and fill in the required details.

Note : We are not using Firebase sign in method feature for Google sign in , To access Google Sign-In, you’ll need to make sure to register your application.

1.Registration Of Android App

Please go to the dashboard and click on add Android icon to set up the Android app and fill the configuration.

Please don’t forget to put SHA 1 key which is generated using the Android Studio Gradle portion as per the below image.

Just click on the selected one shown above image, it will print your SHA1 in the terminal.

Download google-service.json the file and put it in a android/app folder.

Just add dependency lines into build.gradle files as suggest during registration of the app.

2.Registration Of iOS App

Please go to the dashboard and click on add iOS icon to set up the iOS app and fill the configuration which has almost similar steps as Android.

Download GoogleService-Info.plist file and put it in a Runner folder.

Please add the below code in Info.plist file.

Your Reverse Client Id : REVERSED_CLIENT_ID from GoogleService-Info.plist file

Callback for Twitter : Not required for Google sign in

The next step is to fill OAuth consent form.

App name : <Your App Name>

User Support Email : <Your google account associated with this project>

Application home page : https://<Your Authorized domains>

Application privacy policy link : https://<Your Authorized domains>

Application terms of service link : https://<Your Authorized domains>

Open Firebase Console and fill Default GCP Source Location & Support Email

Default GCP Source Location : nam5 (us-central)

Support Email : Your google account associated with this project

Let’s implement the dart part for Google sign-in.

Please integrate the google_sign_in plugin.

Let's implement a method to perform Google authentication.

Photo by Jackson Simmer on Unsplash

Facebook Sign In Implementation :

Register your app in the Facebook developer console as per steps.

Create a new app and fill the form as requested.

Select Facebook login setup and skip the 2nd & 3rd steps.

Android Native Side Configuration :

Add some string-related values to strings.xml file.

Please add the below permission in AndroidManifest.xml file after application element.

<uses-permission android:name="android.permission.INTERNET"/>

Add the following meta-data element, an activity for Facebook, and activity and intent filter for Chrome Custom Tabs inside your application element

Please rebuild your project to cross-verify the whole configuration, meanwhile, you will face the below error.

To resolve you need to add the below flag in build.gradle file.

multiDexEnabled True

Now let's go to 5th step

Package Name : <Your Package name>

Default Activity Class Name : <Your Package name.activity name>

6th step is for key hash.

You can generate a key hash using the below command in the terminal.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Now you have to add native platforms in-app. so let's do this by a tap on Add platform button which is located at the Setting -> Basics menu

Registration Of Android Platform

Android Configuration

iOS Native side configuration :

Please add the below code in Info.plist file.

Your FB App Id : Facebook APP ID

Your FB App Name : Facebook APP Name

Callback For Twitter : Not Required for FB Sign in

Registration Of iOS Platform

iOS Configuration

URLs Configuration

Data Deletion Callback URL: Just like this www.google.com, you can put your callback URL here.

Let's implement dart code for Facebook Sign In.

Please integrate the flutter_facebook_auth plugin.

Photo by Brett Jordan on Unsplash

Twitter Sign In Implementation :

Register the app in the Twitter developer console.

Fill up all the details regarding your app submission. You can skip optional details.

CALLBACK URLS : appname://

WEBSITE URL : Your Website Url

TERMS OF SERVICE : <Your Terms Of Service Url>

PRIVACY POLICY : <Your Privacy Policy Url>

Android Native Side Configuration :

your-callback-url : appname

meanwhile you might be face below issue during compilation time.

To resolve this please add below dependency in build.gradle file.

implementation ‘com.google.guava:guava:30.1.1-android’

iOS Native Side Configuration :

Your Callback Url For Twitter : appname

Lets implement dart side for Twitter Sign In.

Please integrate twitter_login plugin.

SocialKeys.twitterApiKey : Your App API Key

SocialKeys.twitterApiSecretKey : Your App API Secret Key

SocialKeys.twitterRedirectUri : Your App Redirect Uri

Photo by Spencer Bergen on Unsplash

So now we are done with implementation part , lets see what we have achieved through this whole documentation.

Let’s summerize the whole process of social authentication through images.

Social Sign In Home Page :

Social SignIn Home Page

When you pressed on Google Sign In Button , it gives you one popup which contains list of Gmail accounts associated with your device.

Google Sign In

When you pressed on Facebook Sign In Button , it redirects you to web page to ask about credential to login.

Facebook Sign In

When you pressed on Twitter Sign In Button , it redirects you to web page to ask about credential to login.

Twitter Sign In

Once you have successfully logged in through your social account, you will get a toast message with the details.

Android Home Page With Success :

Success Scenario In Android

iOS Home Page With Success :

Success Scenario In iOS

You will get all the user details based on platforms and policies.

Yes we did it Hurray….!

Conclusion

We have done all the Implementation and Social platforms configuration using the developer portals. If you want to implement for production purposes then you have to create new SHA1 key and Key hash for release mode. So after that, you can go ahead with production. Let me know if you have any query related to this in comments , will be happy if I can help you.

So, that’s it for Social Authentication in Customized Flutter Applications.

You can find the whole project with clean architecture on Git Repository :

Flutter : 2.2.2-stable & Dart : 2.13.3-stable

Social Authentication In Flutter Using Google, Facebook &…