Enabling Phone Verification (OTP) for Flutter (Android) with Firebase

Here’s a comprehensive guide to adding Phone Verification to your Flutter project with Firebase.

I’d suggest just reading through the first and then follow the steps, as it will give you an idea of what’s to be done.
Do comment if you have any queries in any section!

The pre-requisite steps to this guide include :
1. Creating a Flutter Project
2. Creating a Firebase Project
3. Connecting your Flutter App to Firebase Project (for more info on that see this)

Enable Phone as a ‘Sign-In Method’

Go to Firebase Project Console > Authentication > ‘Sign-In Method’ Tab and enable the phone provider.

Open a terminal in the root directory of your project and run these commands

cd android
./gradlew signingReport

Running this will get you your SHA1 and SHA256 keys, for debug and release respectively. (So you’ll have 4 keys in all)

> Task :app:signingReport
Variant: debug
Config: debug
Store: /Users/<USER-NAME>/.android/debug.keystore
Alias: debug
MD5: <md5-key>
SHA1: <sha1-key>
SHA-256: <sha256-key>
Valid until: Tuesday, December 3, 2044
> Task :app:signingReport
Variant: debug
Config: debug
Store: /Users/<USER-NAME>/.android/debug.keystore
Alias: release
MD5: <md5-key>
SHA1: <sha1-key>
SHA-256: <sha256-key>
Valid until: Tuesday, December 3, 2044

Now go to your firebase console and navigate to the android app settings and add all the four fingerprints.

After adding the keys, either download and replace the old
google-services.json file in your project. Or, you can just run this in your terminal.

flutterfire configure
// This command needs Firebase CLI to be installed.
// For more info see this. 
// Don't bother with this if you don't have it already. But I'd 
// personally recommend it, if you use Firebase for most of your 
// Flutter projects.

Then, go to GoogleAPIs Console and enable the ‘Android Device Verification’ API.

Let’s see the coding aspects.

A quick reminder that you will need to import firebase_core and firebase_auth into your flutter project.
(Check Available Firebase-Flutter Plugins or pub.dev for the latest versions)

Get your FirebaseAuth instance

var _auth = FirebaseAuth.instance;

then we use the verifyPhoneNumber() method of FirebaseAuth class to verify users phone. This method has 5 parameters, as seen here -

phoneNumber: Add the phone number to be verified here.
(NOTE: Add your country code to the phone number string, it’s important for it to work)
verificationCompleted: Automatic handling of the SMS code on Android devices.
verificationFailed: Handle failure events such as invalid phone numbers or whether the SMS quota has been exceeded.
codeSent: Handle when a code has been sent to the device from Firebase, used to prompt users to enter the code.
codeAutoRetrievalTimeout: Handle a timeout of when automatic SMS code handling fails.

NOTE: This automatic handling of the SMS code on Android devices will not be occurring till there isn’t a Firebase App Check enabled for your project.
(We will see that later)

Here’s the code, read through the comments to get more reference.

phone_auth.dart

The code above will work when the OTP is received on the same device as the app is running on and the device has Google Play Store Services up-to-date. But, there are cases when these conditions aren’t met and the automated verification does not happen.
Note that, because the automatic verification failed the entire verification has NOT yet failed. This manual authentication can be done as follows.

You will need to provide a Text-Field, so that the user can enter the OTP Code that they receive and a ‘Submit’ button.

manual_phone_auth.dart

Okay so the working of this is probably getting a little confusing.
I made you a flowchart!

Flowchart ! Hope it helped

I might make changes to the flowchart, if I find any mistakes. So you can go see the up-to-date version here.

If you have completed these steps then the flow of Phone Authentication of your application will be as shown above.

Now to remove the reCaptcha and to get GoogleAPIs to automatically authenticate, we will need to enable ‘App Check’ for your application.

Here’s how to do it.
Go to your Firebase Project Console > Build > App Check > Apps Tab

Click on Register.
There you will see two providers. One will be SafetyNet and the other is Play Integrity.
For this, we’re going to use Play Integrity.
Click on the + icon next to your choice and add the SHA256 keys.
Choose token time to live time and save it.

Next step add firebase_app_check to your Flutter Project.
Then go to your main.dart file in your Flutter project. There you will have initialised your FirebaseApp before calling the runApp() .

/// Inside the main()
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
/// Add this line ! This is activates the AppCheck and should remove /// the reCaptcha and also automate the OTP verification.
await FirebaseAppCheck.instance.activate();
runApp(const MyApp());

PS : The reCaptcha will be called and the automatic verification will not be done when running the app in debug mode when using an emulator. To overcome that I’d suggest using Firebase Debug Tokens.

Note that you will need to add your Google Play Console Keys (SHA1 and SHA256) into your firebase project to have the phone verification work when your app is live on Play Store!
(Don’t forget to also add your SHA256 in the AppCheck section of your firebase project!)

And that’s it! Hopefully I have covered everything that you need to do to Authenticate your user with Phone using Firebase and Flutter (Android) and that you will be able to follow and do the same.
If I have missed a step please let me know, I’ll be glad to make the changes.

If this article helped you, please like, share and save it!

Thank You for reading! 😄