ranaaditya/otpless-headless-react

React-JS Demo: Otpless Headless SDK

Steps to add OTPless Headless 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 contents of initOtpless.js file in src/utils/initOtpless.js file in your project and paste the APP ID here.

   initOtpless.js file exports the following functions

   initOTPless, to initialize the OTPless SDK,

   Authenticate, to authenticate the user.

   verifyOTP, to verify the OTP.

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(handleUserData), []);
   
   const handleUserData = (otplessUser) => {
       alert(JSON.stringify(otplessUser));
   };

   view source

4. Create your UI

   Design UI to collect user input and trigger authentication method of your choice.

   const [phone, setPhone] = useState(null)
   const [otp, setOtp] = useState(null)
   return <>
       <div id="mobile-section">
           <input id='mobile-input' placeholder='Enter mobile number' onChange={(e) => setPhone(e.target.value)} />
           <button onClick={() => Authenticate({ channel: 'PHONE', phone })}>Request OTP</button>
       </div>
   
       <div id="otp-section">
           <input id='otp-input' placeholder='Enter OTP' onChange={(e) => setOtp(e.target.value)} minLength={6} maxLength={6} />
           <button onClick={() => verifyOTP({ channel: activeSection, otp, phone })}>Verify OTP</button>
       </div>
   
       <button onClick={() => Authenticate({channel: 'OAUTH', channelType:'WHATSAPP' })}>Authenticate with WhatsApp</button>
       <button onClick={() => Authenticate({channel: 'OAUTH', channelType:'GOOGLE'})}>Authenticate with Gmail</button>
   </>

   view source (NOTE: This integration has a different ui)

This demo implementation adds extra modularity, scalability and reusability to the OTPless Headless sdk

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

Note: Enable your choosen Authentication Method from OTPless dashboard before using it.

Thank You

Visit OTPless