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 supported 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.

Arguments
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.

Returns

Example

Errors

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.

Arguments
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.

Returns

Example

Errors

authenticateWithFido2​

Authenticate a previously registered user through FIDO2.

Arguments
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.

Returns

Example

Errors

authenticateWithPassword​

Authenticate a previously registered user using username and password.

Arguments
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.

Returns

Example

Errors

confirmTransaction​

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

Arguments
    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.

Returns

Example

Errors

addFido2Credential​

Adds a FIDO2 credential type to the account. Can be used to recover an account or add another device to the same username.

Arguments
    static async addFido2Credential(username:string, code: string, options:AddCredentialOptions | null) : Promise<AddCredentialResponse>

Where:

export interface AddCredentialOptions {
    authorization_token: string,
}
ParameterTypeRequiredDetails
usernamestringtrueUsername of the customer adding a FIDO2 credential.
codestringtrueThe short OTP code required to initiate adding the FIDO2 credential.
optionsAddCredentialOptionsoptionalAPI Service token (JWT) signed by your Private Key, as per the API Credential added to the integration.

Returns

Example

Errors

isLoggedIn​

Check if a given user is currently logged in.

Arguments

Returns

Example

logout​

Arguments

Example

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.