Skip to main content

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

API Reference

Create an SDK Instance

import  RNLoginApi  from 'react-native-fido-login-api';

export default class App extends React.Component{

async componentDidMount(){
// 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);
//...
//...
}
}

registerWithFido2

Sign up a user for FIDO authentication.

static async registerWithFido2(username:string, options: RegistrationOptions | null) : Promise<RegisterResponse> 

Where:

export interface RegistrationOptions {
authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer to be registered.
optionsRegistrationOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

registerWithPassword

Creates a user account with a password (not recommended). If leveraging this method, users should be migrating to use a FIDO authenticator, then have their password revoked.

static async registerWithPassword(username:string, password: string, confirmPassword:string, options: RegistrationOptions | null) : Promise<RegisterResponse> 

Where:

export interface RegistrationOptions {
authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer to be registered.
passwordstringtruePassword of the customer to be registered.
passwordConfirmationstringtrueIt is best practice to have the customer enter their password twice before creating their profile to prevent typos. If desired, you could only require the end user to enter their password once and pass that password in both fields.
optionsRegistrationOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

authenticateWithFido2

Authenticate a previously registered user through FIDO2.

static async authenticateWithFido2(username:string, options: AuthenticationOptions | null) : Promise<AuthenticateResponse> 

Where:

export interface AuthenticationOptions {
authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer to be registered.
optionsAuthenticationOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

authenticateWithPassword

Authenticate a previously registered user using username and password.

static async authenticateWithPassword(username:string, password:string, options: AuthenticationOptions | null) : Promise<AuthenticateResponse> 

Where:

export interface AuthenticationOptions {
authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer to be authenticated.
passwordstringtruePassword of the customer to be authenticated.
optionsAuthenticationOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

confirmTransaction

Confirm the transaction of a text-based payload using registered Fido2 account.

    static async transactionConfirmation(username:string, payload: TransactionPayload, options:TransactionOptions | null) : Promise<AuthenticateResponse> 

Where:

export interface TransactionPayload {
nonce: string,
data: string,
}
export interface TransactionOptions {
authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer to be authenticated.
payloadTransactionPayloadtrueRequire a client side generated nonce value and a text message to display back to user for confirmation.
optionsAuthenticationOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

isLoggedIn

Check if a given user is currently logged in.

logout

Deprecated Methods

The SDK previously had the following methods:

  • .register()
  • .login()

The methods have been deprecated, as the type of authenticator is now specified in the register and authenticate methods.