​
Step 1: Add SDK Dependency

Add the OTPLESS SDK to your project by including the following script 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

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:

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

Use the initiate method of the SDK to start the authentication process:

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 javascript SDK to ensure the authenticity of sign-in events from your backend server.

Was this page helpful?

Pre-Built UIIntroduction