Google Firebase Email/Password And Google Login In Flutter

Introduction

Steps

1. The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog Create a first app in Flutter. I have created an app named “flutter_email_signin”.
   
2. Now, you need to set up a project in Google Firebase. Follow the below steps for that. Please follow the steps very carefully.

• Go here and add a new project. I will share a screenshot of how it looks so you will get a better idea.
• Click on "Add Project" to add a new project in Google Firebase. Then, you will find the below form.

• Give a project name and accept the terms and conditions and click on Create Project. It will take some time to create a new project and redirect you to the project overview page.

• Now, you need to add an Android app in this project [Please check the below screenshot]. You can add a new Android project by clicking on the Android icon. You can also add an iOS project if you want to create the iOS application for the same.

• In Project Overview, add Android app. For that, click on the Android icon. It will open a new form.

• You will find the Android package name in the AndroidManifest.xml file in the Android => App => main folder of your project.
• App nickname is optional
• For SHA-1 generation goto here.
• In step 2 download google-service.json and put in Android => App folder of your project
• In step 3 you can see you need to configure some dependencies
  

  1. buildscript {
  2. dependencies {
  3. // Add this line
  4. classpath 'com.google.gms:google-services:4.2.0'
  5. }
  6. App - level build.gradle( < project > /<app-module>/build.gradle): means build.gradle file in Android = > App folder
  7. // Add to the bottom of the file
  8. apply plugin: 'com.google.gms.google-services’

  Note
  Don’t need to add implementation 'com.google.firebase:firebase-core:16.0.9' in dependencies

• In Step 4 It will try to verify your app. For that, you need to run your app once or you can skip this step.
• Hooray :) Your Android app has been created.

3. Now, you need to enable the Email/Password and/or Google Sign In method in Firebase. For that, you need to go to the Authentication tab and then the "Sign in" method tab. From there, enable Email/Password and Google sign-in method. Please check the screenshot.

• You are all done with firebase Setup. Congratulations…. :)

4. Go back to the project and open pubspec.yaml file in the root of the project. Pubspec.yaml is used to define all the dependencies and assets of the project.

• Add the below dependencies and save the file

firebase_auth:

google_sign_in:

• Please check the below screenshot and you will get a better idea of where to add the dependency.

NOTE[Updated on 23-12-2019]
Due to update in firebase and google_sign_in dependency please use below dependency in above screenshot

1. firebase_auth: ^0.15.2
2. google_sign_in: ^4.1.0

• Run Flutter packages using get in the terminal OR If you are using Visual Studio Code then after saving file it will automatically run the Flutter package get command.
• Now, we are done with all dependency setup at project side as well…. :)

5. Now, we need to programmatically handle signup and sign in in Google firebase. For that, we create 2 pages, login_page.dart and registration_page.dart, and signup and sign in in both pages. I have attached a link for the git repo in the bottom of the article, you can take reference from there. Here I will just define sign in and sign up methods for understanding.
   
   import 'package:firebase_auth/firebase_auth.dart';

• SignUp Using Email/Password in Google Firebase
  

  1. Future < FirebaseUser > signUp(email, password) async {
  2. try {
  3. FirebaseUser user = await auth.createUserWithEmailAndPassword(email: email, password: password);
  4. assert(user != null);
  5. assert(await user.getIdToken() != null);
  6. return user;
  7. } catch (e) {
  8. handleError(e);
  9. return null;
  10. }
  11. }

• Sign In using Google
  

  1. Future < FirebaseUser > googleSignin(BuildContext context) async {
  2. FirebaseUser currentUser;
  3. try {
  4. final GoogleSignInAccount googleUser = await googleSignIn.signIn();
  5. final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  6. final AuthCredential credential = GoogleAuthProvider.getCredential(accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, );
  7. final FirebaseUser user = await auth.signInWithCredential(credential);
  8. assert(user.email != null);
  9. assert(user.displayName != null);
  10. assert(!user.isAnonymous);
  11. assert(await user.getIdToken() != null);
  12. currentUser = await auth.currentUser();
  13. assert(user.uid == currentUser.uid);
  14. print(currentUser);
  15. print("User Name : ${currentUser.displayName}");
  16. } catch (e) {
  17. handleError(e);
  18. return currentUser;
  19. }
  20. }

• Signout from Google
  

  1. Future < bool > googleSignout() async {
  2. await auth.signOut();
  3. await googleSignIn.signOut();
  4. return true;
  5. }
  6. }

6. When you sign up successfully, you can check the Google Firebase store and the user details in server. Please check the screenshot.