Full source code available here.

If you are building an app, there’s a good chance you’ll need to implement login and increasingly popular passwordless is a good way to go — it’s safe and easy for the user.

From Auth0 article Is Passwordless Authentication More Secure Than Passwords?

There has been a lot of questions and confusion on how to implement passwordless authentication with Flutter. This article puts forward one approach to passwordless authentication on Flutter. For backend, we are going to use Firebase auth.

We will create a small app, where the user can log in using either email+link or phone+smscode. If the user is new, a new account will be made. This is what it will look like on the surface:

Flutter Passwordless Example

In order to have a clear and manageable structure, we are going to use the BLoC pattern with RxDart. If you are new to RxDart or BLoC, don’t worry, this tutorial can serve as a good introduction to the pattern.

All the code is available on GitHub: Passwordless Authentication with Flutter&Firebase. But I recommend checking out the guide in order to get a deeper understanding of whats going on under the hood. I made this article approachable even to a beginner.

Firebase setup

Firebase docs contain setup steps for both iOS and Android, but it lacks the necessary documentation for Flutter. This here can serve as unofficial documentation by showing how to setup passwordless auth.

First, set up a Firebase project for the iOS and Android app by following Firebase’s official instructions here. Don’t forget to add the optional parameters — we need them to create Dynamic Links! (for Android, how to generate an SHA fingerprint, read here. And for iOS, make sure to enter the Team ID and App Store ID).

Sign-in methods.

We need to enable Email link and phone sign-in methods. From your Firebase console go to Authentication => Sign-in method.

Authentication => Sign-in method

If you wish to change the templates form SMS or email, go to Authentication =>Templates. You can set the support email from there. But we are not going to do that in this tutorial. Just don’t forget it before going into production.

2. Dynamic Links

We need to set up and configure the link that gets sent to the user's email.

Go to Dynamic Links=>Get Started. If you click on the input field, Firebase will present you with some Google provided domains. We are gonna go with passwordlessdemo.page.link , press Continue.

Dynamic Links=>Get Started

You are presented with an empty table of dynamic links. Create a new Dynamic Link.

Dynamic links

Now complete all the presented steps.

New Dynamic Link

Leave the link as default. Press Next. The deep link will be plan B, it will open if the app is not installed or on desktop. Choose Open deep link in your iOS app Choose Open deep link in your Android app

Dynamic Links

Go to AndroidManifest.xml (android/app/src/main), inside the MainActivity add the following. (Use the correct Dynamic Link domain!) :

Open the project in Xcode, go to Capabilities tab under the Runner target. Turn on associated domains and add applinks:passwordlessdemo.page.link (Again, substitute for your own Dynamic Link domain).

Go to pubspec.yaml and add:

If you wish to use the secure storage library that this tutorial uses, go to android=> app => build.gradle and change minSdkVersion to 18. This library helps us to securely store user’s email on the device.

And with that, the setup is done!