Implementing OTP Auto-Retrieval in React Native Using <span class="highlight">react-native-otp-verify</span>

Implementing OTP Auto-Retrieval in React Native Using react-native-otp-verify

OTP Auto-Retrieval in React Native Using react-native-otp-verify

One-Time Passwords (OTPs) are a common method for verifying user identities in mobile applications. Manually entering OTPs can be cumbersome for users. Android's SMS Retriever API enables automatic OTP retrieval, enhancing both user experience and security.

OTP Verification Illustration

Understanding OTP Auto-Retrieval

The SMS Retriever API enables your app to automatically retrieve verification codes without requiring SMS read permissions. The general flow is as follows:

User initiates OTP verification.
Your app starts the SMS Retriever API listener.
The server sends an SMS with OTP and app hash.
Google Play services detects and delivers the SMS to your app.

Importance of the App Hash

The app hash is an 11-character unique identifier that links the SMS to your app. It is derived from your app’s package name and signing certificate. Without it, the SMS Retriever won’t forward the message to your app.

Note: Debug and release builds have different hashes due to different signing certificates.

Setting Up `react-native-otp-verify`

npm install react-native-otp-verify --save

import RNOtpVerify from 'react-native-otp-verify';

Implementing OTP Auto-Retrieval

1. Retrieve the App Hash

RNOtpVerify.getHash()
  .then(hashArray => {
    console.log('App Hash:', hashArray[0]);
  })
  .catch(console.log);

2. Listen for OTP

startListeningForOtp = () => {
  RNOtpVerify.getOtp()
    .then(() => RNOtpVerify.addListener(this.otpHandler))
    .catch(console.log);
};

otpHandler = message => {
  const otp = /(\d{6})/g.exec(message)[1];
  console.log('OTP from message:', otp);
  this.setState({ otp }, () => {
    this.callLoginApi();
  });
  RNOtpVerify.removeListener();
};

3. OTP SMS Format

<#> Your OTP is 123456
AppName: FA+9qCX9VSu

Replace FA+9qCX9VSu with your app’s actual hash.

Generating App Hashes

Debug Build

Use getHash() as shown above.

Release Build

Use the command below to generate the hash from your keystore:

keytool -exportcert -alias your-key-alias -keystore path-to-keystore | xxd -p | tr -d "[:space:]" | echo -n your.package.name `cat` | sha256sum | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11

Testing and Debugging

Use real Android devices with Google Play services.
Use adb logcat | grep RNOtpVerify to monitor logs.

Best Practices

Store hash values securely (e.g., in environment variables).
Ensure SMS format strictly follows required structure.
Implement fallback logic if OTP auto-retrieval fails.

Platform Limitation Notice

Important: This functionality is only supported on Android. It will not work on iOS devices.

For iOS, Apple does not provide a similar SMS Retriever API. You must use either manual OTP entry or integrate Apple’s AutoFill functionality. To enable AutoFill on iOS:

Ensure your OTP input field has textContentType="oneTimeCode".
Use an input placeholder like "Enter the code sent to your phone".
Ensure your SMS follows this format:
```
Your AppName code is: 123456
```

Conclusion

Using the react-native-otp-verify library simplifies OTP verification by automatically retrieving codes without SMS permissions. With a clear understanding of app hashes and careful message formatting, you can implement a secure and user-friendly authentication experience in your React Native app.

References

Comments