Pre-Built UI

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

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.

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"

Change your activity launchMode to singleTop and exported true for your Main Activity:

android:launchMode="singleTop"
android:exported="true"

Add the following block to your ios/info.plist file:

info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>otpless.YOUR_APP_ID_LOWERCASE</string>
        </array>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>otpless</string>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>whatsapp</string>
    <string>otpless</string>
    <string>gootpless</string>
    <string>com.otpless.ios.app.otpless</string>
    <string>googlegmail</string>
</array>

Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.

Add the following block to your ios/info.plist file (Only required if you are using the SNA feature):

info.plist

<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSExceptionDomains</key>
	<dict>
		<key>80.in.safr.sekuramobile.com</key>
		<dict>
			<key>NSIncludesSubdomains</key>
			<true/>
			<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
			<true/>
			<key>NSTemporaryExceptionMinimumTLSVersion</key>
			<string>TLSv1.1</string>
		</dict>
		<key>partnerapi.jio.com</key>
		<dict>
			<key>NSIncludesSubdomains</key>
			<true/>
			<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
			<true/>
			<key>NSTemporaryExceptionMinimumTLSVersion</key>
			<string>TLSv1.1</string>
		</dict>
	</dict>
</dict>

Go to build settings. Search for defines module, this option will appear in packaging change it to yes.
Create connector.swift file and it will ask to create bridging header, Click yes. Copy-paste the following code into your connector.swift file.

connector.swift

import OtplessSwiftLP
import Foundation

class Connector: NSObject {
  @objc public static func isOtplessDeeplink(_ url: URL) -> Bool {
    return OtplessSwiftLP.shared.isOtplessDeeplink(url: url)
  }
  
  @objc public static func processDeepLink(_ url: URL) {
    OtplessSwiftLP.shared.processOtplessDeeplink(url: url)
  }
}

Import the OTPLESS SDK in your respective ios/AppDelegate.mm file to handle redirection.

AppDelegate.h

#import "{{your_project_name}}-Swift.h"

- (BOOL) application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
	if([Connector isOtplessDeeplink:url]){
	[Connector loadUrl:url];
	return true;
}
	[super application:app openURL:url options:options];
	return true;
}

Import the OTPLESS package on your login page.

login_page.tsx

import { OtplessReactNativeModule } from 'otpless-react-native-lp';

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

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

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

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"
  }
}

{
  "event": "ACTION",
  "type": "VERIFY_ERROR",
  "metaData": {
    "errorCode": "errorCode",
    "errorMessage": "errorMessage",
    "authType": "OTP/SILENT_AUTH"
  }
}

{
  "event": "ACTION",
  "type": "OTP_AUTO_READ",
  "metaData": {
    "otp": "000000"
  }
}

{
  "event": "ACTION",
  "type": "DELIVERY_STATUS",
  "metaData": {
    "deliveryChannel": "WHATSAPP/SMS/VOICE_CALL",
    "communicationDelivered": true,
    "authType": "OTP"
  }
}

{
  "event": "ACTION",
  "type": "FALLBACK_TRIGGERED",
  "metaData": {
    "requestId": "req_98765abc",
    "channel": "OTP",
    "authType": "OTP",
    "deliveryChannel": "SMS/WHATSAPP/VOICE_CALL"
  }
}

PHONE_CHANGE
VERIFY
RESEND
CUSTOM

{
  "event": "CLICK",
  "type": "PHONE_CHANGE",
  "metaData": {}
}

{
  "event": "CLICK",
  "type": "VERIFY",
  "metaData": {}
}

{
  "event": "CLICK",
  "type": "RESEND",
  "metaData": {
    "resendbuttonType": "WHATSAPP/SMS/CALL/DEFAULT"
  }
}

{
  "event": "CLICK",
  "type": "CUSTOM",
  "metaData": {
    "custombuttonType": "buttonKeyName"
  }
}

PAGE_LOADED

{
  "event": "LOAD",
  "type": "PAGE_LOADED",
  "metaData": {}
}

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.

Web SDKs

Native/Mobile SDKs

References

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Step 4: Tracking Multiple Events

Sample Event JSON Payloads

Validate ID Token

Validate Token (Opaque)

​Step 1: Install OTPLESS SDK Dependency

​Step 2: Platform-specific Integrations

​Step 3: Configure Sign up/Sign in

​Step 4: Tracking Multiple Events

​Sample Event JSON Payloads

Validate ID Token

Validate Token (Opaque)

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Step 3: Configure Sign up/Sign in

Step 4: Tracking Multiple Events

Sample Event JSON Payloads