React Native
Pre-Built UI
Leverage our Pre-Built UI for rapid integration and customization of authentication flows in your application. This setup allows you to adjust appearance and functionality through the OTPLESS dashboard with minimal coding.
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
- 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.
- Change your activity launchMode to singleTop and exported true for your Main Activity:
android:launchMode="singleTop"
android:exported="true"
- Add the following override method in
android/app/src/main/kotlin/MainActivity.kt
to handle callback:
- Import the following classes:
import com.otpless.otplessflutter.OtplessFlutterPlugin;
import android.content.Intent;
- Add this code to your
onNewIntent()
method in your main activity:
override fun onNewIntent(intent: Intent) {
super.onNewIntent(intent)
val plugin = flutterEngine?.plugins?.get(OtplessFlutterPlugin::class.java)
if (plugin is OtplessFlutterPlugin) {
plugin.onNewIntent(intent)
}
}
- Add this code to your
onBackPressed()
method in your main activity:
override fun onBackPressed() {
val plugin = flutterEngine?.plugins?.get(OtplessFlutterPlugin::class.java)
if (plugin is OtplessFlutterPlugin) {
if (plugin.onBackPressed()) return
}
// handle other cases
super.onBackPressed()
}
Step 3: Configure Sign up/Sign in
- Import the OTPLESS
package
on your login page.
login_page.tsx
import { OtplessModule } from "otpless-react-native";
- 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.
- 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:
- 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 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
Was this page helpful?