React-JS Demo: Otpless Login Page

Steps to add OTPless SDK to your ReactJS Website

1. Create an App in OTPless dashboard and copy the APP ID

2. Add OTPLESS Script as a function

   Add the following code to your utils/initOtpless.js in root directory.

   export const initOTPless = (callback) => {
       const otplessInit = Reflect.get(window, "otplessInit");
   
       const loadScript = () => {
           const isScriptLoaded = document.getElementById("otpless-sdk");
           if(isScriptLoaded) return;
   
           const script = document.createElement('script')
           script.id = 'otpless-sdk'
           script.type = 'text/javascript'
           script.src = 'https://otpless.com/v2/auth.js'
           script.setAttribute("data-appid", "PASTE_YOUR_APPID_HERE")
           document.body.appendChild(script);
       };
   
       otplessInit ? otplessInit() : loadScript();
   
       Reflect.set(window, "otpless", callback);
   };

   view source

3. Load the script in Login/Signup component and add callback function

   Add following code in Login/Signup component.

   retrive data using otplessUser object

   useEffect(() => initOTPless(callback), []);
   
   const callback = (otplessUser) => {
       alert(JSON.stringify(otplessUser));
   };

   view source

4. Add Otpless-login-page div

   Add the following div in Login/Signup component.

   <div id="otpless-login-page"></div>

This demo implementation adds extra modularity, scalability and reusability to the otpless-auth sdk

Integration Options

• OTPless-Page
• OTPless-Page-OnClick
• OTPless-Floater
• OTPless-Floater-OnClick

Usage

Prerequisites: NodeJS

• Install Packages

  npm install

• Run the demo

  npm run dev

• Open localhost:5173 in your browser

• Switch branches to check out available options to integrate OTPless in your project

Thank You

Visit OTPless