Step 1: Install OTPLESS SDK Dependency

Install the OTPLESS SDK dependency by running the following command in your terminal at the root of your React Native project:

npm i otpless-react-native

Step 2: Platform-specific Integrations

  1. Add intent filter inside your android/app/src/main/AndroidManifest.xml file into your Main activity code block:
<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= "otpless.{{YOUR_APP_ID}}"/>
</intent-filter>

Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.

  1. Change your activity launchMode to singleTop and exported true for your Main Activity:
android:launchMode="singleTop"
android:exported="true"
  1. Add the following override method in android/app/src/main/kotlin/MainActivity.kt to handle callback and initialize OTPLESS:
  • Import the following classes:
import com.otplessreactnative.OtplessReactNativeManager;
import android.content.Intent;

  • Add this code to your onCreate() method in your MainActivity to initialize OTPLESS:
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    OtplessReactNativeManager.INSTANCE.registerOtplessView(this);
    //Your code ...
  }
  • Add this code to your onNewIntent() method in your MainActivity:
@Override
public void onNewIntent(Intent intent) {
	super.onNewIntent(intent);
	OtplessReactNativeManager.INSTANCE.onNewIntent(intent);
}
  • Add this code to your onBackPressed() method in your MainActivity:
@Override
public void onBackPressed() {
	if (OtplessReactNativeManager.INSTANCE.onBackPressed()) return;
	super.onBackPressed();
}

Step 3: Configure Sign up/Sign in

  1. Import the OtplessHeadlessModule on your page..
login_page.tsx
import { OtplessHeadlessModule } from "otpless-react-native";
  1. Create an instance of OtplessHeadlessModule.
login_page.tsx
const headlessModule = new OtplessHeadlessModule();
  1. Use useEffect hook to initialize the OtplessHeadlessModule and set callback.
login_page.tsx
useEffect(() => {
  headlessModule.initHeadless("YOUR_APP_ID");
  headlessModule.setHeadlessCallback(onHeadlessResult);
  return () => {
    headlessModule.clearListener();
  };
}, []);

Replace YOUR_APP_ID with your actual App ID provided in your OTPLESS dashboard.

  1. Add a method to receive callbacks from OtplessHeadlessModule.
login_page.tsx
const onHeadlessResult = (data: any) => {
  let dataStr = JSON.stringify(data);
  console.log("=====onHeadlessResult======");
  console.log(dataStr);
};

Step 4: Initiate Authentication

Initiate the authentication process based on the user’s selected method by using the initiate method of the SDK.

(Optional): Verify OTP

To verify the OTP entered by the user, use the verify method with the necessary parameters.

Object Attributes

AttributeMandatoryDescription
channelYesThe authentication method selected by the user.
phoneConditionalUser’s phone number (required if channel is PHONE).
countryCodeConditionalCountry code of the phone number (required if channel is PHONE).
emailConditionalUser’s email (required if channel is EMAIL).
channelTypeConditionalType of social login initiated (required if channel is OAUTH).

🏁 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 Response Structure

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

{
  "status": "SUCCESS",
  "token": "unique_token_here",
  "userId": "unique_user_id_here",
  "timestamp": "ISO_timestamp_here",
  "identities": [
    {
       "identityType": "EMAIL",
      "identityValue": "user@example.com",
      "channel": "OAUTH",
      "methods": [
        "GOOGLE"
      ],
      "name": "User Name",
      "verified": true,
      "verifiedAt": "ISO_timestamp_here",
      "isCompanyEmail": "true"
    }
  ],
  "idToken": "jwt_token",
  "network": {
    "ip": "127.0.0.1",
    "timezone": "Asia/Kolkata",
    "ipLocation": {}
  },
  "deviceInfo": {},
  "sessionInfo": {},
  "firebaseInfo": {},
}

You can check out a complete sample response here.

Next Steps