Pre-Built UI

Leverage our Pre-Built UI for rapid integration and customization of authentication flows in your application. This setup allows you to adjust appearance and functionality through the OTPLESS dashboard with minimal coding.

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:


<!-- OTPLESS SDK -->
<script
  id="otpless-sdk"
  type="text/javascript"
  data-appid="YOUR_APP_ID"
  src="https://otpless.com/v2/auth.js"
></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:


<-- OTPLESS Login UI -->

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: Handle Authentication Callback

Implement a callback function to process authentication responses. Add this script to your page:


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": {},
}

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.

Categorized in:

User Authentication, Vue.js,

Tagged in:

, , ,