Integration with Firebase (MBaaS), Flutter works great with Firebase authentication

login via email firebase flutter

Prerequisite

To understand this article you must have,

Basic understanding of Flutter, Basic understanding of Firebase, Basic understanding of Dart, Basic understanding of Android mobile development

Who this article is for?

Those who wish to learn to use Firebase passwordless login in a Flutter app using the email link on the Android platform

NOTE: THERE IS SOME CRITICAL INFORMATION ABOUT FIREBASE ACCOUNT WHICH ARE MY PERSONAL, I HAVE HIDDEN THEM THROUGHOUT. IF YOU SEE A RED BOX HIDING SOME DETAILS, PLEASE DONT PANIC THIS IS INTENTIONAL

Setup the Firebase account and database?

Create a firebase project, if not familiar read this link. This article is for passwordless login, so I have not covered steps related to the creation of firebase account

Let us begin,

How to setup passwordless login in Firebase?

It is a three-step process,

Step 1: Set up sign-in method in firebase, ensure that email sign-in is checked(Anonymous sign-in is optional), have a look at the screenshot below,

setup dynamic links firebase flutter

Step 2: Setup dynamic link in firebase, fill all the details as given below follow all the instruction and input relevant details

setup dynamic links firebase flutter

Step 3: Run below command in your terminal to find out SHA-1 and SHA-256 keys from the system

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

SHA-1 and SHA-256 details to be given in the SHA certificate fingerprints, as shown below

What methods of firebase_dynamic_links are used in this demo and we should use?

There are three methods we need to look closely and use,

getInitialLink() onLink() sendSignInWithEmailLink()

To receive a dynamic link, call the getInitialLink() method from FirebaseDynamicLinks which gets the link that opened the app (or null if it was not opened via a dynamic link) and configure listeners for link callbacks when the application is active or in the background calling onLink .

How passwordless login is setup in Flutter code?

It is a two-step process,

Step 1: Setup Firebase dynamic link in the project by making a change in pubspec.yaml file as given below,

Firebase dynamic link setup

Note: Ensure to run flutter pub get command in the terminal after any dependency change made in pubspec.yaml

Version information can be found at this link, at the time of writing this blog all the latest versions are used

Step 2: Setup code and implement getInitialLink() method, onLink() method is not covered in this article

FirebaseHandler class snippet is given below, that shows how getInitialLink(), sendSignInWithEmailLink and onLink() are used,

firebase flutter passwordless login

The FirebaseHandler class is used in the loginpage.dart class, as given below

firebase flutter login

setDeeplinkClickHandler() method in the snippet above waits for Future from FirebaseHandler class, any logic such as navigation to another screen is to be written here

look at the main.dart file is given below,

login via email flutter firebase

How to test dynamic links during development when the application is not on the app store?

When you receive the link in your email to sign-in, click on it and from console run the flutter app over, this will call the getInitialLink() method and your logic for the dynamic link will be executed

What is the flow of the application?

The login screen will be shown (click the login with email button) Input the valid email and click the send email button(email will be sent) Open your mailbox and check the email, click on the link given there Google play store will be shown(as the app is not on play store a message will be shown depicting that the app is not found) Run the command flutter run from your application terminal The app will be installed and a handler of getDynamiClikData() will be called (.then part to be precise)

passwordless login firebase flutter authentication

passwordless login firebase flutter authentication

Summary

We have just seen how passwordless login in any app works with Firebase. Firebase is an excellent tool that is used by many startups across the globe.