​
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:2.1.5
flutter pub get

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

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/kotlin/MainActivity.kt to handle callback:
  • Import the following classes:
import com.otpless.otplessflutter.OtplessFlutterPlugin;
import android.content.Intent;
  • Add this code to your onNewIntent() method in your main activity:
override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    val plugin = flutterEngine?.plugins?.get(OtplessFlutterPlugin::class.java)
    if (plugin is OtplessFlutterPlugin) {
        plugin.onNewIntent(intent)
    }
}
  • Add this code to your onBackPressed() method in your main activity:
override fun onBackPressed() {
    val plugin = flutterEngine?.plugins?.get(OtplessFlutterPlugin::class.java)
    if (plugin is OtplessFlutterPlugin) {
      if (plugin.onBackPressed()) return
  }
  // handle other cases
  super.onBackPressed()
}

​
Step 3: Initialize OTPless

  1. Import the OTPLESS package on your login page.
login_page.dart
import 'package:otpless_flutter/otpless_flutter.dart';
  1. Create an instance of otpless plugin in your dart file.
login_page.dart
final _otplessFlutterPlugin = Otpless();
  1. Override the initState function and add the following code:
login_page.dart
_otplessFlutterPlugin.initHeadless("ALP5OU9SMLB3NSPYGNSG");
_otplessFlutterPlugin.setHeadlessCallback(onHeadlessResult);

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

  1. Add a method to receive callbacks from OTPless
login_page.dart
void onHeadlessResult(dynamic result) {
	setState(() {
		// handle result to update UI
	});
}

​
Step 4: Initiate Authentication

Initiate the authentication process based on the user’s selected method by using the initiate method of the SDK.

Map<String, dynamic> arg = {};
arg["phone"] = "YOUR_PHONE_NUMBER";
arg["countryCode"] = "YOUR_COUNTRY_CODE";
_otplessFlutterPlugin.startHeadless(onHeadlessResult, arg);

(Optional): Verify OTP

To verify the OTP entered by the user, use the verify method with the necessary parameters.

Map<String, dynamic> arg = {};
arg["phone"] = "YOUR_PHONE_NUMBER";
arg["countryCode"] = "YOUR_COUNTRY_CODE";
arg["otp"] = "YOUR_COUNTRY_CODE";
_otplessFlutterPlugin.startHeadless(onHeadlessResult, arg);

Object Attributes

AttributeMandatoryDescription
channelYesThe authentication method selected by the user.
phoneConditionalUser’s phone number (required if channel is PHONE).
countryCodeConditionalCountry code of the phone number (required if channel is PHONE).
emailConditionalUser’s email (required if channel is EMAIL).
channelTypeConditionalType of social login initiated (required if channel is OAUTH).

🏁 Checkpoint

To ensure a smooth integration process:

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

The structure of the user information returned upon successful sign-in is as follows:

{
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
      "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "GMAIL",
      "methods": ["OAUTH"],
      "name": "User Name",
      "verified": "true",
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    },
    ...
  ],
  ...
}

​
Next Steps

Validate Token

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

Was this page helpful?

Pre-Built UIIntroduction