Flutter – Phone Authentication

Hi Friends,

Hope you are all well. In this post let’s talk about phone authentication with firebase in your flutter apps. This post is again a sequel to my previous posts on authentication.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

To read my previous posts on different ways of authenticating a user into your app using the firebase authentication system, use the below links.

Authentication with email/password – Click here.

Authentication with Google – Click here.

Authentication with Facebook – Click here.

Authentication with Twitter – Click here.

Let’s begin.

A screencast of this post:

 

Code for this post is available –  here.

(Kindly leave a star to the repo. Thanks)

I believe you already know how to configure your flutter app to use firebase. If not kindly click here.

Open your pubspec.yaml file and add the below dependency.

Now, before we dive into the code.

Phone authentication generally has two steps.

Step 1: 

You enter a number and tap a button, the system sends a sms code to that specific number.

Step 2:

You enter the sms code into a specific input field and it verifies the code and authenticates you.

So, how are we going to achieve these two steps in firebase ?

Well, firebase supports phone Authentication. You just need to enable it and then you are done. It also provides an auto retrieval feature, i.e., in case you are entering the phone number of the device in which you are using the app, then it’ll automatically try to retrieve the code and use it to verify you.

In case you are using the app on a different device and using the mobile number of a different device then you would need to manually enter the sms code and then it will be verified.

Let’s handle both these scenarios in our code.

Now open up main.dart file and add the below code.

Whoa, whoa.. dude that’s too much code..

Let’s break this down.

  1. We just have a text field in the middle of the screen and a button. When you enter the number and tap on verify it will call the verifyPhone() function.
  2. This is where the number is verified.

    In the above snippet, we are simply using a verifyPhoneNumber() method to verify the given number., i.e., send a sms code to the number. If the code is auto retrieved then the verifiedSuccess() function is called. Note that we have a firebase user as it’s argument.

    Wait, notice the smsCodeSent() function. This is the one that gets triggered as soon as the verification code is sent. We are opening up a dialog with a textfield and a button as shown below.

    When the user enters the code in this and taps on the done button. it will first check whether the currentUser() is null. Why ? This is to check if the user is already verified automatically. If the user is verified, then we don’t need to check the entered code right ? we could simply log him/her in.

  3. If the user is not verified already, I am simply using the below function to sign him/her in.

    This function will use the verification id and the smsCode that the user sent to sign the user in. If it is successful he will be redirected to the homepage.

Alright. Now create a new file called homepage.dart in the lib folder and add the below code in it.

Nothing fancy guys. I am simply getting the uid of the user currently logged in and then displaying it to the user. That’s it.

Now run the app (after ensuring that you have enabled the phone Auth provider in firebase console). You will see the below screens.

Screenshot_20180903-230331

Once you enter a number and tap on verify this is the screen you’ll see

Screenshot_20180903-225833

The code arrives.

Screenshot_20180903-225835

Enter the code and tap on done.

Screenshot_20180903-225849

You are logged in.. :)

Screenshot_20180903-225853

Now you could also see the user added in your firebase console as well.

one

So, this is how you bring in phone authentication into your flutter apps guys.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Liked it? Take a second to support admin on Patreon!