Headless

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/v4/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.6
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(result) {
    // Parse the result JSON string into a Map
    Map<String, dynamic> parsedResult = jsonDecode(result);

    switch (parsedResult['responseType'] as String) {
      case "INITIATE":
        {
          print("INITIATE  ${parsedResult["response"]}");
          responseData = parsedResult.toString();
          setState(() {});
          break;
        }
      case "FALLBACK_TRIGGERED":
        {
          print("FALLBACK_TRIGGERED  ${parsedResult["response"]}");
          responseData = parsedResult.toString();
          setState(() {});
          break;
        }

      case "VERIFY":
        {
          print("VERIFY  ${parsedResult["response"]}");
          responseData = parsedResult.toString();
          setState(() {});
          break;
        }

      case 'ONETAP':
        {
          print("ONETAP  ${parsedResult["response"]}");
          responseData = parsedResult.toString();
          setState(() {});
        }
    }
  }

Add this code to your initState() method in your SignIn/SignUp page:

@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.

Phone Auth
Email Auth
OAUTH

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

{
  "statusCode": 200,
  "success": true,
  "response": {
    "channel": "PHONE",
    "deliveryChannel": "WHATSAPP",
    "authType": "OTP",
    "requestId": "xxxxxxxxxxxxxxxx"
  }
}

(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);

  {
      "statusCode": 200,
      "success": true,
      "response": {
          "verification": "COMPLETED",
          "requestId": "xxxxxxxxxxxxxxxx",
          "channel": "PHONE"
      }
  }

Map<String, dynamic> arg = {};
arg["email"] = "YOUR_EMAIL_ID";
_otplessFlutterPlugin.initiateEmailAuth(onHeadlessResult, arg);

{
  "statusCode": 200,
  "success": true,
  "response": {
    "channel": "EMAIL",
    "deliveryChannel": "EMAIL",
    "authType": "OTP",
    "requestId": "xxxxxxxxxxxxxxxx"
  }
}

(Optional): Verify OTP

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

Map<String, dynamic> arg = {};
arg["email"] = "YOUR_EMAIL_ID";
arg["otp"] = "YOUR_EMAIL_ID";
_otplessFlutterPlugin.verifyAuth(onHeadlessResult, arg);

  {
      "statusCode": 200,
      "success": true,
      "response": {
          "verification": "COMPLETED",
          "requestId": "xxxxxxxxxxxxxxxx",
          "channel": "EMAIL"
      }
  }

Map<String, dynamic> arg = {'channelType': "WHATSAPP"};
_otplessFlutterPlugin.initiateOAuth(onHeadlessResult, channelType);

{
  "statusCode": 200,
  "success": true,
  "response": {
    "channel": "OAUTH",
    "channelType": "WHATSAPP",
    "requestId": "xxxxxxxxxxxxxxxx"
  }
}

Object Attributes

Request
Response
Error Codes

Attribute	Mandatory	Description
`channel`	Yes	The authentication method selected by the user.
`phone`	Conditional	User’s phone number (required if channel is PHONE).
`countryCode`	Conditional	Country code of the phone number (required if channel is PHONE).
`email`	Conditional	User’s email (required if channel is EMAIL).
`channelType`	Conditional	Type of social login initiated (required if channel is OAUTH).

Attribute	Mandatory	Description
`statusCode`	Yes	Outcome of the request. 2xx for success, 4xx and 5xx for failures.
`success`	Yes	Boolean flag indicating request success.
`response`	Yes	Detailed response JSON containing the response details.

StatusCode	ErrorMessage	Short Description
`401`	Unauthorized request! Please check your appId	Suggests missing or invalid app ID for authorization.
`500`	API_ERROR	Indicates a server-side error, possibly due to parameter issues.
`4000`	The request values are incorrect, see details.	Points to incorrect request values; refer to details for corrections.
`4001`	OTPless headless SDK doesn’t support 2FA as of now	Indicates the lack of 2FA support in the SDK.
`4002`	The request parameters are incorrect, see details.	Suggests parameter errors; check details for specifics.
`4003`	The request channel is incorrect, see details.	Notes an incorrect request channel; see details for correct usage.
`5002`	No internet connection is present.	Indicates no internet connection, troubleshoot network and device.

🏁 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 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: Add SDK Dependency

Step 2: Initialize SDK and Handle Callback

Step 3: Initiate Authentication

(Optional): Verify OTP

(Optional): Verify OTP

🏁 Checkpoint

User Information Response Structure

Next Steps

Validate ID Token

Validate Token (Opaque)

​Step 1: Add SDK Dependency

​Step 2: Initialize SDK and Handle Callback

​Step 3: Initiate Authentication

​(Optional): Verify OTP

​(Optional): Verify OTP

​🏁 Checkpoint

​User Information Response Structure

​Next Steps

Validate ID Token

Validate Token (Opaque)

Step 1: Add SDK Dependency

Step 2: Initialize SDK and Handle Callback

Step 3: Initiate Authentication

(Optional): Verify OTP

(Optional): Verify OTP

🏁 Checkpoint

User Information Response Structure

Next Steps