Adding Google Firebase Authentication to your Flutter app — (Part 2) — Android!
By: Vico Melo
Tags: Dart, Flutter, Authentication, Firebase, Android

Photo by Daniel Romero on Unsplash

Previously we added Firebase Authentication capability to our iOS Flutter App, now let’s add it to the Android version.

We’ll be using the same code base from the iOS example, found here:

The steps will be similar to Part 1, so if you need some additional reference, please refer to the iOS article found here https://medium.com/mellowcodelabs/adding-google-firebase-authentication-to-your-flutter-app-ios-7c2fa803adce

Firebase Console

Let’s login to our Firebase Console add an Android app by selecting “Add App” and selecting Android.

The Android Package name should be the same name you selected for the iOS build. In our case it’s com.mellowcodelabs.funflutterauth

Just like the iOS, once you have selected the name and downloaded the Google Services file, just hit next until it’s complete. Those instructions are for native specifically. As always, when referring to the Flutter framework and Firebase Console, use these docs:

Dependencies

Let’s make sure we have the below on our pubspec.yaml file

dependencies:

flutter:

sdk: flutter





# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^1.0.0

firebase_core: ^0.4.0+9

firebase_auth: ^0.14.0+5

google_sign_in: ^4.5.6

Auth Service

We need to have an Auth Service that will handle all of our authentication calls for us. This way we can just worry those methods and logic in one file. Multiple widgets will be able to access it.

Implementation

By now you should have

Created an “Android App” in our Firebase Console Followed the docs, downloaded and added the google-services.json file to the appropriate locations Created the Auth Service that houses all of our authentication related methods.

App Initialization

Next up we’re going to ensure our app knows how to handle authentication when the app starts up. This will allow it to check if user has already been authenticated on startup.

These settings will initialization the app properly using the Firebase library but also give us access to authentication functionality and properties from the start, which will be needed in the next step!

Login Fields UI

So now let’s create a simple UI that will:

Check if user is already authenticated. If so, send them to through to the app. If not send them to the Login Screen widget for authentication. Allow users to enter an email and password and either Sign Up or Login

Home Page Widget

Login Screen Widget

Running It!

So as soon as I tried running it, I got this error.

Remember when we gave our app a name while create our App in the Firebase Console? I named my app com.mellowcodelabs.funflutterauth .

The error we get here is because it’s still trying to match up the names, but in our Android settings locally we still have the default name generated by flutter when we create our project locally. So let’s find all instances of (in my case) com.example.flutter_fun_auth and replace it with com.mellowcodelabs.funflutterauth

Take Two!

Alright now you should get something like this. Yay!

Does it Work?

Let’s create a user then follow up to the Authentication section in our Firebase Console.

If it worked, the app will log you in to the boiler plate Flutter counter page and the Authentication table will reflect with your new user

It Didn’t Work?

If it didn’t work, the first thing to check is that you added a SHA-1 key to your App in the Firebase Console. Instructions for that are in the docs. This is what to look for, number 3 in Step 2. Specifically the SHA-1 section!

If you skipped this step while setting up your app it’s ok. Just follow these the docs and you should be good to go:

Once the SHA-1 Key is generated, copy it somewhere then navigate to the Firebase Console, select Android, and scroll down

You should see the below. Click on “Add Fingerprint” and paste the SHA-1 key.

Stop the Flutter runner, and re-run it.

Hope you liked this tutorial! Please don’t hesitate to leave some feedback.

If following the Part 1 and Part 2 of this tutorial didn’t work for you then I would love to hear about it! I’ll provide any help that I can!