Pre-Built UI

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

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_LOWERCASE"/>
</intent-filter>

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

Add Network Security Config inside your android/app/src/main/AndroidManifest.xml file into your <application> code block (Only required if you are using the SNA feature):

android:networkSecurityConfig="@xml/otpless_network_security_config"

Change your activity launchMode to singleTop and exported true for your Main Activity:

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

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_LOWERCASE"/>
</intent-filter>

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

Add Network Security Config inside your android/app/src/main/AndroidManifest.xml file into your <application> code block (Only required if you are using the SNA feature):

android:networkSecurityConfig="@xml/otpless_network_security_config"

Change your activity launchMode to singleTop and exported true for your Main Activity:

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

Add the following block to your ios/info.plist file:

info.plist
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>otpless.YOUR_APP_ID_LOWERCASE</string>
        </array>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>otpless</string>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>whatsapp</string>
    <string>otpless</string>
    <string>gootpless</string>
    <string>com.otpless.ios.app.otpless</string>
    <string>googlegmail</string>
</array>

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

Add the following block to your ios/info.plist file (Only required if you are using the SNA feature):

info.plist
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSExceptionDomains</key>
	<dict>
		<key>80.in.safr.sekuramobile.com</key>
		<dict>
			<key>NSIncludesSubdomains</key>
			<true/>
			<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
			<true/>
			<key>NSTemporaryExceptionMinimumTLSVersion</key>
			<string>TLSv1.1</string>
		</dict>
		<key>partnerapi.jio.com</key>
		<dict>
			<key>NSIncludesSubdomains</key>
			<true/>
			<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
			<true/>
			<key>NSTemporaryExceptionMinimumTLSVersion</key>
			<string>TLSv1.1</string>
		</dict>
	</dict>
</dict>

Go to build settings. Search for defines module, this option will appear in packaging change it to yes.
Create connector.swift file and it will ask to create bridging header, Click yes. Copy-paste the following code into your connector.swift file.

connector.swift
import OtplessSwiftLP
import Foundation

class Connector: NSObject {
  @objc public static func isOtplessDeeplink(_ url: URL) -> Bool {
    return OtplessSwiftLP.shared.isOtplessDeeplink(url: url)
  }
  
  @objc public static func processDeepLink(_ url: URL) {
    OtplessSwiftLP.shared.processOtplessDeeplink(url: url)
  }
}

Import the OTPLESS SDK in your respective ios/AppDelegate.mm file to handle redirection.

AppDelegate.h
#import "{{your_project_name}}-Swift.h"

- (BOOL) application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
	if([Connector isOtplessDeeplink:url]){
	[Connector loadUrl:url];
	return true;
}
	[super application:app openURL:url options:options];
	return true;
}

Import the OTPLESS package on your login page.

login_page.tsx
import { OtplessReactNativeModule } from 'otpless-react-native-lp';

Add OTPLESS instance and initialize the SDK:

login_page.tsx
const otplessModule = new OtplessReactNativeModule();

useEffect(() => {
    initializeModule();
    return () => {
        otplessModule.clearListener();
        otplessModule.stop(); // You may stop the module if needed.
    };
}, []);

const initializeModule = () => {
    otplessModule.initialize("APPID");
    otplessModule.setResponseCallback(onResponse);
};

Add the following code to Initiate OTPLESS Login Page

login_page.tsx
otplessModule.start();

Add the following code to handle response callback:

login_page.tsx
const onResponse = (data: any) => {
    let token = data.token
    if (token !== null) {
        // Send the token to your backend and verify the token to get user details
        console.log("Token: ", token);
    } else {
        // Handle error
        console.log("Error: ", data.errorMessage);
    }
};

When user successfully logs in, stop Otpless:

login_page.tsx
otplessModule.stop()

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.

Web SDKs

Native/Mobile SDKs

References

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Validate Token

Web SDKs

Native/Mobile SDKs

References

​Step 1: Install OTPLESS SDK Dependency

​Step 2: Platform-specific Integrations

​Step 3: Configure Sign up/Sign in

Validate Token

Step 1: Install OTPLESS SDK Dependency

Step 2: Platform-specific Integrations

Step 3: Configure Sign up/Sign in