Integrate One Tap OTPLESS Sign In into your Vue.js application using our SDK. This guide will walk you through the process of installing the SDK and retrieving user information.

Step 1: Install the OTPLESS SDK

Secure Login with WhatsApp Button

Install the OTPLESS SDK in your website by adding the following script to your login page:

html
<script type="text/javascript" src="<https://otpless.com/auth.js>"></script>

Upon successful installation, the OTPLESS widget (floater) will be visible on your login page.

🚩Note: Please ensure that your application is served over HTTPS for the widget to load correctly. The widget may not function as expected on localhost or in incognito mode.

Step 2: Retrieving User's Information

Easy User Information Retrieval

Upon successful authentication of the user, the user object is returned to you. Implement the following script to retrieve and log the user's information:

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

The user's information will be logged in the console as follows:

json
{
 "token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
 "timestamp": "YYYY-MM-DD HH:MM:SS",
 "timezone": "+XX:XX",
 "mobile": {
  "name": "User Name",
  "number": "User Mobile Number"
 },
 "email": {
  "name": "User Name",
  "email": "User Email"
 }
}

🚩Note: The user object is returned only after all the authentication methods configured in the SDK have been completed. If multiple methods (e.g., mobile and email) are selected, all must be verified before the user object is returned.

Optional Step: Validate User Details

Enhance Security with Backend Validation

You can further enhance the security of your application by validating the user details from our backend. This involves exchanging the token for the user's detail in a server-to-server API call.

Step 3: User Registration and Authentication

Simplify User Authentication

Utilize the user details obtained from the previous step to authenticate the user in accordance with your application's specific business logic. This could involve creating a new user account (sign up) or verifying an existing user (sign in).

Conclusion: Elevate Your User Authentication with OTPLESS

With OTPLESS integrated into your Vue.js application, you can offer your users a seamless and secure login experience. No more passwords or OTPs required! Integrate OTPLESS today and revolutionize your user authentication process.