Social Login in Flutter

Sanjeev

28 April 2023

In today’s article, we are going to implement social login in flutter. We will only implement Google and Facebook login.

Our Flutter app development company also provides various Social Login compatibility with your app.

Step 1. First, create a flutter project by running the following command.

flutter create social_login

1	flutter create social_login

here, social_login is the name of the project

Create Firebase Project and Enable Authentication

Step 2 Create a project on firebase and enable both Google and Facebook login.

Please follow this to create a project on firebase create-firebase-project

Step 3. Once step 2 is completed add apps (android and ios). Please follow this.

Step 4. Enable google and Facebook login

Go to firebase console
Open Authentication Tab
Navigate to the Sign-in method
Add a new provider (enable both Google and Facebook)

Setup Facebook developer account and app

Note: To enable Facebook login you need to have a Facebook developer account. If not already have please create a Facebook developer account and then create a project. Please follow this to create an account.

Please follow this to create a Facebook app.

Step 5. Once the Facebook app is created now we need to add a platform.

Go to dashboard
Select Facebook login
Select a platform for which you want to add a Facebook login (android/ ios).

Now as our firebase project is configured and also facebook developer is also ready. Now we can finally start to integrate social login.

Step 6. As we have already created a flutter project, it’s time to add the required dependencies to our project. Please add the following dependencies to our project.

You may add dependency by any of the following methods.

Open your pubspec.yaml file and add the following

dependencies:
    google_sign_in: ^5.3.0
    flutter_facebook_auth: ^4.3.0
    firebase_core: ^1.15.0

dependencies:

google_sign_in: ^5.3.0

flutter_facebook_auth: ^4.3.0

firebase_core: ^1.15.0

Add from the command line

flutter pub add google_sign_in

flutter pub add flutter_facebook_auth

flutter pub add firebase_core

flutter pub add google_sign_in

flutter pub add flutter_facebook_auth

flutter pub add firebase_core

Step 7. Platform-specific changes for Facebook login

Android

Please follow this for Android Configuration

IOS

Please follow this for IOS Configuration

Step 8. Create buttons to perform login

Center(
          child: Column(
            children: &lt;Widget&gt;&#91;
              TextButton(
                onPressed: () async {
                  final result = await firebase.performGoogleSignIn();
                  if (result != null) {
                    log(result.email);
                  }
                },
                child: const Text("Signin with Google"),
              ),
              TextButton(
                onPressed: () async {
                  final result = await firebase.facebookSignIn();
                  if (result != null &amp;&amp; result.status == LoginStatus.success) {
                    final data = await FacebookAuth.instance.getUserData();
                    log(data.toString());
                  }
                },
                child: const Text("Signin with Facebook"),
              ),
            ],
          ),
        ),

Center(

child: Column(

children: <Widget>[

TextButton(

onPressed: () async {

final result = await firebase.performGoogleSignIn();

if (result != null) {

log(result.email);

}

child: const Text("Signin with Google"),

TextButton(

onPressed: () async {

final result = await firebase.facebookSignIn();

if (result != null && result.status == LoginStatus.success) {

final data = await FacebookAuth.instance.getUserData();

log(data.toString());

}

child: const Text("Signin with Facebook"),

Step 9. Now we will write the logic to perform google and Facebook login

Import the required packages

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

1 2	import 'package:flutter_facebook_auth/flutter_facebook_auth.dart'; import 'package:google_sign_in/google_sign_in.dart';

Google login

Future&lt;GoogleSignInAccount?&gt;? performGoogleSignIn() {
    try {
      return GoogleSignIn().signIn();
    } catch (err, stk) {
      log(err.toString());
      log(stk.toString());
      return null;
    }
  }

Future<GoogleSignInAccount?>? performGoogleSignIn() {

try {

return GoogleSignIn().signIn();

} catch (err, stk) {

log(err.toString());

log(stk.toString());

return null;

}

Facebook Login

Future&lt;LoginResult?&gt;? facebookSignIn() {
    try {
      return facebook.login();
    } catch (err, stk) {
      log(err.toString());
      log(stk.toString());
      return null;
    }
  }

Future<LoginResult?>? facebookSignIn() {

try {

return facebook.login();

} catch (err, stk) {

log(err.toString());

log(stk.toString());

return null;

}

Conclusion

Hope this helps you to understand how to integrate social login in the flutter app.

Please head over here for more blogs on flutter.