Skip to main content

​
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.
  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_LOWERCASE"/>
</intent-filter>
Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.
  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"
  1. Change your activity launchMode to singleTop and exported true for your Main Activity:
android:launchMode="singleTop"
android:exported="true"

​
Step 3: Configure Sign up/Sign in

  1. Import the OTPLESS package on your login page.
login_page.dart
import 'package:otpless_flutter_lp/otpless_flutter.dart';
  1. 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.
  1. 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)
}
  1. When user successfully logs in or your login screen is destroyed, stop Otpless service:
login_page.dart
  void stopOtpless() {
    _otplessFlutterLP.stop();
  }
  1. 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"
  }
}

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.
⌘I