Get Started - React Native
Initial Setup
The LoginID React Native SDK enables you to add FIDO-certified authentication in your React Native application without having to redirect the user to any pages outside your application.
For more robust functionality, it is likely that you will need to also leverage a Server SDK. The Server SDK makes requests to LoginID's API easier by leveraging your API Credential. Check out the LoginID Server SDK for a simplified integration.
The LoginID React Native SDK is currently supprted on React Native 0.60.5+. You will need additional setups for iOS and Android described below.
Create Application on the Dashboard
An application must be created on the LoginID Dashboard in order to correctly configure the React Native SDK.
Once logged into the dashboard, navigate to the Applications tab in the sidebar, select “Add Application,” then select Native.
In the resulting form, you must create a name for your application. We generate a Client ID and Base URL for your application, which you will use to configure the SDK.
After entering your application name, you will be prompted to create an API credential. If you have a client-side only application, please skip this step. Otherwise, create an API credential in order to make protected API calls.
An API service token must be included on all requests once an API credential is assigned to an application.
Add SDK to Existing Application
- npm
- yarn
npm install @loginid/react-native-sdk
yarn add @loginid/react-native-sdk
Additional Setup for iOS build
For iOS builds, it is necessary to add NSFaceIDUsageDescription
(Privacy - Face ID Usage Description) key/value to app's info.plist
.
info.plist
can be found in your React native /ios/[App Name] directory
This is a privacy description for accessing FaceID feature on iOS. On devices with FaceID, users will be prompted with a permission dialog based on this description about FaceID usage for the app.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>NSFaceIDUsageDescription</key>
<string>Privacy description regarding to usage of FaceID feature</string>
...
...
</plist>
For Objective-C development, make sure to enable "Embed Swift Standard Libraries" in your build settings to avoid run-time error for Objective-c
Run pod install from your Application's iOS folder
cd /path/to/react/nativeapp/ios
pod install
Create an SDK Instance
Import the SDK:
import RNLoginApi from '@loginid/react-native-sdk';
Once the SDK has been imported, configure the clientId and baseURL values with the values obtained from the dashboard.
// clientId example 032690b3-9bc4-4602-87c1-60c1fae782f2
const clientId = "<your client id>";
// baseURL example https://060ce487-b934-43d0-a925-b66e80c7532f.<base_url>
const baseURL = "<your base url>";
RNLoginApi.configure(clientId,baseURL);