​
Step 1: Add SDK Dependency

Begin by adding the OTPLESS SDK to your project. Insert the following script tag in the <head> section of your HTML document.

index.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

With the SDK embedded, initialize it and define a callback function to handle authentication responses as shown below.

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 a user interface for authentication. An example HTML structure could look like this:

login.html
<div>
  <input id="mobile-input" placeholder="Enter mobile number" />
  <button onclick="phoneAuth()">Request OTP</button>
</div>

<div id="otp-section" style="display: none;">
  <input id="otp-input" placeholder="Enter OTP" />
  <button onclick="verifyOTP()">Verify OTP</button>
</div>

<button onclick="oauth('WHATSAPP')">Continue with WhatsApp</button>
<button onclick="oauth('GMAIL')">Continue with Gmail</button>
<!-- Add more buttons for different OAuth providers as needed -->

​
Step 4: Initiate Authentication

Initiate the authentication process based on the user’s selected method by using the initiate method of the SDK.

const phoneAuth = () => {
  OTPlessSignin.initiate({
    channel: "PHONE",
    phone: "839899038845",
    countryCode: "+62",
  });
};

Object Attributes

AttributeMandatoryDescription
channelYesThe authentication method selected by the user.
phoneConditionalUser’s phone number (required if channel is PHONE).
countryCodeConditionalCountry code of the phone number (required if channel is PHONE).
emailConditionalUser’s email (required if channel is EMAIL).
channelTypeConditionalType of social login initiated (required if channel is OAUTH).

​
Step 5: Verify OTP

To verify the OTP entered by the user, use the verify method with the necessary parameters.

const verifyOTP = () => {
OTPlessSignin.verify({
  channel: "PHONE",
  phone: "98785XXXXX",
  otp: "123456",
  countryCode: "+91",
});
};

🏁 Checkpoint

To ensure a smooth integration process:

  1. Deploy your app/website with the included OTPLESS SDK.
  2. Conduct tests to verify the sign-in flow functions correctly.
  3. 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.

​
User Information JSON

The structure of the user information returned upon successful sign-in is as follows:

{
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
      "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "GMAIL",
      "methods": ["OAUTH"],
      "name": "User Name",
      "verified": "true",
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    },
    ...
  ],
  ...
}

​
Next Steps

Validate Token

Learn how to securely `validate token` returned by OTPLESS vue SDK to ensure the authenticity of sign-in events from your backend server.

Was this page helpful?

Pre-Built UIIntroduction