Implement Authentication in Flutter with Firebase Authentication

4 min readJan 9, 2020

There is no doubts that Firebase becomes more and more popular service for mobile app development, for it provides all-in-one solution for back-end services. In this story, I want to show steps to integrate authentication into your Flutter app using Firebase Authentication service.

Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. See more here.

Firebase

Firebase is built on Google infrastructure and scales automatically, for even the largest apps. See more here.

Prerequisites

Understand about flutter development as well as dart language
Know about firebase and its services.
Create a project under firebase’s dashboard.
Create android application in above project

Introduction

There is a package for integrating firebase to flutter app on pub and it is firebase_auth . However, in this story, I won’t show you how to use this package, since they already publish document here. Indeed, I want to walk through another package called identity_firebase . This is a package I use in my flutter projects.

In order to simplify the story, I only demonstrate for android platform. You can easily find complete example at https://github.com/dotronglong/flutter-firebase-auth-example

Getting Started

Download and place file google-services.json under android/app
Add dependencies in android/app/build.graddle

dependencies {
    // ...

    implementation 'com.google.firebase:firebase-analytics:17.2.0'
    implementation 'com.google.firebase:firebase-auth:19.0.0'
}

Add below line right after dependencies in android/app/build.graddle

apply plugin: 'com.google.gms.google-services'

Add this code to dependencies of android/build.graddle

dependencies {
    // ...    classpath 'com.google.gms:google-services:4.3.2'
}

Sign In With Email/Password

This is the most common method to authenticate a user in your system, and firebase allows to do that with ease.

Add package to your flutter project

identity_firebase: ^0.1.0

Add below code to home.dart (it should be added where the main page loads)

import 'package:flutter/material.dart';
import 'package:identity/identity.dart';
import 'package:identity_firebase/identity_firebase.dart';

import 'user.dart';

class MyHomePage extends StatefulWidget {
  // ...
}

class _MyHomePageState extends State<MyHomePage> {
  // ...

  @override
  void initState() {
    super.initState();

    Identity.of(context).init(
        FirebaseProvider([FirebaseEmailAuthenticator()]),
        (context) => UserPage(user: Identity.instance.user));
  }
}

Compile and run the code, result should be similar to below

It will allow your users to sign in or sign up using email and password. Once user log in successfully, it will direct user to UserPage as following

Sign In With Facebook

Next, we will process to add Facebook authentication to our app, hence, user does not need to create or log in using email and password.

From your firebase project, you need to enable Facebook Sign In method

Enable Facebook in Firebase Authentication

Since facebook app is required, you have to create a facebook app first, check more on it here

Back to our flutter app, we need to add package

identity_firebase_facebook: ^0.1.0

Create a file android/app/src/main/res/values/strings.xml with below content

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">[APP_NAME]</string>
    <string name="facebook_app_id">[FACEBOOK_APP_ID]</string>
    <string name="fb_login_protocol_scheme">fb[FACEBOOK_APP_ID]</string>
</resources>

Replace [APP_NAME] with your app’s name, [FACEBOOK_APP_ID] with your facebook app’s id

Add following lines to android/app/src/main/AndroidManifest.xml

<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>
<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
        "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />
<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

Let’s update home.dart with following code

// ...
import 'package:identity_firebase_facebook/identity_firebase_facebook.dart';// ...@override
void initState() {
  super.initState();

  Identity.of(context).init(
      FirebaseProvider([
        FirebaseEmailAuthenticator(),
        FirebaseFacebookAuthenticator()
      ]),
      (context) => UserPage(user: Identity.instance.user));
}

Rerun the flutter application

Sign In With Google

This is last provider which I will mention in this story, however, the list of providers is not limited to ones I mention in this post.

Add package to app

identity_firebase_google: ^0.1.0

Likewise, we have to enable Google Sign In Method

In order to support Android, we will need to configure SHA1 fingerprint in app settings

Similarly, we need to modify home.dart as following

// ...
import 'package:identity_firebase_google/identity_firebase_google.dart';// ...
@override
void initState() {
  super.initState();

  Identity.of(context).init(
      FirebaseProvider([
        FirebaseEmailAuthenticator(),
        FirebaseFacebookAuthenticator(),
        FirebaseGoogleAuthenticator()
      ]),
      (context) => UserPage(user: Identity.instance.user));
}

Rerun the application to make changes

Extras

Retrieve current user using below code

Identity.of(context).user
// or
Identity.instance.user

In order to log user out

Identity.of(context).user = null

Conclusion

identity_firebaseand its relevant packages help to integrate Firebase Authentication with ease. It is extendable for other 3rd-party SSO services as well.