flutter firebase phone auth tutorial code example
Example 1: phone authentication firebase flutter
Future<void> _submitPhoneNumber() async {
/// NOTE: Either append your phone number country code or add in the code itself
/// Since I'm in India we use "+91 " as prefix `phoneNumber`
String phoneNumber = "+91 " + _phoneNumberController.text.toString().trim();
print(phoneNumber);
/// The below functions are the callbacks, separated so as to make code more readable
void verificationCompleted(AuthCredential phoneAuthCredential) {
print('verificationCompleted');
...
this._phoneAuthCredential = phoneAuthCredential;
print(phoneAuthCredential);
}
void verificationFailed(AuthException error) {
...
print(error);
}
void codeSent(String verificationId, [int code]) {
...
print('codeSent');
}
void codeAutoRetrievalTimeout(String verificationId) {
...
print('codeAutoRetrievalTimeout');
}
await FirebaseAuth.instance.verifyPhoneNumber(
/// Make sure to prefix with your country code
phoneNumber: phoneNumber,
/// `seconds` didn't work. The underlying implementation code only reads in `milliseconds`
timeout: Duration(milliseconds: 10000),
/// If the SIM (with phoneNumber) is in the current device this function is called.
/// This function gives `AuthCredential`. Moreover `login` function can be called from this callback
verificationCompleted: verificationCompleted,
/// Called when the verification is failed
verificationFailed: verificationFailed,
/// This is called after the OTP is sent. Gives a `verificationId` and `code`
codeSent: codeSent,
/// After automatic code retrival `tmeout` this function is called
codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
); // All the callbacks are above
}
Example 2: flutter firebase using phone auth
class LoginScreen extends StatelessWidget { final _phoneController = TextEditingController(); final _passController = TextEditingController(); //Place A @override Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.all(32), child: Form( child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("Login", style: TextStyle(color: Colors.lightBlue, fontSize: 36, fontWeight: FontWeight.w500),), SizedBox(height: 16,), TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8)), borderSide: BorderSide(color: Colors.grey[200]) ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8)), borderSide: BorderSide(color: Colors.grey[300]) ), filled: true, fillColor: Colors.grey[100], hintText: "Phone Number" ), controller: _phoneController, ), SizedBox(height: 16,), TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8)), borderSide: BorderSide(color: Colors.grey[200]) ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(8)), borderSide: BorderSide(color: Colors.grey[300]) ), filled: true, fillColor: Colors.grey[100], hintText: "Password" ), controller: _passController, ), SizedBox(height: 16,), Container( width: double.infinity, child: FlatButton( child: Text("Login"), textColor: Colors.white, padding: EdgeInsets.all(16), onPressed: (){ //code for sign in Place B }, color: Colors.blue, ), ) ], ), ), ) ); }}