​
Step 1: Add SDK Dependency

Add the OTPLESS SDK to your project by including the following script in the <body> section of your HTML document:

index.html
<!-- Add this script to initiate otpless -->
<script
  data-appid="{YOUR_APP_ID}"
  src="https://otpless.com/v2/flutter.js"
  id="otpless-sdk"
  type="text/javascript"
  variant="HEADLESS"
></script>

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

​
Step 2: Initialize SDK and Handle Callback

Initialize the SDK and set up a callback function to handle authentication:

  • Install OTPLESS SDK Dependency
flutter pub add otpless_flutter_web:1.2.5
flutter pub get
  • Import the following classes and declare variables:
login_page.dart
import 'package:otpless_flutter_web/otpless_flutter_web.dart';

// Add this code inside your class
final _otplessFlutterPlugin = Otpless();
  • Add a method to receive callbacks from OTPless:
login_page.dart
void onHeadlessResult(dynamic result) {
	setState(() {
		// handle result to update UI
	});
}
  • Add this code to your initState() method in your SignIn/SignUp page:
login.dart
@override
void initState() {
  _otplessFlutterPlugin.headlessRespons(onHeadlessResult);
  super.initState();
}

​
Step 3: 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.initiatePhoneAuth(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.verifyAuth(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?

IntroductionIntroduction