Headless
Utilize our Headless SDK for ultimate flexibility. Craft your own tailored UI and seamlessly integrate OTPLESS authentication capabilities using our SDK.
Step 1: Add SDK Dependency
Begin by adding the OTPLESS SDK to your project. Insert the following script tag in the <head>
section of your HTML document.
<script
id="otpless-sdk"
src="https://otpless.com/v3/headless.js"
data-appid="YOUR_APP_ID"
></script>
Replace YOUR_APP_ID
with your actual App
ID provided in
your OTPLESS dashboard.
Step 2: Initialize SDK and Handle Callback
With the SDK embedded, initialize it and define a callback function to handle authentication responses as shown below.
<script>
const callback = (userinfo) => {
const emailMap = otplessUser.identities.find(
(item) => item.identityType === "EMAIL"
);
const mobileMap = otplessUser.identities.find(
(item) => item.identityType === "MOBILE"
)?.identityValue;
const token = otplessUser.token;
const email = emailMap?.identityValue;
const mobile = mobileMap?.identityValue;
const name = emailMap?.name || mobileMap?.name;
console.log(userinfo);
// Implement your custom logic here.
};
// Initialize OTPLESS SDK with the defined callback.
const OTPlessSignin = new OTPless(callback);
</script>
Step 3: Create Your UI
Design a user interface for authentication. An example HTML structure could look like this:
<div>
<input id="mobile-input" placeholder="Enter mobile number" />
<button onclick="phoneAuth()">Request OTP</button>
</div>
<div id="otp-section" style="display: none;">
<input id="otp-input" placeholder="Enter OTP" />
<button onclick="verifyOTP()">Verify OTP</button>
</div>
<button onclick="oauth('WHATSAPP')">Continue with WhatsApp</button>
<button onclick="oauth('GMAIL')">Continue with Gmail</button>
<!-- Add more buttons for different OAuth providers as needed -->
Step 4: Initiate Authentication
Initiate the authentication process based on the user’s selected method by using the initiate
method of the SDK.
Object Attributes
Attribute | Mandatory | Description |
---|---|---|
channel | Yes | The authentication method selected by the user. |
phone | Conditional | User’s phone number (required if channel is PHONE). |
countryCode | Conditional | Country code of the phone number (required if channel is PHONE). |
email | Conditional | User’s email (required if channel is EMAIL). |
channelType | Conditional | Type of social login initiated (required if channel is OAUTH). |
Step 5: Verify OTP
To verify the OTP entered by the user, use the verify
method with the necessary parameters.
🏁 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?