​
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_IN_LOWERCASE}}"/>
</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: Setup your login screen

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

import {OtplessManager} from 'otpless-ionic';

let manager = new OtplessManager();

useEffect(() => {
    manager.initHeadless(APPID);
    manager.setHeadlessCallback(onHeadlessResult);
    return () => {
        manager.clearListener();
    }
}, []);

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

const onHeadlessResult = (result: any) => {
  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.response.otp;
        console.log(`OTP Received: ${otp}`);
      }
      break;
    }
    case "ONETAP": {
      const token = result.response.token;
      console.log(`OneTap Data: ${token}`);
      break;
    }
    case "FALLBACK_TRIGGERED": {
    // A fallback occurs when an OTP delivery attempt on one channel fails,  
    // and the system automatically retries via the subsequent channel selected on Otpless Dashboard.  
    // For example, if a merchant opts for SmartAuth with primary channal as WhatsApp and secondary channel as SMS,
    // in that case, if OTP delivery on WhatsApp fails, the system will automatically retry via SMS.
    // The response will contain the deliveryChannel to which the OTP has been sent.
      if (response.response.deliveryChannel != null) {
          const newDeliveryChannel = response.response.deliveryChannel // This is the deliveryChannel to which the OTP has been sent
      }
      break;
    }
    default: {
      console.warn(`Unknown response type: ${responseType}`);
      break;
    }
  }

};

​
Step 4: 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?