​
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

  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.cease();
    };
}, []);

const initializeModule = () => {
    otplessModule.initialize("APPID", "OTPLESS_SECRET");
    otplessModule.setResponseCallback(onResponse);
};
  1. Add the following code to Initiate OTPLESS Login Page
login_page.tsx
otplessModule.start();
  1. Add the following code to handle response callback:
login_page.tsx
const onResponse = (data: any) => {
    let token = data.token
    if (token !== null) {
        // Send the token to your backend and verify the token to get user details
        console.log("Token: ", token);
    } else {
        // Handle error
        console.log("Error: ", data.errorMessage);
    }
};
  1. When user successfully logs in, stop Otpless:
login_page.tsx
otplessModule.stop()

Validate Token

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

Was this page helpful?