There are plenty of resources out there regarding authenticating a user using Google account or other social media account. However, let’s be honest, sometimes we (users) are reluctant to yet again link our social media account to a newly downloaded app. We might inadvertently grant app developers access to our social media info more than we want.

To make it easy for app users to sign up, we can use sms code (sent via phone number) to verify users and create accounts for them. This way we only need their phone number and nothing else.

We will be using a plugin called firebase_auth which provides methods for authentication using Google account and phone number. Since this is a firebase project, before you proceed with the rest of this article, please make sure you have configured your Flutter project to use Firebase (basically create a Firebase project).

Inside your pubspec.yaml:

Don’t forget to ‘get’ the package.

Import firebase_auth.dart into our main file:

Head to the Firebase console to enable phone as a sign-in method:

Since we are not allowed to use emulator to actually send sms to a phone, we’re going to use some mock up number and verification code to illustrate the authentication via sms code. In the same section of the Firebase console where you enabled phone as a sign in method, add a phone number for testing:

Before we proceed further, it is important to run through our use case of how the basic idea of authentication with sms code is going to work:

The user keys in his/her phone number. The user then confirms the phone number inputted. The app sends sms code to the phone. The user inputs the received sms code in the app. The app validates the inputted code.

In this tutorial, we’re going to strip away unnecessary codes and focus on the meat. This means we only need two main methods. The first method is one that is responsible for sending sms code to the user’s phone. The second method is responsible for attempting to sign in using the sms code inputted by the user. Once you understand how these two work, you can authenticate any of your Flutter app using sms code verification.

Let’s go back to our Flutter main file. We’re gonna add a method called sendCodeToPhoneNumber() in our State class:

Notice lines 3–5 are variables to hold some important info which are phone numbers, sms code and the id of this verification session. Inside the _sendCodeToPhoneNumber() method, the meat is actually from line 33 onwards. The arguments we pass into verifyPhoneNumber() are mostly callbacks which are quite self-explanatory. If you use the device whose phone number is the same number you use for this authentication, Firebase will actually automatically retrieve the sms code and sign you in without you having to type in the received sms code.

In line 21, the codeSent() method has a parameter verificationId. It is paramount that we store this id in some variable as we later need it to sign the user in using this id and the received sms code, assuming no auto-retrieval occurs.

The next method is _signInWithPhoneNumber(), which will be called once we receive the sms code and press a button that signs us in:

In lines 4–6, we pass in verification id and the received sms code for FirebaseAuth to validate.

Now that we have these two methods — _sendCodeToPhoneNumber() and _signInWithPhoneNumber(), we shall now proceed to wire up an extremely simple text boxes, sign in buttons and send sms code buttons.

Below is a screenshot corresponding to the above UI code and some descriptions:

This tutorial is meant to break down what the important codes are in order to use Firebase Phone Authentication in Flutter and thus I keep UI codes as minimal as possible. You may refer to these codes for login page inspiration:

I hope you understand the simplicity of authenticating user using phone number via Firebase Auth. Merry Christmas and Happy holidays.

Peace out.