Google Sign In With Firebase in Flutter

Firebase is a product of Google that helps developers to build, manage, and grow their apps easily. It helps developers build their apps faster and more securely. No programming is required on the Firebase side which makes it easy to use its features more efficiently. Google Sign-in with Firebase in the Flutter Web app can be done by choosing the account through which you wish to sign in.

Steps to Implement Google Sign-In with Firebase

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add  firebase_core and firebase_auth as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Now run the below command in the terminal.

flutter pub get

Or

Run the below command in the terminal.

flutter pub add firebase_core firebase_auth

Step 3 : Import dependencies

To use libraries, import all of them in the respective .dart file,

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

Step 4 : Add Firebase to your Flutter application

Follow this article to know How to Add Firebase to Flutter App?

Step 5 : Create a web app in Firebase

After creating a Firebase project in the Firebase Console. In Project Overview, go to And.

–  Navigate to project_folder/android/app/build.gradle, where you will find the package name in the defaultConfig section as follows:

defaultConfig {
 applicationId "com.example.app" // This is your package name
 ...
}

AndAndroid Enter a android app name -> Click on Register App.

Note: It is essential to add a SHA-1 key. Refer to this article:- How to Generate SHA-1 Key in Flutter?

–  As shown in the below image, Download the google-services.json file and place it in the project-folder/android/app location.

– :

• Update your android/build.gradle:

• Update your android/app/build.gradle:

–  Click on Continue to console.

Step 6: Enable Google Sign-In in Firebase

– In Firebase Console, go to Build ->Authentication -> Sign-in Method and click below on “Get started“.

– Click on Google.

– Enable Google authentication and set a support email and click on “Save”.

Step 7 : Project Structure

Create the project structure as shown in the image below.

Step 8 : signInWithGoogle Method

Create a signInWithGoogle method to enable user login with Google using the firebase_auth and google_sign_in packages.

signInWithGoogle.dart:

Step 9 : Working With main.dart:

Add the boilerplate code below in main.dart to initialize the Firebase in the main function and create a basic structure with an MaterialApp.

main.dart:

Step 10 : Create Sign-inthe Screen

Display an Elevated to Sign in using your Google accounts.

sign_in_screen.dart:

Step 11: Create Home Screen

Display user details after login.

home_screen.dart :

Step 12 : Run the application

flutter run

Select any android device per your choice. Then Run the application using above command. Click on the ‘Sign In with Google’ button and choose your account.

Output: