How to implement Google Sign in feature in Flutter App

Users can sign in with their Google credentials by using Google Sign-In, a popular authentication solution in Flutter applications. By giving consumers a safe and practical means to access the different features and services within an app, it streamlines the authentication process. Google Sign In may be easily integrated by developers using Flutter’s Firebase Authentication module.

Developers can allow users to authenticate with their Google accounts and grant access to their basic profile information and other specified permissions by implementing the required methods and callbacks. Users may interact with the app and access personalized features more easily thanks to this connection, which also improves user experience and expedites the onboarding process.

Introduction

Users can use Google Sign-In, a robust authentication method, to log into Flutter applications with their Google accounts. Developers can streamline authentication with Google Sign-In. By offering a safe and easy login option, Google Sign In Flutter will also assist you in improving the user experience. Google Sign-In in Flutter opens up a world of possibilities for developing interesting and user-focused applications, whether it’s for obtaining user data or integrating with Google services.

Setting up Google Sign-In in Flutter

As we have now understood the various advantages offered to us by the Google sign in flutter we need to understand how to set it up in our flutter application. This is the most basic starting step in the entire process of using google sign in flutter to allow a secure login option. In this section, we shall learn the

To set up Google Sign-In in a Flutter application, you need to follow these steps:

Step 1: Configure Firebase Project

Create a new Firebase project or use an existing one at the Firebase console. Enable Google Sign-In in the Firebase Authentication section. Add your Android and iOS app to the Firebase project by following the provided instructions for each platform. Make sure to provide the correct package name (Android) and bundle identifier (iOS).

Step 2: Add Dependencies

Open your Flutter project in your preferred code editor. Open the pubspec.yaml file and add the following dependencies:

dependencies:
  firebase_core: ^1.0.0
  firebase_auth: ^3.0.0
  google_sign_in: ^5.0.0

Save the file, and run flutter pub get in the terminal to download the new dependencies.

Step 3: Configure Android App

For Android, open the android/app/build.gradle file and add the following line inside the dependencies section: implementation ‘com.google.firebase:firebase-auth:21.0.1’

Save the file.

Step 4: Implement Google Sign-In in Flutter

• In your Flutter code, import the necessary packages:

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

• Initialize Firebase in your main function:

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

• Create a GoogleSignIn instance:

final GoogleSignIn googleSignIn = GoogleSignIn();

• Implement the Google Sign-In flow. Here’s an example for signing in:

Future<void> signInWithGoogle() async {
  try {
    final GoogleSignInAccount? googleSignInAccount = await googleSignIn.signIn();
    final GoogleSignInAuthentication googleSignInAuthentication = await googleSignInAccount!.authentication;

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

    final UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(credential);
    final User? user = userCredential.user;
    
    // Use the user object for further operations or navigate to a new screen.
  } catch (e) {
    print(e.toString());
  }
}

• Call the signInWithGoogle() function when the user triggers the sign-in action.

These steps should help you set up Google Sign-In in your Flutter application. Remember to handle error cases and customize the user experience as per your app’s requirements.

Implementing Google Sign In in Flutter

After you have set up google sign-in in flutter, here is the approach to implement it in your project.

1. Set up a new Flutter project:
   Start by creating a new Flutter project using the Flutter SDK and your preferred IDE.
2. Add necessary dependencies:
   Open your project’s pubspec.yaml file and add the required dependencies for Google Sign In. You can use the google_sign_in package, which is an official Flutter package provided by Google. Make sure to run flutter pub get to fetch the dependencies.
3. Obtain API credentials:
   Go to the Google Developers Console and create a new project. Enable the Google Sign-In API and generate the necessary credentials (client ID and secret). Make sure to configure the authorized redirect URI for your Flutter app.
4. Configure Android and iOS platforms:
   Follow the instructions provided by the google_sign_in package to configure the required settings in your Android and iOS projects. This typically involves adding the credentials and making changes to the Android Manifest and Info.plist files.
5. Implement Google Sign In in your Flutter app:
   In your Flutter project, create a new Dart file or modify an existing one to handle the Google Sign In functionality. Import the necessary packages, initialize the GoogleSignIn object, and implement the authentication flow using the provided methods (signIn, signOut, etc.). You can refer to the package documentation for more details on the available methods and options.
6. Design your application:
   Create the user interface for your application using Flutter’s widgets. Design the login screen with a Google Sign In button to initiate the authentication process. You can use Flutter’s MaterialButton or customize it with Flutter’s InkWell and GestureDetector widgets.
7. Test and debug:
   Run your Flutter app on different devices and test the Google Sign In functionality. Verify that the authentication flow works as expected and that the user’s Google credentials are successfully obtained.

Remember to handle errors and edge cases during the authentication process, such as network connectivity issues, user cancellation, and token expiration.

Please note that the implementation details may vary depending on the specific Flutter version and the packages you choose to use. It’s recommended to consult the official documentation and package references for the most up-to-date instructions and guidelines.