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
- 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>
- 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 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();
}
- 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>
- 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 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();
}
- Add the following block to your
info.plist
file:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>otpless.{{YOUR_APP_ID_IN_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>
- Add the following block to your
ios/Runner/info.plist
file (Only required if
you are using the SNA feature):
<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>
- Import the OTPLESS SDK in your respective
AppDelegate.swift
file to handle redirection.
import OtplessSDK
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
if Otpless.sharedInstance.isOtplessDeeplink(url: url){
Otpless.sharedInstance.processOtplessDeeplink(url: url)
return true
}
super.application(app, open: url, options: options)
return true
}
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: