​
Step 1: Install OTPLESS SDK Dependency

Install the OTPLESS SDK dependency by running the following command in your terminal at the root of your Ionic project:

npm install otpless-ionic

​
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}}"/>
</intent-filter>
  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"

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

  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/java/MainActivity.java to handle callback:
  • Import the following classes:
import com.otpless.ionic.OtplessPlugin;
import android.os.Bundle;
  • Add this code to your onCreate() method in your main activity:
@Override
protected void onCreate(Bundle savedInstanceState) {
	registerPlugin(OtplessPlugin.class);
	super.onCreate(savedInstanceState);
}
  • Add this code to your onBackPressed() method in your main activity:
@Override
public void onBackPressed() {
	if (OtplessPlugin.onBackPressed(this)) return;
	super.onBackPressed();
}

​
Step 3: Configure Sign up/Sign in

Great! Now let’s configure your activity for sign-up or sign-in. Below are the steps for both Java and Kotlin.

First, import the necessary classes from the OTPLESS SDK:

import com.otpless.main.OtplessManager;
import com.otpless.main.OtplessView;
import com.otpless.dto.HeadlessRequest;
import com.otpless.dto.HeadlessResponse;
import com.otpless.dto.HeadlessChannelType;

Declare an OtplessView instance:

OtplessView otplessView;

Within your onCreate() method, initialize and set up the OTPLESS sign-in:

// Initialize OtplessView
otplessView = OtplessManager.getInstance().getOtplessView(this);
otplessView.initHeadless("YOUR_APP_ID");
otplessView.setHeadlessCallback(this::onHeadlessCallback);

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

Step 4: Setup your login screen

In your login screen, add the following code to initialize OTPLESS SDK:

Now, let’s implement a callback method to handle the response from the OTPLESS SDK:

Data received from OTPLESS contains the following ResponseTypes:

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.

Override onNewIntent()

Ensure you override the onNewIntent() method to correctly handle intent verification:

if (otplessView != null) {
  otplessView.onNewIntent(intent);
}

Override onBackPressed()

Override the onBackPressed() method to manage back press actions properly:

// Make sure you call this code before super.onBackPressed();
if (otplessView.onBackPressed()) return;

​
Step 5: Initiate Authentication

Well done! You have completed the foundational setup of the SDK. Now, let’s move to the next step and understand how to initiate and verify different authentication modes.

Choose the authentication mode you want to integrate from the options below:

OTP

Send a One-Time Password (OTP) via SMS, WhatsApp, or Email for secure user verification.

Magic Link

Provide a seamless login experience by sending an authentication link through SMS, WhatsApp, or Email.

Social Auth

Authenticate users through popular social applications like WhatsApp, Google, Apple, and GitHub.

Was this page helpful?

Pre-Built UIOTP