Skip to main content

​
Step 1: Install OTPLESS SDK Dependency

Install the OTPLESS SDK dependency by running the following command in your terminal at the root of your React Native project: 
npm i otpless-react-native-lp

​
Step 2: Platform-specific Integrations

  • Android
  • iOS
  1. Add intent filter inside your android/app/src/main/AndroidManifest.xml file into your Main activity code block:
<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
      android:host="otpless"
      android:scheme= "otpless.YOUR_APP_ID_LOWERCASE"/>
</intent-filter>
Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.
  1. Add Network Security Config inside your android/app/src/main/AndroidManifest.xml file into your <application> code block (Only required if you are using the SNA feature):
android:networkSecurityConfig="@xml/otpless_network_security_config"
  1. Change your activity launchMode to singleTop and exported true for your Main Activity:
android:launchMode="singleTop"
android:exported="true"

​
Step 3: Configure Sign up/Sign in

  1. Import the OTPLESS package on your login page.
login_page.tsx
import { OtplessReactNativeModule } from 'otpless-react-native-lp';
  1. Add OTPLESS instance and initialize the SDK:
login_page.tsx
const otplessModule = new OtplessReactNativeModule();

useEffect(() => {
    initializeModule();
    return () => {
        otplessModule.clearListener();
        otplessModule.stop(); // You may stop the module if needed.
    };
}, []);

const initializeModule = () => {
    otplessModule.initialize("APPID").then((traceId) => {
       // traceId to track events
    });
    otplessModule.setResponseCallback(onResponse);
    // only in debug case
    otplessModule.setWebViewInspectable();
    otplessModule.setLogging(true);
};
  1. Add the following code to Initiate OTPLESS Login Page
login_page.tsx
 const startHeadless = () => {
       
    const baseRequest: IOTPlessRequest = {};

    if(phoneNumber) {
        baseRequest.extraQueryParams = {
            "phone": phoneNumber,
            "countryCode": "91"
        } 
    }
    otplessModule.start(baseRequest);
 };
  1. Add the following code to handle response callback:
login_page.tsx
const onResponse = (authResponse: OTPlessAuthCallback) => {
  if (authResponse.status === "success") {

    const token = authResponse.token;
    console.log("Token received:", token);

  } else if (authResponse.status === "error") {
    switch (authResponse.errorType) {
      case "INITIATE":
        switch (authResponse.errorCode) {
          case 10000:
            // handle user cancelled (User clicked on back button)
            break;
          case 10001:
            // handle user cancelled (User clicked on help button)
            break;
          case 10002:
             // handle user cancelled (User clicked on phone number change button)
            break;
          case 7102:
            // handle invalid phone
            break;
          case 7104:
            // handle invalid email
            break;
          case 9120:
            // SDK not initialized
            break;
          case 9125:
          case 5050:
           // SDK Loading error
            break;
        }
        break;

      case "NETWORK":
        // errorCode internet is not available 9103
        if (authResponse.errorCode === 9103) {
          // handle internet error
        }
        break;

      case "VERIFY":
        // handle custom error
        break;
    }
  }
};
  1. When user successfully logs in, stop Otpless:
login_page.tsx
otplessModule.stop()

​
Step 4: Tracking Multiple Events

You can observe all events using: 
otplessModule.addEventObserver(onOtplessEvent);
To track and handle specific event categories, use: 
const onOtplessEvent = (data: any) => {
    console.log("OTPless Event:", data);

    // Ensure result is an object before processing
    const category = data.category || '';
    const eventType = data.eventType || '';
    const metaData = data.metaData || {};

    switch (category) {
      case 'LOAD':
        // track url success loading action
        break;

      case 'CLICK':
        // track user action
        break;

      case 'ACTION':
        // track actions with metadata
        break;
    }
};

​
Sample Event JSON Payloads

  • ACTION
  • CLICK
  • LOAD
  • INITIATE
  • VERIFY_ERROR
  • OTP_AUTO_READ
  • DELIVERY_STATUS
  • FALLBACK_TRIGGERED
{
  "event": "ACTION",
  "type": "INITIATE",
  "metaData": {
    "requestId": "abc123xyz",
    "channel": "OTP/SILENT_AUTH",
    "authType": "OTP/SILENT_AUTH",
    "deliveryChannel": "OTP/SILENT_AUTH"
  }
}

Validate ID Token

Learn how to securely `validate ID token` returned by OTPLESS react native SDK to ensure the authenticity of sign-in events from your backend server.

Validate Token (Opaque)

Learn how to securely `validate token` returned by OTPLESS react native SDK to ensure the authenticity of sign-in events from your backend server.
⌘I