Step-by-Step Guide: How to Integrate Google Login in a Flutter App

User authentication is an essential aspect of building mobile apps, and implementing a login system can be a daunting task for any developer. Fortunately, Google provides an easy-to-use authentication API that allows users to sign in to your app with their Google account. In this tutorial, we'll show you how to set up Google Login in a Flutter app, step by step.

Step 1: Create a Firebase Project

1. Go to the Firebase Console (https://console.firebase.google.com/) and create a new project.

2. Once your project is created, click on the "Authentication" tab on the left-hand side of the screen.

3. Click on the "Set up sign-in method" button and enable Google as a sign-in provider.

4.Add your app by clicking on the "Add app" button and following the instructions.

Step 2: Configure Google Login for Android

1. Add the following permissions to your Android manifest file (android/app/src/main/AndroidManifest.xml):

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

2. Add the following code to your Android manifest file inside the application tag:

 <meta-data
 android:name
  ="com.google.android.gms.version"
 android:value
   ="@integer/google_play_services_version" />

3. Add the following code to the build.gradle file in the app directory:

   dependencies {
   // Add the following dependencies
   implementation platform('com.google.firebase:firebase-bom:28.4.1')
   implementation 'com.google.firebase:firebase-auth'
   implementation 'com.google.android.gms:play-services-auth:19.2.0'
  }

Step 3: Configure Google Login for iOS

1. Add the following code to your Podfile:

 pod 'Firebase/Auth'

2. Run pod install in your terminal to install the Firebase Auth pod.

3. Add the following code to the AppDelegate.swift file:

 import UIKit
 import Firebase

  @UIApplicationMain
 class AppDelegate:
    UIResponder, UIApplicationDelegate {

   func application(_ application:
    UIApplication, didFinishLaunchingWithOptions
    launchOptions: [UIApplication.LaunchOptionsKey:
    Any]?) -> Bool {
     // Initialize Firebase
    FirebaseApp.configure()
  return true
 }

 // Add the following method
 func application(_ application:
 UIApplication, open url: URL, options:
 [UIApplication.OpenURLOptionsKey : Any]
          = [:]) -> Bool {
    return GIDSignIn.sharedInstance
    .handle(url)
 }

 }

4. Add the following code to your Info.plist file:

 <!-- Google Sign-in for iOS -->
 <key>CFBundleURLTypes</key>
 <array>
 <dict>
 <key>CFBundleURLSchemes</key>
 <array>
 <!-- Replace [REVERSED_CLIENT_ID] 
 with your reversed client ID -->
 <string>com.googleusercontent.apps
    .[REVERSED_CLIENT_ID]</string>
 </array>
 </dict>
 </array>
 <key>LSApplicationQueriesSchemes</key>
<array>
<string>googlechrome</string>
<string>https</string>
<string>http</string>
</array>

Note: To obtain the REVERSED_CLIENT_ID, go to the Google Cloud Console, select your project, click on "APIs & Services" > "Credentials", and copy the "iOS URL Scheme" value.

Step 4: Implement Google Login in your Flutter app

1. Import the necessary packages at the top of your Dart file:

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

2. Create a GoogleSignIn object:

 final GoogleSignIn _googleSignIn 
  = GoogleSignIn();

3. Create a FirebaseAuth object:

 final FirebaseAuth _auth = FirebaseAuth.instance;

4. Implement the Google Login function:

 Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount googleUser
  = await _googleSignIn.signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication googleAuth
  = await googleUser.authentication;

  // Create a new credential
  final credential
  = GoogleAuthProvider.credential(
    accessToken:
    googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

  // Once signed in, return the UserCredential
  return await _auth.signInWithCredential(credential);
 }

5. Use the signInWithGoogle() function to handle the Google Login process:

 UserCredential userCredential = await signInWithGoogle();

That's it! You have now successfully integrated Google Login into your Flutter app.

Note: Remember to handle errors that may occur during the authentication process. You can refer to the official documentation for more information on error handling.