Otp verification in react native

Question

I want to implement auto-fill otp in my react native app. I have implemented this using "react-native-otp-verify" but it requires hash to capture otp. I have found several other packages for this. All of them require a hash code in the sms to be able to read it. But I don't want to use hash.(Because I have not seen any hash code in otp sms of the daily use apps) Is there any package that can capture otp without using hash or if there is an alternative way of doing this? Please throw some light on this.

Answer 1

I have used an alternative way to detect incoming message , and you can extract your OTP from that message

you can use react-native-android-sms-listener library

SmsListener.addListener(message => {
    //put your code to capture message & verify
});

Answer 2

I use @twotalltotems/react-native-otp-input npm package

import OTPInput from "@twotalltotems/react-native-otp-input";
import {Alert} from "react-native"

<OTPInput
    placeholderTextColor="#e2379"
    placeholderCharacter="0"
    // how many digits 
    pinCount={6}
    // define style for the input
    codeInputFieldStyle={styles.otpInput}
    codeInputHighlightStyle={styles.otpActivaInputBox}
    onCodeFilled={code => {
        confirmCode(code);
    }}

defince confirmCode

const confirmCode = async (code: string) => {
    try {
        await yourConfirmSignUpLogic();
        // if confirmed successfully navigate to "Login"
        navigation.navigate("Login");
        Alert.alert("Success", "You can now login");
    } catch (e) {
        Alert.alert("Error", e.message || "Authentication failed");
    }
};

From the docs

On Android, it will be auto filled when you press the copy code button in the notification bar (see above GIF). It will do so only if the code is sent after the view is loaded. So make sure you request the code AFTER this view is loaded.