Social Login from Firebase Configuration in Flutter

Integrating social login is a crucial step in modern mobile application development. It improves user experience by offering a seamless and quick way to sign in. In this post, I’ll walk you through the complete process of setting up social login (Google Sign-In) using Firebase Authentication in a Flutter application.

I’ll cover everything from Firebase project configuration to writing the Dart code that enables users to sign in with their Google accounts. This guide assumes you already have a basic Flutter project set up.

Step 1: Setting Up Firebase Project

To start with, I created a new Firebase project:

1. I visited Firebase Console.
2. Clicked on “Add project”, provided a project name, and disabled Google Analytics (optional).
3. After the project was created, I selected the Android icon to register my app.

Here, I needed to provide:

• The package name of the Flutter app (e.g., com.example.myapp)
• A nickname for the app (optional)
• The google-services.json file, which I downloaded and placed inside android/app/ directory of my Flutter project.

If targeting iOS, I would follow a similar process, but download the GoogleService-Info.plist file and place it in the iOS project root.

Step 2: Configuring Flutter for Firebase

In the Flutter project, I first added the necessary Firebase dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.24.0
  firebase_auth: ^4.15.0
  googlesignin: ^6.1.5

After running flutter pub get, I initialized Firebase in the main.dart file:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

This step ensures that Firebase is initialized before the app starts.

Step 3: Enabling Google Sign-In in Firebase Console

Next, I needed to enable Google Sign-In in Firebase Authentication:

1. In the Firebase console, I navigated to Authentication > Sign-in method.
2. Clicked on Google, enabled it, and added a support email.

For Android, Firebase requires an SHA-1 key. I generated it using the command below:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

I added this SHA-1 key in the Firebase project settings under my registered Android app. This step is critical for Google Sign-In to work properly.

Step 4: Implementing Google Sign-In in Flutter

Now it was time to write the code that handles Google Sign-In. I created an authentication service:

import ’package:firebaseauth/firebaseauth.dart’;
import ’package:googlesignin/googlesignin.dart’;

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<User?> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();

      if (googleUser == null) {
        return null; // User cancelled the sign-in
      }

      final GoogleSignInAuthentication googleAuth = await googleUser.authentication;

      final credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );

      final userCredential = await _auth.signInWithCredential(credential);
      return userCredential.user;
    } catch (e) {
      print(’Google Sign-In error: $e’);
      return null;
    }
  }

  Future<void> signOut() async {
    await _googleSignIn.signOut();
    await _auth.signOut();
  }
}

This class handles the complete flow of signing in and out using Google credentials.

Step 5: Integrating Google Sign-In with UI

In my Flutter app, I created a button that users can tap to log in:

ElevatedButton(
  onPressed: () async {
    final user = await AuthService().signInWithGoogle();
    if (user != null) {
      print("Signed in: ${user.displayName}");
    } else {
      print("Sign-In cancelled or failed.");
    }
  },
  child: Text("Sign in with Google"),
)

I also added a sign-out button for good measure:

ElevatedButton(
  onPressed: () async {
    await AuthService().signOut();
    print("Signed out successfully.");
  },
  child: Text("Sign Out"),
)

Step 6: Optional Add-ons

Although this post focuses on Google Sign-In, Firebase also supports other providers like Facebook, Twitter, GitHub, and Apple. Each of them has its own setup steps in the Firebase console, including client IDs and secret tokens.

For example, enabling Facebook login would require:

• Facebook developer account
• Facebook App ID and App Secret
• Adding flutterfacebookauth package

Apple Sign-In, especially for iOS apps, is also mandatory if you offer any third-party sign-in options on Apple devices.

Step 6: Optional Add-ons

Although this post focuses on Google Sign-In, Firebase also supports other providers like Facebook, Twitter, GitHub, and Apple. Each of them has its own setup steps in the Firebase console, including client IDs and secret tokens.

For example, enabling Facebook login would require:

• Facebook developer account
• Facebook App ID and App Secret
• Adding flutterfacebookauth package

Apple Sign-In, especially for iOS apps, is also mandatory if you offer any third-party sign-in options on Apple devices