​
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

​
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_IN_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"
  1. Add the following override method in android/app/src/main/kotlin/MainActivity.kt to handle callback and initialize OTPLESS:
  • Import the following classes:
import com.otplessreactnative.OtplessReactNativeManager;
import android.content.Intent;
  • Add this code to your onCreate() method in your MainActivity to initialize OTPLESS:
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    OtplessReactNativeManager.INSTANCE.registerOtplessView(this);
    //Your code ...
  }
  • Add this code to your onBackPressed() method in your MainActivity:
@Override
public void onBackPressed() {
	if (OtplessReactNativeManager.INSTANCE.onBackPressed()) return;
	super.onBackPressed();
}

​
Step 3: Configure Sign up/Sign in

  1. Import the OtplessHeadlessModule on your page..
login_page.tsx
import { OtplessHeadlessModule } from "otpless-react-native";
  1. Create an instance of OtplessHeadlessModule.
login_page.tsx
const headlessModule = new OtplessHeadlessModule();
  1. Use useEffect hook to initialize the OtplessHeadlessModule and set callback.
login_page.tsx
useEffect(() => {
  headlessModule.initHeadless("YOUR_APP_ID");
  headlessModule.setHeadlessCallback(onHeadlessResult);
  return () => {
    headlessModule.clearListener();
  };
}, []);

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

  1. Add a method to receive callbacks from OtplessHeadlessModule.
login_page.tsx
const onHeadlessResult = (result: any) => {
  if (result?.statusCode === 200) {
    const responseType = result.responseType;

    switch (responseType) {
      case "INITIATE": {
        // Notify that headless authentication has been initiated
        console.log("Headless authentication initiated");
        break;
      }
      case "VERIFY": {
        // Notify that verification is completed
        // This is notified just before "ONETAP" final response
        console.log("Verification completed");
        break;
      }
      case "OTP_AUTO_READ": {
        if (Platform.OS === "android") {
          const otp = result;
          console.log(`OTP Received: ${otp}`);
        }
        break;
      }
      case "ONETAP": {
        const token = result;
        console.log(`OneTap Data: ${token}`);
        break;
      }
      default: {
        console.warn(`Unknown response type: ${responseType}`);
        break;
      }
    }
  } else {
    // Handle non-200 status codes
    console.error(`Error: Status code ${result?.statusCode || "unknown"}`);
  }
};
ResponseTypeDescription
INITIATEWhen authentication is initiated.
VERIFYWhen OTP is verified for an authentication and in case of link based authentication when user redirected back to the application after clicking the link.
ONETAPThis is the final response of an authentication session. It includes the token that should be sent to your backend for server-to-server validation.
OTP_AUTO_READWhen the OTP is automatically retrieved from SMS or WhatsApp. It includes OTP value in this responseType

​
Error Codes

StatusCodeErrorMessageShort Description
401Unauthorized request! Please check your appIdSuggests missing or invalid app ID for authorization.
500API_ERRORIndicates a server-side error, possibly due to parameter issues.
4000The request values are incorrect, see details.Points to incorrect request values; refer to details for corrections.
4001OTPless headless SDK doesn’t support 2FA as of nowIndicates the lack of 2FA support in the SDK.
4002The request parameters are incorrect, see details.Suggests parameter errors; check details for specifics.
4003The request channel is incorrect, see details.Notes an incorrect request channel; see details for correct usage.
5002No internet connection is present.Indicates no internet connection, troubleshoot network and device.

​
Step 4: Initiate Authentication

Initiate the authentication process based on the user’s selected method by using the initiate method of the SDK.

(Optional): Verify OTP

To verify the OTP entered by the user, use the verify method with the necessary parameters.

Object Attributes

AttributeMandatoryDescription
channelYesThe authentication method selected by the user.
phoneConditionalUser’s phone number (required if channel is PHONE).
countryCodeConditionalCountry code of the phone number (required if channel is PHONE).
emailConditionalUser’s email (required if channel is EMAIL).
channelTypeConditionalType of social login initiated (required if channel is OAUTH).

​
🏁 Checkpoint

To ensure a smooth integration process:

  1. Deploy your app/website with the included OTPLESS SDK.
  2. Conduct tests to verify the sign-in flow functions correctly.
  3. Ensure that after a successful sign-in, the user is redirected back to your app/website and their information is correctly logged in the console.

​
User Information Response Structure

The structure of the user information returned upon successful sign-in is as follows:

{
  "status": "SUCCESS",
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
       "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "OAUTH",
      "methods": [
        "GOOGLE"
      ],
      "name": "User Name",
      "verified": true,
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    }
  ],
  "idToken": "jwt_token",
  "network": {
    "ip": "127.0.0.1",
    "timezone": "Asia/Kolkata",
    "ipLocation": {}
  },
  "deviceInfo": {},
  "sessionInfo": {},
  "firebaseInfo": {},
}

You can check out a complete sample response here.

​
Next Steps

Validate Token

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

Was this page helpful?

Pre-Built UIIntroduction