Flutter sign in/up with Firebase Authentication

This article will help you to build Flutter sign in/up(authentication) functions easily with Firebase Authentication.
The whole sample code is here.

Motivation

I felt the official document is a bit unfriendly for non-mobile engineers when I started implementation with Firebase Authentication because it requires a lot of mobile knowledge. So this article is for Flutter(mobile) development beginners.

What is Firebase Authentication

Firebase Authentication is a backend service providing authentication mechanism.
Thanks to it, iOS/Android/Web development got really easy.
Also, Firebase Authentication are really easy to combine with other Firebase services.

Why is Firebase Authentication

So let’s get back to why we should use Firebase Authentication.

Standardized

Firebase Authentication uses standardized and secure mechanism, which are OAuth 2.0 and OpenID Connect.
These are the most commonly used and widely recognized as best practices.

Integrated with External Service Authentications

Recently, you can use more options for authentication such as Google/Twitter/Facebook/Github/SMS(Anonymous auth as well).
Firebase Authentication also provides ways to use these authentications easily so that you don’t have to write complicated logics by yourself.

Steps

• Step1: Firebase Authentication Settings
• Step2: Client Auth(Android/iOS)
• Step3: Implement in Flutter

Step1: Firebase Authentication Settings

First, you need to add your app to firebase console.

firebase console

You can just add your project(flutter-fire-auth).

Firebase Authentication

You can add authentications services here. This time we can just go for Email/Password. Click Email/Password and make it “Enable”. That’s for all things you need to do in Firebase console.

Step2: Client Auth

Google Service requires to create OAuth2.0 client and API Key(application identification mechanism to access resource server).
So you need to create your client app with signing certificate.

Add your client app

First, add your client app.
For Flutter we’d like to run both in iOS/Android(could be Web!!).

Android

register app

You can see package name in AndroidManifest.xml which is located in project-name/android/app/src/main/AndroidManifest.xml .

For Android signing certificate required SHA-1, so put command below.

keytool -exportcert -list -v -alias <your-key-name> -keystore <path-to-production-keystore>

For debugging certificate is automatically put specific directory(~/.android/debug.keystore), so command like below.

keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

※ Keystore is Android Application digital signing.
It would ask you to enter password. The default password is android .

put config file

add firebase SDK in your app

Just follow the instructions and try to run main.dart.
If this doesn’t work because of androidx, just follow the instructions here.
※androidx is recent introduced mechanism for back-compatible and would be more modularized than previous system.
Then, you finish Android settings.

iOS

register app

You can see Bundle Identifier in Xcode. Let’s open Runner.xcworkspace(not Runner).

bundle identifier

You can see Bundle Identifier there. so put it in the console.

put config file

Just follow the instructions(put the root of the Runner) and don’t forget add it to all targets . If you don’t, you would get some errors.

add firebase SDK in your app

Init pod and there is called Podfile under ios project root. So put pod 'Firebase/Core' under #Pods for Runner .
Then, call pod install for downloading Firebase SDK.

initialization

For iOS, We need to add initialization code in AppDelegate.swift . Put 2 lines like above. import Firebase and FirebaseApp.configure()

Step3: Implement in Flutter

There is a plugin called Firebase Auth developed by Flutter Team.
Add this line in pubspec.yaml

dependencies: 
  firebase_auth: ^0.15.2

and download it by calling like this.
(Android Studio would show package get on alert window)

$ flutter packages get

You can finally use it where you want to use it like below.

import 'package:firebase_auth/firebase_auth.dart';

neonankiti/flutter_fire_auth

Wrote some samples about fire authentication here.

Summary

• Firebase Authentication is easy way to implement authentication securely.
• Firebase Authentication requires native application knowledge.