​
What is SNA?

Silent Network Authentication (SNA) is an authentication process that utilizes the user’s mobile network details to verify their identity seamlessly. It’s conducted in the background, providing a frictionless user experience by leveraging the user’s phone network without requiring any user interaction.

​
Why SNA?

  • Frictionless Experience: Users are authenticated without any action required on their part, improving the user experience significantly.
  • Enhanced Security: Leverages network-based factors, making it more secure against common threats like phishing or credential exploitation.
  • Higher Conversion Rates: Reduces abandonment rates during the sign-in or sign-up process, as users are not deterred by complex authentication steps.

​
How it works?

SNA works by checking if the user’s device can be authenticated through their telecom provider without user interaction. If the automatic check fails, it falls back to alternative methods like WhatsApp, SMS, or Viber based on predetermined configurations.

​
Prerequisite

To enable SNA for your application, contact your Relationship Manager or support@otpless.com to activate the SNA feature.

​
Technical Flow

​
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 SNA

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",
  });
};

Pre-check Fallback: If SNA cannot be verified initially (pre-check failed), the system will automatically trigger the fallback method configured on your dashboard.

​
Handling Responses

function handleResponse(response) {
  if (response.event === "fallback_triggered") {
    // Handle fallback scenario
    console.log("Fallback triggered:", response);
  if (response.event === "success") {
    // Handle fallback scenario
    console.log("Success:", response);
  } else {
    // Handle successful SNA
    console.log(response);
  }
}

​
Conclusion

Integrating SNA into your web applications with OTPLESS not only enhances the user experience by reducing friction during the authentication process but also improves security. For more detailed information on custom configurations and advanced settings, refer to our full documentation.

Was this page helpful?