Send OTP React-Native Sdk!

The SendOtp SDK makes verifying OTP easy. SDK supports the verification of email and phone numbers via SMS, Calls & Whatsapp.

This SDK supports invisible OTP verification also.

Getting started

Login or create account at MSG91 to use sendOTP services.

Get your widgetId and authToken:

After login at MSG91, follow below steps to get your widgetId and authToken:

1. Select OTP option available on dashboard.
2. Create and configure your widget.
3. If you are first time user then generate new token and keep it enable.
4. The widgetId and authToken generated from the above steps will be required for initializing the widget.

Note: To ensure that this SDK functions correctly within your mobile application, please enable Mobile Integration while configuring the widget.

Installation

npm install @msg91comm/sendotp-react-native

Install pods

cd ios && pod install

Example

import React, { useEffect } from 'react';
import { OTPWidget } from '@msg91comm/sendotp-react-native';

const widgetId = "3461******************38";
const tokenAuth = "125*******************TP1";

const App = () => {
    useEffect(() => {
        OTPWidget.initializeWidget(widgetId, tokenAuth); //Widget initialization
    }, [])

    const [number, setNumber] = useState('');

    const handleSendOtp = async () => {
        const data = {
            identifier: '91758XXXXXXX'
        }
        const response = await OTPWidget.sendOTP(data);
        console.log(response);  
    }

    return (
        <View>
            <TextInput
                placeholder='Number'
                value={number}
                keyboardType='numeric'
                style={{ backgroundColor: '#ededed', margin: 10 }}
                onChangeText={(text) => {
                    setNumber(text)
                }}
            />
            <TouchableOpacity
                style={styles.button}
                onPress={()=>{
                    handleSendOtp()
                }}
            >
                <Text>
                    Send OTP
                </Text>
            </TouchableOpacity>
        </View>
    );
}

export default App;

SDK Methods

We provide methods, which helps you integrate the OTP verification within your own user interface.

getWidgetProcess is an optional method, this will receive the widget configuration data.

There are three methods sendOTP, retryOTP and verifyOTP for the otp verification process.

You can call these methods as follow:

sendOTP

The sendOTP method is used to send an OTP to an identifier. The identifier can be an email or mobile number (it must contain the country code without +). You can call this method on a button press.

NOTE: If you have enabled the invisible option in a widget configuration and you are trying to verify the mobile number with the mobile network then your number will be verified without OTP and if in any case the invisible verification gets fail in between the process then you will receive the normal OTP on your entered number.

const handleSendOtp = async () => {
  const data = {
    identifier: '91758XXXXXXX'
  }
  const response = await OTPWidget.sendOTP(data);
  console.log(response);
}

or

const handleSendOtp = async () => {
  const data = {
    identifier: '[email protected]'
  }
  const response = await OTPWidget.sendOTP(data);
  console.log(response);
}

retryOTP

The retryOTP method allows retrying the OTP on desired communication channel. retryOTP method takes optional channel code for 'SMS-11', 'VOICE-4', 'EMAIL-3', 'WHATSAPP-12' for retrying otp.

Note: If the widget uses the default configuration, don't pass the channel as argument.

const handleRetryOtp = async () => {
   const body = {
        reqId: '3463***************43931',
        retryChannel: 11 // Retry channel code (here, SMS:11)
  }
  const response = await OTPWidget.retryOTP(body);
  console.log(response);
}

verifyOTP

The verifyOTP method is used to verify an OTP entered by the user.

const handleVerifyOtp = async () => {
  const body = {
        reqId: '3463***************43931',
        otp: '****'
  }
  const response = await OTPWidget.verifyOTP(body);
  console.log(response);
}

Default UI Widget

The Default UI is a pre-built, ready-to-use OTP verification widget that allows you to add OTP verification to your app without building a custom UI. It comes with a professional design, smooth animations, and all the verification logic built-in.

Features

• Mobile & Email verification - Supports both phone numbers and email addresses
• Country picker - Built-in country selector with search functionality
• OTP input - Auto-advancing input fields with resend timer
• Magic Link support - Passwordless verification via magic links (based on widget config)
• Theme support - Light, Dark, and System theme modes
• Customizable colors - Custom primary color and button text color
• One Tap Verification - Seamless verification when enabled in widget config
• Multi-channel retry - Resend OTP via SMS, Voice, WhatsApp, or Email

Quick Start

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { DefaultWidget } from '@msg91comm/sendotp-react-native';

const widgetId = "3461******************38";
const tokenAuth = "125*******************TP1";

const App = () => {
  const [showWidget, setShowWidget] = useState(false);

  const handleVerificationComplete = (result) => {
    console.log('Verification result:', result);
    if (result.success) {
      console.log('Access Token:', result.message);
      console.log('Identifier:', result.identifier);
      // Handle successful verification
    } else {
      console.log('Error:', result.message);
      // Handle verification failure
    }
    setShowWidget(false);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Verify OTP" onPress={() => setShowWidget(true)} />
      
      <DefaultWidget
        visible={showWidget}
        onClose={() => setShowWidget(false)}
        onCompletion={handleVerificationComplete}
        widgetId={widgetId}
        tokenAuth={tokenAuth}
      />
    </View>
  );
};

export default App;

Props

| Prop | Type | Description | |------|------|-------------| | visible (Required) | boolean | Controls the visibility of the widget modal | | onClose (Required) | () => void | Callback when the widget is closed | | onCompletion | (result: VerificationResult) => void | Callback when verification completes (success or failure) | | widgetId (Required) | string | Widget ID from MSG91 panel | | tokenAuth (Required) | string | Auth token from MSG91 panel | | theme | 'light' \| 'dark' \| 'system' | Theme mode for the widget | | primaryColor | string | Custom primary color (hex format) | | primaryButtonTextColor | string | Custom text color for primary buttons (hex format) | | matchBorderToPrimaryColor | boolean | Whether input borders match the primary color | | defaultCountry | Country | Default country selection for mobile input | | defaultVerificationType | 'mobile' \| 'email' | Initial verification type | | autoFocus | boolean | Auto-focus input fields when widget opens |

Verification Result

The onCompletion callback receives a VerificationResult object:

{
  success: boolean;      // Whether verification was successful
  identifier?: string;   // The verified mobile number or email
  message?: string;      // On success: access-token, On failure: error message
}

Notes

• The widget automatically fetches configuration from your MSG91 panel each time it opens
• Features like Magic Link, One Tap Verification, and retry channels are controlled by your widget configuration in the MSG91 panel
• The widget handles all API calls internally - you just need to handle the verification result

Android Setup for Invisible OTP Verification

If you're using Invisible OTP Verification and it works in debug but not in release builds, follow these steps:

Step 1: Add Permissions

Open android/app/src/main/AndroidManifest.xml and ensure these permissions are present:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Step 2: Update Application Tag

Add these attributes to the <application> tag in the same file:

<application
    ...
    android:usesCleartextTraffic="true"
    android:networkSecurityConfig="@xml/network_security_config">

Example:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:usesCleartextTraffic="true"
      android:networkSecurityConfig="@xml/network_security_config">
      
      <!-- Your activities here -->
      
    </application>
</manifest>

Step 3: Create Network Security Config

3.1 Create the xml folder if it doesn't exist:

android/app/src/main/res/xml/

3.2 Create a new file named network_security_config.xml inside the xml folder with this content:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

Step 4: Clean the Build

cd android
./gradlew clean

Why is this needed?

Android 9 (API level 28) and above blocks certain network requests in release builds by default for security reasons. These settings allow the SDK to communicate with MSG91 servers for invisible verification.

🚀 Now this package supports Biometric Verification.

The @msg91comm/sendotp-react-native package now includes biometric authentication, allowing users to authenticate seamlessly using Face ID, Touch ID, or Fingerprint.

Features

• 🔥 FaceID / TouchID / Fingerprint support
• ✅ Fully compatible with Android and iOS
• 🎯 Supports fallback to device PIN/Pattern
• 🛑 Cancel ongoing biometric authentication
• ⚡ High-performance & lightweight package

Available Methods

| Method Name | Description | Response | Supported Platforms | |----------------|------------------------------------------------------------------------|------------------------------------------------|-------------------| | isSensorAvailable() | Checks if biometric sensor is available and returns the type (FaceID/TouchID/Fingerprint/Face Recognition). | { available : true, biometryType : "TouchID"} | Android / iOS | | authenticate() | Trigger the biometric authentication prompt. | { message : "Authentication succeeded", success : true} | Android / iOS | | getBiometricType() | Returns the type of biometric sensor. | { available : true, biometryType : "TouchID"} | Android / iOS | | simplePrompt() | Simple biometric prompt with custom messages and support with device credentials. | { message: "Authentication succeeded", success: true} or {"code": 10, "error": "User cancelled the authentication", "success": false} | Android / iOS | | cancelAuthentication() | Cancel any ongoing biometric authentication. | { success : true, message: "Authentication cancelled"} | Android / iOS |

⚠️ Additional configuration

iOS

Make sure to include the following entry in your React Native iOS project's Info.plist file, or Face ID functionality will not work correctly:

<key>NSFaceIDUsageDescription</key>
<string>We use Face ID to authenticate you securely.</string>

This message will be displayed to the user the first time a biometric authentication is requested. The user will be asked whether they want to allow the app to use Face ID. If the user denies Face ID permission, the isSensorAvailable function will indicate that biometrics is unavailable until the user manually enables Face ID for the app in the device settings.

Android

This package requires a minimum SDK version of 23 (Android 6.0) and a compiled SDK version of 34 (Android 14).

Import BiometricAuth in your Screen:

import { BiometricAuth } from '@msg91comm/sendotp-react-native'

Example:

const isSensorAvailable = async () => {
      const response = await BiometricAuth.isSensorAvailable();
      console.log(response)
}

const getBiometricType = async () => {
      const response = await BiometricAuth.getBiometricType();
      console.log(response)
}

const authenticateWithFallback = async () => {
      const response = await BiometricAuth.simplePrompt({
            promptMessage: 'Your prompt message',
            allowDeviceCredentials: true
      });
      console.log(response)
}

📌 Handling Biometric Unavailability with allowDeviceCredentials

If a user's device does not have biometrics (fingerprint/face) enrolled, the simplePrompt method allows authentication using the device PIN, pattern, or password by setting the allowDeviceCredentials prop to true.

🔹 How It Works?

• If the user has biometrics enrolled, it prompts for fingerprint/face authentication.
• If the user does not have biometrics but has a PIN/password, it falls back to PIN, pattern, or password.
• If the user has neither biometrics nor a PIN/password, an error is returned with a code code: 14 (Android) & code: -5 (iOS) so it can be handled in the app.

📖 Biometric Type Handling

| Biometry Type | Platform | |----------------|-------------------| | FaceID | iOS | | TouchID | iOS | | Fingerprint | Android | | FaceRecognition | Android |

License

Copyright 2022 MSG91
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.