Pre-Built UI

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

Android
iOS

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>

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

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 ios/Runner/info.plist file:

info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>otpless.{{YOUR_APP_ID}}</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>

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

Import the OTPLESS SDK in your respective AppDelegate.swift file to handle redirection.

AppDelegate.swift

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

}

Import the OTPLESS package on your login page.

login_page.js

import { OtplessManager } from "otpless-ionic";

Add OTPLESS instance and declare the variable with YOUR_APP_ID

login_page.js

let manager = new OtplessManager();
let extras = {
  method: "get",
  params: {
    appId: "{{YOUR_APP_ID}}",
  },
};

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

Add the following code to Initiate OTPLESS Login Page

login_page.js

manager.showFabButton(false);
const data = await manager.showOtplessLoginPage(extras);

let message: string = "";
if (data.data === null || data.data === undefined) {
  message = data.errorMessage;
} else {
  message = "token: ${data.data.token}";
  // todo here
}

🏁 Checkpoint

To ensure a smooth integration process:

Deploy your app/website with the included OTPLESS SDK.
Conduct tests to verify the sign-in flow functions correctly.
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 ID Token

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

Validate Token (Opaque)

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

Web SDKs

Native/Mobile SDKs

References

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

🏁 Checkpoint

User Information Response Structure

Next Steps

Validate ID Token

Validate Token (Opaque)

​Step 1: Install OTPLESS SDK Dependency

​Step 2: Platform-specific Integrations

​Step 3: Configure Sign up/Sign in

​🏁 Checkpoint

​User Information Response Structure

​Next Steps

Validate ID Token

Validate Token (Opaque)

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Step 3: Configure Sign up/Sign in

🏁 Checkpoint

User Information Response Structure

Next Steps