Headless

​

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

• Android
• iOS

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

android:launchMode="singleTop"
android:exported="true"

import com.otplessreactnative.OtplessReactNativeManager;
import android.content.Intent;

@Override
public void onNewIntent(Intent intent) {
	super.onNewIntent(intent);
	OtplessReactNativeManager.INSTANCE.onNewIntent(intent);
}

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

import { OtplessHeadlessModule } from "otpless-react-native";

2. Create an instance of OtplessHeadlessModule.

const headlessModule = new OtplessHeadlessModule();

3. Use useEffect hook to initialize the OtplessHeadlessModule and set callback.

useEffect(() => {
  headlessModule.initHeadless("YOUR_APP_ID");
  headlessModule.setHeadlessCallback(onHeadlessResult);
  return () => {
    headlessModule.clearListener();
  };
}, []);

4. Add a method to receive callbacks from OtplessHeadlessModule.

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.

• Phone Auth
• Email Auth
• OAUTH

const headlessRequest = {phone: "YOUR_PHONE_NUMBER", countryCode: "YOUR_COUNTRY_CODE"};
headlessModule.startHeadless(headlessRequest);

const headlessRequest = {phone: "YOUR_PHONE_NUMBER", countryCode: "YOUR_COUNTRY_CODE", otp: "otp"};
headlessModule.startHeadless(headlessRequest);

Object Attributes

• Request
• Response
• Error Codes

🏁 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"
    },
    ...
  ],
  ...
}

​

Next Steps