Documentation Index Fetch the complete documentation index at: https://otpless.com/docs/llms.txt
Use this file to discover all available pages before exploring further.
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:
<!-- 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 >
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:
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:
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);
(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);
Map < String , dynamic > arg = {};
arg[ "email" ] = "YOUR_EMAIL_ID" ;
_otplessFlutterPlugin. initiateEmailAuth (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[ "email" ] = "YOUR_EMAIL_ID" ;
arg[ "otp" ] = "YOUR_EMAIL_ID" ;
_otplessFlutterPlugin. verifyAuth (onHeadlessResult, arg);
Map < String , dynamic > arg = { 'channelType' : "WHATSAPP" };
_otplessFlutterPlugin. initiateOAuth (onHeadlessResult, channelType);
Object Attributes
Request
Response
Error Codes
Attribute Mandatory Description channelYes The authentication method selected by the user. phoneConditional User’s phone number (required if channel is PHONE). countryCodeConditional Country code of the phone number (required if channel is PHONE). emailConditional User’s email (required if channel is EMAIL). channelTypeConditional Type of social login initiated (required if channel is OAUTH).
Attribute Mandatory Description statusCodeYes Outcome of the request. 2xx for success, 4xx and 5xx for failures. successYes Boolean flag indicating request success. responseYes Detailed response JSON containing the response details.
StatusCode ErrorMessage Short Description 401Unauthorized request! Please check your appId Suggests missing or invalid app ID for authorization. 500API_ERROR Indicates a server-side error, possibly due to parameter issues. 4000The request values are incorrect, see details. Points to incorrect request values; refer to details for corrections. 4001OTPless headless SDK doesn’t support 2FA as of now Indicates the lack of 2FA support in the SDK. 4002The request parameters are incorrect, see details. Suggests parameter errors; check details for specifics. 4003The request channel is incorrect, see details. Notes an incorrect request channel; see details for correct usage. 5002No 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.
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.