Integrating OTPLESS One Tap Sign-In with Angular A Seamless User Experience
Introduction
Harness the power of OTPLESS with your Angular applications to streamline user authentication. This SDK is designed to integrate seamlessly with Angular, offering both pre-built components and headless functionality for custom UI implementations.
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/v2/auth.js"
data-appid="YOUR_APP_ID"
></script>Note:- 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: Handle Authentication Callback
Implement a callback function to process authentication responses. Add this script to your page:
constructor() {
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.