Integrating Smart Authentication into Your Application
Smart authentication is a multi-layered solution that maximizes user conversion rates and ensures robust security using a waterfall model. It transitions seamlessly through various methods to provide a smooth, secure user experience.
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/v2/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:
<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.
Was this page helpful?