Quick Tips: Creating a chat app with Flutter #1 — The (Phone) Authentication.

This is the first part in this series on how to build a fully-featured chat app with Flutter. I am going to use my Github repository — https://amitjoki.github.io/Enigma for explaining the code and the process behind it.

To try it out immediately, fork the above repo and do flutter run or even better, install it from the below link!

Enigma Chat - Apps on Google Play

First of all, any mainstream chat app requires authentication. We will be using Firebase’s Phone Authentication to help us authenticate a user.

The Firebase Setup

There are lots of articles already available so I’ll just keep this step to a minimum. To set up Firebase’s Phone Authentication, you need to do a couple of things first.

1. Create a Firebase project and enable Phone Authentication.
2. Copy the google-services.json to your android/app folder
3. Include firebase_auth: ^0.11.1+7 in pubspec.yaml

The code for the Phone Authentication part of Enigma can be viewed here — https://github.com/AmitJoki/Enigma/blob/master/lib/login.dart

The UI

To get you all excited, here’s how the end result looks like:

Login screen of Enigma

For the UI, I’ve gone for the Stepper widget so as to make efficient use of the screen space. You could also use multiple screens for this but for now, we will use the Stepper widget.

The first step takes care of obtaining the country code. I’ve modified the pub package flutter_country_picker which is available here. But you can use any package that serves your purpose.

The second step is to get the phone number. After you get the phone number which is a combination of the

+{country_code}{phone_number}

Like so: +911234567890 for an Indian number, the process of actual authentication begins.

The whole weightlifting is done in verifyPhoneNumber the method. It is here we define the required functions:

• PhoneVerificationCompleted — the event that fires on the completion of the phone verification through correct OTP. Here’s where you do the important business logic, like saving the data and redirecting to another screen. This is called during
• PhoneVerificationFailed — the event that fires on the failure of the phone verification. Here’s where you’ve to handle the error and let the user that they have to try again.
• PhoneCodeSent — the event that fires as soon as Google sends the phone an OTP code. You could show a loading widget until you receive this event to let the user know that the code is being sent.
• PhoneCodeAutoRetrievalTimeout — the event that fires when the time allowed for auto-retrieval of the OTP code has completed. At this point, there will be no auto-retrieval of the code from the SMS and we expect the user to actually type in the OTP.

handleSignIn method does all the work of signing the user in after successful authentication.

The Third Step is to actually allow the user to enter the OTP. Most of the times, Google Services will automatically sign you in by reading the SMS (read AutoRetrieval) but in case it gets timed out or errors for whatever reason, the user can type in the OTP.

Again we call the handleSignIn to sign the user in after the user enters the OTP.

So that’s it! You’ve got a fully functioning Phone Authentication powered by Firebase.

P.S Firebase support for Flutter is still buggy and you will encounter random errors, but having said that, you can rest assured that the above code still works 95% of the time from what I’ve experienced.

Flutter Community