Firebase Phone OTP authentication in flutter

In this blog we are going to discuss Firebase Phone OTP authentication in flutter.

User login is the most common functionality for any application. The are different different approaches for login like using email and password and social login etc.

If you are interested on the login using the customer mobile number and want to verify the number then we can use firebase phone authentication for the same.

User enter the mobile number then OTP will be shared on the mobile number then user number will be verified with OTP.

If you want to integrate some other social login in flutter then you can flow our another blog social login in flutter for complete implementation steps.

You may also check our flutter app development services page to read more about Flutter app development from mobikul.

Implementation:

Initial setup

Configure the firebase for your project. For the firebase configuration follow the link.

Add the firebase required dependencies on the pubspec.yaml file like below:

firebase_core: ^1.12.0
firebase_auth: ^3.11.2

1 2	firebase_core: ^1.12.0 firebase_auth: ^3.11.2

Create firebase auth instance like below:

final FirebaseAuth _auth = FirebaseAuth.instance;

1	final FirebaseAuth _auth = FirebaseAuth.instance;

Verify the phone number with verifyPhoneNumber function and manage the result callback like below:

Future<void> verifyPhone() async {
    verificationCompleted(PhoneAuthCredential credential) async {
      await _auth.signInWithCredential(credential);
      print("TEST_LOG============verificationCompleted=========>");
    }

    verificationFailed(FirebaseAuthException e) {
      print("TEST_LOG========failure=============>${e.message}");
    }
    
    codeSent(String verificationId, int? resendToken) {
      print("TEST_LOG===========Code shared==========>${verificationId}");
    }

    codeAutoRetrievalTimeout(String verificationId) {
      print("TEST_LOG===========Time out==========>${verificationId}");
    }

    await _auth.verifyPhoneNumber(
      phoneNumber: mobileNumber,
      timeout: Duration(seconds: appStoragePref.getOtpExpiryTime()),
      verificationCompleted: verificationCompleted,
      verificationFailed: verificationFailed,
      codeSent: codeSent,
      codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,
    );
  }

Future<void> verifyPhone() async {

verificationCompleted(PhoneAuthCredential credential) async {

await _auth.signInWithCredential(credential);

print("TEST_LOG============verificationCompleted=========>");

}

verificationFailed(FirebaseAuthException e) {

print("TEST_LOG========failure=============>${e.message}");

}

codeSent(String verificationId, int? resendToken) {

print("TEST_LOG===========Code shared==========>${verificationId}");

}

codeAutoRetrievalTimeout(String verificationId) {

print("TEST_LOG===========Time out==========>${verificationId}");

}

await _auth.verifyPhoneNumber(

phoneNumber: mobileNumber,

timeout: Duration(seconds: appStoragePref.getOtpExpiryTime()),

verificationCompleted: verificationCompleted,

verificationFailed: verificationFailed,

codeSent: codeSent,

codeAutoRetrievalTimeout: codeAutoRetrievalTimeout,

);

}

Handel the UI update or changes for OTP entry inside the codeSent callback.

OTP will be shared with the entered mobile number. Now collect the OTP from the user and verify the OTP like below:

Future<void> verifyOTP(String otpCode, String otpVerificationId) async {
    try {
      PhoneAuthCredential credential = PhoneAuthProvider.credential(
        verificationId: otpVerificationId,
        smsCode: otpCode,
      );
      await _auth.signInWithCredential(credential);
      print("TEST_LOG===========OTP verified==========>${otpCode}");

    } catch (e) {
      print("Error====> $e");
  }

Future<void> verifyOTP(String otpCode, String otpVerificationId) async {

try {

PhoneAuthCredential credential = PhoneAuthProvider.credential(

verificationId: otpVerificationId,

smsCode: otpCode,

);

await _auth.signInWithCredential(credential);

print("TEST_LOG===========OTP verified==========>${otpCode}");

} catch (e) {

print("Error====> $e");

}

Once the OTP will be verified with respect to the OTP verification id you can process with your next step of flow after the verification.

Verification code must be the same for both flow of sent OTP and verification flow.

Conclusion:

In this blog, we have learned about how to implement firebase OTP authentication with mobile number and verified the OTP code.

For more information regarding the Implementation of Firebase Phone OTP authentication in flutter follow link.

Thanks for reading this blog. You can also check other blogs from here.

flutter

Akshay Kumar

31 Oct, 2023
Created by - Akshay Kumar

. . .

Firebase Phone OTP authentication in flutter

Implementation:

Initial setup

Conclusion:

Leave a Comment Cancel Reply

Message Sent!