Flutter Firebase Phone Authentication :
Flutter Firebase Phone Authentication is useful to authenticate the user based on the phone number instead of traditional way of email based validation.
Phone number based validation is much easier and more convenient to validate the user by sending the otp the user device and authenticating accurately.
Most of the app’s like food delivery app’s swiggy, zomato travel apps like ola, uber now a days follow this otp based i.e., phone authentication.
This is the safest way so banking related apps, online money transfer or payment apps like G-Pay, Phone Pay, paytm use phone number as user id so phone authentication is must.
In this part of the tutorial we make use of Flutter Firebase Phone Authentication as it is easy for beginners to learn this validation as free tier is available to send otp with a limit of 50 sms/ day.
pubspec.yaml :
Add firebase authentication, firebase core dependencies to get started with flutter firebase phone authentication.
dependencies:
flutter:
sdk: flutter
firebase_auth:
firebase_core:
welcome.dart :
Creating a welcome screen so that user can navigate to this screen after successful login.
We have just provided basic structure you may append required data.
import 'package:flutter/material.dart';
class Welcome extends StatelessWidget {
const Welcome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Welcome'),),
),
);
}
}
main.dart :
The very first step is to initialize the firebase in our app in the void main declaration with a async method.
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(App());
}
Declare the controllers and variables required
var otpController = TextEditingController(); var numController = TextEditingController(); FirebaseAuth auth = FirebaseAuth.instance; String verificationId = "";
Design a user input field for phone number and Otp as below
Padding(
padding: EdgeInsets.all(10),
child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Phone Number',
hintText: 'Enter valid number'
),
controller: numController,
),
),
Padding(
padding: EdgeInsets.all(10),
child: TextField(
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter valid password'
),
controller: otpController,
),
),
Add two buttons for submitting data and fetch OTP.
TextButton(onPressed: () {
fetchotp();
}, child: const Text("Fetch OTP"),),
TextButton(onPressed: () {
verify();
}, child: const Text("Send"))
Declare a method to fetch the otp as below
Future<void> fetchotp() async {
await auth.verifyPhoneNumber(
phoneNumber: '+919876543210',
verificationCompleted: (PhoneAuthCredential credential) async {
await auth.signInWithCredential(credential);
},
verificationFailed: (FirebaseAuthException e) {
if (e.code == 'invalid-phone-number') {
print('The provided phone number is not valid.');
}
},
codeSent: (String verificationId, int? resendToken) async {
this.verificationId = verificationId;
},
codeAutoRetrievalTimeout: (String verificationId) {
},
);
}
Declare a method to verify the otp
Future<void> verify() async {
PhoneAuthCredential phoneAuthCredential =
PhoneAuthProvider.credential(
verificationId: verificationId, smsCode: otpController.text);
signInWithPhoneAuthCredential(phoneAuthCredential);
}
then
void signInWithPhoneAuthCredential(
PhoneAuthCredential phoneAuthCredential) async {
try {
final authCredential =
await auth.signInWithCredential(phoneAuthCredential);
if (authCredential.user != null) {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const Welcome()));
}
} on FirebaseAuthException catch (e) {
print("catch");
}
}
Flutter Firebase Phone Authentication Full Code :
Providing the full code for flutter phone authentication. Also go through the video tutorial for more interesting tutorial.
Right from the initialization to the complete setup is provided in this class file.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_firebase_auth/welcome.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Login"),),
body: const MyApp(),
),
);
}
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var otpController = TextEditingController();
var numController = TextEditingController();
FirebaseAuth auth = FirebaseAuth.instance;
String verificationId = "";
void signInWithPhoneAuthCredential(
PhoneAuthCredential phoneAuthCredential) async {
try {
final authCredential =
await auth.signInWithCredential(phoneAuthCredential);
if (authCredential.user != null) {
Navigator.push(
context, MaterialPageRoute(builder: (context) => const Welcome()));
}
} on FirebaseAuthException catch (e) {
print("catch");
}
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Phone Number',
hintText: 'Enter valid number'
),
controller: numController,
),
),
Padding(
padding: EdgeInsets.all(10),
child: TextField(
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter valid password'
),
controller: otpController,
),
),
TextButton(onPressed: () {
fetchotp();
}, child: const Text("Fetch OTP"),),
TextButton(onPressed: () {
verify();
}, child: const Text("Send"))
],
),
);
}
Future<void> verify() async {
PhoneAuthCredential phoneAuthCredential =
PhoneAuthProvider.credential(
verificationId: verificationId, smsCode: otpController.text);
signInWithPhoneAuthCredential(phoneAuthCredential);
}
Future<void> fetchotp() async {
await auth.verifyPhoneNumber(
phoneNumber: '+919876543210',
verificationCompleted: (PhoneAuthCredential credential) async {
await auth.signInWithCredential(credential);
},
verificationFailed: (FirebaseAuthException e) {
if (e.code == 'invalid-phone-number') {
print('The provided phone number is not valid.');
}
},
codeSent: (String verificationId, int? resendToken) async {
this.verificationId = verificationId;
},
codeAutoRetrievalTimeout: (String verificationId) {
},
);
}
}
Flutter Firebase Phone Authentication Output :
This screen below depicts the usage of Flutter Phone Authentication.
If you are having any query’s in this tutorial on flutter firebase phone authentication do let us know in the comment section below. If you like this tutorial do like and subscribe us for more interesting updates.
