Flutter Sms Login With Firebase
Hi to everyone, in this article we are going to talk about how to login using firebase and mobx.
What are we going to learn?
- How to use firebase when we want to use sms login in our app.
- A little bit mobx.
- How to build a timer for sms code otp.
Which packages will we use?
In this project we are using mobx and firebase so we add these packages to get started with our work.We bring these packages from pub.dev.
For the mobx part we are using mobx_codegen and build_runner so we are putting these packages on dev_dependencies.
What Is Our Folder Structure?
As the folder structure of our project is given on the up, we create its sub-branches, including the core, feature and product main layers.In the core layer we define text enums which we used in the view part and we define the model folder for the mobx.In the feature layer we create main layer for our project so it has view and viewModel.In the product folder we have widget folder this folder has custom widgets for help view part.If everything is clear for us right now let’s get to start with the main subject:SMS LOGIN!!!!
Sms Login Using Firebase
Firebase in this url we need to add a project and do the other 3 steps.The most important part is the integration part.
If everything is okay, firebase will put you on this page.In this part we are choosing the android section.
We need to fill the 2 areas, those are package name and sha-1 key.This parts are important to fill so we will use it in sms login.
In this area download google-service.json to our app.Paste the file in Appname->android->app folder.
dependencies {
classpath ‘com.android.tools.build:gradle:4.1.2’
classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version”
classpath ‘com.google.gms:google-services:4.3.10’
}In the 3. part first we add google service part in android>build.gradle file.
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.firebase:firebase-auth'
implementation platform('com.google.firebase:firebase-bom:29.0.1')apply plugin: 'com.google.gms.google-services'Then we add this 2 line in android>app->build.gradle.
And now we are ready to write some code.Let’s get to it!!!!!
BaseViewModel
BaseViewModel is our abstract class for the Mobx part.We define setContext and init methods. We use the init method for the before building the widget; anything inside the init function will be called or initialized first and the widgets are built later.
ViewModel.dart
In this page we will use mobx. So mobx is basically a class that inherited from abstract class.What does it mean?It means:
We initialize it because this method should be called before any usage of FlutterFire plugins.Now we’re going to look at the sms methods.
When the SMS code is delivered to the device, Android will automatically verify the SMS code without requiring the user to manually input the code. Also, we can use the login method here.
If Firebase returns an error, for example for an incorrect phone number or if the SMS quota for the project has exceeded, a FirebaseAuthException will be sent to this handler.
This method comes after phone submit.And waits for the otp. Gives a verificationId and our otp code.
On Android devices which support automatic SMS code resolution, this handler will be called if the device has not automatically resolved an SMS message within a certain timeframe. Once the timeframe has passed, the device will no longer attempt to resolve any incoming messages.These functions are callback functions which we use there.
Now we can click the button and firebase will send a code to Login.But where we can use this sended code and enter the app.Not in these methods, let’s look at it then.
Got The Code Then What We Will Do?
In this method we enter the coming otp code then we can login the app.That was all the methods but what if we miss the exact timeout.And app is not doing anything.Then let’s write a code for it.
After The Timeout?
We use a package named countdownTimer.
In this CountDownTimerController we define 2 thing endTime and onEnd.EndTime is the time how much second will the code executed.OnEnd is the what will we do when onEnd done.In here we used alertDialog and it will send to new request for the otp code if we click okButton.
CountDownTimerWidget(controller: model.controler,);We use this controller in view like the above code.
At The End Of The Code How It’s Looks Like?
And it is Done!!!!
All the project codes in here.You can check it out.
If you want more about mobx you can check this video.
