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
iOS
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.
From the dialog toggle the Enable option, enter your test Phone number and sample verification code for testing, then click Save.
After setting everything correct, it looks like this
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.
After create home_screen.dart.
Finally 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
- verificationCompleted: Automatic handling of SMS code on Android devices.
- verificationFailed: Handle failure events such as invalid phone numbers or whether the SMS quota has been exceeded.
- codeSent: Handles when the code has been sent to the device, after that you can prompt user to enter the received code for verification.
- 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!