Headless
Utilize our Headless SDK for ultimate flexibility. This guide provides detailed instructions on integrating custom UI elements with OTPLESS’s backend authentication functions.
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:
Step 2: Platform-specific Integrations
- Add intent filter inside your
android/app/src/main/AndroidManifest.xml
file into your Main activity code block:
Replace YOUR_APP_ID
with your actual App
ID provided in
your OTPLESS dashboard.
- Change your activity launchMode to singleTop and exported true for your Main Activity:
- Add the following override method in
android/app/src/main/kotlin/MainActivity.kt
to handle callback and initialize OTPLESS:
- Import the following classes:
- Add this code to your
onCreate()
method in your MainActivity to initialize OTPLESS:
- Add this code to your
onNewIntent()
method in your MainActivity:
- Add this code to your
onBackPressed()
method in your MainActivity:
Step 3: Configure Sign up/Sign in
- Import the
OtplessHeadlessModule
on your page..
- Create an instance of
OtplessHeadlessModule
.
- Use useEffect hook to initialize the
OtplessHeadlessModule
and set callback.
Replace YOUR_APP_ID
with your actual App
ID provided in
your OTPLESS dashboard.
- Add a method to receive callbacks from
OtplessHeadlessModule
.
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
Attribute | Mandatory | Description |
---|---|---|
channel | Yes | The authentication method selected by the user. |
phone | Conditional | User’s phone number (required if channel is PHONE). |
countryCode | Conditional | Country code of the phone number (required if channel is PHONE). |
email | Conditional | User’s email (required if channel is EMAIL). |
channelType | Conditional | Type of social login initiated (required if channel is OAUTH). |
🏁 Checkpoint
To ensure a smooth integration process:
- Deploy your app/website with the included OTPLESS SDK.
- Conduct tests to verify the sign-in flow functions correctly.
- 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:
You can check out a complete sample response here.
Next Steps
Was this page helpful?