Made by Surf 🏄♂️🏄♂️🏄♂️
This plugin uses the SMS User Consent API and SMS Retriever API on Android.
You could use autofill from another input by using the OTPStrategy (e.g. from push-notification).
For testing you could create a TestStrategy.
On iOS, the OTP autofill feature is integrated into the TextField component.
The code received from an SMS is stored for a duration of 3 minutes.
- Sms must contain the word
codeor its translation in iOS supported localizations. - The sms should contain only one sequence of digits.
The iOS platform is capable of receiving OTP from any phone number, not just a specific sender.
OTPInteractor.hint- displays a system dialog that allows the user to select from their saved phone numbers (recommendation from Google).OTPInteractor.getAppSignature- creates the hash code of your application, which is used in the SMS Retriever API.OTPInteractor.startListenUserConsent- the broadcast receiver that starts listening for OTP codes using the SMS User Consent API. It listens for a duration of 5 minutes, after which a timeout exception occurs.OTPInteractor.startListenRetriever- the broadcast receiver that starts listening for OTP codes using the SMS Retriever API. It listens for a duration of 5 minutes, after which a timeout exception occurs.OTPInteractor.stopListenForCode- used in dispose.
The plugin is designed to receive the full text of an SMS message and requires a parser to extract the relevant information from the message.
If you use the SMS User Consent API, the system will prompt the user for permission to access and read incoming messages.
Rules for SMS when using SMS User Consent API
- The message should contain an alphanumeric string of 4 to 10 characters, with at least one digit.
- The message was sent from a phone number that is not in the user's contacts.
- If the sender's phone number is specified, the message must originate from that number.
Rules for SMS when using SMS Retriever API
- The length should not exceed 140 bytes.
- It should contain a one-time code that the client sends back to your server to complete the verification process.
- It should include an 11-character hash string that identifies your app (refer to the documentation for server for more details). For testing, you can obtain it from
OTPInteractor.getAppSignature.
The OTPInteractor.startListenForCode method allows the application to start receiving verification codes from a specific phone number, specified by the senderPhone argument.
You should use OTPInteractor to interact with OTP.
To simplify implementation, consider using the OTPTextEditController as a controller for your TextField.
OTPTextEditController.startListenUserConsent - uses the SMS User Consent API and listens to user strategies.
OTPTextEditController.startListenRetriever - uses the SMS Retriever API and listens to user strategies.
OTPTextEditController.startListenOnlyStrategies - only listens to user strategies.
OTPTextEditController.stopListen - used in dispose.
Add otp_autofill to your pubspec.yaml file:
dependencies:
otp_autofill: $currentVersion$At this moment, the current version of otp_autofill is 
Set minSdkVersion at least to 19 in <project root>/android/app/build.gradle.
android {
...
defaultConfig {
...
minSdkVersion 19
...
}
...
}- Create a simple strategy
class SampleStrategy extends OTPStrategy {
@override
Future<String> listenForCode() {
return Future.delayed(
const Duration(seconds: 4),
() => 'Your code is 54321',
);
}
}- Initialize and set the listener
late OTPTextEditController controller;
final scaffoldKey = GlobalKey();
@override
void initState() {
super.initState();
_otpInteractor = OTPInteractor();
_otpInteractor.getAppSignature()
.then((value) => print('signature - $value'));
controller = OTPTextEditController(
codeLength: 5,
onCodeReceive: (code) => print('Your Application receive code - $code'),
)..startListenUserConsent(
(code) {
final exp = RegExp(r'(\d{5})');
return exp.stringMatch(code ?? '') ?? '';
},
strategies: [
SampleStrategy(),
],
);
}To receive a new code when a timeout exception occurs, you can pass a callback function to the onTimeOutException parameter and start listen for a new code.
controller = OTPTextEditController(
codeLength: 5,
onCodeReceive: (code) => print('Your Application receive code - $code'),
otpInteractor: _otpInteractor,
onTimeOutException: () {
//TODO: start new listen to get new code
controller.startListenUserConsent(
(code) {
final exp = RegExp(r'(\d{5})');
return exp.stringMatch(code ?? '') ?? '';
},
strategies: [
SampleStrategy(),
],
);
},
)..startListenUserConsent(
(code) {
final exp = RegExp(r'(\d{5})');
return exp.stringMatch(code ?? '') ?? '';
},
strategies: [
TimeoutStrategy(),
],
);All significant changes to this project will be documented in this file.
To report any issues, submit them directly in the Issues section.
If you wish to contribute to the package (for instance, by enhancing the documentation, fixing a bug, or introducing a new feature), please review our contribution guide first and then submit your pull request.
Your PRs are always welcome.
Please don't hesitate to ask any questions about this package. Join our community chat on Telegram. We communicate in both English and Russian.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent