Skip to main content

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.

note

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 install @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.

note

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

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);