Google Firebase Email/Password and Google Login

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.

• 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. }  

• SignIn Using Email/Password in Google Firebase
  

  1. Future < FirebaseUser > signIn(String email, String password) async {  
  2.     Try {  
  3.         FirebaseUser user = await auth.signInWithEmailAndPassword(email: email, password: password);  
  4.         assert(user != null);  
  5.         assert(await user.getIdToken() != null);  
  6.         final FirebaseUser currentUser = await auth.currentUser();  
  7.         assert(user.uid == currentUser.uid);  
  8.         return user;  
  9.     } catch (e) {  
  10.         handleError(e);  
  11.         return null;  
  12.     }  
  13. }  

• 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.