Google Sign In Authentication and Email Authentication using Firebase and Flutter (2021) with Provider Plugin

I think the above title is very descriptive, so let’s dive in.. ;)

5 min readFeb 9, 2021

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter  firebase_core: ^0.7.0
  firebase_auth: ^0.20.0+1
  google_sign_in: ^4.5.9
  provider: ^4.3.3

Links for required plugins

Hearing about “Provider” for the first-time? {else skip this Section}

It’s a wrapper around InheritedWidget to make them easier to use and more reusable.
By using provider instead of manually writing InheritedWidget, you get:

simplified allocation/disposal of resources
lazy-loading
a largely reduced boilerplate over making a new class every time
devtools friendly
a common way to consume these InheritedWidgets (See Provider.of/Consumer/Selector)
increased scalability for classes with a listening mechanism that grows exponentially in complexity (such as ChangeNotifier, which is O(N²) for dispatching notifications).

To read more about provider, see its documentation.

Summary
On the whole, it’s a simple wrapper plugin which helps us in keeping the logical code (here, authentication code) from the UI part of Flutter, and also has many advantages which will help our code to run in a more optimized fashion.
Makes the code more readable and re-usable.

Setting up Firebase !! {Steps to follow}

Go to https://firebase.google.com/ and sign-in with your google account.
Click on Get started and get started.
Then click on Create a project.
Below the “Get started by adding Firebase to your app”, choose your app preference (Android or IOS), and complete the registration of you app.
On the side menu under the Build section, click on authentication, again Get started and enable the Email/Password and Google signing-in option.

Note

The SHA certficate fingerprint, I request you to add that even though it says as optional, just for security purposes.
In Android Studio, open terminal and paste the below command.
Now press enter and scroll to debug variant and get the SHA1 key.

{Windows} gradlew signingReport
{Mac}     ./gradlew signingReport

All the setup is done, now let’s begin with the Programming part !!!

[1] Google Auth

This is a little tricky because, we have to sign-in with the Google account of the user and then pass the account information to Firebase, so that we have access to the user in any screen.

In the UI part, we will be having a Sign-in Button and when the button is pressed on, the signing-in process should start and after the user is signed-in successfully, it should take us to the next page or if we want we have rebuild the same page. In my code, I have changed the screen, that’s what most people do in their real apps.

The Google Sign-In handler function

Google Sign-in function

In the function we have used the try catch function, so that if we encounter with some error we will be able to handle them, for instance, the user doesn’t have proper internet connection or some other scenario where the user is not able to sign-in properly.

Firstly, we are calling the signIn() using GoogleSignIn() class instance, this will prompt and show all the google accounts available in the phone and then we can choose the account with which we are going to login in.
Next, the googleSignInAuthentication, this variable is for accessing and passing the credentials of the user to Firebase.
Continuation to the previous variable, we are creating a credential variable so pass through this function, signInWithCredential(credential).
Now that we have sent the information of the google user to Firebase as a instance, we can access this user’s public information like, userName, photo, etc.
The next lines of code are a set of assertions, so that we have a user who is not Anonymous and we don’t lose the user in the middle.

The Google Sign-Out handler function

Google Sign-out function

The signing-out function is very simple, we are first disconnecting the user from our flutter application and then signing out the user instance from Firebase as well.

So totally, for Google Sign-in, we have 3 files,
1) Screen with sign-in button
2) Landing Screen (After the user logins.. welcome screen)
3) Auth Service Provider file

[2] Email/Password Auth

Same as the Google Sign-In for the UI part, we will be having a Sign-in Button and when the button is pressed on, we will take the user to a email registration screen, if the user is a first time user, then he/she has to register and then login, else he/she can directly go to the login screen and then enter the email and password credentials and login into the app.

Here, we have 4 files
1) Registration Screen
2) Login Screen
3) Landing Screen (After the user logins.. welcome screen)
4) Auth Service Provider file

The Email Sign-up handler function

Email Sign-up function for Registration with Firebase

The sign-up function is for registration purpose, i.e. the user is a first time user for the app, so he/she has to create an account in order to login. From the UI part of the screen, we are collecting, the email, password and also the user’s username.

With the createUserWithEmailAndPassword() function, we are creating a new user instance in Firebase with the given email and password.
The creating of the user instance takes a while, so we are checking if there is any user instance, and then we are updating the user with the given username.
The remaining lines of code is Exception Handling.

Email Sign-in function for Logging in

Same as creating a user, we are logging-in the user with their email & password credentials. And some the most occurring exceptions are handled.

Email Sign-out function

Similar to Google sign-out, the signing-out function is very simple, we are signing out the user instance from Firebase.

The End..

Thanks for reading! 😊 If you enjoyed it, support me and share the story !!! ❤

In case you need the source code, here is my GitHub Repository.

You can always correct me if I’m wrong, share your thoughts, feedback, comments, and clarifications. It helps me to encourage and improvise myself.

For more informative articles from me, follow me medium. Cheers ❤ and Happy learning !!