React Native SDK

This page covers the integration of the OTPless Headless SDK in React Native. The SDK accepts the requestId generated by the Create API, performs the authentication, and reports progress through callbacks. Your backend confirms the final result via the Status Check API.

Requirements

Requirement	Version
React Native	0.64+
Android Minimum SDK	21
iOS	13.0+

Step 1: Add SDK dependency

Install the OTPLESS Headless SDK at the root of your React Native project:

npm i otpless-headless-rn

For iOS, install the pods:

cd ios && pod install

Check the latest version of the SDK on npm.

Make sure your authentication channel is enabled on the OTPLESS dashboard.

Step 2: Initialize the SDK

Create a OtplessHeadlessModule instance, initialize it with your App ID, and register the response callback:

import { OtplessHeadlessModule } from 'otpless-headless-rn';

const headlessModule = new OtplessHeadlessModule();

useEffect(() => {
    headlessModule.initialize("YOUR_APP_ID");
    headlessModule.setResponseCallback(onHeadlessResponse);
    return () => {
        headlessModule.clearListener();
        headlessModule.cleanup();
    };
}, []);

Replace YOUR_APP_ID with your actual App ID from the OTPLESS dashboard.

Step 3: Start authentication with the requestId

Pass the requestId returned by the Create API to start():

const headlessRequest = {
    requestId: "REQUEST_ID_FROM_API"
};

headlessModule.start(headlessRequest);

Start polling the Status Check API from your backend immediately after calling start(). The SDK callback and the server status run in parallel.

Step 4: Handle callbacks

const onHeadlessResponse = (response: any) => {
    headlessModule.commitResponse(response);

    switch (response.responseType) {
        case "SDK_READY": {
            // SDK initialized successfully — enable your continue button
            // or proceed with user authentication.
            break;
        }
        case "FAILED": {
            // SDK initialization failed
            if (response.statusCode === 5003) {
                // Please try to initialize the SDK again.
            }
            break;
        }
        case "INITIATE": {
            // Authentication has been initiated
            if (response.statusCode !== 200) {
                handleInitiateError(response);
            } else {
                // Authentication is in progress — show a loading state.
            }
            break;
        }
        case "VERIFY": {
            // Verification failed for the attempted authentication.
            if (response.statusCode === 9106) {
                // Verification timed out — treated as AUTH_TERMINATED.
            }
            break;
        }
        case "ONETAP": {
            // Final success response — returns token / idToken
            break;
        }
        case "AUTH_TERMINATED": {
            // Auth could not complete. Emitted when pre-checks fail,
            // or when authentication was attempted and then failed.
            // Treat as a terminal failure and rely on the Status Check API
            // for the exact error.
            break;
        }
    }
};

Callback reference

The SDK works in two steps — initialization and start() — and each step has its own set of callbacks.

Step 1: Initialization callbacks

Emitted when you initialize the SDK (Step 2).

Callback	Meaning
`SDK_READY`	SDK initialization completed.
`FAILED`	SDK failed to initialize (e.g. `statusCode 5003`).

Step 2: Start callbacks

Emitted after you invoke start() (Step 3).

Callback	State	Meaning
`INITIATE`	Non-terminal	Authentication is in progress after pre-checks pass.
`VERIFY`	Non-terminal	Verification failed for the attempted authentication (e.g. `statusCode 9106` on timeout).
`ONETAP`	Success — terminal	Authentication completed successfully. Returns `token` / `idToken`.
`AUTH_TERMINATED`	Failed — terminal	Emitted in two cases: (1) pre-checks failed → terminated directly; (2) authentication was initiated and then failed.

AUTH_TERMINATED is a terminal failure. Always treat the Status Check API result as authoritative.

For the errorCode / statusCode values surfaced in SDK callbacks, see SDK Error Codes.

Next step

Status Check API

Confirm the authoritative auth status from your server.

​Requirements

​Step 1: Add SDK dependency

​Step 2: Initialize the SDK

​Step 3: Start authentication with the requestId

​Step 4: Handle callbacks

​Callback reference

​Step 1: Initialization callbacks

​Step 2: Start callbacks

​Next step

Status Check API

Requirements

Step 1: Add SDK dependency

Step 2: Initialize the SDK

Step 3: Start authentication with the requestId

Step 4: Handle callbacks

Callback reference

Step 1: Initialization callbacks

Step 2: Start callbacks

Next step