Read OTP from SMS Autofill in Flutter

Are you a Flutter developer? Do you integrate a sign-up or sign-in for the authenticate user process? Once you sign up or sign in with your mobile number, at that time you will get OTP in the SMS on your mobile device. To verify that OTP, you need to copy and paste it in your text field or pinbox. Sometimes you need to go to the messaging app and see that OTP and enter it in the text field or pinbox to verify. It’s an irritative user experience while otp verify process.

In this article, we will learn how to read OTP from SMS and enable OTP autofill in Flutter. It simplifies the verification process for users.

 

 

Let’s start How to Read OTP from SMS Autofill in Flutter

Step 1: Create a new Project or open an existing one

1. Open Android Studio.
2. Click on New Flutter Project.
3. Make sure you have selected your Flutter SDK Path. Click Next
4. Enter the Project Name, Project Location (where you need to put the project),
5. Select the project type (Default Application).
6. Enter Organization
7. Select Android and iOS languages (default: Kotlin and Swift).
8. Select Platforms (On which platform you want to run the project).
9. Click on Finish button.
10. Now wait for the project to finish building.

 

Step 2: Adding the sms_autofill Package in the pubspec.yaml

• Open the pubspec.yaml file from the left panel of the project directory.
• Add the sms_autofill package under dependencies.

dependencies:
  sms_autofill: ^2.4.0

• Click on Pub get to retrieve packages in the project.

 

Step 3: Modify AndroidManifest.xml (Enabling Auto-Read OTP)

• Add the RECEIVE_SMS permission to the Android Manifest file. Go to android/app/src/main/AndroidManifest.xml
• Add RECEIVE_SMS permission before <application> tag.

<uses-permission android:name="android.permission.RECEIVE_SMS"/>
<uses-feature android:name="android.hardware.telephony"/>

Step 4: Import the Package

In your Dart file, import the sms_autofill package.

import 'package:sms_autofill/sms_autofill.dart';

Step 5: Initialize SMS Autofill

In your main Dart file, initialize the SMS autofill plugin.

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SmsAutoFill().listenForCode;
  runApp(MyApp());
}

Step 6: Implement OTP Autofill

Create a widget that uses the OTP autofill functionality.

class VerifyOtp extends StatefulWidget {
  @override
  _VerifyOtpState createState() => _VerifyOtpState();
}

class _VerifyOtpState extends State<VerifyOtp> with CodeAutoFill {
  String? otpCode;

  @override
  void codeUpdated() {
    setState(() {
      otpCode = code;
    });
  }

  @override
  void initState() {
    super.initState();
    listenForCode();
  }

  @override
  void dispose() {
    cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        PinFieldAutoFill(
          codeLength: 6,
          autoFocus: true,
          currentCode: otpCode,
          onCodeChanged: (code) {
            setState(() {
              otpCode = code;
              // You can handle OTP verification here automatically.
            });
          },
        ),
        ElevatedButton(
          onPressed: () {
            // Handle OTP submission or call api for sending OTP
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

For iOS, this package is not needed as the SMS autofill is provided by default.

You can use two types of widgets to use OTP. (1) PinFieldAutoFill (2) TextFieldPinAutoFill

PinFieldAutoFill(
                decoration: // Use of UnderlineDecoration, BoxLooseDecoration or BoxTightDecoration,
                currentCode: // prefill with a code
                onCodeSubmitted: //code submitted callback
                onCodeChanged: //code changed callback
                codeLength: //code length
              ),

TextFieldPinAutoFill(
                decoration: // basic InputDecoration
                currentCode: // prefill with a code
                onCodeSubmitted: //code submitted callback
                onCodeChanged: //code changed callback
                codeLength: //code length
              ),

Important Note: Make sure that the SMS you will get should contain ‘<#>’  at the beginning of the SMS in your Android phone and your app signature key at the end of the SMS. It should be like that.

<#> Your otp code is 123456 appSignature.

Important Notes: Make sure you have to set your appSignature in your custom message. You will get two different app signatures for debug and release build. 

There are various methods to generate an app signature key; you can use the below code to get an app signature key.

@override
  void initState() {
    listenForCode();
    SmsAutoFill().getAppSignature.then((signature) {
      appSignature = signature;
      print("App Signature is: $appSignature");
    });
    super.initState();
  }

Conclusion

Reading OTP from SMS and enabling OTP autofill in Flutter can greatly improve the user experience. By following the steps in this article, you can easily implement SMS autofill and auto-read OTP in Android for your Flutter apps.

 

Frequently Asked Questions(FAQs)