How to integrate Login with Google in Flutter using Firebase step by step

Integrating Google login in a Flutter app using Firebase involves several steps. Here’s a step-by-step guide to get you set up:

Prerequisites:

1. Flutter SDK installed on your system.
2. Firebase Account and a Firebase project created.
3. Google Cloud Platform project with OAuth 2.0 credentials set up.

1. Create a Firebase Project

1. Go to the Firebase Console.
2. Click on “Add project” and follow the setup wizard to create a new project.

2. Add Firebase to Your Flutter App

For Android:

1. In the Firebase Console, go to your project and click on the Android icon to add an Android app.
2. Register your app by entering the package name (com.example.appname) and optionally other details.
3. Download the google-services.json file.
4. Place google-services.json in your Android project’s android/app directory.
5. Modify your android/build.gradle file to include the Google services classpath in the dependencies section:

dependencies {
    // Add this line
    classpath 'com.google.gms:google-services:4.3.15'
}

6. Modify your android/app/build.gradle file to apply the Google services plugin at the bottom:

apply plugin: 'com.google.gms.google-services'

For iOS:

1. In the Firebase Console, go to your project and click on the iOS icon to add an iOS app.
2. Register your app by entering the iOS bundle ID and other details.
3. Download the GoogleService-Info.plist file.
4. Place GoogleService-Info.plist in the ios/Runner directory.
5. Open ios/Podfile and ensure it’s set up to use frameworks:

platform :ios, '10.0'
use_frameworks!

1. Run pod install in the ios directory.

3. Add Firebase Dependencies to Your Flutter App

1. Open pubspec.yaml and add the required dependencies for Firebase and Google Sign-In:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_auth: ^4.15.0
  google_sign_in: ^6.7.0

1. Run flutter pub get to install the new dependencies.

4. Initialize Firebase in Your Flutter App

1. Modify your lib/main.dart to ensure Firebase is initialized before the app starts:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart'; // Automatically generated file

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

5. Set Up Google Sign-In

1. Import the necessary packages in your lib/home_screen.dart or the relevant file where you want to implement the sign-in functionality:

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

2. Create the sign-in logic:

class HomeScreen extends StatelessWidget {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<void> _signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
      if (googleUser == null) {
        // User canceled the sign-in
        return;
      }
      final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
      final credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      await _auth.signInWithCredential(credential);
      print("User signed in: ${_auth.currentUser?.displayName}");
    } catch (e) {
      print("Error during sign-in: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Sign-In'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _signInWithGoogle,
          child: Text('Sign in with Google'),
        ),
      ),
    );
  }
}

6. Configure OAuth Consent Screen

1. Go to the Google Cloud Console.
2. Select the project linked to Firebase.
3. Navigate to APIs & Services > OAuth consent screen.
4. Configure the consent screen, specifying necessary details like app name and support email.

7. Add OAuth 2.0 Client IDs

1. Go to APIs & Services > Credentials.
2. Create OAuth 2.0 Client IDs for both Web application and Android.
3. For Android, add your package name and SHA-1 fingerprint. For Web, ensure your redirect URIs are set up correctly.

Also Read:- Top 100 Flutter interview questions and answers in 2024

8. Test Your Implementation

Run your app on an emulator or device and test the Google Sign-In process.

By following these steps, you should be able to integrate Google Sign-In into your Flutter app using Firebase. If you encounter issues, check Firebase and Google Cloud documentation for troubleshooting.