​
Step 1: Add the OTPLESS JS

To integrate the OTPLESS Sign-in into your website, include the following script in the head section of your HTML.

<!-- OTPLESS SDK -->
<script
  id="otpless-sdk"
  type="text/javascript"
  data-appid="YOUR_APP_ID"
  src="https://otpless.com/v4/auth.js"
></script>

Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.

​
Step 2: Embed the OTPLESS Login UI

Insert the following HTML where you want the OTPLESS login UI to appear:

<!-- OTPLESS Login UI -->
<div id="otpless-login-page"></div>

Ensure your site is served over HTTPS to enable the sign-in widget to load properly. Use tools like ngrok for a secure tunnel during local development.

​
Step 3: Configure Authentication and UI

Configure Auth Method

Choose from various authentication methods such as SMS, WhatsApp, Email, and Google to optimize user access.

Configure UI

Customize your authentication interface to align with your brand’s identity and enhance user experience.

​
Step 4: Handle Authentication Callback

Implement a callback function to handle the authentication response and manage user data:

<script>
  function otpless(otplessUser) {
    const token = otplessUser.token;
    console.log('Token:', token);
    console.log('User Details:', JSON.stringify(otplessUser));
  }
</script>

​
🏁 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 Response Structure

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

{
  "status": "SUCCESS",
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
       "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "OAUTH",
      "methods": [
        "GOOGLE"
      ],
      "name": "User Name",
      "verified": true,
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    }
  ],
  "idToken": "jwt_token",
  "network": {
    "ip": "127.0.0.1",
    "timezone": "Asia/Kolkata",
    "ipLocation": {}
  },
  "deviceInfo": {},
  "sessionInfo": {},
  "firebaseInfo": {},
}

You can check out a complete sample response here.

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

IntroductionHeadless