Google Firebase Email/Password And Google Login In Flutter

Introduction

Google Firebase is trending nowadays. It has around 10 sign in methods which include email, Google, Facebook, phone, Twitter, Yahoo etc. We are covering only the email and Google login options in this article. Now, we are going step by step. I have given the git repository link at the bottom as well.

Steps

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

Google Firebase Email and GooglePlus Login in Flutter

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.

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…. :)

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

firebase_auth: ^0.15.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…. :)

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

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

NOTE
PLEASE CHECK OUT ATTACHED ZIP FULL SOURCE CODE. YOU NEED TO ADD YOUR google-services.json FILE IN ANDROID => APP FOLDER.

NOTE
Due to update in dependencies I have wrote another article in which Google Login included with Google Drive Feature, Please check that article so you may not face any errors and issues. Please check this article.

5 Comments

Join the conversation! Your thoughts help the community grow.

Tekina Tawar6y ago
Can Someone Please Explain why we need to authenticate with firebase user even if we are signing in with Google.
Ken François6y ago
The GoogleSignIn page shows but returns "Error while Login." however, the only fix to that was to excute "./gradlew signingReport" in the Terminal of Android Studio for the SHA-1/SHA-256 and save via Firebase/ under Settings of the Android app/ Users and Permission. Another way via the terminal for SHA-1 (debug, not release): Mac - keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android Windows - keytool -list -v -keystore "\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
Richard Steinmetz7y ago
Very concise, but would be cool to include some screenshots of the end result so one knows from the beginning how the UI will look like
Chan David7y ago
Excellent Sample.
- Parth Patel7y ago
  Thanks Chan David :)