Expo-otp NPM | npm.io

expo-otp

expo-otp is a lightweight and efficient library for handling and auto-filling One-Time Passwords (OTP) in React Native applications using Expo. Designed for developers looking to enhance security and user experience, expo-otp supports seamless integration into any Expo project.

Features

OTP Auto-Detection: Automatically captures OTPs from SMS messages on Android devices.
Customizable: Supports OTPs of any length, configurable per developer requirements.
User-Friendly: Easy to integrate and use in any React Native project with minimal setup.

Prerequisites

Ensure you are operating within a React Native environment with Expo before installing and using expo-otp.

Installation

npm install expo-otp
# or
yarn add expo-otp

Usage

Importing the Hook

import { useOneTimePassword } from 'expo-otp';

Configuring the Hook

Configure the hook with the number of digits for the OTP:

const { otp, startListener, stopListener, hash, error, message } = useOneTimePassword({
  numberOfDigits: 6,
});

Starting and Stopping the Listener

Start and stop listening for OTPs as needed:

useEffect(() => {
  startListener();
  return () => stopListener();
}, []);

Displaying the OTP

<Text>OTP: {otp}</Text>

Returned Properties

useOneTimePassword returns several properties that you can utilize:

otp (string): The formatted OTP code retrieved from the SMS.
startListener (() => void): Function to initiate SMS listening for OTPs.
stopListener (() => void): Function to stop SMS listening and prevent memory leaks.
hash (string): Identifier for your app within the SMS, used for enhanced security and verification.
error (boolean): Indicates if there was an error during OTP detection.
message (string): Provides error messages or additional details about the OTP process.