OTP Autofill in Flutter UI
Hey friends. Today we’re going to discuss how can we fill up the OTP fields of our screen(Flutter UI) automatically as the OTP SMS comes.
Table of Contents :
OTP Autofilling — Introduction and Uses
Firebase Phone Authentication
Code Implementation
OTP Autofill —step by step implementation
Code File
Conclusion
Github Link
Read my blogs
Introduction and Uses:-
These days we see several times that as we approach getting signed-in in many applications we need to verify our phone numbers. Although, we can do so in mainly two ways, either by making a phone call or by an OTP — sent as sms to our phone numbers.
So along with that, we have also noticed, that the OTP which comes with the sms got filled up automatically in the OTP fields which makes UI more user-friendly. Well, how does that happen? I’m going to answer the question with the help of this article along with my demo project.
In this session, we’d be using the most commonly used package for such purposes, that is sms_autofill.
Working with this package made it comparatively easier and faster to get my expected output. We just need to follow a few steps to make it work properly throughout our project which we’ll discuss later in this article.
To get the OTP sms, I’ve used Firebase Phone Authentication. To achieve that we first need to create a Firebase project in Firebase Console. Once you have created one, make sure that you enable the Phone sign-in method in the Authentication section.
Firebase Phone Authentication:-
Here’s how we do it:-
To know more, you may go to the Apple, Android, or web options according to the project environment in which you build the project. For me it was Android.
Save it as you enable it. It will look like this
Now firstly, we need to send an OTP sms to the entered mobile number.
