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.
You can just add your project(flutter-fire-auth).
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.
First, add your client app.
For Flutter we’d like to run both in iOS/Android(could be Web!!).
Android
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
.
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
You can see Bundle Identifier in Xcode. Let’s open Runner.xcworkspace(not Runner).
You can see Bundle Identifier there. so put it in the console.
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.
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.
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';
Wrote some samples about fire authentication here.
Summary
- Firebase Authentication is easy way to implement authentication securely.
- Firebase Authentication requires native application knowledge.