Say Goodbye to OTPs using Login With WhatsApp

Login With WhatsApp is a new feature that allows users to log in to a website or an application using their WhatsApp account instead of OTP.

OTPless's "Login with WhatsApp" solution is unique as it does not require users to enter their phone number or one-time password (OTP) to log in/sign up.

Benefits of WhatsApp Login -

Protect your users/Security: Stay away from OTPs, prevent account takeovers with WhatsApp

Improve User Experience: Seamless phone verification process for a delightful experience

Use Cases where you can use Login With WhatsApp -

• Sign-up: When a user is verifying their WhatsApp number with your website or app for the first time.

• Sign-in: When users are coming back to access their existing account with your website or app.

Operational Flow of OTPless -

1. The user clicks on the "WhatsApp Login" button on the login page.

2. Sends a pre-filled WhatsApp message and the user receives a verification link in reply to that message.

3. The verification link redirects the user back to your website or app.

Let's now integrate OTPless into your React Native app 🚀

Step 1: Add this to your app's AndroidManifest.xml.

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:host="otpless"
    android:scheme="exampleotpless" />
</intent-filter>

android:scheme="exampleotpless" will be your OTPless project name followed by "otpless".

Step 2: Add the "Log In With WhatsApp" button to your app's login page.

<TouchableHighlight
  style={{
    paddingVertical: RFValue(10),
    backgroundColor: '#000',
    borderRadius: RFValue(8),
    borderWidth: RFValue(2),
    borderColor: 'white',
    marginHorizontal: RFValue(16),
  }}
  onPress={handlePress}
  underlayColor="grey">
  <View
    style={{
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Icon
      type={Icons.FontAwesome}
      name="whatsapp"
      size={26}
      style={{margin: RFValue(4)}}
    />
    <Text
      style={{
        fontSize: RFValue(15),
        marginStart: RFValue(4),
        textTransform: 'none',
      }}>
      Log in with WhatsApp
    </Text>
  </View>
</TouchableHighlight>

Step 3: Redirect the user to WhatsApp to get the redirection link.

To get the redirection URL, first, create your OTPless project by visiting here. You will get the client id and client secret id in your mail once you successfully created your project.

Below is the JavaScript code snippet to redirect users to WhatsApp to get the verification link. Use this code in your WhatsApp login button's onClick.

const handlePress = useCallback(async () => {
  console.log('handle press called ', BASE_URL);
  // Checking if the link is supported for links with custom URL scheme.
  const supported = await Linking.canOpenURL(BASE_URL);

  if (supported) {
    // Opening the link with some app, if the URL scheme is "http" the web link should be opened
    // by some browser in the mobile
    await Linking.openURL(BASE_URL);
  } else {
    Alert.alert(`Don't know how to open this URL: ${BASE_URL}`);
  }
}, [BASE_URL]);

Here "BASE_URL" is your own redirect URI. For example -

"example.authlink.me?redirectUri=exampleotpl.."

After each successful WhatsApp login, the user is redirected back to your website or app with WhatsApp id. Now you can define your own sign-in/sign-up flow.

Step 4: Once the user is successfully verified by WhatsApp authentication, the next step is to get "waId" in response.

Copy/paste this code into your App.js

useEffect(() => {
  const linkingEvent = Linking.addEventListener('url', handleDeepLink);
  Linking.getInitialURL().then(url => {
    if (url) {
      handleDeepLink({url});
    }
  });
  return () => {
    linkingEvent.remove();
  };
}, [handleDeepLink]);

const handleDeepLink = async url => {
  console.log(url);
};

Step 5: Get user details

Now you have waId of the verified user. Use this waId to get user details such as WhatsApp number and name.

You have to do 1 API integration for this. Hit the endpoint to get the user details in the response.

Endpoint: "https://example.authlink.me"

import {API} from './axios';

async function getWhatsAppLoggedInUserDetails(waId) {
    const body = {
        waId: waId,
    }

    const res = await API.post('https://example.authlink.me', body, { 
        headers: {'clientId': 'test1234', 
        'clientSecret': 'test1234', 
        'Content-Type': 'application/json'}
      },
    );
  return res.data;
}

export {
    getWhatsAppLoggedInUserDetails,
};

The response you will after hitting the endpoint -

{
  "data": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "userMobile": "917948221313",
    "userName": "User"
  },
  "ok": true,
  "status": "SUCCESS",
  "statusCode": 200,
  "success": true,
  "user": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "waId": "test1234",
    "waName": "User",
    "waNumber": "917948221313"
  }
}

You can now handle your login/signup flow based on this response.

That's it. Now your app users don't have to remember login credentials or create a new account, they can simply use their existing WhatsApp account to log in.

Adding the “Login with WhatsApp” in your app/website is quick and simple that it can be done within 5 minutes :)

Try “Login with WhatsApp” in your next project and see the benefits for yourself.