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"
src="https://otpless.com/v3/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:
<-- 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:
mounted() {
window.otpless = (otplessUser) => {
alert(JSON.stringify(otplessUser));
};
}
🏁 Checkpoint
To ensure a smooth integration process:
- Deploy your app/website with the included OTPLESS SDK.
- Conduct tests to verify the sign-in flow functions correctly.
- 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
Was this page helpful?