react-native-otp-auto-fill is a npm package expo will support this? example code some can provide ?

Expo Development Tools
1

react-native-otp-auto-fill is a npm package, will expo support this. i want auto fill the otp fields in expo app, can any one give example to this.
or
is expo have any other otp auto fill package ?
plz…

2

Hi @satyam.ypo

Yes, based on the installation instructions it looks like it should work as long as you build the app with EAS Build. Also, you will not be able to render the OtpAutoFillViewManager component in Expo Go. You will either need to avoid that in development mode, or you will need to build a development client to use instead of Expo Go.

3

thank you, a little bit i understand, but can u plz give some video link or code and library for otp auto fill example.

4

I tried it out and it works, except for styling. The input fields were basically invisible :-/

I did this:

$ yarn create expo-app otp-test
$ cd otp-test
$ yarn add react-native-otp-auto-fill
$ yarn add expo-dev-client

Then I edited App.js to contain the example code from the react-native-otp-auto-fill project:

import 'expo-dev-client';
import { StatusBar } from 'expo-status-bar';
import { Alert, StyleSheet, View } from 'react-native';
import OtpAutoFillViewManager from 'react-native-otp-auto-fill';

export default function App() {
  const handleComplete = ({ nativeEvent: { code } }) => {
    Alert.alert('OTP Code Received!', code);
  };

  // This is only needed once to get the Android Signature key for SMS body
  const handleOnAndroidSignature = ({ nativeEvent: { code } }) => {
    console.log('Android Signature Key for SMS body:', code);
  };

  return (
    <View style={styles.container}>
      <OtpAutoFillViewManager
        onComplete={handleComplete}
        onAndroidSignature={handleOnAndroidSignature}
        style={styles.box}
        length={4} // Define the length of OTP code. This is a must.
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 300,
    height: 55,
    marginVertical: 20,
    borderColor: 'red',
    borderWidth: 1,
  },
});

Then:

$ eas build:configure -p android
$ eas build -p android --profile development

Then I waited for the build to finish and downloaded the APK. I an an Android Emulator and installed the APK on the emulator. I opened the app on the emulator.

I then ran:

$ npx expo start

It printed a QR code and under it:

› Metro waiting on exp://192.168.99.45:19000

In the app, I selected “Enter URL manually” and typed in:

http://192.168.99.45:19000

I then pressed “Connect” and it started building and downloading the bundle from the dev server.

The app logged a message to the terminal like this:

 LOG  Android Signature Key for SMS body: ABCD1234efg

You will need the above key when sending the SMS.

In order to send an SMS to the emulator, I connected to the emulator on port 5554 (which is the default port that the emulator will be listening on). I used “nc” on my laptop to do this. You could also use something like “telnet” if you have that installed. If you get stuck here, then rather just run the app on a physical phone and send an SMS to it from another phone.

When you connect to the emulator like this it prompts you to authenticate:

% nc localhost 5554
Android Console: Authentication required
Android Console: type 'auth <auth_token>' to authenticate
Android Console: you can find your <auth_token> in
'/Users/michael/.emulator_console_auth_token'
OK

Get the authentication token from the file it mentions and use it to authenticate:

auth theAUTHtoken999

Then type something like this to virtually send an SMS to the emulator from the specified phone number:

sms send 0891234567 Hello User. Your OTP is: 1234 ABCD1234efg

(where “ABCD1234efg” is the key that was logged to the console.)

There should be a notification to say you have received an SMS and at the same time, the app should Alert the OTP and also fill the OTP into the input fields.

If you want to test it again, press “r” in the terminal where “npx expo start” is running to reload the app.

5

hi thank you very much for your reply.

i am using physical phone for testing otp sms. but i am not able to get auto fill the otp message.
below is code.

import 'expo-dev-client';
import { StatusBar } from 'expo-status-bar';
import { Alert, StyleSheet, View,Text } from 'react-native';
import OtpAutoFillViewManager from 'react-native-otp-auto-fill';

export default function App() {
  const handleComplete = ({ nativeEvent: { code } }) => {
    Alert.alert('OTP Code Received!', code);
  };

  // This is only needed once to get the Android Signature key for SMS body
  const handleOnAndroidSignature = ({ nativeEvent: { code } }) => {
    console.log('Android Signature Key for SMS body:', code);
   
  };

  return (
    <View style={styles.container}>
      <Text>Test Message</Text>
      <OtpAutoFillViewManager
        onComplete={handleComplete}
        onAndroidSignature={handleOnAndroidSignature}
        style={styles.box}
        length={4} // Define the length of OTP code. This is a must.
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 300,
    height: 55,
    marginVertical: 20,
    borderColor: 'red',
    borderWidth: 1,
    backgroundColor: 'grey',
  },
});

next i can able to build in try to test in android and run by scanner in physical phone, log was shown below.

Android Signature Key for SMS body: XXXXXXXXX

from other phone i am sent message

Hello User. Your OTP is: 1234 XXXXXXXXX

but still autofill is not working in otp fields…

can plz help on this.

6

sorry it is working, thank you very much

1 Like
7

is it same autofill of otp in IOS in expo react native how to do, can plz reply me.

8

As far as I know, this cannot work exactly the same way in iOS, but it has another way of accomplishing the same thing. I don’t have an iOS device that I can test this on, though, and it seems that the Simulator does not have iMessage.

As far as I know you need four things:

  • You need something like a native UITextField or UITextView with the UITextContentTypeOneTimeCode textContentType set on it. Off hand I’m not sure how to do this in a managed Expo app. But maybe search for ways to do it with ReactNative. If it’s possible there then it will be possible with Expo too, but might need a config plugin
  • You need to have the device set to automatically fill in passwords
  • The message needs to contain the word “code” or “passcode” followed by the OTP. For other languages you can use a translation of the word “code”
  • You need to use the system keyboard. It will not work with a custom keyboard

You might also need to include a domain name. But I think this is just an optional way to make things more secure

See also:

9

hi
in android for otp verification. when we make apk file. it is redirecting to development server from there i am going app otp screen. but how can i make app as real time environment ( i mean without going to development server options directly access to otp screen).

10

Hi

I’m not 100% sure what you mean.

If you want a non-development APK to install on your phone for testing purposes, you can use eas build -p android --profile preview.
If you want a version that you can submit to the Play Store, you can run eas build -p android --platform production. This will build a .aab file by default, which is better than .apk for submitting to the Play Store.

One thing I am not sure about with the react-native-otp-auto-fill library is how to get the “Android Signature Key” before displaying the OTP component. But I think they expect you to POST it to your backend server in the handleOnAndroidSignature function and then your backend server can include the signature in the SMS.

11

hi thank you for u r reply
when start the server using expo start.
it will show scanner. after scan. it is moving to the browser . and showing below screen
screen1

scn1
scn11080×2340 122 KB

after choosing development build. it is going to otp screen. as showing below
screen2
scn2
scn21080×2340 30.2 KB

when i make preview, apk or aab. it is going the screen1 always, but in real time app. it is no need to go screen1 right . how to solve this.

12

With a preview APK or the AAB you do not run expo start. You just open the app on the phone.

13

yes true, but when preview the the app. it is going to development server.

14

I’m not sure what you’re trying to do.

That is a link for a dev client.

15

Even after create apk, or aab file. it is going to dev client.that is real time application same thing it is moving to dev client. how to solve this?

16

I still don’t know what you are trying to accomplish.

Why is the URL you sent me above relevant to a preview or production build of the app?

EDIT:
I think you are saying that if you scan the QR code from the above URL then the dev client is opened. Well, then why are you scanning the QR code? What are you trying to do? What happens if you uninstall the dev client and install the preview APK and then just open the preview APK on your device?