Introduction

Google Firebase provides phone authentication using SMS. The basic plan of Firebase includes 10k of free SMSes for a month. We will learn Firebase Phone Authentication in Flutter in this article. We will start from Firebase and will programmatically set up the actual integration in Flutter. So, let’s start!
What we will achieve.
OTP Authentication in Flutter using Firebase
Step 1
The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog Create your first app in Flutter. I have created an app named “flutter_otp_auth”.
Step 2
Now, you need to set up a project in Google Firebase. Follow the below steps for that. Please follow the steps very carefully.
Project-level build.gradle (<project>/build.gradle): means the build.gradle file should be put in the Android folder directly.
  1. buildscript {
  2. dependencies {
  3. // Add this line
  4. classpath 'com.google.gms:google-services:4.2.0'
  5. }
  6. }
App-level build.gradle (<project>/<app-module>/build.gradle): means build.gradle file in Android = > App folder
  1. // Add to the bottom of the file
  2. apply plugin: 'com.google.gms.google-services’
Note
We do not need to add the implementation 'com.google.firebase:firebase-core:16.0.9' in dependencies,
Step 3
Now, you need to enable the Phone Sign-In method in Firebase. For that, you need to go to the Authentication tab and then, the Sign-in method tab. From there, enable the Phone Sign-in method. Please check the screenshot.
OTP Authentication in Flutter using Firebase
You are all done with Firebase set up. Congratulations!
Step 4
Get back to the project and open the pubspec.yaml file in the root of the project. Pubspec.yaml is used to define all the dependencies and assets of the project.
Step 5
Now, we need to programmatically handle OTP Login in Google Firebase. For that, we create 2 pages - main.dart(default) and homepage.dart. I have attached a link of Git repo at the bottom of the article. You can take reference from there. Here, I will just import methods for sending and verifying the OTP. Below is the source code for the dart file.
  1. import 'package:flutter/material.dart';
  2. import 'package:firebase_auth/firebase_auth.dart';
  3. import 'package:flutter/services.dart';
  4. import 'homepage.dart';
  6. void main() => runApp(MyApp());
  8. class MyApp extends StatelessWidget {
  9. @override
  10. Widget build(BuildContext context) {
  11. return MaterialApp(
  12. title: 'Phone Authentication',
  13. routes: <String, WidgetBuilder>{
  14. '/homepage': (BuildContext context) => MyHome(),
  15. '/loginpage': (BuildContext context) => MyApp(),
  16. },
  17. theme: ThemeData(
  18. primarySwatch: Colors.blue,
  19. ),
  20. home: MyAppPage(title: 'Phone Authentication'),
  21. );
  22. }
  23. }
  25. class MyAppPage extends StatefulWidget {
  26. MyAppPage({Key key, this.title}) : super(key: key);
  27. final String title;
  29. @override
  30. _MyAppPageState createState() => _MyAppPageState();
  31. }
  33. class _MyAppPageState extends State<MyAppPage> {
  34. String phoneNo;
  35. String smsOTP;
  36. String verificationId;
  37. String errorMessage = '';
  38. FirebaseAuth _auth = FirebaseAuth.instance;
  40. Future<void> verifyPhone() async {
  41. final PhoneCodeSent smsOTPSent = (String verId, [int forceCodeResend]) {
  42. this.verificationId = verId;
  43. smsOTPDialog(context).then((value) {
  44. print('sign in');
  45. });
  46. };
  47. try {
  48. await _auth.verifyPhoneNumber(
  49. phoneNumber: this.phoneNo, // PHONE NUMBER TO SEND OTP
  50. codeAutoRetrievalTimeout: (String verId) {
  51. //Starts the phone number verification process for the given phone number.
  52. //Either sends an SMS with a 6 digit code to the phone number specified, or sign's the user in and [verificationCompleted] is called.
  53. this.verificationId = verId;
  54. },
  55. codeSent:
  56. smsOTPSent, // WHEN CODE SENT THEN WE OPEN DIALOG TO ENTER OTP.
  57. timeout: const Duration(seconds: 20),
  58. verificationCompleted: (AuthCredential phoneAuthCredential) {
  59. print(phoneAuthCredential);
  60. },
  61. verificationFailed: (AuthException exceptio) {
  62. print('${exceptio.message}');
  63. });
  64. } catch (e) {
  65. handleError(e);
  66. }
  67. }
  69. Future<bool> smsOTPDialog(BuildContext context) {
  70. return showDialog(
  71. context: context,
  72. barrierDismissible: false,
  73. builder: (BuildContext context) {
  74. return new AlertDialog(
  75. title: Text('Enter SMS Code'),
  76. content: Container(
  77. height: 85,
  78. child: Column(children: [
  79. TextField(
  80. onChanged: (value) {
  81. this.smsOTP = value;
  82. },
  83. ),
  84. (errorMessage != ''
  85. ? Text(
  86. errorMessage,
  87. style: TextStyle(color: Colors.red),
  88. )
  89. : Container())
  90. ]),
  91. ),
  92. contentPadding: EdgeInsets.all(10),
  93. actions: <Widget>[
  94. FlatButton(
  95. child: Text('Done'),
  96. onPressed: () {
  97. _auth.currentUser().then((user) {
  98. if (user != null) {
  99. Navigator.of(context).pop();
  100. Navigator.of(context).pushReplacementNamed('/homepage');
  101. } else {
  102. signIn();
  103. }
  104. });
  105. },
  106. )
  107. ],
  108. );
  109. });
  110. }
  112. signIn() async {
  113. try {
  114. final AuthCredential credential = PhoneAuthProvider.getCredential(
  115. verificationId: verificationId,
  116. smsCode: smsOTP,
  117. );
  118. final FirebaseUser user = await _auth.signInWithCredential(credential);
  119. final FirebaseUser currentUser = await _auth.currentUser();
  120. assert(user.uid == currentUser.uid);
  121. Navigator.of(context).pop();
  122. Navigator.of(context).pushReplacementNamed('/homepage');
  123. } catch (e) {
  124. handleError(e);
  125. }
  126. }
  128. handleError(PlatformException error) {
  129. print(error);
  130. switch (error.code) {
  131. case 'ERROR_INVALID_VERIFICATION_CODE':
  132. FocusScope.of(context).requestFocus(new FocusNode());
  133. setState(() {
  134. errorMessage = 'Invalid Code';
  135. });
  136. Navigator.of(context).pop();
  137. smsOTPDialog(context).then((value) {
  138. print('sign in');
  139. });
  140. break;
  141. default:
  142. setState(() {
  143. errorMessage = error.message;
  144. });
  146. break;
  147. }
  148. }
  150. @override
  151. Widget build(BuildContext context) {
  152. return Scaffold(
  153. appBar: AppBar(
  154. title: Text(widget.title),
  155. ),
  156. body: Center(
  157. child: Column(
  158. mainAxisAlignment: MainAxisAlignment.center,
  159. children: <Widget>[
  160. Padding(
  161. padding: EdgeInsets.all(10),
  162. child: TextField(
  163. decoration: InputDecoration(
  164. hintText: 'Enter Phone Number Eg. +910000000000'),
  165. onChanged: (value) {
  166. this.phoneNo = value;
  167. },
  168. ),
  169. ),
  170. (errorMessage != ''
  171. ? Text(
  172. errorMessage,
  173. style: TextStyle(color: Colors.red),
  174. )
  175. : Container()),
  176. SizedBox(
  177. height: 10,
  178. ),
  179. RaisedButton(
  180. onPressed: () {
  181. verifyPhone();
  182. },
  183. child: Text('Verify'),
  184. textColor: Colors.white,
  185. elevation: 7,
  186. color: Colors.blue,
  187. )
  188. ],
  189. ),
  190. ),
  191. );
  192. }
  193. }
Step 6
When you successfully verify the OTP, you can check that Google Firebase stores the user details on the server. Please check the screenshot below.
OTP Authentication in Flutter using Firebase

Possible Errors
Error
import androidx.annotation.NonNull;
Solution
Put android.useAndroidX=true
android.enableJetifier=true
In android/gradle.properties file
NOTE
Please check the Git repository for the full source code. You need to add your google-services.json file in Android >> Apps folder.

Conclusion

OTP verification becomes one of the most required authentication techniques when security is very important. Google Firebase provides OTP Phone Authentication free starter plan and Flutter provides an easy to set up technique for this.
Git Repo