Flutter

Integrating One Tap OTPLESS Sign In into your Flutter Website using our SDK is a streamlined process. This guide offers a comprehensive walkthrough, detailing the steps to install the SDK and seamlessly retrieve user information.

  1. Install OTPless SDK Dependency
flutter pub add otpless_flutter_web:1.2.6
  1. Initialize Otpless in 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>
  1. Configure Sign up/Sign in
  • Import the following classes.
import 'package:otpless_flutter_web/otpless_flutter_web.dart';
  • Add this code to your initState() method
@override
void initState() {
  _otplessFlutterPlugin.headlessRespons(onHeadlessResult);
  super.initState();
}
  • Add this code to handle callback response
void onHeadlessResult(dynamic result) {
  setState(() {
    dataResponse = result;
  });
}
  • Add this code for OAUTH Authentication
void initiateOAuth(String channelType) async {
  _otplessFlutterPlugin.initiateOAuth(onHeadlessResult, channelType);
}
  • Add this code for PHONE/EMAIL Authentication
void initiatePhoneEmailAuth() async {
  Map<String, dynamic> arg = {};
  if (otpContoller.text.isNotEmpty) {
    if (phoneNumberContoller.text.isNotEmpty) {
      arg["phone"] = phoneNumberContoller.text;
      arg["countryCode"] = "91";
    } else {
      arg["email"] = emailContoller.text;
    }

    arg["otp"] = otpContoller.text;

    _otplessFlutterPlugin.verifyAuth(onHeadlessResult, arg);
  } else {
    if (phoneNumberContoller.text.isNotEmpty) {
      arg["phone"] = phoneNumberContoller.text;
      arg["countryCode"] = "91";

      _otplessFlutterPlugin.initiatePhoneAuth(onHeadlessResult, arg);
    } else if (emailContoller.text.isNotEmpty) {
      arg["email"] = emailContoller.text;

      _otplessFlutterPlugin.initiateEmailAuth(onHeadlessResult, arg);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("Please enter phone number or email"),
        ),
      );
    }
  }
}

Thank You

Visit OTPless