​
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:
  • Import the following classes:
import com.otplessreactnative.OtplessReactNativeManager
import android.content.Intent
  • Add this code to your onNewIntent() method in your main activity:
  override fun onNewIntent(intent: Intent) {
      super.onNewIntent(intent)
      OtplessReactNativeManager.onNewIntent(intent)
  }
  • Add this code to your onBackPressed() method in your main activity:
override fun onBackPressed() {
    if (OtplessReactNativeManager.onBackPressed()) return
    super.onBackPressed()
}

​
Step 3: Configure Sign up/Sign in

  1. Import the OTPLESS package on your login page.
login_page.tsx
import { OtplessModule } from "otpless-react-native";
  1. Add OTPLESS instance and declare the variable with YOUR_APP_ID
login_page.tsx
const module = new OtplessModule();
const extra = {
  method: "get",
  params: {
    appId: "{{YOUR_APP_ID}}",
  },
};

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

  1. Add the following code to Initiate OTPLESS Login Page
login_page.tsx
module.showFabButton(false);
module.showLoginPage((data) => {
  let message: string = "";
  if (data.data === null || data.data === undefined) {
    message = data.errorMessage;
  } else {
    message = "token: ${data.data.token}";
    // todo here
  }
}, extra);

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

Validate Token

Learn how to securely `validate token` returned by OTPLESS react native SDK to ensure the authenticity of sign-in events from your backend server.

Was this page helpful?

IntroductionHeadless