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

@RishavKumar yor solution giving time out exception on ` SmsRetriever.addSmsListener((event)=>{console.log('registeredOtp'+" "+event.message);}` — Sagar, Sep 24 '19 at 11:40
I was waiting for this. Your hash code is incorrect. Please try retrieving correct hex code. It's different for debug build and production build. I have faced this. :) — Rishav Kumar, Sep 24 '19 at 11:41
I updated my answer, please see. https://github.com/Bruno-Furtado/react-native-sms-retriever/issues/4 — Rishav Kumar, Sep 24 '19 at 13:27
@RishavKumar how to get hash key for release one where to run these command i am running in `java/bin` for release what need to do can u show sample for release — Sagar, Sep 25 '19 at 04:22
the solution is only for debug hash key and for release how to add release keystore path — Sagar, Sep 25 '19 at 05:35
for release you need to have the path of your production keystore — Rishav Kumar, Sep 25 '19 at 05:35
@RishavKumar when i add path the command is not executing file path is `E:\ReactNative\opick\android\app\my-key.keystore` — Sagar, Sep 25 '19 at 05:42
how about giving a relative path rather than absolute path. Relative path would be : `./android\app\my-key.keystore` — Rishav Kumar, Sep 25 '19 at 06:21
@RishavKumar something is going wrong because it is not asking for password as here said https://stackoverflow.com/questions/7506392/how-to-create-android-facebook-key-hash/46241386 — Sagar, Sep 25 '19 at 06:23
@RishavKumar I have tried with this and its working https://www.npmjs.com/package/react-native-otp-verify — Sagar, Sep 25 '19 at 09:44
@RishavKumar the key added in sms will always display in sms or we can hide — Sagar, Sep 25 '19 at 11:04

Sagar · Accepted Answer · 2019-09-30T05:09:38.120

3

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

edited Sep 30 '19 at 05:09

answered Sep 25 '19 at 12:05

Sagar

5,273
4
37
50

How can I test it is working. I am trying to send the SMS to the mobile from another mobile with the exact format and hash but it's not detecting the OTP. – Akshay kumar Oct 10 '20 at 12:54
why `const otp = /(\d{4})/g.exec(message)[1]` keep giving the error `TypeError: null is not an object (evaluating '/(\d{6})/g.exec(message)[1]')` – Anuj Sharma Sep 30 '22 at 11:18
@AnujSharma because its nullable, you can also put ! after message to fix this error like this, /(\d{6})/g.exec(message)![1]; – Ayaz Khalid Feb 03 '23 at 07:36

Rishav Kumar · Answer 2 · 2019-09-24T13:27:35.263

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

edited Sep 24 '19 at 13:27

answered Sep 24 '19 at 09:12

Rishav Kumar

4,979
1
17
32

Use this library. I have personally used and got the results – Rishav Kumar Sep 24 '19 at 09:22
2

for this sms permission will be needed? – Sagar Sep 24 '19 at 09:27
1

Can we upload app on play store with this without violating sms/log permission policy – Sagar Sep 24 '19 at 09:31
2

Nop, that's why it's needed. No permissions required and play store allows this as this uses google API's – Rishav Kumar Sep 24 '19 at 09:31
Sure, well you need to find out your app's production hex key and send that in sms – Rishav Kumar Sep 24 '19 at 09:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199891/discussion-between-sagar-and-rishav-kumar). – Sagar Sep 24 '19 at 09:49

score 0 · Answer 3 · answered Nov 16 '20 at 08:13

0

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

answered Nov 16 '20 at 08:13

jyotishman saikia

2,079
1
15
11

score -2 · Answer 4 · answered Mar 05 '21 at 06:52

-2

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.

answered Mar 05 '21 at 06:52

Mushtaque Ahmed

199
10

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

4 Answers4

Linked