CODEWITHSUNDEEP
react-nativeone-time-passwordsms-verification
Sagar H
Sagar H

Reputation: 5541

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

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

Upvotes: 2

Views: 10191

Answers (4)

Mushtaque Ahmed
Mushtaque Ahmed

Reputation: 303

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.

Upvotes: -2

jyotishman saikia
jyotishman saikia

Reputation: 2195

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

Upvotes: 0

Sagar H
Sagar H

Reputation: 5541

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();
 }

Upvotes: 3

Rishav Kumar
Rishav Kumar

Reputation: 5460

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

Upvotes: 1

Related Questions