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 Flutter project:

flutter pub add otpless_flutter_lp:1.0.4
flutter pub get

Step 2: Platform-specific Integrations

Android
iOS

Requirements

The compileSdk version should be 35.
The minimum SDK version supported by the SDK is 21.
The kotlin version should be 1.9.0 and above.
The gradle version should be 8.3.1 and above.

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

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

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

info.plist

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

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

Add the following block to your ios/Runner/info.plist file (Only required if you are using the SNA feature):

info.plist

<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 ios/Runner/AppDelegate.swift file to handle redirection.

AppDelegate.swift

import OtplessSwiftLP

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if OtplessSwiftLP.shared.isOtplessDeeplink(url: url){
        OtplessSwiftLP.shared.processOtplessDeeplink(url: url)
        return true
    }
	super.application(app, open: url, options: options)
	return true
}

Import the OTPLESS package on your login page.

login_page.dart

import 'package:otpless_flutter_lp/otpless_flutter.dart';

Add OTPLESS instance and declare the variable with YOUR_APP_ID

login_page.dart

  final _otplessFlutterLP = Otpless();

  @override
  void initState() {
    super.initState();
    _otplessFlutterLP.initialize("YOUR_APP_ID");
    _otplessFlutterLP.setResponseCallback(onLoginPageResult);
    // only in debug case
    _otplessFlutterLP.setDebugLogging(true);
    _otplessFlutterLP.setWebViewInspectable();
  }

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

Show the Otpless Login Page:

login_page.dart

  Future<void> openLoginPage() async {
    LoginPageParams pageParams = LoginPageParams(
        extraQueryParams: {"phone": "PHONE_NUMBER", "countryCode": "91"});
    _otplessFlutterLP.start(pageParams);
  }


 void onLoginPageResult(OtplessResult result) {
  // Normalize the dynamic payload to a Map
  if (result is OtplessResultSuccess) {
      print("token: ${result.token}");
      return;
    }
  if (result is OtplessResultError) {
    switch (result.errorType) {
      case  ErrorType.initiate:
        switch (result.errorCode) {
          case 10000:
            // TODO: User cancelled (back button)
            break;
          case 10001:
            // TODO: User cancelled (help button)
            break;
          case 10002:
            // TODO: User cancelled (change phone)
            break;
          case 7102:
            // TODO: Invalid phone
            break;
          case 7104:
            // TODO: Invalid email
            break;
          case 9120:
            // TODO: SDK not initialized
            break;
          case 9125:
          case 5050:
            // TODO: SDK loading error
            break;
          default:
            // TODO: Generic INITIATE error (use errorCode if needed)
            break;
        }
        break;

      case  ErrorType.network:
        if (result.errorCode == 9103) {
          // TODO: No internet connection
        } else {
          // TODO: Generic NETWORK error (use errorCode if needed)
        }
        break;

      case ErrorType.verify:
        // TODO: Custom verify error (use errorCode if needed)
        break;

      default:
        // TODO: Unknown errorType; consider a generic error UI
        break;
    }

    // Optional: Display errorMessage to the user or send traceId to your monitoring
    // e.g., showSnackBar(errorMessage); sendToAnalytics(traceId);
    return;
  }

  // Fallback: unknown payload shape
  // TODO: Handle unexpected response format (m)
}

When user successfully logs in or your login screen is destroyed, stop Otpless service:

login_page.dart

  void stopOtpless() {
    _otplessFlutterLP.stop();
  }

Tracking Multiple Events

You can observe all events using:

_otplessFlutterLP.setEventListener(onOtplessEvent);

To track and handle specific event categories, use:

void onOtplessEvent(OtplessEventData result) {
    // Handle eventData here

    print(result);
    EventCategory category= result.category;
    EventType eventType =result.eventType;
    Map<String, dynamic>? metaData = result.metaData;

    switch (category) {
      case EventCategory.load:
        // track url success loading action
        break;

      case EventCategory.click:
        // track user action
        break;

      case EventCategory.action:
        // track actions with metadata
        break;
    }
  }

Sample Event JSON Payloads

ACTION
CLICK
LOAD

INITIATE
VERIFY_ERROR
OTP_AUTO_READ
DELIVERY_STATUS
FALLBACK_TRIGGERED

{
  "event": "ACTION",
  "type": "INITIATE",
  "metaData": {
    "requestId": "abc123xyz",
    "channel": "OTP/SILENT_AUTH",
    "authType": "OTP/SILENT_AUTH",
    "deliveryChannel": "OTP/SILENT_AUTH"
  }
}

{
  "event": "ACTION",
  "type": "VERIFY_ERROR",
  "metaData": {
    "errorCode": "errorCode",
    "errorMessage": "errorMessage",
    "authType": "OTP/SILENT_AUTH"
  }
}

{
  "event": "ACTION",
  "type": "OTP_AUTO_READ",
  "metaData": {
    "otp": "000000"
  }
}

{
  "event": "ACTION",
  "type": "DELIVERY_STATUS",
  "metaData": {
    "deliveryChannel": "WHATSAPP/SMS/VOICE_CALL",
    "communicationDelivered": true,
    "authType": "OTP"
  }
}

{
  "event": "ACTION",
  "type": "FALLBACK_TRIGGERED",
  "metaData": {
    "requestId": "req_98765abc",
    "channel": "OTP",
    "authType": "OTP",
    "deliveryChannel": "SMS/WHATSAPP/VOICE_CALL"
  }
}

PHONE_CHANGE
VERIFY
RESEND
CUSTOM

{
  "event": "CLICK",
  "type": "PHONE_CHANGE",
  "metaData": {}
}

{
  "event": "CLICK",
  "type": "VERIFY",
  "metaData": {}
}

{
  "event": "CLICK",
  "type": "RESEND",
  "metaData": {
    "resendbuttonType": "WHATSAPP/SMS/CALL/DEFAULT"
  }
}

{
  "event": "CLICK",
  "type": "CUSTOM",
  "metaData": {
    "custombuttonType": "buttonKeyName"
  }
}

PAGE_LOADED

{
  "event": "LOAD",
  "type": "PAGE_LOADED",
  "metaData": {}
}

Validate ID Token

Learn how to securely `validate ID token` returned by OTPLESS flutter 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 flutter 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

Requirements

Sample Event JSON Payloads

Validate ID Token

Validate Token (Opaque)

​Step 1: Install OTPLESS SDK Dependency

​Step 2: Platform-specific Integrations

Requirements

​Step 3: Configure Sign up/Sign in

​Sample Event JSON Payloads

Validate ID Token

Validate Token (Opaque)

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Step 3: Configure Sign up/Sign in

Sample Event JSON Payloads