​
Step 1: Load the OTPLESS JS

To integrate the OTPLESS Sign-in into your website, insert the following script into the head section of your HTML code:

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

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

​
Step 2: Create the OTPLESS Login UI

Insert the following div in your login or sign-up page where you want the OTPLESS login UI to appear:

login.html
<-- 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. For local development, consider using tools like ngrok to create a secure tunnel.

​
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 process authentication responses. Add this script to your page:

index.html
mounted() {
 window.otpless = (otplessUser) => {
  alert(JSON.stringify(otplessUser));
 };
}

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

Was this page helpful?

IntroductionHeadless