phone auth firebase flutter code example

Example 1: phone authentication firebase flutter

Future _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: [                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,                  ),                )              ],            ),          ),        )    );  }}

Tags:

Misc Example