Auto-Read SMS and Autofill OTP Code in Flutter

in this video we will be learning how to read incoming SMS automatically from a device and use that to automate the process of OTP code filling for Firebase phone authentication so let's start for example let us create a new flutter project where we are going to learn how to read incoming SMS inside our flutter application so navigate to the directory where you want to create your new flutter app and then type the command flutter create and provide the name of your application that you are willing to give in this case just let us give read SMS in flutter now our demo code has been created Now navigate to the folder and open it in vs code using Cod space. command and now let us run the code on emulator and verify whether the demo code is running correctly or not now our demo app is running fine we are not facing any problem now we need to do some changes here first here will not keep the homepage and here inside live folder we'll be creating a new file it will be read sms. and here we'll be creating our new screen use stateful widget let's name it as read SMS screen it will not be a placeholder instead we'll be using a SCA fold here we will have an abar use abar title will be text read in per SMS and we need to link this read SMS screen with our main. do so our home will be read SMS screen and also make it Con so inside the screen inside scaffold we'll be having some text inside the body so let's display a text us use text like message message received like this and also make it in center and if you want we can also add some padding now what we are willing to do here if any new SMS arrives then we are going to be showing this inside the center widget that this message has arrived so for that we'll be using this telepone package just copy the name of the package and open your terminal inside vs code and type flutter PB and telepon this will add the package as a dependency inside our per.ml file and now after installing we need to follow some instruction like we need to create an instance to use telephoning so let us create an instance here we need to also import telepon here we need to request the SMS reading permission from user if we are willing to request manually then we can use this otherwise if we call the function directly it will request at that moment we will not be sending sms so we don't need to add this permission we will also not be reading SMS or quing SMS so we don't need this instead we need this to listen to incoming SMS so for that let's follow the instruction as it is mentioned we need to copy this permission open Android manifest.xml file it is inside Android app SRC main androidmanifest.xml we need to paste it here like this and after that we need to also add this receiver tag it will be below our activity just paste it like this and one more thing we need to visit our build. gradel file here here we need to change the minimum SDK version to 23 otherwise it will not work just save it now and since we have changed the Android manifest.xml file we need to stop and rerun our application again so just stop the and restart again so now it's working we are initializing an instance now let us follow the instruction here for listening to incoming SMS we need to call telephone. listen incoming SMS and here we need to pass on new SMS so let us create a function here like void start listen in and here we can call telephone. listen SMS for on background message if you want to use if you want to listen messages in background then you can use background message Handler you need to add this at top level static function means outside any class currently since we will not be reading messages in background so so let us not provide this it's optional and here we can provide that listening background and set it to false here we'll be handling the message after we get any new message so what we can do here we can declare some new string like string text received initialize it to empty string and here we can set the state and make text received to the message do body here we are saving the message body to this text received now let us call this start listening function inside our init state so that this function gets called immediately after we open the read SMS screen inside the N State just call start listening and here we can also print that listening to OTP or listening to SMS and here we can just show the text that we have received like this so let's try to restart now here it's asking for the SMS reading permission so let's allow it now for testing we can send a text message inside our emulator so let us use this and send a text message so now you can see that we are receiving a text message message and we are also being able to capture the text message so this way we can very easily capture any incoming message like if we send any OTP like 1 2 3 4 56 is our OTP then it will also be able to capture the message in foreground that we receive so now we know that how we can read any incoming SMS from our device through our application now let us implement this automatic SMS reading feature inside our phone authentication using Firebase for phone authentication I am not going to write the code from scratch instead I will use my previous video code that I have written for phone authentication using Firebase I'm going to use that and add the automatic OTP reading functionality on it if you have not watch that video I will ask you to watch that video first and learn how to authenticate user using phone authentication in Firebase this is the code for phone authentication using Firebase that we have created in our previous video it is showing several red lines so to this just run flutter Pub get and it will get all the dependencies so now a packages have been updated since this code was now very old some packages are outdated so we can run this command flutter P outdated and it will show all the outdated packages so we can run this flutter Pub upgrade major versions and it will upgrade the dependencies which are of major versions now it is done so let's try to add the telepon package like we did in our first example copy the name and Ty flutter add telephony and here also inside our app build. gradel we need to change minimum SDK version to 23 and also the changes this changes that we need in Android manifest.xml file so let's do it inside main Android manifest.xml first request a permission and then add the receiver tank now we need to Simply call the instance and then call this function this was our login page where we are showing the login UI and we have two text editing controller one is phone controller and other one is OTP controller so what we are going to do first we are going to read the incoming SMS and we need to extract the OTP from that incoming SMS so first let's just create an instance of Tony import the package and now we can create a function here void listen to incoming SMS and here the same thing will happen like we did it in our previous example like this we can simply copy and paste it so here what we will do we need to add some validations here CU we cannot directly set the full text to OTP now what we need to do here we need to split out our OTP so for that we need to do some validation now if you visit our project authentication templates here you will find that for SMS verification for mainly OTP verification here we send a six-digit OTP and then it is like is your verification code and then the project name so in that way we need to find that we are reading the correct SMS so first we can do some kind of matching for that to find whether we are reading the correct SMS or not so here after we get any new message we will first verify if we are reading the correct SMS SMS or not so if message do body add a null check here contains if this is containing our project name in that case we can move forward and tell that this is the text that we need in that case we can read this we can verify that this is the correct text that we need and here we need to filter out the OTP so let's create a new string OTP code it will be message. body do substring and since it's a six-digit OTP so for that we'll do the substring from 0 to 6 it will start from zero and end till 5 and all the six digigit code will come in between and after that we can then set the state and use the OTP controller assign OTP controller. text to the OTP value the OTP code in this case the OTP controller. text will get updated so now we are listening to any incoming SMS so if we receive any SMS we can also print that that SMS receive doll message. body now here we have written the function to listen to any incoming SMS now we need to call this function we should call this function after we send the OTP here when we have successfully sended an OTP in next step we can listen to incoming SMS we will be calling this in this step so that start listening for OTP and we can also automate this step and here after we are uh prev prly we used to be manually inputting the OTP and then we need to validate the OTP and then we move the user to The Next Step so we can also even automate this step so for that we can just copy this uh onpressed function just copy the contents of it and then we can create another function just name it as to handle after OTP is submitt let's name the function as void handle submit and here we'll paste the code let's save it since here we are using context since here we are using context so for that we need to pass build context here and the place where we are calling this function here instead of this function we will call handle submit and we need to also pass the context so the context will be receiving from here and here also if we are listening to incoming SMS we need if we need to automate the process in that case first we should wait for some time future. delayed delation let it give seconds one second and after that we can call the function handle submit and here we will pass the context here we need to also expect the build context now the place here since we required to pass the context let us pass the context here now what will be happening here if if we conf uh if the user enter if the user enter their phone number after that it will red to the recapture verification and asks it to open it in a browser and verify whether a robot or not and then it will send an OTP after that when it successfully sends an OTP it will start listening for incoming SMS and this context is coming from from the place where we are building a new widget and getting a new context so we are using this context and we will listen to any incoming SMS and after that it will show a popup it will show an alert dialogue and here we are using OTP controller and it if we read the SMS automatically then it will automatically fill the OTP and after that if we were pressing this button manually by us but now since we have automate this first it will fill the OTP and it will wait for 1 second and after that it will perform the handle submit so let's test it with a real device now I have coded this project in previous version of flutter so for that reason I'm getting this warning but no need to worry it will still work now let me fill my phone number here then click on send OTP it is asking me to open a browser for verifying whether I am a robot or not now it has started for listening for SMS so it captured the SMS that I received and it automatically pressed the handle submit button and went to the next page this was fully automatic I didn't need to uh tap on any button everything happened automatically so in this way we can listen to uh SMS and fill the OTP automatically inside of flutter application and we can use this functionality in with any other art providers not limited to Firebase so now I hope that you will be able to add automatic SMS reading functionality in your own app so that's all for this video thanks for watching

Channel: Snehasis Ghosh

Views: 1,652

Keywords: Snehasis Ghosh, flutter, flutter otp autofill, flutter tutorial, flutter tutorial for beginners, Flutter OTP Autofill, Read SMS Flutter, Automatic OTP Verification Flutter, Flutter SMS Reading, Autofill OTP Code Flutter, Flutter SMS Listener, Flutter Authentication, phone auth firebase flutter, phone auth otp authentication, firebase

Id: d7XgXc5ZvLs

Length: 23min 26sec (1406 seconds)

Published: Tue Feb 27 2024