Integrating OTPLESS WhatsApp Login in React JS A Step-by-Step Guide

In recent years, the popularity of WhatsApp has grown tremendously. It is now one of the most widely used messaging apps in the world, with over 2 billion monthly active users. As a result, many businesses and websites are looking for ways to integrate WhatsApp into their services, including the login process. One way to do this is through OTPless. This method allows users to log in to your website or app using their WhatsApp account credentials without the need for a one-time password (OTP).

Harness the power of OTPLESS with your React applications to streamline user authentication. This SDK is designed to integrate seamlessly with React, 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

<-- 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>

Note:- 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:

useEffect(() => {
  window.otpless = (otplessUser) => {
    alert(JSON.stringify(otplessUser));
  };
}, []);

🏁 Checkpoint

To ensure a smooth integration process:

1. Deploy your app/website with the included OTPLESS SDK.
2. Conduct tests to verify the sign-in flow functions correctly.
3. 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 JSON

The structure of the user information returned upon successful sign-in is as follows:

{
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
      "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "GMAIL",
      "methods": ["OAUTH"],
      "name": "User Name",
      "verified": "true",
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    },
    ...
  ],
  ...
}

Conclusion

Integrating OTPless into your React JS application is a straightforward process that can be accomplished by following a few simple steps. By using OTPless, you can provide your users with a convenient and secure way to log in to your website or app using their WhatsApp account credentials.

Revolutionize user authentication with OTPless’s innovative solution. By using the user’s WhatsApp account to verify their phone number, OTPless eliminates the need for OTPs, which are vulnerable to interception and brute-force attacks.

OTPless provides a seamless and intuitive login experience for users, leveraging the convenience and familiarity of WhatsApp. Many clients have seen an increase in login conversion by 25%* after switching to OTPless.

And the best part? Integrating OTPless into your login page is quick and easy – it can be done within 30 minutes with a simple copy-paste process. Try OTPless now and see the benefits for yourself.