How to Implement react native otp retriever and generate hash key for application

Question

Beginner to React native

I am trying to verify OTP automatically using react-native-sms-retriever I have implemented following example in project

Example implemented This exampleis not provudung way to get hash key. you have to get it manually by executing command

When I execute command, it won't ask for password. It should ask because of here it is

I have generated debug hash key using bellow command executed in 'java/bin' folder. But its not

keytool -exportcert -alias androiddebugkey -keystore '~\.android\debug.keystore' | xxd -p | tr -d "[:space:]" | echo -n com.opick.app cat | sha256sum | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11

How to generate hash key for release build tried following returns wrong key

keytool -exportcert -alias my-key-alias -keystore my-key.keystore | xxd -p | tr -d "[:space:]" | echo -n com.opick.app `cat` | sha256sum | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11

I have read document they says you need to add path for release keystore in above command.for me i is not working please update on same

Main challenge is the generated key is different on cmd and bash

Answer 1

import SmsRetriever from 'react-native-sms-retriever';

// Get the phone number (first gif)
 _onPhoneNumberPressed = async () => {
  try {
    const phoneNumber = await SmsRetriever.requestPhoneNumber();
  } catch (error) {
    console.log(JSON.stringify(error));
  }
 };

// Get the SMS message (second gif)
_onSmsListenerPressed = async () => {
  try {
    const registered = await SmsRetriever.startSmsRetriever();
    if (registered) {
      SmsRetriever.addSmsListener(event => {
        console.log(event.message);
        SmsRetriever.removeSmsListener();
      }); 
    }
  } catch (error) {
    console.log(JSON.stringify(error));
  }
};

For timeout error please see: https://github.com/Bruno-Furtado/react-native-sms-retriever/issues/4

Answer 2

I have tried two three examples but I was not able to get the hash key for release ad debug then I have tried following solution It worked perfectly. Also you can use this code to get hash key and you can continue with your implementation

react-native-otp-verify

The following code will give you hash key for both release and debug apk just get the key and copy it somewhere for use

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

getHash = () =>
   RNOtpVerify.getHash()
  .then(console.log)
  .catch(console.log);

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

otpHandler = (message: string) => {
    const otp = /(\d{4})/g.exec(message)[1];
    this.setState({ otp });
    RNOtpVerify.removeListener();
    Keyboard.dismiss();
  }

 componentWillUnmount() {
   RNOtpVerify.removeListener();
 }

Answer 3

There is a great article tutorial for how to implement OTP auto verify in React Native without taking permission.

Link1

But for that you will need to generate the 11 digit unique hash key. You will find that in link2;

Link2

Answer 4

react-native-otp-verify one works like a charm:). Good thing, it also gives you the hash.. All you need to do is append the hash in the SMS at the end.