Authenticate with a phone number in your Flutter apps using Firebase Authentication

Make your users feel secure while using your apps, while providing the convenience of leveraging their phone number for authentication.

We’ll be building two paged flutter application, which asks user for authentication using phone number on success sign in/sign up you will be navigated to another screen. In the second screen user has an option to logout. It will look as follows:

Users can enter their Phone number and request for verification code and check whether the verification code is correct if then it can navigate to next screen.

Link to the Github Repo here.

Upfront Setup

Before anything, you have to set up a Firebase account and configure Firebase Authentication. First, configure Firebase for both iOS and Android by following these links:

Android

Add Firebase to your Android project | Firebase Documentation

iOS

Add Firebase to your Apple project | Firebase Documentation

Once setting all the Firebase for both iOS and android has completed, you must enable the Firebase Authentication Phone Auth Provider.

Go to your Firebase Account Console, select Authentication > Sign-in method, and out of the available Sign-in providers, select Phone.

Select the Phone sign-in provider

From the dialog toggle the Enable option, enter your test Phone number and sample verification code for testing, then click Save.

Select enable and enter test phone number and test verification code, then click save.

After setting everything correct, it looks like this

Firebase phone auth enabled

Now it is done at firebase side, so let’s start to code!

Importing the needed packages

Dependencies: Firebase Auth from flutter packages(pub.dev)

Make sure to add the following dependencies were added in pubspec.yaml.

dependencies:
  firebase_auth: ^3.3.7
  firebase_core: ^1.12.0
  flutter:
    sdk: flutter

And create folders under lib folder as lib > screens, and create login_screen.dart.

login_screen.dart

After create home_screen.dart.

home_screen.dart

Finally main.dart

main.dart

Usage

On native platforms, the user’s phone number has to be verified, then the user can either sign-in or link their account with a PhoneAuthCredential.

First you need to ask user for their phone number, then call verifyPhoneNumber() method.

await FirebaseAuth.instance.verifyPhoneNumber(
      phoneNumber: _phoneNumberController.text,
      verificationCompleted: (credential) async {},
      verificationFailed: (e) {},
      codeSent: (id, resendToken) {},
      codeAutoRetrievalTimeout: (id) {},
);

There exists 4 callbacks

1. verificationCompleted: Automatic handling of SMS code on Android devices.
2. verificationFailed: Handle failure events such as invalid phone numbers or whether the SMS quota has been exceeded.
3. codeSent: Handles when the code has been sent to the device, after that you can prompt user to enter the received code for verification.
4. codeAutoRetrievalTimeout: Handles timeout when automatic SMS code handling fails.

That’s all for the basics for the implementation of phone authentication using Firebase authentication.

Here’s a Github repo with the working code for your reference. Don’t forget to replace the google-services.json in Android and GoogleService-Info.plist file in IOS in this Flutter project if you decide to fork or clone this repo.

Happy Fluttering!