Integrating Smart Authentication into Your Application

What is Smart Authentication?

Smart authentication is a dynamic, multi-layered authentication solution designed to maximize user conversion rates while ensuring robust security. Utilizing a waterfall model, this adaptive system seamlessly transitions through various authentication methods, prioritizing ease of use and minimizing friction to provide a smooth and secure user experience. By optimizing each step of the authentication process, it achieves the highest possible conversion rates for your user network.

Why Smart Authentication?

Higher Conversion Rates: The waterfall model compensates for drop-offs at each step, ensuring more users complete the authentication process.
Enhanced Security: Multi-layered authentication mechanisms reduce the risk of unauthorized access, providing robust protection.
Seamless User Experience: Adaptive methods ensure a smooth, user-friendly verification process, minimizing frustration and maximizing satisfaction.

How it works?

Smart Authentication employs a sophisticated approach to authentication, intelligently navigating through various channels to verify users effectively. In the above representation the flow starts with silent network authentication, leveraging network data to confirm identity seamlessly. Should this method encounter obstacles, the system seamlessly transitions to WhatsApp authentication, where a verification message prompts users to confirm their identity. If WhatsApp authentication isn’t viable, Smart Authentication smoothly proceeds to SMS authentication. Here, a one-time passcode is sent via SMS to the user’s registered phone number, ensuring a secure authentication process. This dynamic routing ensures a reliable and user-friendly authentication experience, maximizing both security and user conversion rates.

Prerequisite

To activate Smart Authentication for your application, simply reach out to your Relationship Manager or contact support@otpless.com for assistance.

Integration Steps

Step 1: Load the Headless SDK

First, include the OTPLESS Headless SDK in your project by adding the following script to the <head> of your HTML:

<script id="otpless-sdk" src="https://otpless.com/v3/headless.js" data-appid="YOUR_APP_ID"></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:

index.html
<script>
  const callback = (userinfo) => {
    const emailMap = otplessUser.identities.find(
      (item) => item.identityType === "EMAIL"
    );

    const mobileMap = otplessUser.identities.find(
      (item) => item.identityType === "MOBILE"
    )?.identityValue;

    const token = otplessUser.token;

    const email = emailMap?.identityValue;

    const mobile = mobileMap?.identityValue;

    const name = emailMap?.name || mobileMap?.name;

    console.log(userinfo);

    // Implement your custom logic here.
  };
  // Initialize OTPLESS SDK with the defined callback.
  const OTPlessSignin = new OTPless(callback);
</script>

Step 3: Create Your UI

Design and implement your custom UI for authentication. An example HTML structure could look like this:

<input id="mobile-input" placeholder="Enter mobile number" />
<button onclick="phoneAuth()">Verify</button>

Step 4: Initiate Smart Authentication

When the user clicks the CTA, call the initiate function with the user’s input data:

const phoneAuth = () => {
  OTPlessSignin.initiate({
    channel: "PHONE",
    phone: document.getElementById('mobile-input').value,
    countryCode: "+62",
  });
};

Handling Responses

function handleResponse(response) {
  if (response.authType === "OTP/MOBILE_LOGIN/OTP_LINK/OTAP" && 
  response.responseType === "INITIATE") {
    // Handle fallback scenarios
    console.log("Fallback triggered:", response);
  } else {
    // Handle successful response
    console.log(response);
  }
}

Please note: Similarly, you can seamlessly integrate the same flow into mobile apps by following the instructions available here.

Conclusion

Incorporating Smart Authentication into your applications through OTPLESS not only streamlines the user experience by minimizing authentication friction but also bolsters security measures. For further insights into custom configurations and advanced settings, explore our comprehensive full documentation.

​What is Smart Authentication?

​Why Smart Authentication?

​How it works?

​Prerequisite

​Integration Steps

​Step 1: Load the Headless SDK

​Step 2: Initialize SDK and Handle Callback

​Step 3: Create Your UI

​Step 4: Initiate Smart Authentication

​Handling Responses

​Conclusion