Pre-Built UI

​

Step 1: Load 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/v2/auth.js"
></script>

​

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>

​

Step 3: Configure Authentication and UI

​

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